1.HTML开发历程
1.1 XML的错误处理模型：如果解析器遇到错误，停止解析。
如果把XHTML1.1标记为XML文档类型，假设用Firefox打开这个文档，而文档中有一个符号没有正确编码，就算整个页面中只有这一处错误，浏览器也会死掉，用户将看不到任何网页内容。
HTML没有错误处理模型。
1.2 HTML文档
①文档声明：<!DOCTYPE>
-首行、顶格
告诉浏览器用哪个标准来解析文档，在HTML5中简化了：<!DOCTYPE html>
②文档头部：<head></head>：描述了文档的基本属性和信息
<meta>标签：charset定义文档编码，必须写在head的第一行；content属性是给搜索引擎用的；name="viewport"是给移动端看的，在这个meta下可以设置给移动端的宽高、缩放
<link>标签：rel="shortcut icon"的link标签中跟href，这个是描述在title栏上的icon，不需要特意写这个，因为浏览器会自动找根目录下的.ico文件展示，如果不一致则写；可以引入css样式，也可以将css样式写在<style>标签里面
③文档主体：用户真正可以在浏览器中看到的内容
2标签
一、文档章节：
body
header
nav
aside
article 相邻的article之间没有相关性，是独立的
section 相邻的section之间有相关性
footer
hx
标题：h1-h6重要性的差别，重要性依次递减。
二、文本标签：
①超链接：<a></a>
作用：
*创建指向另一个文档的链接
写上链接地址，跳转方式通过target属性来控制：target="_self"——在当前窗口显示，默认 target="_blank"——在新的窗口显示 当target为其他值时，就会在name=这个值的容器内显示打开文档的内容，一般用的iframe,iframe标签中的name属性值就必须与target属性的值相同
*创建一个文档内部的锚点
示例：
<a href="#pay">下单支付</a>
<div id="pay">下单支付。。。</div>*链接到Email地址
示例：
<a href="mailto:yixinplus@188.com">联系我们</a>多个时用逗号隔开
在手机上，点击一个电话号码自动打开拨号功能：<a href="tel:13112345678">13112345678</a>strong比em更强烈的强调，em为斜体，strong为粗体
br标签：换行
③引用：
-cite 表示引用的出处，如作品名称或人名
-q 简短的文字，作品中的一段文字，某人说的话
④代码：
code标签
⑤格式化：
-b 粗体，但不表示强调，比如摘要中的关键字，产品名称
-i 斜体，如技术术语
三、组标签：
组合内容：
分区：div
段落：p
列表：ul（无序列表）,ol（有序列表）,dl（自定义列表：名值对或问答式的列表：dt：定义了项 dd：是对项的进一步描述说明，有一定的缩进；一个dt可以对应多个dd）
pre标签：已经格式化过的，放在这个标签里面将会被原样输出，空格依旧显示为空格，换行也显示为换行
blockquote标签：大块的引用 ，有cite属性，与cite标签类似，表明出处
四、资源标签：
①嵌入资源：
img alt属性：当图片无法正确显示时，alt的值将会被显示在页面上，提高用户体验
iframe 嵌入页面，src属性值为嵌入页面地址，在嵌入页面中的操作并不影响当前页面，css与js也是相互隔离的
嵌入外部资源：
*object type属性中写入插件的类型，data属性IE8以下的浏览器不支持；插件的参数放在<param>标签中，
*embed
video 视频，controls="controls"显示控制条，poster指示封面，autoplay属性表示进入页面视频自动播放，loop属性表示视频循环播放，<track>标签引入字幕，如下：
<track kind="subtitles" src="./res/video.vtt" srclang="cn" label="cn">因为各个浏览器对于视频格式支持不一样，我们在这个标签下可以设置多个<source>标签引入不同格式的文件，<source>标签中的src属性表示地址，type表示类型
audio 音频。
图：
-canvas 基于像素的，提供了一些绘制函数，可以利用脚本来绘制图像，要求比较高的，场景比较复杂的，比如实时数据的展示，游戏等使用canvas。
-svg 矢量的，提供了一系列的图形，线性的，圆形的等。对于一些高保证的、静态的图形图像使用svg。
热点区域：
-map
<img src="http://ystore.nos.netease.com/2e660a89422d7fa5.png" alt="运动" width="1090" height="995" usemap="#Map2">
<map name="Map2" data-ganame="422预热主页-头牌大咖区" data-gapoint="点击大咖区-运动style">
<area shape="rect" coords="669,75,1075,682" href="xiupin.com/..." target="_blank">
<area shape="rect" coords="26,93,391,337" href="xiupin.com/..." target="_blank">
</map>img标签中的usemap属性要与map标签的name属性值一致，通过area标签的shape属性定义热点的形状，coords属性定义关键点
-area
五、表格标签：
table：
caption 标签定义表格名称
thead标签放头部
tbody放表格内容
tfoot放尾部
合并列：<td></td>标签中的colspan属性；合并行：<th></th>标签中的rowspan属性
六、表单标签：
如登录效果，将数据提交到后台。用到表单。
<form>标签中的action属性表示将数据提交到后台的地址；method为数据提交方法，get、post。
<fieldset>标签表示表单分区。
label标签的for属性值应该与相应的select标签的id属性值一样。
在type为txt的input标签中，placeholder属性表示用户没有输入时的提示消息，只有在高级浏览器中才支持。
input type：
-url
-number
-tel
-search
-range
-color
-date picker(date,month,week,time,datetime,datetime-local)
七、语义化：
什么是语义化？明白每个标签的作用，用合适的标签来描述页面内容。
语义化的作用？
*SEO 根据关键字的权重来确定页面的关键字
*可访问性，方便特殊用户
*可读性，方便开发人员
1434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
