[关闭]
@SovietPower 2021-12-12T07:11:58.000000Z 字数 23411 阅读 1031

HTML 笔记

学习笔记

作业部落链接：https://www.zybuluo.com/SovietPower/note/1819073
参考：
学习框架：https://www.runoob.com/html/html-tutorial.html
标签学习：https://www.w3school.com.cn/tags/index.asp
https://developer.mozilla.org/zh-CN/docs/Learn

HTML 基础

元素

格式


以下为文本格式标签：
<b>, <i>, <strong>, <em>
<b><i>
<b>, <i><strong>, <em>

属性：
cite，值为URL，规定一个解释了文本被删除的原因的文档的URL。
datetime，值为YYYY-MM-DDThh:mm:ssTZD，规定文本被删除的日期和时间。

属性：
cite，值为URL，规定一个解释了文本被插入的原因的文档的URL。
datetime，值为YYYY-MM-DDThh:mm:ssTZD，规定文本被插入的日期和时间。

属性

常用属性

对于标签间没有其它标签（即纯文本）的元素，innerHTML和innerText等价，可通过这两个元素设置标签间的内容。
注意，使用innerHTML修改父级块的包含元素后，会重新加载整个父级块，导致父级块的其它内容被加载到初始状态。使用appendChild不会有这个问题。
所以如需添加固定格式的元素，可以在外层创建一个div，使该外层div的innerHTML设为需要添加的内容，然后使用appendChild添加该div。

自定义属性
标签在声明时，可以绑定任意它不拥有的属性。
但该属性不能直接通过elem.attr获取（会返回undefined），需使用elem.getAttribute("attr")获取（DOM），或$(this).attr("attr")（jQuery）。

例：
div标签没有name, value属性，但可自定义绑定该属性：<div class="A" value="123"></div>，并通过document.getElementsByClassName("A")[0].getAttribute("value")或$(".A").attr("value")获取。
属性名可任取。
注意getElementsByName()和getElementsByClassName()返回的是一个list，getElementsById()返回的是拥有指定id的第一个对象。

字符实体

在HTML中，某些字符是预留的（用做特殊功能），称为预留字符。比如<, >已用做标签。
要显示预留字符，或一些键盘上没有的字符、特殊字符，需使用字符实体（character entity）/转义字符（escape sequence）表示。

字符实体表：https://dev.w3.org/html5/html-author/charref；https://www.runoob.com/tags/ref-entities.html。
字符实体对大小写敏感。

Character Entity
& &amp;
< &lt;
> &gt;
" &quot;

<也可写作&#60;或&#060;（实体数字，entity number），但实体名比数字更容易记忆。不过并非所有浏览器支持实体名，但很可能支持实体数字。

URL

统一资源定位器（Uniform Resource Locators, URL）是一个网页地址，用于定位万维网上的文档。
Web浏览器通过URL从Web服务器请求页面。

URL的语法规则：
scheme://host.domain:port/path/filename。
其中：
scheme：定义因特网服务的类型。最常见的类型是http（超文本传输协议，不加密），还有https（安全超文本传输协议，加密所有信息交换）、ftp（文件传输协议，用于将文件下载或上传至网站）、file（当前计算机上的文件）。
host：定义域主机（http的默认主机是www）。
domain：定义因特网域名。比如cnblogs.com。
:port：定义主机上的端口号（http 的默认端口号是 80）。
path：定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename：定义文档/资源的名称。

URL字符编码：
URL只能使用ASCII字符集。当URL包含ASCII集之外的字符时，会转换为有效的ASCII格式：使用%加两位十六进制数来替换非ASCII字符。
URL不能包含空格。URL编码通常使用+来替换空格。

HTML 头部<head>

<head>元素包含了所有的头部标签元素。可以添加在头部区域的元素标签为:<title>, <base>, <link>, <style>, <meta>, <script>, <noscript>。

属性：
href：规定被链接文档的位置。
media：规定被链接文档将被显示在什么设备上。
rel：规定当前文档与被链接文档之间的关系。
type：规定被链接文档的 MIME 类型。

