标签：工具 ack 表单标签 用户体验 ofo standard comm 在线交易 ×××
HTML（HyperText Markup Language，超文本标记语言），其实可以理解为普通文本加HTML标签/标记。
XHTML（eXtensible HyperText Markup Language,可扩展超文本标记语言)，是更严格、更纯净的HTML。
XML（eXtensible Markup Language，可扩展标记语言）文档是结构化文档。
HTML 4.01 -> XHTML 1.0 -> HTML 5
W3C（World Wide Web Consortium，万维网联盟）
SGML（Standard Generalized Markup Language，标准通用标记语言）是超文本格式的最高层次标准，是可以定义标记语言的元语言，甚至可以定义不必采用< >的常规方式。由于它的复杂，因而难以普及。
DTD（Document Type Definition，文档类型定义）定义HTML和XHTML的语义约束，HTML5没有DTD，在HTML5出现之前的XHTML和HTML 4.01都需要包含dtd文件的URL，浏览器一般不读取这些文件，而是只识别常见的DOCTYPE声明。
DOCTYPE声明是指HTML文档开头处的一行或两行代码，它描述使用哪个DTD。在下面的示例中，要使用的DTD是XHTML1.0 Strict的DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
过渡（transitional）版本仍然允许使用已经废弃的元素，比如font元素；严格（strict）版本禁止使用（为了把内容和表现分隔开）。
HTML5 中的一些新特性
新的特殊结构（更明确的语义元素）内容元素，不都是div
如 header、nav、article、section（分块，标题和内容）、aside、footer、main（规定文档的主要内容）；time;mark（黄色荧光笔）
新的表单控件，并对表单元素增强
如 calendar、date、time、email、url、search
用于绘画的canvas元素，可用于三维、图形与特效
用于媒介回放的video和audio元素
对本地（离线）存储的更好支持
新增文件访问API、通信API，拖放API（可以让任意元素变成可拖动）
WebSocket实现Push通信
Web worker，异步执行JavaScript文件
可部分替代JavaScript
eg：document.getElementById("×××").focus()可变成标签的属性autofocus
还有一些输入校验的属性（支持boolean值的属性，可以不用属性值）
eg：disabled属性等价于disabled="true"等价于disabled="disabled"（XHTML严格的语法），类似还有checked，readonly，selected，defer（延迟），nowrap，nohref，ismap(img中，会将用户点击图片的坐标提交给服务器）等。
HTML5其实是一种妥协式的规范，不区分大小写，元素可以省略结束标签，可以省略属性值，属性值可以不使用引号。所有连续的空格或空行都会被算作一个空格。段落元素<p>段落内的换行符将会忽略，段落内的多个空格将被一个空格所代替。</p>结束后将会插入一个空白行。
XHTML的标签与属性名称必须用小写字母
在HTML中<form>与<FORM>是一样的
XHTML元素必须结束标签
在HTML中以下语句是正确的
<p>This is an apple. <p>That is an egg.
XHTML的属性值必须加引号
在HTML中以下语句是正确的
<input type=text />
XHTML必须显式定义属性值
在HTML中以下语句是正确的
<select multiple>改为<select multiple="mutiple">
XHTML的元素必须正确地嵌套
要学会用工具验证XHTML文件
空元素：(不允许将开始标签和结束标签分开定义），可以不要斜线（并不要求遵守XML规范）
<meta/>、<br/>（换行）、<hr/>（水平线，默认3像素）、<img/>、<input/>、<link/>和area（area 元素总是嵌套在 <map> 标签中，定义图像映射中的区域）、base（所有链接的基准路径）、col、command、embed（src属性；定义嵌入的内容，比如插件swf）、keygen（name属性；规定用于表单的密钥对生成器字段；提交表单时，私钥存储在本地，公钥发送到服务器。 新元素，Internet Explorer 和 Safari不支持）、param、source、wbr（Word Break Opportunity，单词换行时机）
根元素是html元素。
head元素主要定义meta，title标题，link样式表，script脚本（经常是在</body>标签的前面）等。
<body> 与 </body> 之间的文本是可见的页面内容。
body可指定onload、onclick、bgcolor等属性。（不提倡）
eg: <body bgcolor="yellow">
<!-- This text is a comment -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title of the document</title>
<link href=“XXX.css”rel=“stylesheet” type=“text/css”/>
<script src="XXX.js" type="text/javascript"></script>
</head>
<body>
The content of the document......
</body>
</html>
div(division 划分，部分）
tr(table row)
th(table header)
td(table data)
table-cell（表格单元格）
data-自定义
可以使用Content-Type指定页面所用的字符集，但推荐直接使用charset。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
然而，就算你把它縮減成下面，所有的浏览器還是會做出相同判定（甚至包括Internet Explorer 6）：
<meta charset="UTF-8" />（8-bit Unicode Transformation Format，支持几乎所有字符）
还有GB2312（支持简体中文）、GBK（支持简体中文和繁体中文）
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。http-equiv 属性为名称/值对提供了名称，并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，服务器发送一个：content-type:text/html，告诉浏览器准备接受一个 HTML 文档。
viewport让我们的网页适配或响应各种不同分辨率的移动设备。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
content="width=device-width"是让当前viewport的宽度等于设备的宽度。设置视口等于理想视口，移动设备上的viewport分为layout viewport（布局视口） 、 visual viewport（可视视口） 和 ideal viewport（理想视口） 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
这是一个文档兼容模式的定义。IE=edge告诉IE使用最新的引擎渲染网页（Edge 模式告诉 IE 以最高级模式渲染文档，简单的说，就是什么版本 IE 就用什么版本的标准模式渲染）。
chrome=1则可以激活Chrome Frame。与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，并且支持Windows XP及以上系统的IE6/7/8。指定页面默认首先使用GCF进行渲染，如果未安装GCF再使用IE内核进行渲染。
<meta name=“renderer” content=“webkit|ie-comp|ie-stand”>
content的取值为webkit，ie-comp，ie-stand之一，区分大小写，分别代表用极速模式，兼容模式，IE模式打开。
meta标签的name属性语法格式是：＜meta name="参数" content="具体的参数值"＞ 。
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
A、Keywords(关键字)
说明：keywords用来告诉搜索引擎你网页的关键字是什么。
举例：＜meta name ="keywords" content="science, education,culture,politics,ecnomics，relationships, entertainment, human"＞
B、description(网站内容描述)
说明：description用来告诉搜索引擎你的网站主要内容。
举例：＜meta name="description" content="This page is about the meaning of science, education,culture."＞
C、robots(机器人向导)
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：＜meta name="robots" content="none"＞
D、author(作者)
说明：标注网页的作者
举例：＜meta name="author" content="bluebox,web@7dspace.com"＞
http-equip其实就是有特殊意义的name，主要是向浏览器传递一些信息，通常是规定浏览器可以识别的，有特殊意义的元信息的名称。
http-equip属性值有：expires（过期时间）；pragma（[p‘r?ɡm?]编译，content="no-cache"禁止浏览器从本地磁盘缓存中获取该页面内容，通过这个定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览）；refresh（多长时间后自动刷新指定页面）；set-cookie（设置cookie，如果网页过期，客户端上的cookie也将被删除）；content-type（设置内容类型和所用的字符集）
<meta/>为文档提供一些附加信息，可被浏览器、搜索引擎或网页制作工具使用的信息。如文档作者、网页有效期、关键字列表等
设置格式
<meta name="参数" content="参数值"/>
或 <meta http-equiv="参数" content="参数值"/>
例：
<meta name="keywords" content="binary trees, linked lists, stacks"/> 设置关键字
<meta name="Author" content="carson"/> 设置作者
<meta name="Generator" content="FrontPage"/> 设置网页生成工具
http-equiv和name只能二取一，name则向搜索引擎和制作工具提供信息
<meta http-equiv="Expires" content="Tue,08 Dec 2009 00:00:00GMT"/>
设置网页过期时间
<meta http-equiv="refresh" content="5;url=http://www.zhku.edu.cn"/>
告诉浏览器5秒后网页刷新到zhku网站
<link rel=“stylesheet” href=“XXX.css”type=“text/css”/>
rel是relationship的英文缩写，它描述了当前页面与href所指定文档的关系；
stylesheet就是样式表的意思；css是 Cascading Style Sheet（级联样式表）的缩写
不要在<html>和<head>或</head>和<body>或</body>和</html>之间插入任何内容。
段落标签内换行符会被忽略。
多个空格会变成一个。
标签类型
1. 块级标签
从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。
如：div p ul li dl dt form table h1…<h1 align="center">This is heading 1</h1> 还有<h2>到<h6>
分级标题<h1><h2><h3><h4><h5><h6>
标题格式化显示，值越大，字越小
<h4>是默认的文本字体大小
2. 行级元素
能在同一行内显示，不会改变HTML文档结构。（大部分表单标签）
如：span a strong（加粗） em sub sup img input …
<a href=”javascript:;” ></a>//就是不会跳转
a链接是行内元素，设置width和height时要换成块元素，即display:block;
块标签不能出现在行内标签内
行内标签不能直接放在文档主体<body>或表格<table>中
将img放a元素内可创建带链接的图片
<a>标签
1. href=”#”; 空连接
2. 链接的4种状态
:link 初始状态
:visited 已点击状态
:hover 鼠标经过
:active 鼠标按下（激活）
强调：设置样式时需要按照以上次序设置，因为如果次序反过来，鼠标停留和激活样式就不起作用了。
3. 去掉下划线
text-decoration: none;
span不换行，div换行，p会有更大的间距。p会自动地在段落的前后添加空行。（<p> 是块级元素）
span不能包含p。
b粗体
strong强调粗体
i斜体
em强调斜体
big 变大号
small
sup上标
sub下标
bdo标签 dir属性的属性值只能是ltr（从左向右正常排列）或rtl（从右向左逆向排列）指定文本的排列方向
abbr缩写
address地址
blockquote文本块引用 浏览器在 blockquote 元素前后添加了换行和外边距，可使用cite属性指定该引用文本所引用的网址 URL或出处。
q短的引用文本，会添加（双）引号
del被删除的文本，中划线，不赞成使用<s>元素和<strike>元素
ins插入的文本，下划线
pre包含的文本已预格式化
code代码
dfn专业术语，粗体或斜体
cite书、电影、歌曲的标题，斜体
var变量，斜体
kbd键盘文本
samp示范文本
<b>This text is bold</b>
<br/>
<strong>This text is strong</strong>
<br/>
<big>This text is big</big>
<br/>
<em>This text is emphasized</em>
<br/>
<i>This text is italic</i>
<br/>
<small>This text is small</small>
<br/>
This text contains
<sub>subscript</sub>
<br/>
This text contains
<sup>superscript</sup>
<br/>
<del>二十</del> 删除线
<br/>
<ins>十二</ins>下划线
效果：
标签与属性：
|
a |
href; target；download属性（新增）指定了目标资源另存为的文件名；name属性可以做命名锚点（另一个用URL资源#加锚点名，当前页面省略URL资源） |
|
img |
src;alt；height;width；usemap（下面用<map>定义图片映射） |
|
ul |
|
|
ol |
type(A与a；I与i); start; reversed(浏览器不支持) |
|
li |
|
|
dl术语列表 |
|
|
dt标题 |
|
|
dd对标题的说明 |
|
|
table |
border（不建议） |
|
tr |
|
|
td |
colspan; rowspan |
|
thead |
|
|
tbody |
|
|
tfoot |
|
|
caption标题 |
|
|
colgroup |
|
|
col |
span |
|
cellpadding内容与单元框的间距 |
（不建议） |
|
cellspacing单元格之间的间距 |
（不建议） |
style可以设置背景色和宽度
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
URL（Uniform Resource Locator，统一资源定位器）
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
<area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
<area shape="rect" coords="75,75,99,99" nohref="nohref"> // nohref 属性指定一个区域没有相关链接.
<area shape="circ" coords="50,50,25" href="http://www.fkjava.org">
<area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.crazyit.org">
</map>
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
coords 属性规定区域的 x 和 y 坐标。
coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。
图像左上角的坐标是 "0,0"。
详细解释：
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
下面列出了每种形状的适当值：
圆形：shape="circle"，coords="x,y,z"
这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
|
<iframe> |
src(URL,指定装载哪个页面);name;scrolling;height;width;longdesc；srcdoc(新增,允许直接指定HTML片段,eg:srcdoc="<h3>HTML5</h3><div>重要的标记语言</div>") |
弃用<frameset><frame><noframes>
不能与 <frameset></frameset> 标签一起使用 <body></body> 标签
<html>
<frameset cols="25%,50%,25%">水平用rows
<frame src="../example/html/t.asp-f=hdom_event_screenxy" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
<frame src="../example/html/t.asp-f=hdom_event_shiftkey" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
<frame src="../example/html/t.asp-f=hdom_event_srcelement" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">
</frameset>
</html>
混合框架：
<frameset rows="50%,50%">
<frame src="../example/html/t.asp-f=hdom_event_screenxy" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="../example/html/t.asp-f=hdom_event_shiftkey" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
<frame src="../example/html/t.asp-f=hdom_event_srcelement" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">
</frameset>
</frameset>
导航框架：
<frameset cols="120,*">
<frame src="../example/html/t.asp-f=hdom_form_radio" tppabs="http://www.w3school.com.cn/example/html/html_contents.html">
<frame src="../example/html/t.asp-f=hdom_event_screenxy" tppabs="http://www.w3school.com.cn/example/html/frame_a.html" name="showframe">
</frameset>
内联框架：
<iframe src="../i/t.asp-f=hdom_form_checkbox" tppabs="http://www.w3school.com.cn/i/eg_landscape.jpg"></iframe>
Html 5中不支持applet，使用<object>代替。
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
HTML 5 不支持 <acronym>。请使用 <abbr> 代替
属性：
|
title |
常跟a标签一起使用，以提供关于链接目标的信息。 |
|
lang |
语言 |
|
accesskey |
快捷键，使用Alt+快捷键可激活对应元素 |
|
tabindex |
按Tab键时获取焦点，属性值为1时代表用户第一次按Tab时该元素获得焦点；-1表示不要获取焦点 |
新增的属性：
|
contentEditable |
true是可编辑元素里的内容 |
|
designMode（相当于全局的contentEditable） |
默认为off |
|
hidden |
true相当于css的display:none |
|
spellcheck |
是否执行拼写检查（IE和FireFox还不支持） |
|
contextmenu |
右键激发菜单，还不支持 |
可以ondblclick="this.contentEditable=true;"
|
figure图片区域 |
|
|
figcaption图片区域标题 |
|
新增的语义元素：
|
mark |
黄色（效果就是黄色荧光笔） |
|
time |
datetime;pubdate(boolean,是否是发布日期)，标准格式为****-**-**（日期）和**:**（时分）时，可以不用datetime，显示效果是时间的左右各有空格 |
|
details |
|
|
summary 作为details的摘要，默认可见。点击后显示details里的详细内容 |
（summary有三角形，一开始detail是折叠的，只有 空格Chrome 以及 Safari 6 支持） details和summary可控制收起和展开 |
|
wbr 何处添加换行 |
|
|
bdi 上下文抽离 |
|
|
menu 还不支持 |
|
|
menuitem 还不支持 |
|
|
link 图标，样式表 |
href;rel;type；图标是href="*.ico" , rel="shortcut icon",ico的MIME类型是"image/x-icon"；样式表是stylesheet和text/css |
|
base 所有链接的基准路径 |
|
特殊字符
< : <
> ：>
空格：
锚点
1.定义锚点
<a name="anchorname1">文本1</a>
2.连接到锚点
<a href="#anchorname1">文本2</a>
input元素
<form action="***" method="***" enctype="***" name="">
<input type="***" value="***" name="***" disable/>
<input type="text/password" name="" value="" maxlength="" readonly/> 密码框，maxlength最大字符数，readonly不允许用户修改
<input type="radio/checkbox" name="" value="" checked/> 单选框和复选框，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器
<input type="file" /> // 文件上传域
<input type="submit/reset/button" name="" value="按钮上显示的文本"/> 按钮，如果有设name，请求参数会把value使用application/x-www-form-urlencoded编码后得到字符串
<input type="image" /> 图片域可设src，width，height
// 另外type="hidden"是隐藏域
</form>
eg：
// name设置名称，并用于分组，一组单选框或复选框的名称必须是相同文本；
男性：<input type="radio" checked="checked" name="Sex" value="male" /><br />
女性：<input type="radio" name="Sex" value="female" />
enctype属性值
|
值 |
描述 |
|
application/x-www-form-urlencoded |
在发送前编码所有字符（默认，只处理表单里的value属性值） |
|
multipart/form-data |
不对字符编码。（二进制流方式） 在使用包含文件上传控件的表单时，必须使用该值。 |
|
text/plain |
空格转换为 "+" 加号，但不对特殊字符编码。 |
选项框
<form action="***" method="***" enctype="***" name="">
<select name="" size="" multiple=""> // size大于1，则为滚动列表；显示几个
<option value="" selected>选项文字</option>
<option value="" >选项文字</option>
</select>
<form action="***" method="***" enctype="***" name="">
<textarea name="" rows="10" cols="30"></textarea> 多行文本输入框
效果：
为控件分组
<form action="***" method="***" enctype="***" name="">
<fieldset>为控件分组
<legend>信息</legend> // 被包围的标题
地址：<input type="text" />
邮编：<input type="text" />
</fieldset>
</fieldset>
效果：
HTML5新增的拖放API可以让HTML页面的任意元素都变成可拖动的。
在HTML5中，img元素默认是可拖动的，a元素有href属性默认也是可拖动的。
draggable="true"，并为被拖动元素的ondragstart事件指定监听器，在监听器中让拖动操作可以携带数据。
还要取消事件的默认行为。
var ele = document.getElementById("***");
ele.ondragstart = function(event){ event.dataTransfer.setData("text", "event.target.innerHTML"); } // text是数据格式,event.target.innerHTML是数据。
document.ondragover = function(event){ return false; }
document.ondrop = function(event){
ele.style.position = "absolute";
ele.style.left = event.pageX + "px";
ele.style.top= event.pageY + "px";
return false;
}
拖放事件有dataTransfer属性，该属性值是一个DataTransfer对象，有setData和getData等方法和属性。
把东西拖进垃圾桶可以用removeChild
for 属性
规定 label 与哪个表单元素绑定。
eg：<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
点击文本标记之一，就可以触发相关控件
效果：
<a href="mailto:bill@microsoft.com">Bill Gates</a>
target="_blank"链接会在新窗口中打开。target="_top"是跳出框架。
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
|
字 符 |
实 体 |
含 义 |
|
& |
& |
and记号 |
|
< |
< |
小于号 |
|
> |
> |
大于号 |
|
" |
" |
双引号 |
|
‘ |
' |
单引号 |
|
? |
¼ |
四分之一 |
|
? |
½ |
二分之一 |
|
? |
¾ |
四分之三 |
|
(space) |
|
空格 |
IE条件注释法：
<!--[if lt IE 8]>
<style>html,body{overflow:hidden;height:100%}</style>
<div class="tb-ie-updater-layer"></div>
<div class="tb-ie-updater-box" data-spm="20161112">
<a href="https://www.google.cn/intl/zh-CN/chrome/browser/desktop/" class="tb-ie-updater-google" target="_blank" data-spm-click="gostr=/tbieupdate;locaid=d1;name=google">谷歌 Chrome</a>
<a href="http://www.uc.cn/ucbrowser/download/" class="tb-ie-updater-uc" target="_blank" data-spm-click="gostr=/tbieupdate20161112;locaid=d2;name=uc">UC 浏览器</a>"
</div>
<![endif]-->
下面是淘宝网的学习笔记：
<!-- 所有注释都是我自己添加的，包括注释里的代码。换行也已经整理好。-->
<meta charset="utf-8" /><!--声明文档使用的字符编码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!--声明文档的兼容模式，让IE浏览器用最高级内核渲染页面，还有用 Chrome 框架的页面用webkit 内核 -->
<meta name="renderer" content="webkit" /><!--用webkit内核渲染页面-->
<title>淘宝网 - 淘！我喜欢</title>
<!--SEO 优化 搜索引擎优化 包括description(content不超过150个字符),keyword,author,robots-->
<meta name="spm-id" content="a21bo" /><!--SPM是为外部合作伙伴（外站）提供的一套跟踪引导成交效果数据的解决方案。-->
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，
并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,
拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
<!-- 为移动设备添加 viewport
<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> -->
<!--以下是预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。-->
<link rel="dns-prefetch" href="//g.alicdn.com" />
<link rel="dns-prefetch" href="//img.alicdn.com" />
<link rel="dns-prefetch" href="//tce.alicdn.com" />
<link rel="dns-prefetch" href="//gm.mmstat.com" />
<link rel="dns-prefetch" href="//log.mmstat.com" />
<link rel="dns-prefetch" href="//tui.taobao.com" />
<link rel="dns-prefetch" href="//ald.taobao.com" />
<link rel="dns-prefetch" href="//gw.alicdn.com" />
<link rel="dns-prefetch" href="//atanx.alicdn.com"/>
<link rel="dns-prefetch" href="//dfhs.tanx.com"/>
<link rel="dns-prefetch" href="//ecpm.tanx.com" />
<link rel="dns-prefetch" href="//res.mmstat.com" />
<link rel="dns-prefetch" href="//log.mmstat.com" />
<link href="//img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" rel="apple-touch-icon-precomposed" /><!--禁止系统自动添加效果，直接显示设计原图-->
1.pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
2.<th> 标签定义 HTML 表格中的表头单元格。
3.<dd> 标签定义一个定义列表中对项目的描述。<dt> 标签定义列表中的项目。<dl> 标签定义一个定义列表（definition list）。<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
4.<fieldset> 标签用于从逻辑上将表单中的元素组合起来。<fieldset> 标签会在相关表单元素周围绘制边框。
5.<hr> 标签水平线
6.<select> 标签创建下拉列表。
7.<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。注释：人名不属于著作的标题。
8.<dfn> 标签<dfn> 定义一个定义项目 ，可标记那些对特殊术语或短语的定义。现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。将来，<dfn> 还可能有助于创建文档的索引或术语表。
9.<em> 呈现为被强调的文本。 斜体。
10.<var> 定义变量。
11.<kbd>：定义键盘文本。它表示文本是从键盘上键入的。
12.<samp> 定义样本文本。
标签：工具 ack 表单标签 用户体验 ofo standard comm 在线交易 ×××
原文地址：https://www.cnblogs.com/beth/p/8799350.html
