HTML

学习过程记录，仅供参考

参考文档：HTML 教程 (w3school.com.cn)

概念

HTML的全称为超文本标记语言（HyperText Markup Language），是一种标记语言（markup tag）。

它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

编辑器

Adobe Dreamweaver 、Microsoft Visual Studio 、CoffeeCup HTML Editor、WebStorm

头部

< head > 元素

元素，<base>定义，它是所有头部元素的容器。

<base>, <link>, <meta>, <script>, <style>, 以及 <title>都可用在<head>元素。

其中，标题<title>元素为<head>元素必需。

< base > 元素

元素，<base>标签定义。

为页面上的所有链接规定默认地址或默认目标（target）。

<head>
  <base href = "https://www.openharmony.cn/" />
  <base target = "_blank" />
</head>

< link > 元素

元素，<link>标签定义文档与外部资源之间的关系。

常用于连接样式表。

<head>
  <link rel = "stylesheet"
        type = "text/css"
        href = "mystyle.css" />
</head>

rel：规定当前文档与被链接文档之间的关系。

stylesheet：文档的外部样式表。

type：规定被链接文档的 MIME 类型。

< style >样式元素

元素，<style>定义，用于为 HTML 文档定义样式信息。

< meta > 元素

元素，<meta>定义，提供关于 HTML 文档的元数据(metadata)。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

可以通过<meta>设置UTF-8字符集。

<meta name = "description"
      content = "Free Web tutorials on HTML, CSS, XML" />

content：定义与 http-equiv 或 name 属性相关的元信息。

name：把 content 属性关联到一个名称。

<meta charset = "UTF-8">

常用标签元素

标题

元素，<h1> 到 <h6> 标签定义。

<h1>1 am DDDDrama</h1>

段落

元素，<p>标签定义

<p>1 am DDDDrama</p>

链接

元素，<a>标签定义

<a href = "http://www.openharmony.cn" target = "_blank" rel = "noreferrer noopener">OpenHarmony</a>

href是Hypertext Reference的缩写。意思是指定超链接目标的URL。href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。

target = "_blank" ：浏览器总在一个新打开、未命名的窗口中载入目标文档。

rel="noreferrer noopener" ：通过从HTTP标头中删除引荐信息来防止将引荐来源信息和来源页面的window对象传递到目标网站，以增强安全性。

图像

元素，<img>标签定义

<img src = "Drama's logo.jpg"
     width = "100"
     height = "100"
     alt = "Drama's logo"/>

src：人们每一副图像都提取出很少的信息用于存储。人们把它叫做稀疏编码，即Sparse Coding.

在HTML语言中，标签<img>的src属性用来指定图片位置，src即源（source）的简写。

alt 属性用来为图像定义一串预备的可替换的文本。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。

width和height以像素为单位。

主体

元素，<body>标签定义

<body>
  <p>1 am DDDDrama</p>
</body>

文档

元素，<html>标签定义整个文档

<html>

<body>
<p>1 am DDDDrama</p>
<body>

</html>

元素

是从开始标签（start tag，又称开放标签）到结束标签（end tag，又称结束标签）的所有代码。

HTML 文档是由 HTML 元素定义的。

语法

“开始标签元素内容结束标签” 或 “开始标签”（空元素）

没有结束标签可能会正常运行也可能不会

标签对大小写不敏感，但推荐小写

空元素

没有内容的元素，开始标签即关闭标签

元素嵌套

绝大数元素可以包含其他元素。

而 HTML 文档由嵌套的 HTML 元素构成。

<html>

<head>
  <meta charset="UTF-8">
  <title>Hello, DDDDrama!Title</title>
</head>

<body>
<h1>Hello, DDDDrama!</h1>
<p>DDDDrama</p>
</body>

</html>

属性

属性为元素提供附加信息。

属性总是在元素的开始标签中规定。

属性对大小写不敏感，但推荐小写。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

name='1 am "Drama"'

详见HTML参考手册

标题(heading)

元素，<h1> – <h6> 等标签进行定义。

浏览器会自动地在标题的前后添加空行。

水平线

元素

<hr />

注释

元素

<!--这是一条注释-->

段落

元素，<p> 标签定义。

浏览器会自动地在段落的前后添加空行。

折行

元素，<br />标签定义。

<p>1!<br />
   5!<br />
   哥们在这给你说唱<br />
   L T C 嗯<br />
   理塘丁真
<p>

依然推荐<br />而不是<br>。

所有连续的空格或空行都会被算作一个空格。

样式属性

通用属性，用于改变元素样式。

应尽量避免使用被废弃标签和属性，并用其他标签和属性替代

背景颜色

属性，background-color