例：
当属性rel取值为shortcut icon时，可通过href属性定义页面logo图片，如：

  1. <head>
  2. <link rel="shortcut icon" href="https://img2020.cnblogs.com/blog/1143196/202106/1143196-20210612002518830-1873723858.png">
  3. </head>

属性：
type：必需，规定样式表的MIME类型。
media：为样式表规定不同的媒介类型。

属性：
content：必需，定义与 http-equiv 或 name 属性相关的元信息
name：把 content 属性关联到一个名称。
http-equiv：把 content 属性关联到 HTTP 头部。
scheme：定义用于翻译 content 属性值的格式。

属性：
type：必需，指示脚本的 MIME 类型。
async：规定异步执行脚本（仅适用于外部脚本）。
charset：规定在外部脚本文件中使用的字符编码。
defer：规定是否对脚本执行进行延迟，直到页面加载为止。
src： 规定外部脚本文件的URL。

HTML 链接

注：
href属性是可选的。所以<a>不只可以做链接，还可用于制作格式、按钮。
比如即使未定义链接，a:hover和a:active的样式也是会生效的，就不需写一对onmouseenter, onmouseleave或一对onmousedown, onmouseup。
但其实，其它元素也可直接使用elem:hover和elem:active来实现相同格式。

<a href="javascript:;" οnclick="js_method()"> 或 href="javascript:void(0);" 或 href="####"可实现点击元素执行函数，但不进行任何跳转（更推荐第一个）。
<a href="#" οnclick="js_method()">可实现点击元素执行函数，并跳转到页面最顶端。
<a href="#" οnclick="js_method(); return false;">可实现点击元素执行函数，但不进行任何跳转。

href="#"表示top，是一个空锚点/空书签，会跳转到页面最顶端。常用于实现回到页面顶端。

属性：
href：一个URL，规定链接指向的页面的URL。
rev：有特定的取值，规定当前文档与被链接文档之间的关系。
target：规定在何处打开链接文档。

target属性有以下几种取值：
_black：在新窗口中打开被链接文档。
_self（默认）：在相同的框架中打开被链接文档。
_parent：在父框架集中打开被链接文档。
_top：在整个窗口中打开被链接文档。
framename：为一个框架名称，在指定的框架中打开被链接文档。
注：以下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中任何框架 name 或 id 的第一个字符。

id：在该处创建一个HTML文档书签（任意位置都可引用，包括之前）。

id属性的例子：
定义一个书签：<a id="tips">These are some tips</a>
引用（链接到）该书签：<a href="#tips">Go to tips!</a>
从其它网页链接到其书签：<a href="add#tips">Go to tips!</a>，其中add为被引用网页完整地址。

HTML 图像

属性：
alt：必需，规定图像的替代文本。
在浏览器无法载入图像时，会显示该替代文本信息而不是图像。为所有图像都加上替代文本有助于更好地显示信息，比如在纯文本浏览的时候。
src：必需，规定显示图像的URL。
当URL错误无法正确显示图像时，会显示一个破碎的加载失败的图片。
height/width：设置图像的高度/宽度。
指定图像的高度与宽度，可在页面加载时就预留好指定的空间。如果未指定，加载页面图片时 可能会破坏页面的整体布局。
align, border, hspace, vspace属性不推荐使用，应使用CSS代替。

注意：
HTML文件每加载一个图像，都需多加载一个文件（HTML文件本身也是一个文件），会占用时间，所以应慎用图片。

属性：
id：必需，为<map>标签定义唯一的名称。
name：HTML中必需，为image-map定义唯一的名称。

在<img>中使用usemap属性，可通过引用<map>中的id或name属性（由浏览器决定）来创建对应的图像映射。图像映射会给<img>创建的空间（一般为图片所在空间）的对应位置，创建相应的可点击区域，不同区域可链接到不同位置。
例：
下列代码会为<img>的对应位置创建三个不同大小的可点击区域，分别链接到三个网址。

  1. <map name="planetmap">
  2.   <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  3.   <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  4.   <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
  5. </map>
  6. <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

