【FE学习-HTML】HTML重点汇总
网页的基本概念⁍
HTML的标签和属性都是 不分大小写 的，onclick和onClick是同一个属性。
标签与元素⁍
浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点（node）。这种节点就称为 网页元素（element）。
“标签”和“元素”基本上是同义词，只是使用的场合不一样：
- 标签 是从 源码 角度来看
- 元素 是从 编程 角度来看
比如<p>标签对应网页的p元素。嵌套的标签就构成了网页元素的层级关系（父元素/子元素）。
块级元素，行内元素⁍
块级元素（block）⁍
默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。
例如： p
行内元素（inline）⁍
行内元素默认与其他元素在同一行，不产生换行。
例如： span、sup（上标）、sub（下标）、b、i
行内元素还有哪些呢？
网页的基本标签⁍
符合 HTML 语法标准的网页，应该满足下面的基本结构。
1 | |
不管多么复杂的网页，都是从上面这个基本结构衍生出来的。
-
<html>：网页的顶层 容器 ，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。-
该标签的
lang属性，表示网页内容默认的语言。1
<html lang="zh-CN">
-
-
<head>： 容器 标签，用于放置网页的元信息。 -
<body>： 容器 标签
<!doctype>⁍
网页的第一个标签通常是<!doctype>，表示文档类型，告诉浏览器如何解析网页。
一般来说，只要像下面这样，简单声明doctype为html即可。浏览器就会按照 HTML 5 的规则处理网页。
有时，该标签采用完全大写的形式，以便区别于正常的 HTML 标签。因为<!doctype>本质上不是标签，更像一个处理指令。
1 | |
<meta>⁍
一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。
不管什么样的网页，一般都可以放置以下两个<meta>标签。
1 | |
上面例子中，第一个<meta>标签表示网页采用 UTF-8 格式编码，第二个<meta>标签表示网页在手机端可以自动缩放。
<meta>标签有五个属性，下面依次介绍。
（1）charset 属性
<meta>标签的charset属性，用来指定网页的 编码方式 。该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。
1 | |
上面代码声明，网页为 UTF-8 编码。这里声明的编码方式，应该与网页实际的编码方式一致，
（2）name 属性，content 属性
<meta>标签的name属性表示元数据的名字，content属性表示元数据的值。它们合在一起使用，就可以 为网页指定一项元数据 。
1 | |
上面代码包含了三个元数据：description是网页内容的描述，keywords是网页内容的关键字，author是网页作者。
其他元数据例子⭐
1 | |
（3）http-equiv 属性，content 属性
<meta>标签的http-equiv属性用来覆盖 HTTP 回应的头信息字段，content属性是对应的字段内容。这两个属性与 HTTP 协议相关，属于高级用法，这里就不详细介绍了。
1 | |
上面代码可以覆盖 HTTP 回应的Content-Security-Policy字段。
下面是另一些例子。
1 | |
<base>⁍
<base>标签指定网页内部的所有相对 URL 的计算基准。
整张网页 只能有一个 <base>标签，而且只能放在<head>里面。它是单独使用的标签， 没有闭合标签 ，下面是一个例子。
1 | |
<base>标签的href属性给出计算的基准网址，target属性给出如何打开链接的说明（参见《链接》一章）。已知计算基准是https://www.example.com/files/，那么相对 URL foo.html，就可以转成绝对 URL https://www.example.com/files/foo.html。
注意，<base>标签必须至少具有href属性或target属性之一。
1 | |
一旦设置了<base>，就对整个网页都有效。
尤其需要注意 锚点 ，这时锚点也是针对<base>计算的，而不是针对当前网页的 URL。
更多有关URL的介绍见：
URL 简介 - HTML 教程 - 网道 (wangdoc.com)
更多有关编码的内容见：
HTML 字符编码 - HTML 教程 - 网道 (wangdoc.com)
HTML 标签本身不能使用码点表示，否则浏览器会认为这是所要显示的文本内容，而不是标签。比如，
<p>一旦写成<p>或者<p>，浏览器就不再认为这是标签了，而会当作文本内容将其显示为<p>。
元素的全局属性⁍
-
id ：唯一标识符，不能包含空格。在id前加“#”可以用做锚点。
-
class ：元素可以同时具有多个 class，它们之间使用空格分隔。
-
title ：
title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。 -
tabindex ：
tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。-
负整数：该元素可以获得焦点（比如使用 JavaScript 的
focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。 -
0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。 -
正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的
tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
如果网页所有元素都没有设置
tabindex，那么只有那些 默认可以遍历的元素（比如链接、输入框等） 才能参与 Tab 键的遍历，顺序由其在源码的位置决定。 -
-
accesskey ：指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。 必须配合功能键，一起按下才会生效。 Chrome 浏览器在 Windows 系统和 Linux 系统的快捷键是
Alt + 字符键，在 Mac 系统的快捷键是Ctrl + Alt + 字符键。 -
style ：指定当前元素的 CSS 样式
-
hidden : 注意，CSS 的可见性设置，高于
hidden属性。如果 CSS 设为该元素可见，hidden属性将无效。 -
lang ：
lang属性指定网页元素使用的语言。必须符合 BCP47 的标准。 -
dir ：表示文字的阅读方向，有三个可能的值。
ltr/rtr/auto -
contenteditable ： 允许用户修改内容。两个值：
true/false。鼠标单击句子，就可以进入编辑状态，用户可以改变句子的内容。当然，除非提交到服务器，否则刷新页面还是显示原来的内容。鼠标单击句子，就可以进入编辑状态，用户可以改变句子的内容。当然，除非提交到服务器，否则刷新页面还是显示原来的内容。
该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。 （下面的
spellcheck也是这样） -
spellcheck ：是否打开拼写检查功能。只在编辑时生效，即
contenteditable="true" -
data- ：
data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据，就可以放在data-属性。data-属性只能通过 CSS 或 JavaScript 利用，下面是 CSS 的例子。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18/* HTML 代码如下
<div data-role="mobile">
Mobile only content
</div>
*/
div[data-role="mobile"] {
display:none;
}
/* HTML 代码如下
<div class="test" data-content="This is the div content">test</div>
*/
.test {
display: inline-block;
}
.test:after {
content: attr(data-content);
} -
事件处理属性 ： event handler，响应用户的动作。这些属性的值都是 JavaScript 代码：
onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting
HTML语义结构⁍
- 结构化标记 ：可用来描述标题和段落的元素
- 语义化标记 ：表达特定含义的标记。例如在一个句子中的什么位置加入强调内容，也可能标明是一个引用（以及引用的作者），或者标明是一个缩写词的全称等等。
TODO: 补充HTML语义化的好处
语义良好的网页，
- 天然具有良好的结构，
- 对于开发者易读易写，容易维护，
- 也能帮助计算机更好地处理网页内容。
常用标签：
-
header： 不是head!! 可以放网站导航、搜索栏、文章标题、作者信息等。（不可以嵌套header/footer） -
footer：比如版权信息等（不可以嵌套header/footer） -
main：主题内容。一个页面只能有一个。顶层标签。 -
article：一段完整的内容，比如一篇文章。 -
aside：与网页或文章主要内容间接相关的部分。（侧边栏、补充信息、评论、注释）不一定非要在侧边。 -
section：一个含有主题的独立部分，通常用在文档里面表示一个章节。总是多个一起使用，一个页面不能只有一个<section>。比如<article>包含了两个<section>，代表两章。适合幻灯片展示的页面 -
nav：放置页面或文档的导航信息。一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。里面通常是列表 -
h1~h6：标题 -
hgroup：如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。1
2
3
4
5<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>注意，
<hgroup>只能包含<h1>~<h6>，不能包含其他标签。
基本标签⁍
文本标签⁍
注：加粗的表示是语义标签
-
<div>：表示一个区块。提供 CSS 的钩子，用来指定各种样式。 -
<p>：文章的一个段落（paragraph）。 -
<span>：通用目的的行内标签（即不会产生换行）。通常用作 CSS 样式的钩子，如果需要对某些行内内容指定样式 -
<br>，<wbr>：换行/可选断行。没有闭合标签。<wbr>标签跟<br>很相似，表示一个可选的断行。如果一行的宽度足够，则不断行；如果宽度不够，需要断行，就在<wbr>的位置的断行。注意，块级元素的间隔，不要使用
<br>来产生，而要使用 CSS 指定。 -
<hr>：水平分割线。没有闭合标签。该标签是历史遗留下来的，建议尽量避免使用。主题之间的分隔可以使用
<section>，如果想要水平线的效果，可以使用 CSS。 -
<pre>： 块级元素 ，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。 -
<strong>，<b>： 行内元素 。加粗，优先使用含有语义的<strong>标签。 -
<em>，<i>： 行内元素 。强调，一般情况下，会以斜体表示。优先使用含有语义的<em>标签。 -
<sub>，<sup>，<var>：行内元素，下标/上标/代码或数学公式的变量 -
<u>，<s>：行内元素。提示存在的问题（浏览器默认用下划线渲染）/删除线。 -
<blockquote>，<cite>，<q>：-
.
<blockquote>是一个 块级标签 ，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。<blockquote>标签有一个cite属性，它的值是一个网址，表示引言来源，不会显示在网页上。 -
.
<cite>标签表示引言出处或者作者，浏览器默认使用斜体显示这部分内容。不一定跟<blockquote>一起用。 -
.
<q>是一个 行内标签 （不换行），也表示引用。也有cite属性。浏览器默认并且会自动添加半角的双引号。
-
-
<code>： 行内元素 ，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。如果要表示多行代码，<code>标签必须放在<pre>内部。 -
<kbd>，<samp>：- .
<kbd>： 行内元素 ，用户从键盘输入的内容，现在扩展到各种输入，包括语音输入。<kbd>可以嵌套，方便指定样式。译]您知道 HTML 的键盘标签吗？ - 知乎 (zhihu.com) - .
<samp>： 行内元素 ，表示计算机程序输出内容的一个例子。浏览器默认以等宽字体显示。
- .
-
<mark>： 行内标签 ，表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景，显示该标签的内容（ 不要只为了高亮的效果，而使用这个标签，因为不能保证浏览器的处理方式。如果要保证高亮，还是要使用 CSS 样式。 ）。还可以用于在搜索结果中，标记出匹配的关键词。 -
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。 行内标签 -
<time>，<data>： 行内标签 。提供机器可读的格式。（前者与事件有关） -
<address>：块级元素 ，表示某人或某个组织的联系方式。 -
<abbr>：行内元素 ，表示标签内容是一个 缩写 。它的title属性给出缩写的完整形式，或者缩写的描述。鼠标悬停在该元素上方时，title属性值作为提示，会完整显示出来。 -
<ins>，<del>： 行内元素 。原始文档添加（insert）/删除（delete）的内容。浏览器默认为
<del>标签的内容加上删除线，为<ins>标签的内容加上下划线。这两个标签都有以下属性。
cite：该属性的值是一个 URL，表示该网址可以解释本次删改。datetime：表示删改发生的时间。
-
<dfn>： 行内元素 ，表示标签内容是一个术语（definition），本段或本句包含它的定义。 -
<ruby>：表示文字的语音注释，主要用于东亚文字，比如汉语拼音和日语的片假名。 是行内元素，同时也是容器 -
<bdo>，<bdi><bdo>标签里面的文字，会以相反的方向渲染。dir属性，指定具体的文字方向。它有两个值，ltr表示从左到右，rtl表示从右到左。<bdi>标签用于不确定文字方向的情况。由浏览器自己决定。
列表标签⁍
-
<ol>：有序列表 容器 -
<ul>：无序列表 容器 -
<li>：列表项。有序列表<ol>之中，<li>有一个value属性，定义当前列表项的编号，后面列表项会从这个值开始编号。 -
<dl>，<dt>，<dd>。<dl>标签是一个 块级元素 ，表示一组 术语 的列表（description list），常用来定义 词汇表 。术语名（description term）由<dt>标签定义，术语解释（description detail）由<dd>标签定义。
图像标签⁍
<img>标签和属性⁍
行内元素，无闭合标签。
1 | |
必须属性为src。
其他属性：
-
alt 属性
-
width 属性，height 属性 （更推荐用css样式）
-
srcset，sizes 见响应式
-
referrerpolicy
<img>导致的图片加载的 HTTP 请求，默认会带有Referer的头信息。referrerpolicy属性对这个行为进行设置。 -
crossorigin ：跨域请求
crossorigin属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。简单说，只要打开了这个属性，HTTP 请求的头信息里面，就会加入
origin字段，给出请求发出的域名，不打开这个属性就不加。一旦打开该属性，它可以设为两个值。
anonymous：跨域请求不带有用户凭证（通常是 Cookie），打开属性后的默认值。use-credentials：跨域请求带有用户凭证。
-
loading
loading属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载，这样就节省了带宽。loading属性可以取以下三个值。auto：浏览器默认行为，等同于不使用loading属性。lazy：启用懒加载。eager：立即加载资源，无论它在页面上的哪个位置。
1
<img src="image.png" loading="lazy" alt="…" width="200" height="200">由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。
<figure>容器和图形说明figcaption⁍
<figure>标签是一个 语义容器 ，可以理解为一个图像区块，将图像和相关信息封装在一起（还可以封装引言、代码、诗歌等等。）
<figcaption>是它的可选子元素，表示图像的文本描述，通常用于放置标题，可以出现多个。
HTML响应式图像⁍
img标签的srcset属性和sizes属性⁍
srcset属性用来指定多张图像，适应 不同像素密度 的屏幕。
sizes属性列出不同设备的图像显示 宽度/大小 。
1 | |
浏览器根据当前设备的宽度，从sizes属性获得图像的显示宽度，然后从srcset属性找出最接近该宽度的图像，进行加载。
假定当前设备的屏幕宽度是480px，浏览器从sizes属性查询得到，图片的显示宽度是33vw（即33%），等于160px。srcset属性里面，正好有宽度等于160px的图片，于是加载foo-160.jpg。
如果省略sizes属性，那么浏览器将根据实际的图像显示宽度，从srcset属性选择最接近的图片。一旦使用sizes属性，就必须与srcset属性搭配使用，单独使用sizes属性是无效的。
<picture>容器标签⁍
容器标签，内部使用<source>和<img>，指定不同情况下加载的图像。
1 | |
浏览器按照<source>标签出现的顺序，依次判断当前设备是否满足media属性的媒体查询表达式，如果满足就加载srcset属性指定的图片文件，并且不再执行后面的<source>标签和<img>标签。
除了响应式图像，<picture>标签还可以用来选择不同格式的图像。<source>标签的type属性给出图像的 MIME 类型，srcset是对应的图像 URL。
1 | |
链接标签⁍
<a>/<link>/<script>/<noscript>
<a>⁍
属性：
-
href
- 特殊值：邮件链接：
mailto:xxx@xxx（可不指定邮箱） - 特殊值：电话链接：
tel:xxxxxxxxxxx
- 特殊值：邮件链接：
-
hreflang ：提示语言
-
title ：鼠标悬停提示说明信息。
-
target ：如何展示打开的链接。
_self：当前窗口打开，这是默认值。_blank：新窗口打开。_parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。_top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。- 自定义名称：比如两个链接都在名叫test的窗口打开。
-
rel ：说明链接与当前页面的关系。
-
referrerpolicy ：用于精确设定点击链接时，浏览器发送 HTTP 头信息的
Referer字段的行为。 -
ping ：指定一个网址，用户点击的时候，会向该网址发出一个 POST 请求，通常用于跟踪用户的行为。
-
type ：提示给出链接 URL 的 MIME 类型
-
download ：表明当前链接用于下载，而不是跳转到另一个 URL。只在链接与网址同源时，才会生效。
<link>⁍
主要用于加载与网页相关的外部资源文件，通常放在<head>里。
如css样式、图标文件、相关文档链接等。
-
rel属性：表示外部资源与当前文档之间的关系，是<link>标签的必需属性。 -
rel、as、type与资源预加载as属性，告诉浏览器预处理资源的类型- “script”
- “style”
- “image”
- “media”
- “document”
type属性，进一步明确 MIME 类型。5种预加载
-
<link rel="preload">尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。
-
<link rel="prefetch">后续的页面需要某个资源，并且希望预加载该资源，以便加速页面渲染。该指令不是强制性的，优先级较低
-
<link rel="preconnect">提前与某个域名建立 TCP 连接。
-
<link rel="dns-prefetch">浏览器提前执行某个域名的 DNS 解析
-
<link rel="prerender">浏览器加载某个网页，并且提前渲染它。
-
media属性给出外部资源生效的媒介条件。
例如：
media="print"media="screen and (max-width: 600px)"
-
其他属性
crossorigin：加载外部资源的跨域设置。href：外部资源的网址。referrerpolicy：加载时Referer头信息字段的处理方法。as：rel="preload"或rel="prefetch"时，设置外部资源的类型。type：外部资源的 MIME 类型，目前仅用于rel="preload"或rel="prefetch"的情况。title：加载样式表时，用来标识样式表的名称。sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。
<scipt>⁍
加载脚本代码，目前主要是加载 JavaScript 代码。
也可以加载外部脚本，src属性给出外部脚本的地址。
type属性也可以设成module，表示这是一个 ES6 模块，不是传统脚本。
1 | |
对于那些不支持 ES6 模块的浏览器，可以设置nomodule属性。支持 ES6 模块的浏览器，会不加载指定的脚本。这个属性通常与type="module"配合使用，作为老式浏览器的回退方案。
1 | |
<noscript>⁍
用于浏览器不支持或关闭 JavaScript 时，所要显示的内容。
多媒体标签⁍
<video>⁍
1 | |
<audio>⁍
用于放置音频。
1 | |
上次出现source是在<picture>标签那里
<track>⁍
用于指定视频的字幕，格式是 WebVTT （.vtt文件），放置在<video>标签内部。它是一个单独使用的标签，没有结束标签。
1 | |
<source>⁍
<source>标签用于<picture>、<video>、<audio>的内部，用于指定一项外部资源。单标签是单独使用的，没有结束标签。
<embed>⁍
用于嵌入外部内容，这个外部内容通常由浏览器插件负责控制。
由于 浏览器的默认插件都不一致 ，很可能不是所有浏览器的用户都能访问这部分内容， 建议谨慎使用 。
<object>，<param>⁍
可以视为<embed>的替代品，有标准化行为，只限于插入少数几种通用资源，没有历史遗留问题，因此更推荐使用。
<object>标签是一个容器元素，内部可以使用<param>标签，给出插件所需要的运行参数。
1 | |
iframe⁍
1 | |
sandbox 属性⁍
允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。可以当作布尔属性使用，表示打开所有限制。
不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。
loading 属性⁍
<iframe>滚动进入视口以后再加载，这样会比较节省带宽。
loading属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值。
- auto：浏览器的默认行为，与不使用loading属性效果相同。
- lazy：
<iframe>的懒加载，即将滚动进入视口时开始加载。 - eager：立即加载资源，无论在页面上的位置如何。
如果<iframe>是隐藏的，则loading属性无效，将会立即加载。只要满足以下任一个条件，Chrome 浏览器就会认为<iframe>是隐藏的。
<iframe>的宽度和高度为4像素或更小。- 样式设为
display: none或visibility: hidden。- 使用定位坐标为负
X或负Y，将<iframe>放置在屏幕外。
表格标签⁍
1 | |
- 大型表格内部可以使用多个
<tbody>，表示连续的多个部分。 <col>不仅是一个单独使用的标签，没有结束标志，而且还是一个 空元素 ，没有子元素。它的主要作用，除了申明表格结构，还可以为表格附加样式。<col>有一个span属性，值为正整数，默认为1。如果大于1，就表示该列的宽度包含连续的多列。- 如果表格有
<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级。 - 通过
colspan属性和rowspan属性设置 单元格 跨越的栏/行数 - 可以使用
headers属性表示哪个单元格对应哪个表头。对于跨行的情况，可以是一个空格分隔的字符串，对应多个id属性的值。 scope属性只有<th>标签支持，一般不在<td>标签使用，表示该<th>单元格到底是栏的标题，还是列的标题。- 可取属性值：
row/col/rowgroup/colgroup/auto
- 可取属性值：
表单标签⁍
容器元素<form>⁍
属性：
name：表单的名称，应该在网页中是 唯一且必须 的。注意，如果一个控件没有设置name属性，那么这个控件的值就不会作为键值对，向服务器发送。action：服务器接收数据的 URL。method：提交数据的 HTTP 方法，可能的值有post（表单数据作为 HTTP 数据体发送），get（表单数据作为 URL 的查询字符串发送），dialog（表单位于<dialog>内部使用）。
<fieldset>，<legend>⁍
<fieldset>是一个容器元素，表示控件的集合，用于将一组相关控件组合成一组。
有以下属性。
disabled：布尔属性，一旦设置会使得<fieldset>内部包含的控件都不可用，都变成灰色状态。form：指定控件组所属的<form>，它的值等于<form>的id属性。name：该控件组的名称。
<legend>标签用来设置<fieldset>控件组的标题，通常是<fieldset>内部的第一个元素，会嵌入显示在控件组的上边框里面。
1 | |
<label>⁍
行内元素
点击<label>，就相当于控件本身的click事件。
<label>的for属性关联相对应的控件，它的值是对应控件的id属性。所以，控件最好设置id属性。
控件也可以放在<label>之中，这时不需要for属性和id属性。
<label>的属性如下。
for：关联控件的id属性。form：关联表单的id属性。设置了该属性后，<label>可以放置在页面的任何位置，否则只能放在<form>内部。
<input>⁍
不用闭合
type属性决定了<input>的形式：
详细的属性解说见表单标签 - HTML 教程 - 网道 (wangdoc.com)
1. text⁍
2. search⁍
3. button⁍
建议尽量不使用这个类型，而使用<button>标签代替
4. submit⁍
可用配套属性来覆盖<form>标签的相应设置。
5. image⁍
将图像作为submit按钮
6. reset⁍
用处不大，用户点错了还会使得所有已经输入的值都被重置，建议不要使用。
7. checkbox⁍
多个相关的复选框，可以放在<fieldset>里面。name要一致。
8. radio⁍
多个单选框的name属性的值，应该都是一致的。
9. email⁍
该类型还可以搭配<datalist>标签，提供输入的备选项。
1 | |
10. password⁍
浏览器会自动将换行符（U+000A）和回车符（U+000D）过滤掉。
11. file⁍
12. hidden⁍
TODO: 详细过程？
type="hidden"是一个不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交。
1 | |
上面这个控件，页面上是看不见的。用户提交表单的时候，浏览器会将prodId=xm234jq发给服务器。
CSRF（Cross-Site Request Forgery）的全称是“跨站请求伪造”，也被称为“One Click Attack”或者“Session Riding”，通常缩写为CSRF或者XSRF。
13. number⁍
数字输入框，只能输入数字。浏览器通常会在输入框的最右侧，显示一个可以点击的上下箭头，点击向上箭头，数字会递增，点击向下箭头，数字会递减。
14. range⁍
type="range"是一个滑块，用户拖动滑块，选择给定范围之中的一个数值。因为拖动产生的值是不精确的，如果需要精确数值，不建议使用这个控件。常见的例子是调节音量。
该类型的配套属性如下，用法与type="number"一致。
max：允许的最大值，默认为100。min：允许的最小值，默认为0。step：步长值，默认为1。
该类型与<datalist>标签配合使用，可以在滑动区域产生刻度。
1 | |
上面代码会在0～100之间产生11个刻度。其中，0%、50%和100%三个位置会有文字提示，不过浏览器很可能不支持。
注意，浏览器生成的都是水平滑块。如果想要生成垂直滑块，可以使用 CSS 改变滑块区域的方向。
15. url⁍
与<datalist>标签搭配使用，可以形成下拉列表供用户选择。
16. tel⁍
大多数时候需要自定义验证。
17. color⁍
选择颜色的控件，它的值一律都是#rrggbb格式。
18. date/time/month/week/datetime-local⁍
日期/时间/月份/周/日期时间输入框
示例：
1 | |
<button>⁍
是一个容器标签（？）通常需要用type属性或脚本指定按钮的功能。
<button>内部不仅放置文字，还可以放置图像，这可以形成图像按钮。
<option>，<optgroup>⁍
<option>标签用在<select>、<optgroup>、<datalist>里面，表示一个菜单项，参见<select>的示例。
<optgroup>表示菜单项的分组，通常用在<select>内部。
disabled：布尔设置，是否禁用该组。一旦设置，该组所有的菜单项都不可选。label：菜单项分组的标题。
<select>⁍
用于生成一个下拉菜单。
<datalist>⁍
为指定控件提供一组相关数据，通常用于生成输入提示。它的内部使用<option>，生成每个菜单项。
注意，<option>在这里可以不需要闭合标签。
<textarea>⁍
<output>⁍
行内元素，用于显示用户操作的结果。一般是计算结果（？
<progress>⁍
任务完成进度
<meter>⁍
行内元素，表示指示器，用来显示已知范围内的一个值，很适合用于任务的当前进度、磁盘已用空间、充电量等带有比例性质的场合。浏览器通常会将其显示为一个不会滚动的指示条。
示例：
烤箱的当前温度是
其他标签⁍
<dialog>⁍
或许这就是模态框。。
<dialog>元素里面，可以放入其他 HTML 元素。
1 | |
上面的对话框里面，有一个输入框和提交按钮。
注意，上例中<form>的method属性设为dialog，这时点击提交按钮，对话框就会消失。但是，表单不会提交到服务器，浏览器会将表单元素的returnValue属性设为 Submit 按钮的value属性（上例是foo）。
JS API⁍
提供Dialog.showModal()和Dialog.close()两个方法，用于打开/关闭对话框。
事件⁍
有两个事件，可以监听。
close：对话框关闭时触发cancel：用户按下esc键关闭对话框时触发
如果希望用户点击透明层，就关闭对话框，可以用下面的代码。
1 | |
<details>，<summary>⁍
这是summary
这是detailsCSS 设置summary::-webkit-details-marker，可以改变标题前面的三角箭头。
JS API⁍
Details元素的open属性返回<details>当前是打开还是关闭。
Details元素有一个toggle事件，打开或关闭折叠时，都会触发这个事件。
详细见其他标签 - HTML 教程 - 网道 (wangdoc.com)
HTML的演变过程与对应的文档类型定义(DTD)⁍
-
HTML4
1
2<!DOCTYPE htm1 PUBLIC
"-//w3C//DTD HTML 4.01 Transitiona1 //EN" "http://www.w3.org/TR/htm14/1oose.dtd"> -
XHTML 1.0
1
2
3
4
5
6<!DOCTYPE htm1 PUBLIC
"-//W3C//DTD XHTML 1.0 Transitiona1 //EN" "http://www.w3.org/TR/xhtm11/DTD/
xhtm11-transitiona1.dtd">
<!DOCTYPE htm1 PUBLIC
"-//W3C//DTD XHTML 1.0 Strict/ /EN" "http://www.w3.org/TR/xhtm11/DTD/xhtm11-strict.dtd">-
是依据XML标准重新制定的，有着严格的规则（也有过渡板的XHTML，其中仍可以使用一些表示性元素）
-
XML：可扩展标记性语言，定义数据传输的格式，标签需要自定义
1
<?xml version-"1.0”?>
-
-
HTML5
1
<! DOCTYPE htm1>
搜索引擎优化SEO⁍
搜索引擎优化(或者叫SEO)是一种利用 搜索引擎的搜索规则 来 提高网站在有关搜索引擎内的排名 的方式
SEO的核心是，找到人们在搜索你的网站时可能会输入到搜索引擎的 关键词 ,然后在你的网站中将这些关键词应用到合适的位置，以此来增加你的网站在搜索引擎结果中显示的机会。
站内优化⁍
关注站内网页文本
- 关键词插入：
- 页面标题
<head>-<title> - URL/网址 ：文件名属于URL的一部分，如果允许的话在文件名中加入关键词
- 标题
<h1>~<hn> - 正文 不要出现段与段之间生硬的植入关键词，要保持关键词布局的合理性
- 链接文本
- 图像的alt特性
- 页面描述
<head>-<meta>description描述标签/keywords关键词标签
永远不要试图欺骗搜索引擎！例如，不要添加颜色与背景色相同的文本，因为搜索引擎可以检测到这一点。
- 内容的更新 等
站外优化⁍
获得来自其他内容相关的网站的链接（其他网站引用了你的网站的链接），可以做友链交换
可以通过Google Analytics等工具分析来访者
通过发布外链等方式吸引来访者
通过服务器优化提高访问速度等等方式留住来访者
