本文转自（转载请注明原始出处）：38.超文本标记语言HTML详解（上），39.超文本标记语言HTML详解（下），部分内容有整理。
HTML(Hyper Text Markup Language)是超文本标记语言，不是编程性语言。使用标记标签标记纯文本。
1）HTML版本
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
文档类型声明：声明采用HTML 5的语句是<!DOCTYPE html>，这个语句不属于HTML语言，只告诉浏览器HTML文档使用的HTML版本，并且这个语句不区分大小写。
2）HTML标签
使用尖括号包围的关键词称为标签。标签一般成对出现，如<p>和</p>，分别称为开始标签（opening tag）和结束标签（closing tag），或者开放标签和闭合标签，不成对出现的标签如<br />。
HTML标准推荐所有标签使用小写，HTML所有标签可以参考HTML 参考手册。
3）HTML元素
HTML元素由开始标签、元素内容及结束标签组成，有的HTML元素具有空内容，称为空元素。
空元素在开始标签中进行关闭，并且加上空格和斜杠，如<br />，空元素没有结束标签。
HTML元素可以嵌套存在。
4）HTML属性
HTML属性为HTML元素提供更多信息，在开始标签中设置，格式为name="value"。
HTML标准推荐属性使用小写，并且始终为属性值添加引号，一般使用双引号，如果值本身含有双引号，需要使用单引号。
HTML的所有属性可以参考HTML 全局属性 。
5）HTML文档头
要在网页中正常显示中文或其他 UTF-8 编码，可以在 <head> 元素中添加：<meta charset="utf-8" />
<head>
<meta charset="UTF-8">
<title>Title</title>
</head><head> 元素中必须包含 <title> 标签，表示文档标题，这个标题会用在搜索引擎的搜索结果展示、浏览器标签标题、收藏夹标题。
<base href="地址" target="_blank/_self/_top/_parent/iframe_name" />：为页面上的所有链接规定默认地址和默认目标，只能放在 <head> 元素中，并且只能有一个。如果超链接标签 <a> 中提供的 href 属性或图片标签 <img> 中提供的 src 属性是绝对路径，则 base 的设置无效。
<link rel="关系" type="类型" href="URL">：定义文档与外部资源的关系，只能放在<head>元素中，不过可以出现数次。比如引用CSS文件：
<link rel="stylesheet" type="text/css" href="sample.css" /> <meta> 标签用于为网页提供元数据，比如网页的描述、关键词、作者等等：
<meta name="keywords" content="Love,Peace,World" /><!--定义网页关键词-->
<meta name="description" content="This page is about love and peace." /><!--定义网页描述-->
<meta name="author" content="mars loo" /><!--定义网页作者-->
<meta http-equiv="refresh" content="5" /><!--定义页面5秒钟刷新一次-->5.1 标题
<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>：用来标记1~6级标题，块级元素。数字越小，标题级别越高（越重要）。
5.2 水平线
<hr/>：水平线标记，块级元素，表示文档内容变化。
5.3 注释
<!-- 注释内容 -->：为HTML文档添加注释，可以跨越多行。
5.4 段落
<p></p>：标记段落，块级元素。
5.5 换行
<br/>：用于换行，行内元素。浏览器渲染页面时，会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格显示。如果需要显示多个空格，使用多个 表示。
5.6 超链接
<a></a>：标记超链接，内联元素。
- href 属性指向链接地址
- target 属性说明在什么位置显示链接文档：
- _blank：在一个新打开、未命名的窗口中载入链接文档。
- _self：在相同的框架中打开链接文档。
- _parent：在父框架中打开链接文档。
- _top：在顶级框架中打开链接文档。
- iframe_name：在指定的iframe中打开链接文档。
- download 属性表示不跳转链接，而是以指定的文件名直接下载文件，浏览器会自动确认文件的后缀。
- id 属性（HTML5不支持使用name属性创建锚）可以创建本页面内的锚，然后使用href属性定义到转到这个锚的超链接：
<a href="https://my.oschina.net/u/3314358/" target="_blank">访问我的博客</a>
<a id="anchor">这里</a>
<a href="#anchor">锚</a>超链接可以用于邮件发送，比如(使用%20代替空格)：
<a href="mailto:mars@loo.com?cc=sample@example.com&bcc=xxx@qq.com&subject=Hello%20Mars&body=你好%20博越！" style="text-decoration:none">写信给mars</a>可以把图像作为超链接元素的内容，比如：
<a href="#">
<img src="sample.gif" width="50px" height="25px" />
</a>5.7 图片
<img src="图片地址" width="宽度" height="高度" alt="图片无法加载时的显示信息" />：显示图片，内联元素。
- src属性指向图片地址(本地地址或网络URL)。
- width和height属性分别控制宽和高。
使用图片作为地图：
<img src="china.jpg" width="145" height="126" alt="China" usemap="#chinamap">
<map name="chinamap" id="chinamap">
<area shape="rect" coords="0,0,82,126" alt="Beijing" href="Beijing.html">
<area shape="circle" coords="90,58,3" alt="Tianjin" href="Tianjin.html">
</map>a. map 标签
<map> 标签的 name 和 id 属性哪个生效取决于浏览器，所以 HTML5 规定必须同时提供 name 和 id 属性。
b. area 标签
如果提供了 href 属性，则必须提供 alt 属性。
coords 属性和 shape 属性配合使用：
| coords属性 | shape属性 |
|---|---|
| x,y, radius | circle |
| x1, y1, x2, y2 | rect |
| x1, y1, x2, y2, …, xn, yn | poly |
target 属性同样可以指定在何处打开新的链接。
5.8 格式化文本
<sub> </sub>：下标标记，下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。 <sup> </sup>：上标标记，上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。 <ins cite="url" datetime="insert_time"> </ins>：插入字标记，通常会显示下划线效果，cite 属性指向一个解释为什么插入的URL，datetime 属性说明插入的时间，格式为YYYY-MM-DDThh:mm:ssTZD，比如2016-08-15T22:55:03Z，其中 TZD（时区指示器 time zone designation)中的 Z 表示是格林威治时区。 <del cite="url" datetime="delete_time"> </del>：删除字标记，通常会显示为删除效果，cite属性指向一个解释为什么删除的URL，datetime属性说明删除的时间，格式如<ins>标签。 <strong> </strong>：重要文本。 <em> </em>：强调文本。
5.9 地址
<address> </address>：如果在<body>元素内定义，表示HTML文档的作者/拥有者的联系信息；如果在<article>元素内定义，表示文章的作者/拥有者的联系信息，块级元素。不要使用这个标签表示邮政编码信息，除非这些信息是联系信息的组成部分。
5.10 缩写
<abbr title="全称"> </abbr>：定义缩写，title属性定义鼠标悬浮在单词上时弹出的全称是什么，行内元素。
5.11 改变文字方向
<bdo dir="方向"> </bdo>：定义文字显示方向，dir属性取值有两个：ltr（从左到右）、rtl（从又到左），行内元素。
5.12 引用文字
<blockquote cite="引用的地址"> </blockquote>：定义长引用，块级元素。 <q cite="引用的地址"> </q>：定义短引用，行内元素。
5.13 定义项目
1. 如果dfn标签自己包含title属性，则title属性定义项目。 <dfn title="定义内容">定义</dfn>：定义项目或缩写的定义
2. 如果dfn标签包含abbr元素，则abbr元素中的title属性定义项目。 <dfn><abbr title="World Health Organization">WHO</abbr></dfn>
3. 否则，<dfn>文本内容即是项目，并且父元素包含定义。 <p><dfn>WHO</dfn> World Health Organization </p> <dfn>是行内标签。
5.14 著作标题
<cite>标题</cite>：表示著作标题，行内元素。
5.15 计算机输出
<samp>示例</samp>：可以把计算机的输出内容放在这两个标签之间，但是换行还是需要是用<br />元素。
5.16 代码
<code>代码</code>：显示计算机代码。
如果要保留代码中的缩进，需要使用<pre>标签。
5.17 预格式文本
<pre>格式文本</pre>：显示预格式文本，且为等宽显示。
5.18 变量
<var>变量名</var>：定义计算机变量。
5.19 打字机输出
<tt>打字机输出</tt>：表示打字机输出。
5.20 表格
<table border="1"></table>：用来创建一个表格，块级元素。border属性值只允许为1（有边框）或""（无边框）。 <tr></tr>：用来表示表格的行。 <td></td>：用来表示每个单元格，内联元素。 <th></th>：用来定义表头，语义上讲是表格某一行或某一列的标题。 <caption></caption>：定义表格标题。
表格中常用的属性如colspan可以定义表格的元素跨越几列，rowspan定义跨越几行，cellpadding定义单元格内容与边框之间的留白，cellspacing定义单元格之间的距离。
<table border="1">
<tr>
<th>Name</th>
<th>Tel.</th>
</tr>
<tr>
<td rowspan="2">Tom K.</td>
<td>15613140520.</td>
</tr>
</table>效果如下：
<colgroup span="列数"></colgroup>：用于将表格的列分组，span属性定义列的数目：
<table border="1">
<colgroup span="2" style="background-color:blue"></colgroup>
<tr>
<th>Name</th>
<th>Gender.</th>
<th>Tel.</th>
</tr>
<tr>
<td rowspan="2">Tom K.</td>
<td>Male.</td>
<td>15613140520.</td>
</tr>
</table>效果如下：
<col span="列数"></col>：在colgroup中实现更精细控制：
<table border="1">
<!--<colgroup span="2" style="background-color:blue"></colgroup>-->
<colgroup>
<col span="2" style="background-color:yellow" />
<col style="background-color:red" />
</colgroup>
<tr>
<th>Name</th>
<th>Gender.</th>
<th>Tel.</th>
</tr>
<tr>
<td rowspan="2">Tom K.</td>
<td>Male.</td>
<td>15613140520.</td>
</tr>
</table>效果如下：
<thead></thead>：定义表头，<tfoot></tfoot>：定义表格的页脚，<tbody></tbody>：定义表格的主体。
在使用时，这三个标签必须作为<table>的子标签，位于<caption>和<colgroup>之后，且三个标签的顺序是<thead>-><tfoot>-><tbody>：
<table border="1">
<caption>Table Sample</caption>
<!--<colgroup span="2" style="background-color:blue"></colgroup>-->
<colgroup>
<col span="2" style="background-color:yellow" />
<col style="background-color:red" />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Gender.</th>
<th>Tel.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Dummy</td>
<td>Dummy</td>
<td>Dummy</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tom K.</td>
<td>Male.</td>
<td>15613140520.</td>
</tr>
</tbody>
</table>效果如下：
5.21 列表
<ul></ul>：定义无序列表，块级元素。HTML5 中 ul 标签的属性已经被废弃，应该用 CSS 控制项目符号的形状，如style="list-style-type:disc" 表示使用实心圆形，circle 表示使用空心圆形，square 表示使用实心正方形。
<ol></ol>：定义有序列表，HTML5 中已经废弃了 ol 标签的属性，控制列表的起始值、项目符号样式应该使用 CSS 控制。
<li></li>：定义每一条列表项
比如：
<ul style="list-style-type:circle">
<li>
Orange
</li>
<li>
Apple
</li>
</ul>效果如下：
a. 定义列表
<dl></dl>：用于定义列表，其中： <dt></dt>：表示自定义列表项。 <dd></dd>：表示自定义列表项的定义，比如：
<dl>
<dt>WWW</dt>
<dd>world wide web</dd>
<dt>HTTP</dt>
<dd>hypertext transfer protocal</dd>
</dl>效果如下：
5.22 块级元素与内联元素
定义块级元素：<div></div>
定义内联元素：<span></span>
使用 <div> 和 <span> 配合 CSS 进行页面布局和渲染，而不是使用 <table>。
6）表单
<form></form>：定义一个表单，属性值列表：
- action：表单提交地址。
- enctype：表单编码格式，有3种：
- application/x-www-form-urlencoded：enctype的默认值，空格转换成+号，特殊字符转换成ASCII HEX编码。
- multipart/form-data：不对特殊字符编码，上传文件时，必须用此格式。
- text/plain：空格转换成+号，但是不对特殊字符编码。
- method：表单提交方式（post/get）。
- autocomplete：是否开启自动完成（on/off）。
- novalidate：不对表单进行验证，比如：
<form action="" novalidate="novalidate">
<input type="email" name="user_email" />E-mail:
<input type="submit" value="Submit">
</form>- 这样表单不会对 email 这种 input 做验证。
- target：在什么位置提交表单，即在什么位置显示表单提交后的结果，与
<a>标签的 target 属性一样。
6.1 表单输入元素
input
<input>标签是最基本的 form 表单的输入元素，属性列表如下：
- type：输入的类型：
- button：点击按钮，与 javascript 配合使用。
- checkbox：复选框，
checked="checked"表示预选该框，配合 name 和 value 属性使用。 - color：拾色器，后台接收到的是 #RRGGBB 值：
- date：日期选择器，后台接收到的是YYYY-MM-DD值：
- datetime-local：日期时间选择器，后台接受的是YYYY-MM-DDTHH:mm值：
- email：邮箱，有邮箱格式判断，但是没有判断空字符串（Chrome浏览器），移动设备会根据此类型变化输入法键盘格式。
- file：文件，有“浏览”按钮供选择文件。
- hidden：隐藏值，配合 name、value、Javascript 使用。
- image：将图片作为提交按钮，同时浏览器还会上传用户点击图片的坐标点，以x、y表示。
- month：月选择器，后台接收到的是 YYYY-MM 值（虽然客户端可以选择到天）。
- number：数字选择器，配合 min、max、step、value 可以规定最小值、最大值、步长、默认值。
- password：密码。
- radio：单选按钮，
checked="checked"表示预选该按钮，配合 name 和 value 属性使用。 - range：不精确数字输入，配合 min、max 规定最小值、最大值：
- reset：重置按钮，充值表单为默认值。
- search：搜索字段，外表看起来与text没有什么不同。
- submit：提交按钮，可以不提供value属性。
- tel：电话号码字段，没有格式检查。
- text：单行文本字段。
- time：时间选择器，后台接受HH:mm（小时：分钟)值。
- url：URL，有基本的格式检查，同样没有判空（Chrome)。
- week：年和周选择器，后台接受YYYY-WMM值，比如2016-W08表示2016年8月。
- accept：仅用于
type="file"时，表示接受的文件类型（如果有多个，使用逗号分隔），如：- audio/*：声音文件。
- vedio/*：视频文件。
- image/*：图片文件。
- 其他MIME_TYPE：参考这里。
- alt：仅用于
type="image"时，用于图片无法加载的替换文字。图片无法加载时，也会上传鼠标点击处在图片占位符中的偏移量的x、y值。 - autocomplete：同
<form>标签的autocomplete属性。 - autofocus：该
<input>元素自动获得焦点，如autofocus="autofocus"。 - checked：见
<form>的type属性为checkbox和radio的标签，预选该多选框或单选按钮。 - disabled：禁用该
<input>元素，不适用于type="hidden"的<input>元素。 - form：设置
<input>元素所属的form的id（如果有多个，用空格分隔），表示该输入内容属于哪个表单，适用于<input>元素不在<form>元素中的情形。 - formaction：功能等同与
<form>标签中的action属性，但是配合类型为submit或image的<input>标签可以实现更精细化的控制。 - formnovalidate：在
type="submit"的标签中设置，表示采用不验证提交（会覆盖<form>元素的 novalidate 属性），比如<input type="submit" formnovalidate="formnovalidate" value="不验证提交" />。 - formtarget：表单在什么位置提交（会覆盖
<form>元素的target属性），功能类似<form>元素的target属性。 - height：只适合
type="image"的<input>元素，用来规定图片的高度。 - list：引用
<datalist>元素的id，用于输入有预设值的列表，如：
效果如下：<input list="browser_id" /> <datalist id="browser_id"> <option>360</option> <option>Chrome</option> <option>Firefox</option> </datalist>
- max：定义
<input>元素可以输入的最大值，可以配合type为如下值的<input>元素工作：number、range、date、datetime、datetime-local、month、time 和 week。 - maxlength：定义
<input>元素可以输入的最多字符个数。 - min：同max属性，但是定义了最小值。
- multiple：表示
<input>元素可以输入多个值，可以配合type为file或email的<input>元素使用：
在浏览器中可以输入用逗号分隔的多个email地址：<form action="/check" method="post"> <input type="email" name="user_email" multiple="multiple" /> <input type="submit" /> </form>
后台服务器收到的内容为整个字符串，要获取每个email地址需要自己分隔。
在浏览器可以上传多个文件：<form action="/check" method="post" enctype="multipart/form-data"> <input type="file" name="pro" multiple="multiple" /> <input type="submit" /> </form>
后台服务器接收方法为（Flask）：request.files.getlist('pro') - name：设置
<input>元素的名称，服务器获取数据需要使用根据这个名字。 - pattern：设置
<input>元素接受的输入格式，适用于type为text、search、url、tel、email 和 password的<input>元素，配合全局title属性为用户提供格式解释：
效果如下：<form action="/check" method="post"> <input type="text" name="num_id" pattern="\d{3}" title="Three Numbers" /> <input type="submit" /> </form>
- placeholder：为输入项提供简短的说明，适用于type为text、search、url、tel、email 和 password的
<input>元素。 - readonly：属性值是只读的，需要配合value属性提供预设值，也可以配合Javascript实现更精细的控制。
- required：该
<input>元素是必填项，适合type值为text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file的<input>元素。 - size：
<input>元素的可见宽度，适合type值为如下的<input>元素：text、search、tel、url、email 和 password。 - src：适合
type="image"的<input>元素，定义图片的来源。 - step：定义
<input>元素的取值的步长，适合type值为如下的<input>元素：number、range、date、datetime、datetime-local、month、time 和 week。一般需要配合min和max属性使用。 - value：定义
<input>元素的值，对于不同类型的<input>元素含义不同：- 对于 button、reset、submit 类型 - 定义按钮上的文本。
- 对于 text、password、hidden类型 - 定义输入字段的初始（默认）值。
- 对于 checkbox、radio、image类型 - 定义与
<input>元素相关的值，当提交表单时该值会发送到表单的 action URL。
- width：适合
type="image"的<input>元素，用来规定图片的宽度。
label
label标签用来为<input>元素添加说明，没有特殊视觉效果，不过如果在label元素内点击文本，与选择label标签绑定的元素效果一样，提高了鼠标用户的可用性。属性如下：
- for：与那个元素绑定，设置为被绑定元素的id。
- form：
<label>元素属于哪个<form>元素，同样设置为form的id，多个id之间用空格分隔。
datalist
datalist元素为<input>标签提供有预选值的列表，有提示功能，也可以输入不是预选值的值，参考<input>元素type="list"属性的说明。
textarea
textarea是多行文本输入标签，默认可以输入无限字符，属性列表：
- autofocus：文本框在页面载入时自动获取焦点。
- cols：文本框的列数（以字符为单位）。
- disabled：文本框被禁用。
- form：文本框属于哪个
<form>的id，多个id用空格分隔。 - maxlength：文本框允许输入的最多字符个数。
- name：文本框名称。
- placeholder：简短说明。
- readonly：文本框只读。
- required：文本框是必填项。
- rows：文本框行数。
- wrap：定义了cols属性时，如果一行文字超出了cols定义的宽度，提交的文本是否包含换行，取值为soft（不包括）或hard（包括）。
select
提供预选值的下拉列表，属性列表如下：
- autofocus：下拉列表在页面载入时自动获取焦点。
- disabled：下拉列表被禁用。
- form：下拉列表属于哪个
<form>的id，多个id用空格分隔。 - multiple：下拉列表可以多选。实际使用中，Windows用户需要按住Ctrl进行多选，Mac用户需要按住Command进行多选，这需要提示给用户，所以这种情况下直接用多选框更好。
- name：下拉列表名称。
- required：提交表单前必须在下拉列表中选择一项。
- size：下拉列表的可见项数，默认值是1。如果size的值小于
<option>元素的数量，自动会出现滚动条。
optgroup
optgroup元素将相关的选项元素分组，属性列表如下：
- disabled：选项组被禁用。
- label：为选项组添加描述
option
option元素定义<select>元素和<datalist>元素的一个选项，属性列表如下：
- disabled：选项被禁用。
- label：定义选项的更简短描述。
- selected：选项在页面初次加载时被选中。
- value：选项发往服务器的值。
比如：
<form action="/check" method="post">
<select name="car">
<optgroup label="Chinese cars" disabled="disabled">
<option label="QQ" value="Chery">Chery</option>
<option label="GC9" value="Geely">Geely</option>
</optgroup>
<optgroup label="Swedis cars">
<option label="XC90" value="Volvo">Volvo</option>
<option label="Saab" value="Saab">Saab</option>
</optgroup>
</select>
<input type="submit" />
</form>效果如下： 
6.2 fieldset
fieldset将表单中相关的输入元素分组，在浏览器上显示时会有一条框线，属性列表如下：
- disabled：该分组被禁用。
- form：该分组属于哪个form的id，多个id用空格分开，适用于fieldset不在form中的场景。
- name：分组的命名，可以配合javascript做精细控制。
比如：
<form action="/check" id="demo" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<button type="button" onclick="form.change_color.style.backgroundColor='#00FF00';">
change fieldset background
</button>
<button type="button" onclick="activateFieldset()">
activate fieldset
</button>
<input type="submit" value="submit" />
</form>
<fieldset name="change_color" form="demo">
<label for="password">Password:</label>
<input type="password" name="password" id="password" form="demo" />
license_id
</fieldset>
<fieldset disabled="disabled" form="demo" id="license">
<label for="license_id">License:</label>
<input type="text" name="license_id" id="license_id" form="demo" />
license_id
</fieldset>
<script>
function activateFieldset(){
var e = document.getElementById("license"):
e.disabled="";
}
</script>效果如下（在form外部的fieldset中的元素的内容如果想上传到服务器，需要依靠元素自身的form属性 ，而不是fieldset的form属性）：
6.3 legend
legend 标签配合 fieldset 标签，为表单的分组定义名字，比如：
<form action="/check" id="demo" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<fieldset>
<legend>Passowrd</legend>
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" value="submit" />
</form>效果如下： 
6.4 button
button元素定义一个按钮，这个按钮可以在<form>元素中或者不在<form>元素中，由于浏览器兼容性问题，使用<button>元素时必须定义type和value两个属性。其属性列表如下：
- autofocus：页面加载时，按钮自动获得焦点。
- disabled：禁用按钮。
- form：按钮属于哪个表单的id，多个id用空格分隔。
- formaction：当
type="submit"时，定义向何处发送表单数据，会覆盖form元素的action属性。 - formenctype：当
type="submit"时，向服务器提交表单时采用何种编码，取值与form元素的enctype一样，但是会覆盖form元素的enctype的值。 - formmethod：当
type="submit"时，向服务器提交请求的方式（get、post），会覆盖form元素的method属性。 - formnovalidate：当
type="submit"时，定义该按钮提交的内容在客户端浏览器不必验证，覆盖form元素的novalidate属性。 - formtarget：当
type="submit"时，定义表单返回的内容在什么位置显示，会覆盖form元素的target属性。 - name：定义按钮名称。
- type：按钮类型，取值为button/reset/submit。
- value：按钮的提交值，因为有的浏览器使用
<button></button>标签之间的值，有的使用button元素的value值，所以最好定义成一致的值。
7）表单输出
output标签用于展示输出结果，属性列表如下：
- for：输出与页面中哪个元素有关，填写元素的id，如果id有多个，使用空格分隔。
- form：输出属于哪个表单，填写表单的id，如果有多个，使用空格分隔。
- name：输出对象的名称。
比如：
<form action="#" oninput="out.value=parseInt(a.value)+parseInt(b.value)">
0<input value="50" type="range" max="100" min="0" name="a" />100+
<input type="text" value="50" readonly="readonly" name="b" />=
<output name="out" for="a b">100</output>
</form>
效果如下：
8）HTML框架
iframe标签定义内联框架，属性列表如下：
- height：框架的高度，单位为像素。
- width：框架的宽度，单位为像素。
- sandbox：沙盒，对框架中的内容增加限制，比如（如果是限制的组合，需要用空格分隔）：
""：开启所有限制（不允许提交表单、不允许运行脚本、不允许超链接（除了target="_self"的以外））。- allow-forms：允许表单提交。
- allow-scripts：允许运行脚本。
- allow-top-navigation：允许超链接加载内容到顶级浏览视窗。
- allow-same-origin：允许同域请求。
- seamless：框架没有边框和滚动条，看起来像是原网页的一部分。
- src：框架中显示网页的URL。
- srcdoc：规定框架中的页面的HTML代码。
通过HMTL框架在同一个浏览器窗口中显示不止一个页面，比如：
<iframe src="./401.html" width="500px" height="200px"></iframe>
未认证页面 401.html 示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>401 Unauthorized</title>
</head>
<body>
<h1>401 Unauthorized</h1>
<p>This server could not verify that
you are authorized to access the document requests.
Either you supplied document the wrong credentials (e.g.,bad password),
or your browser doesn't understand how to supply the credentials
required.
</p>
</body>
</html>显示效果如下：
有一种应用场景是，在框架外部有一个超链接，点击之后希望将超链接对应的内容更新到iframe中去，这时需要在iframe中定义一个name，然后在超链接的定义中，target指向这个name:
<iframe height="50%" width="50%" frameborder="1" name="tar"></iframe>
<a href="./401.html" target="tar">Go to tar</a>开始访问页面时效果如下：
点击超链接后效果如下：
9）HTML颜色
RGB（Red，Green，Blue），由三个十六进制数字表示，#RRGGBB，可以有256*256*256种颜色表示。
10）HTML脚本
<script>标签可以用来添加客户端脚本，如javascript，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn HTML</title>
<script>
document.write('Hello world!')
</script>
</head>
<body>
</body>
</html><noscript></noscript>标签定义浏览器不支持脚本时的行为，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn HTML</title>
<script>
document.write('Hello world!')
</script>
<noscript>
Sorry,Your web browser doesn't support JavaScript.
</noscript>
</head>
<body>
</body>
</html>正常情况下，页面显示效果如下
如果设置浏览器禁用Javascript，显示效果如下：
11）HTML字符实体
某些符号不能直接在 HTML 代码中出现，比如大于号或小于号，浏览器会认为他们是 HTML 标签，使用字符实体可以解决这个问题。比如：&entity_name;或 &#entity_number;。使用 entity name 会比较方便，但是可能有的浏览器不支持某些实体名，不过所有浏览器对 entity number 的支持很完善。<表示<，>表示>。
12）HTML与CSS样式
- 内部样式
在HTML<head>中添加样式信息：
<style type="text/css">
p {color: red}
sub,sup {color: blue}
</style>- 内联样式
<a href="mailto:mars@loo.com" style="text-decoration:none">写信给mars</a> - 外部样式
<link rel="stylesheet" type="text/css" href="sample.css" />
更多控制外观的选项，比如：
<body style="background-color:PowderBlue"><!--设置背景颜色 -->
<h1 style="font-family:arial;text-align:center"><!--设置字体、对齐方式 -->
<p style="font-family:verdana;color:red;font-size:30px"><!--设置字体、颜色、文字大小 -->
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