属性：
alt：必需，定义此区域的替换文本。
coords：定义可点击区域（对鼠标敏感的区域）的坐标（或参数，与shape有关）（单位为像素）。
href：定义此区域的目标URL。
nohref：HTML5不支持。从图像映射排除某个区域。
rel：规定当前文档与目标URL之间的关系。
shape：定义区域的形状。可取值为：default、rect（此时coords值应为4个数"x1,y1,x2,y2"，表示左上角顶点坐标、右下角顶点坐标）、circ（此时coords值应为3个数"x,y,r"，表示圆心位置、半径）、poly（此时coords值应为若干个数"x1,y1,x2,y2,..."，表示多边形的所有顶点坐标）。
target：规定在何处打开href属性指定的目标URL，同<a>。

HTML 表格

tr元素定义表格行，th元素定义表头，td元素定义表格单元，caption元素定义表格标题。
每个表格有若个行，分别由<tr>与</tr>间的内容定义（table row）。
每行有若干个单元格，每个单元格有两类：若单元格为数据，则由<td>与</td>间的内容定义（table data cell）；若单元格为表头，则由<th>与</th>间的内容定义（table header cell）。数据一般为正常字体且左对齐，表头一般为粗体居中。
单元格内也可以嵌套表格。

使用tr, th元素的cells属性，可获取其中的td, th列表。

属性：
border：规定表格边框的宽度。单位为像素，只能取整数（实数会下取整）。当border=0时表格不会显示边框。
cellpadding：取值为像素或百分比。规定单元格边缘与其内容之间的空白。
cellspacing：取值为像素或百分比。规定单元格之间的空白。
frame：规定外侧边框的哪个部分是可见的。
rules：规定内侧边框的哪个部分是可见的。
summary：规定表格的摘要。
width/height：取值为像素或百分比。规定表格的宽度/高度。

例：

  1. <table border="1">
  2.     <caption>Monthly savings</caption>
  3.     <tr>
  4.         <th>First Name:</th>
  5.         <td>Bill Gates</td>
  6.     </tr>
  7.     <tr>
  8.         <th rowspan="2">Telephone:</th>
  9.         <td>555 77 854</td>
  10.     </tr>
  11.     <tr>
  12.         <td>555 77 855</td>
  13.     </tr>
  14. </table>

属性：
abbr：规定单元格中内容的缩写版本。abbr属性不会在普通的web浏览器中造成任何视觉效果方面的变化，只提供了该单元格的短描述。
align：规定单元格内容的水平对齐方式。
axis：定义该单元格的类别名（对单元格进行分类）。
bgcolor：规定表格单元格的背景颜色。不推荐使用，应使用CSS代替。
char：规定根据哪个字符来进行内容的对齐（会以该字符作为对齐的中心线）。只有当align取值为char时生效。目前几乎没有浏览器支持char属性。
colspan：设置单元格横跨的列数。
rowspan：设置单元格横跨的行数。
scope：定义将表头数据与单元数据相关联的方法。
width/height：取值为像素或百分比。规定单元格的宽度/高度。不推荐使用，应使用CSS代替。

属性：
align：定义表格行的内容对齐方式。
bgcolor：规定表格行的背景颜色。不推荐使用，应使用CSS代替。
char：规定根据哪个字符来进行内容的对齐（会以该字符作为对齐的中心线）。只有当align取值为char时生效。目前几乎没有浏览器支持char属性。
valign：规定表格行中内容的垂直对齐方式。

表格表头和表格页脚会独立于表格主体，不随主体滚动。当包含多个页面的长表格被输出时，表格的表头和页脚可被显示在包含表格数据的每个页面上。

可以只使用<tbody>，可定义任意多个<tbody>。
<thead>需在<caption>, <colgroup>元素之后，<tbody>, <tfoot>, <tr>之前。
三个元素的内部都必须包含一个或者多个<tr>标签。
这三个标签不包含特殊的样式。可使用CSS为它们定义样式。

语法：tableObject.tBodies

例：
在表格的第1个tBody的最后插入行元素：table.tBodies[0].appendChild(tr_node)。

HTML 列表