<div style = "background-color: black">
  <p style = "background-color:white">DDDDrama</p>
</div>

字体、颜色和尺寸

属性，font-family、color 、font-size。

<p style = "font-family:HarmonyOS Sans SC;
            color:#a0b4b2;
            font-size:20px">
    山河同心，聚力新生
</p>

px 为像素单位。

文本对齐

属性，text-align

left	默认值，左对齐
center	居中对齐
right	右对齐
justify	两端对齐
inherit	规定应该从父元素继承 text-align 属性的值。

<p style = "text-align:center">
    HUAWEI Mate 60 RS | ULTIMATE DESIGN
</p>

文本格式化

格式化文本（formattedtext，styledtext，richtext），是与纯文本（plaintext）相对，具有风格、排版等信息，如颜色、式样（黑体、斜体等）、字体尺寸、特性（如超链接）等。

标签	描述
`<b>`	粗体
`<big>`	大号
`<em>`	着重
`<i>`	斜体
`<small>`	小号
`<strong>`	加重语气
`<sub>`	下标字
`<sup>`	上标字
`<ins>`	插入字
`<del>`	删除字

部分标签在高版本已被废弃，注意使用。

“计算机输出”标签

标签	描述
`<code>`	定义计算机代码。
`<kbd>`	定义键盘码。
`<samp>`	定义计算机代码样本。
`<tt>`	定义打字机代码。
`<var>`	定义变量。
`<pre>`	定义预格式文本。

引用、引用和术语定义

标签	描述
`<abbr>`	定义缩写。
`<acronym>`	定义首字母缩写。
`<address>`	定义地址。
`<bdo>`	定义文字方向。
`<blockquote>`	定义长的引用。
`<q>`	定义短的引用语。
`<cite>`	定义引用、引证。
`<dfn>`	定义一个定义项目。

引用

短引用

元素，<q>标签定义。

<p>宇宙万法的那个源头叫什么，叫<q>如如</q>，<br/>
   所以这个词叫<q>如来</q>
</p>

长引用

元素，<blockquote>定义。

浏览器通常会对长引用元素进行缩进处理。

<blockquote cite="https://www.bilibili.com/video/BV1yu41187dk/">
    我经常说如来这个词有秘密，<br />
    如，如来了吗？如来嘛，<br />
    它真来了吗？如来。<br />
</blockquote>

cite 属性在普通的 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

缩略词

元素，<abbr>定义，缩写或首字母缩略语。

title 属性规定关于元素的额外信息。

这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

定义

元素，<dfn>定义，项目或缩写的定义。

<p><dfn title="HUAWEI Advanced Driving System">HUAWEI ADS</dfn>是华为高阶智能驾驶系统</p>

<!--如果设置了 <dfn> 元素的 title 属性，则<dfn>定义项目-->

<p><dfn><abbr title="HUAWEI Advanced Driving System">HUAWEI ADS</abbr></dfn>是华为高阶智能驾驶系统</p>

<!-- 如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目-->

<p><dfn>HUAWEI ADS</dfn>是华为高阶智能驾驶系统</p>

<!--否则，<dfn> 文本内容即是项目，并且父元素包含定义。-->

联系信息（作者/拥有者）

元素，<address>定义。

浏览器通常会以斜体显示。

<address>
    Written by DDDDrama.<br />
    Email:<br />
    DDDDrama@outlook.com<br />
    CHN
</address>

著作标题

元素，<cite>定义。

浏览器通常会以斜体显示。

<p><cite>《流浪地球制作手记》</cite>朔方 等 编著</p>

双向重写

元素，<bdo>定义，指定文本方向

使用dir属性规定文本方向

<bdo dir="rtl">反着读没有什么问题</bdo>

反着读没有什么问题

rtl：right to left

ltr：left to right

颜色

颜色由红色、绿色、蓝色混合而成。

每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

CSS基础

表格

元素，<table>标签定义。

边框

属性，border="X"，规定边框宽度

行

元素，<tr>标签定义。

单元格

元素，<td>标签定义(table data)。

<table border="1">
  <tr>
    <td>name</td>
    <td>number</td>
  </tr>
  <tr>
    <td>Drama</td>
    <td>114514</td>
  </tr>
</table>

表头

元素，<th>标签定义

大多数浏览器会把表头显示为粗体居中的文本。

<table border="1">
  <tr>
    <th>name</th>
    <th>number</th>
  </tr>
  <tr>
    <td>Drama</td>
    <td>114514</td>
  </tr>
</table>

name	number
Drama	114514

列表

无序列表

元素，<ul>定义。列表项使用粗体圆点进行标记。

列表项

元素，<li>定义

<ul>
    <li>HUAWEI Mate 60 Pro</li>
    <li>HUAWEI Mate X5</li>
