镇楼图
Pixiv:覺醒
〇、HTML基本概念
点击查看详细内容
HTML(Hyper Text Markup Language)是一门标记语言，主要去呈现一个网页之中的元素，元素类型有很多，如文字、图像、声音、视频、动画等
HTML历经了多个版本，这里主要写第5版，主要参考W3C的教程与标准
此blog不会说明网络、工具相关内容，且视为你已经拥有了一定的基础
■注：打上*的表明这是HTML5才具有的新特性
■注：打上+的表明新版本对旧版本进行了一定的修改
■注：打上4.01的表明这是HTML4中存在的特性（可能在4中就废弃了）但在HTML5中删除了因此不赘述其说明
■注：不会说明一个元素是不是空元素，但会演示来间接说明
■注：如果我将几个属性或标签一起展示，则说明之间可能有联系，也可能单纯说明这些都是不能用的
■注：如果我同时展示多个属性或标签，且其中只有部分需要打上*、+、4.01则会加上前缀part
如 br、wbr、xmlns (part *)是说明这两个标签中部分存在HTML5才具有的新特性
■注：如果我标注了略表明我认为这是不需要学习的
初学建议
我建议在free.3v.do网站中花大概10元左右去注册一个网站，这样就有了一个测试的网站，然后在使用过程中FTP软件去传自己的代码去测试即可。
FTP软件我是使用8uftp
8uftp：百度云
提取码：yyds
编程软件我推荐使用VScode，这里不介绍工具的具体使用，请参考其他资料自行完成搭建开发环境
历史（引用于WHATWG，部分修改）
在1990~1995，最初由CERN负责，然后转交给IETF。W3C诞生后由W3C负责，在1995年第一次尝试HTML3.0但失败了。于是在1997年制定了3.2版本，在1997年同时开始了HTML4的开发
但在1998年W3C成员决定停止开发HTML的演变版本，转而去开发基于XML的XHTML。在2000年完成了XHTML1.0的工作，与此同时在开发与HTML、XHTML都不兼容的语言XHTML2
2003年XForms的发布重新激发了对于HTML版本的演化，在HTML4.0的标准中引入了XForms诸多特性，但此标准只在Opera Software的版权下发布
2007年W3C组建了工作组与WHATWG共同开发HTML5标准，但两个组织的目标并不一致。W3C希望发布一个完整的版本，而WHATWG希望持续维护版本。在2019年，W3C、WHATWG共同约定一起合作只开发一个版本
至此HTML5还在修订中，并不是一个稳定的标准
HTML在设计的很多方面上都不一致，因此特性也有着不同的来源，其设计方案也并非一致，有些bug甚至变成了习以为常的惯例
标准内设计之间可能相互影响、相互依赖、相互冲突
HTML具有较好的可扩展性
HTML与XML中最显著的区别就是XML必须使用规范的语法，而在HTML中不严谨的语法很多情况上依然可以运行
Hello World
创建一个index.html文件（在服务器中默认是以index作为默认网页）然后编写以下代码传至FTP服务器即可浏览你所创建的网页(有网环境)
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Hello World!</p>
<!--body内是写代码的 -->
</body>
</html>
兼容性问题
不同浏览器之间可能兼容不同的特性，在每个标签之间我会特别说明其兼容性
对于用户而言，浏览器的选择是自由的。假设你在一个firefox上可以正常显示却在IE上无法显示，那用户可能会无法查看，这也是要着重考虑的问题
目前最新的HTML版本是2017年W3C所推荐的5.2
我也会说明版本之间的差异
一、HTML元素
点击查看详细内容
HTML是一种标记语言，其规则就是使用一系列的标记标签(Markup Tag)通过标签标记即可描述出你要在网页上所展示的内容
要想理解HTML就需要先了解标签
通常标签和元素的意思是一样的，除去基本语法很多是需要识记的
HTML元素组成
■开始标签(Opening Tag)
■结束标签(Closing Tag)
通常来说，标签同时具有开始标签和结束标签。但要注意结束标签一定要有斜杠
■内容(Content)
标签之间则用来填写你想展示的内容
■属性(attr)
标签具有着不同的属性，提供不同显示的特性
<标签 属性="属性值">内容</标签>
空元素(empty element)
虽然组成上有4个，但有一类特殊的元素称为空元素，它们没有成对的标签，只有一个标签附上一些属性，因为不成对所以也不具有内容
<标签 属性="属性值"/>
嵌套元素
HTML元素是可以相互嵌套的比如文档的结构本身就是一个嵌套
html里嵌套了head和body，然后在body里继续嵌套
嵌套在很多情况下是随意的（虽然有时候并不是）但不需要清楚哪些能嵌套哪些不能嵌套，根据常理来即可。
比如html是最顶级的元素，但按常理你已经清楚了不能被其他元素嵌套
其它小问题
①HTML标签对大小写并不敏感，因此你完全可以混着来，但标准推荐一律采用小写
②空元素关闭问题：在XHTML、XML以及未来版本中，写上一个空元素也需要一个斜杠，虽然现在的HTML文档并不需要（例如<img src="0.jpg" />）
③元素的属性值推荐使用单引号或双引号框定
二、大体框架
点击查看详细内容
从上述代码中可以抽取出一个写HTML代码的大体框架
①DOCTYPE
DOCTYPE是一个文档类型的标记，用来声明这是什么版本的语言，不过这里你只需要填写html即可表明这是HTML5的代码文档。具体内容在DTD里，初学不需要具体深入
兼容性：所有主流浏览器均支持
②html
html标签会说明这是一个HTML文档，是最外层的元素，可以包含一切除了DOCTYPE的元素
元素的兼容性：所有主流浏览器均支持
xmlns
版本说明：HTML中并不支持，但在XHTML中则是必须的
作用：规定文档的xml命名空间（xml name space）
其他说明： XHTML文档中也可以不写xmlns，虽然是必须的，但已经默认了xmlns="http://www.w3.org/1999/xhtml"
兼容性： 所有主流浏览器均支持
manifest (*)
HTML5中引入了应用程序缓存，意味着Web应用程序可以被缓存起来，可以在无联网的情况下依然可以访问。具体内容会在HTML5章节说明
值的类型：（URL）
其他说明：只有使用了manifest才会发挥其缓存功能，否则视为不启用
兼容性：IE9以下版本不支持，其余IE10, Firefox, Chrome, Safari 、 Opera均支持
③head
head标签会包含着页面的基本信息，比如页面标题或是文件风格格式之类的东西
兼容性：所有主流浏览器均支持
profile (4.01)
④body
body标签即为网页的主体部分，在这里开始写代码，但一个HTML文档只能有一个body
兼容性：所有主流浏览器均支持
alink、background、bgcolor、bgcolor、link、text、vlink (4.01)
三、元信息(meta-information)
点击查看详细内容
head文件中一般会存放有关文档的元信息，也会存放其他工具的文件信息，这里只提及HTML自身的信息
①title
title用来展示网页的标题
兼容性：所有主流浏览器均支持
比如在之前演示时我写了title为Hello，则网页的标题也是Hello
但再尝试以下代码
<!DOCTYPE html>
<html>
<head>
<title>你好</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Hello World!</p>
</body>
</html>
可以发现网页标题会显示乱码，如果熟悉的人会立马知道这是编码问题，因此需要另外一个标签meta用来解决
请使用FTP提交到服务器上去测试，离线打开显示正常，无法体现出编码问题。原因在于当你打开网页时相当于服务器向你传递信息，但服务器无法得知你HTML文档的编码因此采用默认的编码向你传递信息，因此发生问题
②meta
meta内含了很多属性，除了上面所说解决编码问题以外还有其他作用，具体参考其特殊属性
兼容性：所有主流浏览器均支持
charset (*)
作用：
规定这个HTML文档是采用什么样的编码，用来解决刚才那样的编码问题
常见的是采用UTF-8编码
值的类型：编码名（规定值）
其他说明：可以通过任何元素的lang来重写
兼容性：所有主流浏览器均支持
http-equiv、content
这涉及到了HTTP协议部分，HTTP协议具有很多首部，meta可以通过模拟来传递一定的HTTP信息。http-equiv表明传递的首部名，content表明传递该首部的内容。
如果对HTTP了解，可以发现这个属性非常强大，可以传达很多信息。具体怎么使用完全取决于你对HTTP的了解，比如HTTP里面有个首部Content-Type用来定义所要传递信息的编码，同样可以完成charset的效果
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
还比如HTTP协议中有个用于重定向的首部refresh，下面代码用来实现3秒后跳转到百度
<meta http-equiv="refresh" content="3;url=https://www.baidu.com" />
请尝试以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="3;url=https://www.baidu.com" />
<title>你好</title>
</head>
<body>
<p>正在前往百度，请等3秒...</p>
</body>
</html>
上传后，可以在你的网页使用F12自带的抓包工具，用来查看HTTP数据包
但这主讲HTML而非HTTP，有关HTTP可以参考《HTTP权威指南》
兼容性：所有主流浏览器均支持
name、content
content也可以和name搭配，name用来说明其他一些的信息，一个好的网页应当还包括作者信息、描述、版本等信息，可以算是一个标签信息，并无实质性的作用，只是作展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="作者" content="moshan" />
<meta name="版本" content="test" />
<title>你好</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Hello World!</p>
</body>
</html>
其他说明：如果使用了name就不应使用http-equiv
兼容性：所有主流浏览器均支持
scheme (4.01)
③base
base是一个基准网页标记，用来标记一个整体的大致情况
若不清楚HTML如何表示超链接的请先跳过这一部分内容，看完超链接后再来这
其他说明：只能使用一个base且建议设定在head中的第一个，而且一旦使用base则至少具备href和target属性
兼容性：所有主流浏览器均支持
href
作用：规定了一个相对URL中绝对路径的一部分
比如
<base href="//game/sounds/">
那么在此网页中所有的相对的超链接都是在sounds文件中打开
兼容性：所有主流浏览器均支持
target
作用：规定所有超链接默认是以什么方式打开
可以设定一个整体的target是怎样的方式打开，然后局部特殊的可以另外设定
兼容性：所有主流浏览器均支持
④basefont (4.01)
四、标题、段落
点击查看详细内容
①h1、h2、h3、h4、h5、h6
作用：
这一系列标签主要用来定义标题，h1最大，h6最小。标题不仅仅体现在文字大小和粗细上，搜索引擎也会根据标题进行编制索引。不建议仅仅为了获得更大更粗的字体而采用此标签，应当使用CSS
<!DOCTYPE html>
<html>
<!--由于代码过长，省略了head之后也会省略-->
<body>
<h1>h1这么大</h1>
<h2>h2这么大</h2>
<h3>h3这么大</h3>
<p>段落这么大</p>
<h4>h4这么大</h4>
<h5>h5这么大</h5>
<h6>h6这么大</h6>
</body>
</html>
可以发现h3的文字基本和正常文字大小一样
align (4.01)
兼容性：所有主流浏览器均支持
②hr
作用：会单独生成一行横线用来区分内容
<!DOCTYPE html>
<html>
<body>
<h1>败者树介绍</h1>
<hr/>
<p>
败者树在实现上要比胜者树更加简单，只需要考虑其父节点
</p>
</body>
</html>
align、noshade、size、width (4.01)
兼容性：所有主流浏览器均支持
③br、wbr (part *)
作用：br用于换行；wbr稍特殊是HTML5的新标签
wbr常常用来框定整个单词，一般而言一个单词在显示上如果剩余空间无法支撑则会换行。可以在这个单词中进行分割，这样在换行时不再以整个单词为单位，而会细致到wbr分割的部分
<!DOCTYPE html>
<html>
<body>
<p>pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
pneumonoul<wbr/>tramicroscopicsilicovol<wbr/>canoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>
</body>
</html>
由上图可以发现其他单词都在完整的情况下换行，而唯独其中一个分割后换行，这就是wbr的作用。wbr的作用一般情况并不会太明显，主要是在细节上防止在错误的位置换行，但一般不使用这个标签
兼容性：所有主流浏览器均支持br；除了IE所有主流浏览器均支持wbr
④p
作用：生成文字段落，段落之间会空行
<!DOCTYPE html>
<html>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</html>
align (4.01)
其它说明：值得注意的是HTML显示的效果会受限于硬件屏幕的大小，因此很难确定。还有一点是HTML语言中的空格并非那么容易打出，哪怕使用多个空白符它也会解释为一个空格，这方面请参考HTML的转义字符
兼容性：所有主流浏览器均支持
⑤pre
作用：可以保留原先的格式，不会取消换行、空格等空白符
<!DOCTYPE html>
<html>
<body>
<pre>
换行了
空 格了
</pre>
</body>
</html>
上面虽然避免了这种问题，但你可能会发现一个新的问题，如果显示上前面不空，那么代码上也不能空
width (4.01)
其他说明：由于pre特殊的语法规则，因此无法在里面嵌套元素会视为一个文本而不是一个代码。通常要和code标签结合以获得表示计算机代码这样更适合的语义
兼容性：所有主流浏览器均支持
五、框架
点击查看详细内容
URL(Uniform Resource Locators,统一资源定位器)
有必要简单说明一下URL，URL本身也算是一种技术标准，但本篇只会简单说明，具体说明再以后HTTP中我会详细说明。简单来说就是一个URL可以定位任何一切的已有的文件、信息。
这里给出一个简化不完整的结构
（某些细节我也省略了但不影响学习）
\(scheme://host.domain/path/filename\)
①scheme协议：所使用的网络协议
②host定义域主机：一般为www
③domain域名：网络我域名
④path路径：服务器上的路径
⑤filename文件：最终给所指向的文件
URL的字符编码
URL只能使用ASCII编码，如果发现不是ASCII码必然要做转换
转换流程：
使用%跟随两位十六进制数代替非ASCII码
最简单认证方法就是找一个有非ASCII码的URL然后复制粘贴
另外URL不允许出现空格，一般采用其他符号代替空格
绝对URL与相对URL
URL有绝对和相对之分，像之前的格式其实是绝对URL
所谓绝对URL就是包含了完整的信息
这种是最基本的表达，但更多是采用相对URL
相对URL省略了很多信息最后只保留了path和filename，即访问当前根目录下的文件
相对URL不仅可以在代码层面省略很多信息，还可以避免一个变动的域名引发的额外工作量（专业点说，绝对URL会绑定域名），比如原本域名是test，结果改成了hello，绝对URL中还需要改但相对URL则完全不必担心
URL的强大性
URL常常容易被忽略，哪怕现在URL的标准还在修改，而更先进的是URI技术
在开放平台上，URL会作为接口的载体，如果没有这种载体自然无法接入各种服务
iframe (+)
在网页的同一窗口中并不一定只有一个文档，可能存在多个文档相互穿插
不仅元素之间可以嵌套，整个文档也可以相互嵌套
版本说明：与旧版本相比H5去除了很多不必要的属性，而在XHTML中唯独将name改成了id
iframe会创建一个展示于网页窗口内部的网页
兼容性：所有主流浏览器均支持
align、frameborder、longdesc、marginheight (4.01)
marginwidth、scrolling (4.01)
上述全是显示相关的元素，全部移植到了CSS中。但其中存在着一些默认设定还是需要知道。
■不存在边框
■如果内容超出框架默认有滚动条
name
name为一个文档起名标志
兼容性：所有主流浏览器均支持
src
src是必要的，规定了框架内容的文件的URL
兼容性：所有主流浏览器均支持
height、width
版本说明：在旧版本中单位可以为像素或百分比，但新版本必须以像素为单位（有关HTML单位的部分我放在了最后的附录中）
兼容性：所有主流浏览器均支持
seamless (*)
作用：设置后将取消文档的滚动条和边框
其他说明：在XHTML中必须指定值以符合语法规范
兼容性：兼容性过差，只有Chrome、Safari 6支持
<iframe src="other.html" seamless></iframe><!--注:若使用XHTML则需要定义为seamless="seamless" -->
srcdoc (*)
作用：填写HTML代码，并且会覆盖原本src所指向的文件
其他说明：常常和seamless、sandbox一起使用
兼容性：兼容性过差，只有Chrome、Safari 6支持
<iframe src="other.html" srcdoc="<p><strong>Hello</strong></p>" seamless></iframe><!--注:若srcdoc内的代码会完全替代other.html -->
sandbox (*)
作用：通过限制某些操作提高iframe的安全性
兼容性：IE 10、Firefox、Chrome、Safari支持，Opera、IE 9及之前版本不支持
■可以防止访问父页面DOM
■可以防止执行脚本
■可以防止被脚本嵌入
■可以防止cookie、存储、数据库的读写
| 属性值 | 作用 |
|---|---|
| "" | 启用所有限制 |
| allow-same-origin | 只允许将内容不作为独立来源 |
| allow-top-navigation | 只允许iframe页面可以任意导航 |
| allow-forms | 只允许表单提交 |
| allow-scripts | 只允许脚本执行 |
注：属性值无法复合
<!--注:这里以https://www.w3cschool.cn/statics/demosource/demo_iframe_sandbox.html网站为例，此文件可以获取时间-->
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.w3cschool.cn/statics/demosource/demo_iframe_sandbox.html" sandbox="">
<p>您的浏览器不支持 iframes</p>
</iframe>
<!--由于这里设置了sandbox因此不允许脚本执行，点击按钮也没用，但如果改为allow-scripts就可以运行了 -->
</body>
</html>
frameset、frame、noframes (4.01)
框架集并非必要，iframe即可完成任务，因此在H5中删除了这部分内容
六、全局属性
点击查看详细内容
全局属性指的是某些属性可以适用于所有元素的属性，但是在旧版本中全局属性并非全局属性，只能适用一部分元素，但在H5中已经能适用所有元素了
(1)accesskey
作用：为某一元素设置快捷键
兼容性：所有主流浏览器均支持
每个浏览器都有设计这一机制，可以快速与某个元素交互
基本上都是Alt+设置键或Alt+Shift+设置键，剩下的也可以查到
全局属性真的全局吗？
accesskey在旧版本是专门给按钮、超链接等这一类鼠标点击即可交互的元素而设计的，也就是像其他图片、文字之类的根本用不了accesskey。个人猜测H5是为了语法上严谨，即全局属性真的要能适用所有元素，打消一些疑问，因此改成了可适用于所有元素的属性。但事实上真正有效果的还是鼠标点击可交互的元素，因此给p、br这类元素并无显示上的效果，但确实起作用了
(2)title
作用：规定了某一元素额外显示的文字（鼠标稍作停顿即可显示）
其他说明：在无障碍设计上具有非常显著的作用，尤其是图像这种元素非常常用
兼容性：所有主流浏览器均支持
(3)id、class
id、class在HTML中除了超链接以外很少使用，更多的是在CSS、JS上使用
作用：id指定特殊元素，class指定某一类元素
其他说明：原则上id、class不能重复，且对html、head、meta等全局性的元素不起作用
命名规则：id和class的取名规则有要求，首先是大小写敏感。必须是英文字母开头，其次只能使用英文字母、数字、下划线_、连字符-、冒号:、点号.
兼容性：所有主流浏览器均支持
(4)dir
作用：设定文本排版显示方向
兼容性：所有主流浏览器均支持
| 属性值 | 作用 |
|---|---|
| ltr | 默认，从左往右 |
| rtl | 从右往左 |
| auto | 浏览器根据内容自动设定 |
(5)lang
作用：设定元素内容的语言，显示上无任何效果
其他声明：和浏览器自动翻译有一定的关联，属性值必须是特定的语言代码
兼容性：所有主流浏览器均支持
(6)style
作用：设置简短的CSS代码用以修改显示效果
兼容性：所有主流浏览器均支持
(7)tabindex
作用：设置tab检索并设定检索的顺序,按TAB键被检索中的元素会有边框框定
兼容性：所有主流浏览器均支持
<!DOCTYPE html>
<html>
<body>
<p tabindex="4">Hello</p>
<p tabindex="3">Hello</p>
<p tabindex="6">Hello</p>
</body>
</html>
(8)contextmenu、 dropzone、translate (*、略)
这三个均是HTML5新增的，但鉴于兼容性几乎没有可支持的，这块内容会在另一篇blog介绍
(9)draggable、spellcheck (*、略)
(10)contenteditable (*)
作用：文本设定是否可编辑
兼容性：所有主流浏览器均支持
| 属性值 | 作用 |
|---|---|
| true | 设定可编辑文本 |
| false | 设定不可编辑文本 |
<p contenteditable="true">可编辑</p>
(11)hidden (*)
作用：隐藏元素
其他说明：若为XML则必须定义布尔值以符合规范性
兼容性：除IE外主流浏览器均支持
<p hidden>隐藏了</p>
(12)data-* (*)
作用：自定义数据
其他说明：可以适当只使用H5设定数据而不采用其他技术
兼容性：除IE外主流浏览器均支持
<p data-type="1">1</p>
<p data-type="2">2</p>
七、超链接
点击查看详细内容
(1)a (+)
版本说明：HTML5删除了旧版本部分属性也改善了锚的机制，新版本新增了功能性上的属性
a可以链接其他URL，而不止你当前页面一个URL
其他说明：链接具有一种默认外观这和你日常使用相吻合
■所有链接都具有下划线
■未被访问的链接是蓝色的
■已被访问的链接是紫色的
■活动链接（活动即鼠标指针移到链接上的状态）是红色的
■上述外观均是默认且能显示的情况下，因为某种设定或元素显示不出或改变就另说了
兼容性：所有主流浏览器均支持
charset、rev、name、shape、coords (4.01)
首先是多余的charset，在a标签里的charset用来设定链接文档的编码，在旧版本虽然有一定合理性（meta 的charset到H5才出现）但稍显混乱（哪怕没有charset，meta也可以用http-equiv设置，功能上重叠了）
shape和coords主要是改善显示效果，但也是过于混乱，显示效果应该由CSS解决，你可以发现很多在H5中删掉的属性都是用来改善显示效果的
name、rev是用来设定锚的，有关锚我一会会讲到，H5采用新的性能更好的id代替name。name原本是标明元素的唯一，但CSS也有一个id标明元素的唯一，又引起了混乱。在H5中统一为id（旧版本的id属性存在缺陷），即不管是CSS还是JS都只用id标明唯一，这样防止了混乱还减少了多余的name属性。你可以发现H5在某种程度上简化和精确化了（虽然依然像大杂烩一样）
href、hreflang
作用：href用来设定超链接，hreflang用来设定超链接文档的语言
其他说明：hreflang只有存在href时才能生效
兼容性：所有主流浏览器均支持
<a href="https://www.baidu.com"><p>百度一下</p></a>
<!--注:若使用绝对URL需要设定好协议名，否则被认为是相对URL -->
type
type属性规定了目标链接文档的MIME类型
至于MIME是什么暂时不会用到不需要考虑
兼容性：所有主流浏览器均支持
target
作用：决定跳转方式，在浏览器上具有不同的打开方式
其他说明：默认为_self
兼容性：所有主流浏览器均支持
| 属性值 | 说明 |
|---|---|
| _self | 默认，在当前网页打开（注：若在框架内则在框架内打开） |
| _blank | 在新页面打开 |
| _parent | 在上一级框架即父框架上打开（注：可将整个页面也看做是一框架，若本身不存在父框架即顶级框架则效果等同于_self） |
| _top | 在整个窗口中打开，类似于_self |
| < framename > | iframe标签中有name标签标识，如果target设置为一个框架，则会在框架中打开 |
download (*)
作用：提供下载功能并定义下载文件名，但下载地址由href提供
其他说明：必须先设定href才能用download
兼容性：谷歌14.0、IE13.0、Firefox20.0、Opera15.0及以上版本支持，Safari不支持
<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" download="baidu_icon"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/></a>
rel (*)
作用：语义化以及SEO优化
其他说明：并不会其他任何显示或交互上的效果
兼容性：所有主流浏览器均支持
| 属性值 | 说明 |
|---|---|
| alternate | 文档的其他可选版本 |
| stylesheet | 外部样式表 |
| start | 第一个文档 |
| next | 下一个文档 |
| prev | 前一个文档 |
| contents | 目录 |
| index | 索引 |
| glossary | 术语表、解释 |
| copyright | 包含版权信息的文档 |
| chapter | 章 |
| section | 节 |
| subsection | 子段 |
| appendix | 附录 |
| help | 帮助文档 |
| bookmark | 相关文档 |
| nofollow | 指定Google搜索引擎不要跟踪链接 |
| licence | 版权信息 |
| tag | 关键词 |
| friend | 赞助、友链 |
media (*)
作用：优化
其他说明：可以采用基本的and、or、not进行复合运算
兼容性：所有主流浏览器均支持
| 属性值 | 说明 |
|---|---|
| all | 默认，适合一切设备 |
| aural | 语音合成器 |
| braille | 盲文反馈装置 |
| handheld | 手持设备 |
| projection | 投影机 |
| 打印预览模式 | |
| screen | 计算机屏幕 |
| tty | 打字机、使用等宽字符网格的设备 |
| tv | 电视、低分辨率有限分页能力的设备 |
| width | 规定显示区域的宽度，可使用min-、max-前缀规定其范围 |
| height | 规定显示区域的高度，可使用min-、max-前缀规定其范围 |
| device-width | 规定设备的宽度，可使用min-、max-前缀规定其范围 |
| device-height | 规定设备的高度，可使用min-、max-前缀规定其范围 |
| orientation | 规定设备的取向，可用portrait、landscaoe |
| aspect-ratio | 规定显示区域的宽度/高度比，可使用min-、max-前缀规定其范围 |
| device-aspect-ratio | 规定设备的宽度/高度比，可使用min-、max-前缀规定其范围 |
| color | 规定设备单位像素的颜色数，可使用min-、max-前缀规定其范围 |
| color-index | 规定设备可处理的颜色数，可使用min-、max-前缀规定其范围 |
| monochrome | 规定单色帧缓冲中的像素比特数，可使用min-、max-前缀规定其范围 |
| resolution | 规定设备的像素密度即dpi，可使用min-、max-前缀规定其范围 |
| scan | 若设备类型为tv，则规定其扫描方式，可用progressive、interlace |
| grid | 规定输出设备是网格还是位图，1表示网格，0表示其他 |
<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
media="screen and (color:1)" >点击打开</a>
(2)link (+)
link与a不同是空元素，用于定义文档与其他资源的关系，而且只能出现于head部分
兼容性：所有主流浏览器均支持
charset、rev、target (4.01)
href、hreflang、media、rel、type
详细请参考a标签
sizes (*、略)
几乎无浏览器支持
八、其他文字或其他效果
点击查看详细内容
这一块内容可以说是非常繁杂，毕竟效果太多了，虽然效果实现集中在CSS上，但HTML也提供了一定的效果。文字上就能描述的效果我就不演示了
(1)font 、center、big、acronym、tt、strike (4.01)
(2)bdi、time (略)
(3)abbr
作用：abbr是acronym的上位替代品，有虚线下划线效果
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Trade Organization，世界贸易组织 ">WTO</abbr> was founded in 1995.</p>
</body>
</html>
兼容性：除IE6或之前的版本所有主流浏览器均支持
(4)strong、b
作用：都是将文字设置为粗体
其他说明：不是空元素
兼容性：所有主流浏览器均支持
(5)small、code、samp、kbd
作用：都是将文字大小变小一号
其他说明：如果文字本身就是最小字号，则无效果
其他说明：不是空元素
兼容性：所有主流浏览器均支持
(6)del、s
作用：都是将文字设置为删除线
其他说明：不是空元素
cite、datetime (略)
兼容性：所有主流浏览器均支持
(7)mark (*)
作用：用黄色高亮文字背景色标记
其他说明：不是空元素
兼容性：除IE8或更早版本所有主流浏览器均支持
(8)i、em、var、dfn、cite、address
作用：都是文字斜体的效果
其他说明：不是空元素
兼容性：所有主流浏览器均支持
(9)ins、u
作用：都是文字下划线的效果
其他说明：不是空元素
兼容性：所有主流浏览器均支持
(10)bdo
作用：修改显示文字的顺序，将值设为rtl则是逆序显示
其他说明：不是空元素
兼容性：所有主流浏览器均支持
dir
值的类型：ltr或rtl（规定值）
兼容性：所有主流浏览器均支持
(11)sub、sup
作用：sub和sup具有相反的效果，sub会将文字设置为下标，sup会设置为上标
其他说明：不是空元素，常常用于公式表达
兼容性：所有主流浏览器均支持
(12)q
作用：引用，会自动添加双引号
其他说明：不是空元素
兼容性：所有主流浏览器均支持
(13)blockquote
作用：用于引用长文本，会自动缩进
<!DOCTYPE html>
<html>
<body>
<h1>About WWF</h1>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
</body>
</html>
其他说明：不是空元素
兼容性：所有主流浏览器均支持
(14)ruby、rt、rp (*)
作用：为文字标音标
<!DOCTYPE html>
<html>
<body>
<ruby>
中国人不骗中国人
<rp>(</rp><rt>zhong guo ren bu pian zhong guo ren</rt><rp>)</rp>
</ruby>
</body>
</html>
ruby构成整体框架，其中rt内放置拼音，rp分别在rt左侧右侧放置圆括号
其他说明：rp只在浏览器不支持时显示，即显示()
兼容性：IE8或更早版本不支持，Firefox、Opear、Chrome、Safari 6支持
(15)progress (*)
作用：生成进度条的图形
max、value (*)
max指示需要完成的值，value指示当前已完成的值
其他说明：max为正浮点数，value为0和正浮点数，且value不要超出max。而且需要这并非空元素
兼容性：IE不支持，Firefox、Opear、Chrome、Safari 6支持
<!DOCTYPE html>
<html>
<body>
下载进度
<progress value="6.6" max="10">
</progress><br/>
</body>
</html>
(16)meter (*)
作用：在一定范围内衡量其合适的值
form、high、low、max、min、optimum、value (*)
目前几乎没有一款浏览器支持form因此这里不说明
max和min用来设定其可能出现的最值
high设定高值，low设定低值
optimum设定为[low,high]中的最优值
value用来设置值，如果发现在[low,high]显示绿色，否则显示黄色
<!DOCTYPE html>
<html>
<body>
<meter max="100" min="0" low="20" high="60" optimum="40" value="27">
</meter>
</body>
</html>
兼容性：IE不支持，Firefox、Opear、Chrome、Safari 6支持
语义化的争议
上述有很多功能相似或一样的标签，为何要这么设置？
原因在于HTML语义化的工作：每个标签W3C都设置了对应的应用场景，只要看到这个标签就知道其应用场景，而不是关注其功能上的差异。比如同样是文字斜体，var用来定义变量上，cite用来定义某些作品名（电影、书籍等），dfn则用在特殊短语或术语上。
由此可见虽然功能上一样，但在语义上承担了不同功能，但这一块是有争议的，是否使用语义化各有看法，因此上述标签我并没有说明具体的语义，只是简单提及了功能。
这一块内容在W3C的ARIA规范上，具体地可查看ARIA
语义化的优点：
■大幅度提升了代码可读性
■有利于SEO（搜索引擎优化）
■增强可识别性，利于开发维护
语义化的缺陷：
■学习成本高，要分类去记忆不同场景下同一功能不同应用场景的语义化标签并不是一件容易事，光是从上面看到这估计也有很多忘记了
■重构工作量大且有风险，由于语义化是一个新鲜事物，很多已有的工程上再作重构太费精力
语义化大概分两类，一类是结构上的语义，一类是语义类上的
■兼容性问题，很多新标签虽然有新的语义，但在某些浏览器旧版本上却不支持
语义化现状：目前语义化可以非常堪忧，很多人基本不会特别关注语义化，因为我不做语义化并没有什么缺陷，这种吃力不讨好的工作很少人愿意做
个人观点：
可以考虑结构上的语义化，但细致到什么情况该用什么斜体或是粗体等语义化的标签，这不需要
在上述语义繁多但功能却一样的标签我建议选择简单或是目前常用的标签
本篇blog只会罗列出语义化标签，但不会具体说明其语义
九、注释、符号实体
点击查看详细内容
注释
<!--
这个标签就是注释
可能还会有其他条件、程序注释之类的
不再此说明
-->
符号实体
HTML中存在大量由于键盘无法打出或是像空格一样无法正常输出的字符可以采用特殊语法打出，但由于过多建议查表
采用&（字符名）;形式或&#（UTF-8字符编号）;
<p>
这是空格  
</p>
十、图像
点击查看详细内容
(1)img
作用：显示图像
兼容性：所有主流浏览器均支持
align、border、hspace、longdesc、vspace (4.01)
src、alt
如同a标签需要href一样，图像需要用src通过URL定义其来源才能显示图像
src用来定义图像URL，alt则是对可用性上起到非常显著的作用，当图像因为一些如网络差等原因无法加载图片时alt会替换图像采用文本描述
其他说明：几乎我所观察到的大部分网站在图像都采用了title即鼠标停顿时额外强调或显示文本信息
其他说明:当alt设定为空即alt=""时，在图像无法显示时不会显示碎裂的图像图形
兼容性：所有主流浏览器均支持
<img src="image\1.jpg" alt="风铃花" title="风铃花"/>
width、height (+)
作用：设定宽度width和高度height
其他说明：新版本必须以像素为单位
兼容性：所有主流浏览器均支持
ismap
作用：点击图像后会以左上角(0,0)为起点，像素为单位返回一个鼠标点击的坐标值
其他说明：img必须被a标签嵌套，常常其他程序语言进行搭配使用
兼容性：所有主流浏览器均支持
usemap
建立图像映射，与map、area一起使用，在下面会介绍
其他说明：img不是a或button标签嵌套时才可使用
兼容性：所有主流浏览器均支持
(2)figure、figcaption (*)
作用：语义化的标签，用于显示图像下的标题，效果完全可用br标签+文字实现。figure用来框定img和figcaption
其他说明：figure不止可以应用于图像上，其他的单独独立的内容也可以应用。figcaption必须在figure内使用即对独立内容进行解释
兼容性：除IE8及更早版本不支持，其他主流浏览器均支持
个人观点：由于结构性强，个人认为可以采用
<figure>
<img src="1.jpg"/>
<figcaption>游戏地图介绍</figcaption>
</figure>
(3)canvas (*、略)
(4)area、map
作用：用来定义图像映射，map为框架，area确定映射的具体元素
图像映射是指使得图像可点击的一个功能，如ismap可以返回图像的坐标
兼容性：所有主流浏览器均支持
name
name是map唯一的一个属性，用来标识映射。
其他说明：XTML是用id来标识，而H5中仍然要用name。和iframe类似这可能是H5的缺陷，依然统一起来
兼容性：所有主流浏览器均支持
nohref (4.01)
href、hreflang、alt、media、rel、target、type (part *)
shape、coords
作用：用于指定映射的范围，shape设定形状，coords设定坐标
兼容性：所有主流浏览器均支持
| shape属性值 | 说明 |
|---|---|
| default | 全部区域 |
| rect | 矩形区域 |
| circle | 圆形区域 |
| poly | 多边形区域 |
| coords属性值 | 说明 |
|---|---|
| x1,y1,x2,y2 | 若shape为rect，(x1,y1)确定左上角，(x2,y2)确定右下角来确定矩形范围 |
| x,y,r | 若shape为circle，(x,y)确定圆心，r确定半径来确定圆形范围 |
| x1,y1,...,xn,yn | 若shape为poly，由一系列坐标点按照路径序列来围成多边形（注：最后坐标可与最初坐标不同，浏览器会自动填上来围成） |
usemap
img有一usemap属性就是用来设定映射，其属性值为map名确定映射
<img src="1.jpg" usemap="#test">
<!--img确定基本的图像，usemap用来确定一个map映射 -->
<map name="test">
<area href="other\1.jpg" shape="circle" coords="15,20,5"/>
<area href="other\2.jpg" shape="rect" coords="50,60,100,80"/>
<!--map设定映射框架
area用来确定可点击的一个范围
映射的范围不要发生重合
如果在映射的范围中发生点击则会打开URL
-->
</map>
十一、表格（重点）
点击查看详细内容
表格简单来说就是excel那样，但与传统的表格不太一样。首先这种表格本质上是一种对元素的整理和划分，需要区别。
H5中定义了相当多的语义化标签为代码编写带来了便利，要学习表格得先想如何构造框架，其中里面有很多CSS就能实现的属性在H5中被删除了，这里就不再赘述
<!-- 框架结构 -->
<table>
<thead>
<!-- ... -->
</thead>
<tbody>
<!-- ... -->
</tbody>
<tfoot>
<!-- -->
</tfoot>
</table>
table
table用来定义表格的框架
兼容性：所有主流浏览器均支持
border
作用：设定表格有无边框
其他说明：默认无边框
兼容性：所有主流浏览器均支持
| 属性值 | 说明 |
|---|---|
| "" | 默认，无边框 |
| 1 | 有边框 |
thead、tbody、tfoot
thead用来设定表头，tbody用来设定表格主体，tfoot用来设定表尾，结构的语义化特别强
其他说明：thead、tfoot就是设定表头和表尾的，不管顺序如何都是如此，但还是建议thead、tbody、tfoot这样的顺序。此外有时并不需要tfoot
<table border="1">
<tfoot>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<thead>
<tr>
<td>1</td>
<td>2</td>
</tr>
</thead>
</table>