HTML列表分为有序列表（带标号）、无序列表（无标号，项目符号不是数字而是黑色实心圆点）、自定义列表。
<li>（list item）定义有序与无序列表的列表项目，<dt>, <dd>（definition term, definition description）定义自定义列表项目及其注释。
列表项目内部可以使用段落、换行符、图片、链接和其他列表等。

属性：
compact：规定列表呈现的效果比正常情况更小巧。HTML5不支持，应使用CSS代替。
reversed：规定列表顺序为降序显示。
start：规定有序列表的项目符号的起始值，值为数字。
type：规定列表的项目符号类型，取值为1、A、a、I、i（I,i分别代表罗马数字大小写）。

属性：
compact：规定列表呈现的效果比正常情况更小巧。不推荐使用，应使用CSS代替。
type：规定列表的项目符号的类型。有三种取值：disc（黑色实心圆点）、circle（空心圆点）、square（黑色实心方块）。不推荐使用，应使用CSS代替。

例子：

  1. <dl>
  2. <dt>Coffee</dt>
  3. <dd>black hot drink</dd>
  4. <dt>Milk</dt>
  5. <dd>white cold drink</dd>
  6. </dl>

HTML 块级元素

大多数HTML元素属于块级元素（block/block-level element，块元素）。
显示块级元素时，通常会从新行开始（以新行结束）。相邻的块级元素会在不同行显示。
通过CSS，可为块级元素添加display:inline属性使其不换行显示。

特点：
1. 在新行开始（但可更改）。
2. 高度、行高、外边距、内边距都可控制。
3. 宽度缺省默认为其容器的100%，也可设定。
4. 一般可容纳内联元素和其它块级元素。

常见块级元素：
标题<h1>, <h2>, ...，<p>，列表<ol>, <ul>，<table>。

通过CSS，可对该区域/内容块的所有元素设置样式属性。
可用于文档布局，以取代用表格<table>定义布局的传统方法。
显示时其前后会有换行。

属性：
class：定义该div所属的div类别。
id：唯一标识该div。
align：规定div元素中的内容的对齐方式。已废弃，应使用CSS代替。

HTML 行内元素

与块级元素对应的为行内元素（inline element，内嵌元素，内联元素，直进式元素）。
显示行内元素时，会在同一行从左到右显示，不单独另占一行。
通过CSS，可为块级元素添加display:block属性使其换行显示。

特点：
1. 不会从新行开始，与其它元素在一行上（但可更改）。
2. 高度、行高、外边距、内边距不可改变。
3. 宽度就是其文字或图片的宽度，不可改变。
4. 只能容纳文本或行内元素。

常见行内元素：
<a>，<b>，<img>，<td>，<big>，<sub>。

属性：
class：定义该span所属的span类别。
id：唯一标识该span。

例：
为class为tip的段落，设置span格式（该span为tip类的子元素）：
CSS：

  1. p.tip span {
  2.     font-weight: bold;
  3.     color: #ff9955;
  4. }

HTML：

  1. <p class="tip"><span>提示：</span>abcde</p>

HTML 布局

大多数网站会把内容安排到多个列中（只要剩余宽度足够大，即使有换行内容也会在右侧显示）。
为多个div元素设置合适的宽度，可以实现多列内容的布局。
使用table也可创建多列内容，但并不推荐将table作为布局工具使用。

HTML 表单

表单（Form）是一个包含表单元素的区域，用于数据采集。
一个表单有三个基本组成部分：表单标签、表单域（包含各种输入框或上传框）、表单按钮（如提交、复位、运行其它脚本）。

属性：
action：值为URL。规定当提交表单时向何处发送表单数据。
autocomplete：值为on或off。规定是否启用表单的自动完成功能。自动完成允许浏览器预测对字段的输入：浏览器会记忆之前提交过的值，当在字段开始键入时，会显示出与当前输入内容匹配的过去提交过的值。
enctype：规定在发送表单数据之前如何对其进行编码。默认为"application/x-www-form-urlencoded"。
method：值为get或post。规定用于发送 form-data 的 HTTP 方法。
name：规定表单的名称。
rel：规定链接资源和当前文档之间的关系。
target：规定在何处打开 action URL。
novalidate：当值为"novalidate"时，提交表单时不进行验证。

