学习笔记一只是大致介绍了一下HTML的相关内容以及简单的框架，接下来就是学习HTML的各种标签。HTML的标签有很多，简单的介绍可以参照这个网址（http://www.w3school.com.cn/tags/html_ref_byfunc.asp）。 HTML5作为最新的HTML标准，毫无疑问发生了某些变化，增加了很多标签，也修改了一些标签，不过大致的结构没发什么太大变化，并且现在不同的浏览器对于HTML5的支持已经很好，Web更是有着向移动端发力的趋势。HTML5是必须要学的！
下面就具体的说说这些标签。
上次说到HTML的大致框架。
<!--指示这是一个html5文件，应该始终位于第一行--> <!DOCTYPE html> <!--语言为英语--> <html lang="en">
<head> <!--编码方式为utf-8,否则中文有可能出现乱码--> <meta charset="utf-8"> <title></title> </head>
<body>
</body>
</html> |
<head></head>里的内容，除了<title></title>里的内容之外，是不会在浏览器上显示的，这里面的信息，是给浏览器看的，我们重点关注的，是<body></body>里填充的内容，这里的内容将展示在浏览器上，大多数HTML标签生于<body>，死于</body>。
1、<title></title>里放的是网页的题目，上面已经多少提到，显示在浏览器的标签页上。基于SEO的考量，题目应尽可能独特，尽可能的体现网页本身的内容。title标签是必须的，一定在head标签下
2、创建分级标题
共有六个这样的标签，分别是h1~h6，等级一次缩小，表现在浏览器上，是加黑加粗的，这种程度也是递减的，当然了，我们注意的，始终是"语义化"，即标签本身所代表的意思，样式的话完全可以有CSS操纵，标签h6的字完全可以更大，但这并无意义。这六个不同的标签具备的重要性是不同的，用好这六个标签，会使网页看的更有条理。
3、HTML5多了几个这样的标签：<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer>，这些自然都是放在<body></body>标签里的
一个一个的说
<header></header>是用来创建页眉的，常见的网站最上面都有一个关于各类模块的导航栏，这些都是可以放在<header></header>标签里的，当然这只是其中的一种形式，一个网页可以有多个<header></header>标签，在页面最顶端的被认为是整个网页的页眉，子版块也是可以有的
<nav></nav>标签通常放在<header></header>里，意思也很明确，就是指示导航栏的，这种指示应该只是针对网页中重要的链接群
<main></main>就和C之类的编程语言一样，标记页面的主要区域，一个页面只能使用一次，这是最外层的元素，父标签即为<body>，要仔细体会这个"主要"的意味
<article></article>标签HTML5的定义是：表示文档、也main、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容的各部分。一个网页可以有多个<article>标签，它们之间也是可以嵌套的
<section></section>标签用来定义区块，用于标记不同的类别，不同的组分，让相同的在一起，不同的区分开，看名字也看得出来。section和article的最大区别在于：section在本质上组织性和结构性更强，而article代表的是自包含的容器
<aside></aside>是用来指定附注栏，表示网页中存在的一部分与主题内容相关性没有那么强，可以独立存在的内容，比如说侧栏，重要引述，广告等，作为不是那么重要的一部分，应该放在<mian>标签的底部，当然，就具体的语义，也是可以放在<main>标签的外卖你。浏览器没有特殊的表现格式，可以用CSS来控制
<footer></footer>可以创建页脚，可以放在很多标签里，像<main>、<articel>等，但只有它的父标签是<body>时才作为整个页面的页脚，可以存放版权信息、联系地址等
4、通用容器<div></div>
这个概念在HTML5之前是已经存在的，没有具体的语义，通常是为了应用CSS或Javascript效果，但是随着HTML5之后具体标签的细化，<div>的使用频率减少，但作为最后一个备用容器，不仅在样式有出色的表现，正因为它的无语义性，可以用来搭建网页的逻辑结构
5、使用ARIA改善可访问性
通常那个使用地标角色，即所谓的role属性，添加了这个属性之后网页表面上是没有任何变化的，但是使HTML的语义更加丰富，传递出更多的信息，尤其是对于要借助一些辅助设备（如屏幕阅读器）的访问者
常见的role属性及其使用方式如下：
<header role="banner"(横幅)></header>:页面级的header元素，每个页面只能用一次
<nav role="navigation"(导航)></nav>:可以多次使用，也可以放在其他的具有导航链接的容器
<main role="main"(补充性内容)></main>:每个页面用一次，最好放在main标签里
<aside role="complementary"(补充性内容)></aside>:可以多次使用，但不要过度使用
<footer role="contentinfo"(内容信息)></footer>:通常放在页面级的页脚里，每个页面用一次
6、为元素指定类别或ID名称
这不是必须的，但可以更加精确地控制标签。ID和class的区别在于：一个标签只能有一个ID，且这个ID是唯一的，而一个标签可以有多个class，用空格隔开即可，同一个class也可以赋给不同的标签。推荐用类为元素添加标签
7、为元素添加title属性
title属性不同于title标签，是作为一个元素的属性存在，可以为网页上任何元素添加提示标签，效果是鼠标停留在该元素上时，会在光标右下方悬浮显示title的内容，并且使用title属性还可以提升无障碍访问功能
8、添加注释
HTML添加注释的方式很别致，其他地方没有见过：<!--（注释内容）-->
推荐做法：在主要区块的开头和结尾处添加注释，开始注释可以写的更加醒目，比如<!-- ======（注释内容）=======-->
总结：依然还是那句话，语义化，不要为了显示某种效果而去使用那个标签，标签本身是不具备任何效果的。有些标签在不同的语义下，很容易混淆，界限并没有那么明晰，这个除了看别人是如何处理之外，还是得自己去感受这之间的不同。这篇学习笔记介绍的标签都很大块，粒度很大，作为一个框架，细节还需要填充