Q：什么是html？
A：Hypertext Markup Language 超文本标记语言。html是一个纯文本文件，用标签来描述文字的语义，这些标签在浏览器看不到，所以是“超文本”，所以是“超文本标记语言”。
- HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。
- 容器级的标签，里面可以放置任何东西；(h)
- 文本级的标签里面，只能放置文字、图片、表单元素。(p)
- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
- 不能往网页中插入的图片格式是：psd、ai
- 插入图片<img src="address"/> src(source) 自封闭标签（单标签）因为标签对儿表示给内容添加语义，而图片就是图片，不需要添加语义。
- alt属性：<img src="address" alt="alternate"/> alternate替代，当图片无法显示时，出现的替代文字。
a标签：
- 超级链接：一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。
- <a href="XXX.html">XXX</a>
- a(anchor锚) href(hypertext reference超文本地址)
- 悬停文本：<a href="XXX.html" title="鼠标移到链接上显示的文本">XXX</a>
- 在新窗口打开：<a href="XXX.html" title="悬停文本" target="_blank">XXX</a>
- 锚点：
- 页面内锚点 <a href="#abc">点击我直接跳转到锚点指向位置</a>
<h2><a name(或id)="abc">要跳转的位置</a></h2>
-
- 页面外锚点 <a href="要跳转页面.html#abc>点击我跳转到指向页面的指向位置</a>
<h2><a name(或id)="abc">要跳转的位置</a></h2>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> DTD：XHTML1.0 Transitional
指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD（DocType Declaration文档类型定义），因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
在 HTML 4.01 中有 3 个不同的文档类型（DTD），在 HTML 5 中只有一个：<!DOCTYPE HTML>。
|
大规范 |
里面的小规范 |
|
HTML4.01 |
Strict 严格的，体现在一些标签不能使用，比如u Transitional 普通的 Frameset 带有框架的页面 |
|
XHTML1.0 严格体现在小写标签、闭合、引号 |
Strict 严格的，体现在一些标签不能使用，比如u Transitional 普通的 Frameset 带有框架的页面 |
XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> （内容：页面的配置：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等）
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
（charactor set）“字符集”用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
中文字符集两个字库：UTF-8 （国际通用）和 gb2312或gbk（国标，只有汉字）UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节
UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
meta除了可以设置字符集，还可以设置关键字和页面描述(有利于Search Engine Optimization，搜索引擎优化)
<meta name="Keywords" content="keyword1,keyword2" />
<meta name="Description" content="..." />
<title>Document</title> (有助于SEO)
</head>
<body>
</body>
</html>
TIPS:
- HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示
- 标签要严格封闭
<!DOCTYPE html> <!--始终用DOCTYPE声明HTML文档，让浏览器知道这是一个html5页面--> DocType Declaration文档类型定义，网页的声明头，告诉有·浏览器这是一个什么标准的页面 <html lang="en"> <!--lang页面默认语言（可能影响搜索结果）--> <head> <meta charset="utf-8" /> <!--文档字符编码--> 字符集配置 <title>页面标题</title> <!--除了title，head内其他内容访问者不可见。（影响搜索引擎排名，建议将核心内容放在前60个字符）--> </head> <body> <div class="container">> <!--无语义通用容器，应用CSS样式或JS效果--> <header role="banner"> <!--页面级页眉：网站标识、主导航、搜索框、其他全站链接--> <!--站点标识可以放在这里--> <!--全站导航--> <nav role="navigation"> <!--将一组链接指定为重要导航--> <ul> ... </ul> </nav> </header> <!--开始主要内容--> <main role="main"> <!--标记页面的主要区域，一个页面使用一次。role="main"帮助阅读器定位主要区域--> <h1> ... </h1> <article> <!--HTML5新元素文章，自包含的容器--> <section> <!--区块：具有相似主题的一组内容，通常包含一个标题。--> <h2> ... </h2> <p> ... </p> </section> </article> <aside> <h2> ... <h2> <ul> ... </ul> </aside> </main> <!--开始附注栏。与主体内容相关性不强的内容。--> <aside> <!--aside跟在article后，例子：重要引述、侧栏、指向相关文章的一组链接、广告、博客的友情链接、twitter源、相关产品列表--> <!--次级导航--> <nav role="navigation"> <ul> <li><a href="relative address">相对地址</a></li> ... </ul> </nav> </aside> <!--开始页面级页脚,版权信息、不属于页面的全局导航链接--> <footer role="contentinfo"> 只能对页面级的footer使用contentinfo,一个页面只能使用一次。 <ul> ... </ul> </footer> </div> </body> </html>
ARIA (无障碍的富互联网应用)
屏幕阅读器：
- JAWS
- NVDA
- VoiceOver
- Windows-Eyes