input标签

一般通过输入标签<input>输入元素。输入类型由其类型属性type决定。为空标签。

属性：
alt/src：只能在<input type="image" src="...">时使用。为图像设置替代文本/设置显示图像的URL。
autocomplete：值为on或off。规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入：浏览器会记忆之前提交过的值，当在字段开始键入时，会显示出与当前输入内容匹配的过去提交过的值。
autofocus：当值为"autofocus"时，规定输入字段在页面加载时会获得焦点。不适用于type="hidden"。
checked：当值为"checked"时，规定此input元素首次加载时默认已被选中。
disabled：当值为"disabled"时，禁用此input元素。被禁用的input元素既不可用，也不可点击。可通过JS在达成某些条件时，删除其disabled值使其可用。不适用于type="hidden"。
form：值为某些表单的id（不能是name）。规定该输入字段所属的一个或多个表单（即使在这些表单之外）（多个表单用空格分隔）。
formaction/formenctype/formmethod/formtarget：取值与表单对应属性相同。覆盖表单的action/enctype/method/target属性。适用于type="submit"和type="image"。
height/width：值为像素或百分比。定义input字段的高度/宽度。仅适用于type="image"。
max/min：规定输入字段的最大值/最小值。
maxlength：规定输入字段中的字符的最大长度。
multiple：当值为"multiple"时，规定输入子段可选择多个值。仅适用于type="email"、type="file"。
name：定义 input 元素的名称。
pattern：限制输入字段的值的模式或格式。格式使用正则表达式。
placeholder：提供可描述输入字段预期值的提示信息（hint），规定帮助用户填写输入字段的提示。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
readonly：当值为"readonly"时，规定输入字段为只读。只读字段不能修改，但仍可选中该子段。可通过JS在达成某些条件时，删除其readonly值，将输入字段切换到可编辑状态。
required：当值为"required"时，指定该输入字段的值是必填/必选的。不填时提交表单会提交失败并出现提示。
size：定义输入字段的宽度。
step：规定输入字段的合法数字间隔（且输入只能为数字）。如：step="3"时，合法数字输入只能为。可与min, max一起使用以创建准确的合法值范围。用于下面的input类型：number、range、date、datetime、datetime-local、month、time、week。
type：规定 input 元素的类型。
value：规定 input 元素的值，为输入字段的默认值和提交到服务器的值。输入的内容会更改并存储在该input元素的value中。

例：

  1. <form>
  2. First name: <input type="text" name="firstname"><br>
  3. Last name: <input type="text" name="lastname">
  4. </form>

属性：
alt：设置在不支持单选按钮时显示的替代文本。
checked：表示当前按钮的状态，可设置checked="checked"来使按钮默认被选中。
id/name：设置单选按钮的id/名称。
tabIndex：设置单选按钮的tab键控制次序。
value：提交到服务器的值（选中某按钮会传递它的value）。

例：

  1. <form>
  2. <p>你生活在哪个国家？</p>
  3. <input type="radio" name="country" value="China" checked="checked">中国<br />
  4. <input type="radio" name="country" value="the USA">美国
  5. </form>

属性：
同单选按钮（radio buttons）。

注意，点击提交按钮后，网页似乎会被重新加载，导致其它元素被重新加载。如果不想这样，使用一般的button按钮实现提交。
但还要注意，不使用submit提交会导致<input>的内容检查不起作用（如min, step, required检查）。

属性：
同单选按钮（radio buttons）。但按钮上显示的文字与value属性相同。

属性：
同单选按钮（radio buttons）。但按钮上显示的文字与value属性相同。

例：

  1. <form action="demo.php">
  2.   Email: <input type="text" name="email"><br>
  3.   Pin: <input type="text" name="pin" maxlength="4"><br>
  4.   <input type="reset" value="重置">
  5.   <input type="submit" value="提交">
  6. </form>

属性：
alt：设置在不支持该按钮时显示的替代文本。
disabled：当值为"disabled"时，规定禁用该按钮。
form：值为某些表单的id（不能是name）。规定该输入字段所属的一个或多个表单（即使在这些表单之外）（多个表单用空格分隔）。
id/name：设置单选按钮的id/名称。
tabIndex：设置单选按钮的tab键控制次序。
value：提交到服务器的值。