</ul>

有序列表

元素，<ol>定义，列表项同上。列表项使用数字进行标记

<ol>
 <li>HUAWEI Mate 60 Pro</li>
 <li>HUAWEI Mate X5</li>
</ol>

自定义列表

元素，<dl>定义，是项目及其注释的组合

自定义列表项

元素，<dt>定义

自定义列表项的定义

元素，<dd>定义

<dl>
 <dt>HUAWEI Mate 60 Pro</dt>
 <dd>山河同心，聚力新生</dd>
 <dt>HUAWEI Mate X5</dt>
 <dd>折叠引领者</dd>
</dl>

块

块元素

块元素在浏览器显示时，通常会以新行来开始（和结束）。

如标题<h1>, 段落<p>, 无序列表<ul>, 表格<table>

内联元素

内联元素在显示时通常不会以新行开始。

`<div>`元素

块级元素，<div>定义，组合其他元素的容器。

浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

`<span>`元素

内联元素，<span>定义，可用作文本的容器。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

类(class)

设置类并定义样式

分类块元素

<html lang=en>
<head>
 <meta charset=UTF-8>
 <!--使用UTF-8字符集，避免乱码-->
 <title>华为手机-华为官网</title>
 <!--下面开始定义样式分别定义的是
 背景颜色
 外边距
 内边距
 字体
 -->
 <style>
 .phones {
 background-color:#a0b4b2;
 color:white;
 margin:20px;
 padding:20px;
 font-family: HarmonyOS Sans SC;
 }
 </style>
</head>

<body>
    <div class=phones>
        <!--设置类-->
        <h1>HUAWEI Mate 60 </h1>
        <p>山河同心，聚力新生</p>
    </div>

    <div class=phones>
        <h1>HUAWEI Mate 60 RS | ULTIMATE DESIGN </h1>
        <p>非 凡 大 师</p>
    </div>

    <div class=phones>
        <h1>HUAWEI Mate X5 </h1>
        <p>折叠引领者</p>
    </div>
</body>
</html>

分类`<span>`元素

<html lang=en>
<head>
 <meta charset=UTF-8>
 <title>red</title>
 <!--定义类-->
 <style>
  span.red{color:red;}
 </style>
</head>

<body>
 <h1>This is <span class=red>red</span> color</h1>
</body>
</html>

id属性

属性，用于指向样式表中的特定样式声明，语法类似类。

一个 id 名称只能由页面中的一个 HTML 元素使用。

id 名称对大小写敏感。

id 属性位于<style>元素中。

id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

<html lang=en>
<head>
 <meta charset=UTF-8>
 <title>test</title>
 <!--声明样式-->
 <style>
 #title{
  background-color:#a0b4b2;
  color:white;
  margin:20px;
  padding:20px;
  font-family: HarmonyOS Sans SC;
 }
 </style>
</head>

<body>
 <h1 id=title>山河同心，聚力新生</h1>
</body>
</html>

用id属性实现书签功能

创建书签

<h2 id=C4>第四章</h2>

链接书签

<a href=#C4>跳转到第四章</a>

<html lang=en>
<head>
 <meta charset=UTF-8>
 <title>note</title>
 <style>
 #C1{
  color:blue;
  margin:20px;
  padding:20px;
  font-family: HarmonyOS Sans SC;
 }
 </style>
</head>

<body>
 <h1 id=C1>概念</h1>
 <h1>编辑器</h1>
 <br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br /><br /><br />

 <a href=#C1>概念</a>
</body>

</html>

在其他页面链接

<a href=Drama.html#C1>HTML概念</a>

内联框架

元素，<iframe>定义内联的子窗口（框架）,用于在网页内显示网页。

<iframe
src=404.html width=200 height=200 frameborder=>
<!-- 宽度 高度 边框-->
</iframe>

作为链接的目标

<iframe
src=404.html width=200 height=200 frameborder=
name=404>
<!--必须设置iframe的name属性-->
</iframe>

<p><a href=https://www.openharmony.cn target=404>
OpenHarmony
</a></p>

<!--target属性指定链接打开方式，此时链接在iframe窗口打开-->

JavaScript

JavaScript 使 HTML 页面更具动态性和交互性。

JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

document.querySelector("html").addEventListener("click", function () {
  alert("Hello, World!");
});

`<script>`元素

元素，<script> 标签定义客户端脚本（JavaScript）。

<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。

`<noscript>`元素

元素，<noscript> 定义替代内容。

这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户。

<noscript>抱歉，您的浏览器不支持JavaScript</noscript>

路径

绝对路径和相对路径

使用相对路径是个好习惯（如果可能）。

如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

概念

编辑器

头部