先说一些废话。大三上学期刚开学那会，有点闲，因为这一学期是在机房封闭式上课，前几周上三门课：管理信息系统，UML系统建模与分析设计，JAVA，后三周上JSP，MYSQL，软件测试LoadRunner。前几周的晚上没课，又没事干，然后就开始自学html，当时数学院的老乡给了我一摞ACCP6.0的书，有一本是《使用HTML语言和CSS开发商业站点》，然后我就开始了每天晚上边敲边看，因为所见即所得，当时就觉得挺有意思。那是也不知道有什么更好的IDE，就用的电脑里装的UltraEdit，也没用电脑里的Eclipse，觉得有点大材小用，哈哈，UE里敲html也没提示功能，然后慢慢的，我就能自己熟练的敲出来......现在想想，当时我真的是有点自虐吧，不过还是挺喜欢知识装进大脑里的感觉......后来这本书很快就被我消化完了，然后就开始下一本《使用JavaScript增加交互效果》，我喜欢动态的东西，就像大一我走火入魔的喜欢上做视频甚至想走上后期的道路~好了，说这么多，总之就是一句话，由于自己学了点HTML和CSS入门，这门网易的HTML课对于我而言，主要是温故而知新以及补充HTML5和CSS3的新知。
HTML文档包括文档声明、文档头部和文档主体。
一、文档声明
<!DOCTYPE>必须首行，定格，文档声明的作用就是告诉浏览器用什么标准来解析HTML文档。
-HTML4.01
·strict.dtd(严格类型)
·loose.dtd（松散类型，也称过渡类型Transitional）
·frameset.dtd (框架类型)
-HTML5
·<!DOCTYPE html>
二、文档头部
1.<title>标签
描述网页的标题，类似一篇文章的标题。
打开网页后，将在浏览器窗口的标题栏显示网页标题以及在搜索引擎的搜索结果中看到。
2.<meta>标签
使用该标签描述网页的具体摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不显示，其 目的是方便浏览器解析或利于搜索引擎搜索。
-charset属性
表示字符集编码，一般设置为uft-8（在第一次开发项目的过程中，字符乱码的问题真的是很头疼）
注：字符声明要放在title的前面
-keywords(关键字)
表示搜索关键字，方便搜索引擎的搜素。
-description（描述）
表示网站内容的具体描述，方便搜索引擎的搜素。
-viewport （视窗）
对移动端的浏览器才有效果。设定移动端浏览器视口的宽高和缩放等。后续讲解。
3.<link>标签
- 通过下面这个方式添加网站的图标
<link rel="shortcut icon" href="favicon.ico">
默认情况下，不需要手动引入icon，因为浏览器会默认读取根目录下的图标进行展示，如果有些页面中的图标和整站的图标不同，则可以这样引入。
- 引入css样式
<link rel="stylesheet" type="text/css" href="../css/style.css">
<style type="text/css">这里写内部样式</style>
btw：文档头部的内容，除了title和icon，其他的都不会作为内容呈现给用户。
三、文档主体
1.书写规范
·小写
·属性值用双引号括起来
·嵌套缩进
2.大部分的HTML标签
3.和文档章节相关的标签
·body
·header
表示章节的头部，包含一些标题，logo，搜索表单等。
·nav
页面中的导航可能有多个，整站导航、页面内部导航。
·aside
表示和主要内容不相关的区域，比如侧边栏，插入的广告等。
·article
表示独立的可重复的结构，如帖子，评论，新闻文章等。
·section
表示文档中的一个区域或者一节，比如内容的专题组，一般来说section会带一个标题，相邻的section之间的内容是由相关性的。
·footer
表示章节的尾部，包含版权信息，链接等，一些独立内容的尾部也可以用到footer标签。
·hx（h1-h6）
HTML5使得文章章节更加语义化。
4.和文本相关的标签
·超链接 <a><a/>
-页面间的链接：A页到B页
-锚链接：A页甲位置到A页的乙位置 或者 A页的甲位置到B页的乙位置
-功能性链接：在页面中调用其他程序功能，例如Email
<a>的target属性为指定链接在哪个窗口打开，默认值为_self（自身窗口），_blank为新建窗口，也可以指定在某个iframe中打开，把target值设为iframe的名称。
·强调 <em></em> <strong></strong>
·行内容器 <span></span>
·换行 <br>
·引用 <cite>引用的出处，如作品名称，人物
<q>引用的一段文字
·代码 <code>
·格式化 加粗：<b> 斜体：<i>
5.嵌入资源
·img
alt属性用来描述图片的含义，一般要写啦，如果图破了，什么都么有，很尴尬的。
·iframe
比如嵌入第三方的广告页面
·object
·embed
·video
插入视频，由于不同的浏览器对视频的格式的支持不一样，因此要准备多个格式的视频文件。
通过controls属性可以显示控制条，oster属性显示视频的封面，track属性引入字幕，autoplay属性控制视频自动播放，loop视频循环播放
·audio 音频
·canvas、svg 嵌入图形、图像
·map、area 热点区域
6.表格
·rowspan、colspan
·<colgroup></colgroup>
7.表单
-<label></label> 通过for属性与标签关联，for的属性值为关联的标签的id名
-<input>
·placeholder属性
placeholder 属性提供提示信息，该提示会在用户没有输入时显示，并会在用户输入值之后获得焦点时消失。
·HTML5中新增的type属性值
email、url、number、tel、search、range、color、date picker
四、语义化
用正确的标签来描述页面。
作用
1.SEO（搜索引擎优化）
搜索引擎的爬虫会根据语义化的标签来确定关键字的权重，搜索引擎也会对语义化的页面给一个更高的权重，便于用户搜索到。
2.可访问性
残障人士通过屏幕阅读器访问我们的页面，屏幕阅读器对于不同的标签发出不同的声音，使用更语义化的标签能够传达不同信息的重要性。
3.可读性
便于团队开发维护