属性：
accept：设置指示文件传输的 MIME 类型的列表（逗号分隔）。
其余同可点击按钮（button）。但value为用户输入设置的文本/上传文件后，FileUpload对象的文件名。

属性：
同可点击按钮（button）。

属性：
alt：必需，规定图像的替代文本。
src：必需，规定显示图像的URL。

属性：
step, min, max：见<input>属性。
value：设置或返回date字段的value值，如value="3"。

属性：
step, min, max：见<input>属性。
value：设置或返回date字段的value值，如value="2021-09-01"。

属性：
value：设置或返回week字段的value值，如value="2021-W35"。

select标签

通过<select>创建单选或多选菜单（下拉选择列表）。

属性：
autofocus：当值为"autofocus"时，规定在页面加载后文本区域自动获得焦点。
disabled：当值为"disabled"时，规定禁用该下拉列表。
form：值为某些表单的id（不能是name）。规定该下拉列表所属的一个或多个表单（即使在这些表单之外）（多个表单用空格分隔）。
multiple：当值为"multiple"时，规定可选择多个选项。
name：规定下拉列表的名称。
required：当值为"required"时，规定它是必填的。
size：规定下拉列表中可见选项的数目。

属性：
disabled：当值为"disabled"时，规定禁用此选项。
label：规定更短版本的选项。下拉列表中会显示出所规定的更短版本。只有IE 7+支持label属性。
selected：当值为"selected"时，规定选项（在首次显示在列表中时）表现为选中状态。当有多个选项有该属性时，会显示其中最后的选项。
value：提交到服务器的值。

属性：
label：必需，为该选项组规定描述。
disabled：当值为"disabled"时，规定禁用此选项组。

例：
该下拉列表默认显示Mercedes，且禁用French Cars选项组。

  1. <select>
  2.   <optgroup label="Swedish Cars">
  3.     <option value="volvo">Volvo</option>
  4.     <option value="saab">Saab</option>
  5.   </optgroup>
  6.   <optgroup label="German Cars">
  7.     <option value="mercedes" selected>Mercedes</option>
  8.     <option value="audi">Audi</option>
  9.   </optgroup>
  10.   <optgroup label="French Cars" disabled>
  11.     <option value="none">???</option>
  12.   </optgroup>
  13. </select>

fieldset标签

<fieldset>可将表单内容的一部分打包/分组，生成一组相关表单的字段。
当一组表单元素放到<fieldset>内时，浏览器会以特殊方式来显示它们：它们可能有特殊的边界、3D效果，甚至可能创建一个子表单来处理这些元素。

属性：
disabled：当值为"disabled"时，规定禁用此fieldset。
form：值为某些表单的id（不能是name）。规定该fieldset所属的一个或多个表单（即使在这些表单之外）（多个表单用空格分隔）。
name：规定 fieldset 的名称。

用<legend>为<fieldset>元素定义标题（caption）。

例：

  1. <form>
  2.   <fieldset>
  3.     <legend>健康信息</legend>
  4.     身高：<input type="text" /><br />
  5.     体重：<input type="text" />
  6.   </fieldset>
  7. </form>

label标签

<label>为<input>元素定义标注/标记。它没有特殊显示效果，但如果点击<label>元素内的文本，会触发点击相应的<input>元素，即选中对应的选项或将焦点移到对应的文本框。
定义<label>的for属性为一个<input>元素的id，以关联该元素。

注：
在多行文本框中每行加入一个<label>包含文本框名称，并设置文本右对齐、宽度一致，可实现多行文本框的竖直对齐（注意设置display: inline-block）。

例：

  1. <p>
  2.     <label for="id" style="width: 80px; padding: 2px 6px; display: inline-block; text-align: right;">ID：</label><input id="id" type="number" step="1" min="1" required>
  3. </p>
  4. <p>
  5.     <label for="name" style="width: 80px; padding: 2px 6px; display: inline-block; text-align: right;">姓名：</label><input id="name" type="text" required>
  6. </p>
  7. <p>
  8.     <label for="email" style="width: 80px; padding: 2px 6px; display: inline-block; text-align: right;">email：</label><input id="email" type="text" required>
  9. </p>
  10. <p>
  11.     <label for="gender" style="width: 80px; padding: 6px 6px; display: inline-block; text-align: right;">性别：</label>
  12.     <select id="gender">
  13.         <option value="male">男</option>
  14.         <option value="female">女</option>
  15.         <option value="secret" selected>保密</option>
  16.     </select>
  17. </p>

属性：
for：规定 label 绑定到哪个表单元素。
form：规定 label 字段所属的一个或多个表单。

HTML 框架

属性：
frameborder：取值为0或1。规定是否显示框架周围的边框。
height/weight：规定iframe的高度/宽度。单位为像素或百分比。
marginheight/marginweight：定义iframe的 顶部和底部/左侧和右侧 的边距。单位为像素。
name：规定 iframe 的名称。
sandbox：启用对行内框架中内容的额外限制。其值会移除对应的限制，比如当值为空字符串时，启用所有限制；当值为空格分隔的预定义值列表时，会移除这些限制。

一共有四种限制可被启用或移除：
allow-same-origin：允许 iframe 内容被视为与包含文档有相同的来源。
allow-top-navigation：允许 iframe 内容从包含文档导航（加载）内容。
allow-forms：允许表单提交。
allow-scripts：允许脚本执行。

scrolling：取值为yes, no, auto。规定是否在 iframe 中显示滚动条。
seamless：当值为"seamless"时，规定 iframe 看上去像是包含文档的一部分（无边框或滚动条）。
src：规定在 iframe 中显示的文档的 URL。
srcdoc：值为HTML代码。规定在 iframe 中显示的页面的 HTML 内容。如果浏览器支持该属性，会覆盖src属性；否则会被忽略。

例：
<a>标签的target属性可以设置为某框架，点击链接时页面会显示在对应框架中。
以下例子中，点击链接后runoob网页会显示在框架中。

  1. <p>
  2.     该内联框架不会换行。
  3.     <iframe src="https://home.cnblogs.com/u/SovietPower/" name="iframe_a" width="300" height="200">
  4.         <p>您的浏览器不支持框架。</p>
  5.     </iframe>
  6.     虽然是块级标签。
  7. </p>
  8. <p><a href="https://www.runoob.com" target="iframe_a">GO TO RUNOOB.COM</a></p>

注：
X-Frame-Options HTTP 响应头是用来给浏览器指示是否允许一个页面在<frame>, </iframe>或者<object>中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌套到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。
X-Frame-Options有三种取值：
DENY：表示该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。
SAMEORIGIN：表示该页面可以在相同域名页面的frame中展示。
ALLOW-FROM uri：表示该页面可以在指定来源的frame中展示。

HTML 颜色

HTML使用RGB或RGBA（Red-Green-Blue-Alpha）颜色值。RGBA为RGB拓展了alpha通道，允许设置透明度（取值为0~1，0为全透明）。
RGB共有1600多万种颜色取值（）。

颜色由红(R)、绿(G)、蓝(B)组成。颜色值（RGB）是一个表示了红、绿、蓝的数值，记作#号后加六位或三位十六进制数（用三位表示时，如#RGB，会表示#RRGGBB）。
红、绿、蓝的每个颜色的最小值为0（0x00），最大值为255（0xFF），用两位或一位十六进制数表示（为一位时表示另一位与其相同）。

使用颜色名称可代替颜色值。
有141种颜色定义了颜色名称。其中有17种标准颜色：黑，蓝，水，紫红，灰，绿，石灰，栗，海军，橄榄，橙，紫，红，白，银，蓝绿，黄。

HTML 脚本

JS笔记见：https://www.zybuluo.com/SovietPower/note/1820040

注意，假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。<frameset>标签之后的脚本会被忽略。

属性：
type：必需，指示脚本的 MIME 类型。
async：当值为"async"时，规定异步执行脚本（仅适用于外部脚本）。
charset：规定在外部脚本文件中使用的字符编码。
defer：当值为"defer"时，对脚本执行进行延迟，直到页面加载为止。如果脚本不会改变文档内容，可将defer属性加入到<script>标签中，以便提高加载文档的速度。因为这告诉浏览器它能安全地加载文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经完全显示给用户。只有IE支持defer。
src：规定外部脚本文件的 URL。
xml:space：规定是否保留代码中的空白。

HTML 短语标签

HTML 其它标签

textarea标签

<textarea>定义多行的文本输入控件。该文本区中可容纳无限数量的文本。文本的默认字体是等宽字体（通常为Courier）。

属性：
autofocus, disabled, form, maxlength, placeholder, readonly, required：见<input>。
cols, rows：定义文本区的大小。推荐使用CSS的height, width属性。
wrap：规定文本区域如何换行。

若wrap="wrap"，文本区不会自动换行，超出右边界的部分需移动光标才可见，只能由用户使用回车换行。
若wrap="virtual"，文本区会在显示时自动换行，即超出右边界的部分会显示到下一行。当文本内容提交时，自动换行的换行符不会被提交，即该换行符只对用户可见。
若wrap="physical"，文本区会在显示时自动换行，即超出右边界的部分会显示到下一行。当文本内容提交时，自动换行的换行符也会被提交，即该换行符不仅对用户可见，还会同输入内容一起被提交。

meter标签

<meter>显示数值条，来表现一个进度或数据度量。也被称为 gauge（尺度）。
不用做进度条，用做度量，如磁盘使用情况。进度条使用<progress>。
IE不支持。

属性：
value：必需，规定度量的当前值。
form：规定其所属的一个或多个表单。
low/high：规定被视为合适的数值范围（感觉上是：在该范围中的数值条为绿色，该范围外的数值条为黄色。但实际表现并不如此，而且有红色，很迷惑）。low/high值必须合法，如low应不小于min，不大于high, max。
min/max：规定数值条最左最右的界限代表的值（低于min则条为空，高于max则条全满）。
optimum：规定一个最佳值。

例：

  1. <meter value="3" min="0" max="10">会显示3/10（meter间的内容不会被显示）</meter><br>
  2. <meter value="0.6">会显示60%</meter>

progress标签

<progress>显示进度条，来标示任务的进度（进程）。
不用做度量，用做进度条。数值度量使用<meter>。
IE不支持。

属性：
value：必需，规定当前完成的数量（进度条显示量即为value/max）。
max：默认为1。规定应完成的数量，即进度条满时value应达到的数值。

例：

  1. <progress value="3" max="10">会显示0.3的进度状态（progress间的内容不会被显示）</progress><br>
  2. <progress>不填写value时，会显示进度左右移动的进度条</progress>

HTML 样式 CSS

具体见：https://www.zybuluo.com/SovietPower/note/1824527

CSS（Cascading Style Sheets，层叠样式表）用于渲染HTML元素标签的样式（定义如何显示HTML元素）。

CSS可以通过以下方式添加到HTML中:

内联样式：在HTML元素中使用style属性。
内部样式表：在HTML文档头部<head>区域使用<style>元素来包含CSS。
外部引用：使用外部CSS文件（样式表，样式通常存储在外部的.css样式表文件中）。
最好的方式是通过外部引用CSS文件。内联样式更方便。

CSS修饰标签的方式分为两种：内联和外引。
对于大部分标签，内联和外引两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如<a>标签，修改其颜色特性，必须直接修改<a>标签的特性才可。

CSS规则由两个主要部分构成：选择器和一条或多条声明。
选择器是需要改变样式的HTML元素。每条声明是一个属性:值对，属性(property)是要设置的样式属性(style attribute)，每个属性都有一个值。
每条声明以分号结束，所有声明用大括号括起来。
如：h1 {color:blue; font-size:12px;}，h1为选择器，color:blue、font-size:12px为两条声明，冒号前为属性、后为值。
为了让其可读性更强，通常一行只写一句声明。

CSS注释类似C++，以/*开始、以*/结束。

属性：
：
：
：
：
：
：
：
：
：
：

属性：
：
：
：
：
：
：
：
：
：
：

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注