HTML、CSS学习（一）语义化的Html

语义化的Html

1、什么是语义化的Html

语义化，就是要根据网页中具体的内容，选择合适的标签。即根据内容的结构化（内容语义化），选择合适的标签（代码语义化），以便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器很好的解析。

2、Html语义化的目的是什么？

1.实现裸奔：即在没有CSS的状况下，页面也能呈现出较好的内容结构、代码结构。

2.方便其它设备的解析，例如屏幕阅读器等

3.有利于网络爬虫进行有效信息的抓取。

4.便于团队开发和维护

3、如何语义化？

• 尽量少的使用无语义的标签div和span；
• 在语义不明显时，既可使用div或者p时，尽可能用p, 由于p在默认状况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 须要强调的文本，能够包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和通常单元格要区分开，表头用th，单元格用td；
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
• 每一个input标签对应的说明文本都须要使用label标签，而且经过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

4、Html5新增语义化标签

一、header元素

header元素表明“网页“和”section”的页眉。一般包含H1~H6元素或者hgroup元素。做为整个页面或者内容块的标题，也能够包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。整个页面没有限制header元素的个数，能够拥有多个，能够为每一个内容块增长一个header元素

header使用注意：

•能够是“网页”或任意“section”的头部部分；

•没有个数限制。

•若是hgroup或h1-h6本身就能工做的很好，那就不要用header。

二、footer元素

footer元素表明“网页”或“section”的页脚，一般含有该页面的一些基本信息，例如：文档创做者的姓名、文档的版权信息、使用条款的连接、联系信息等等。。

footer使用注意：

•能够是“网页”或任意“section”的底部部分；

•没有个数限制，除了包裹的内容不同，其余跟header相似。

三、hgroup元素

hgroup元素表明“网页”或“section”的标题，当元素有多个层级时，该元素能够将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

hgroup使用注意：

•若是只须要一个h1-h6标签就不用hgroup

•若是有连续多个h1-h6标签就用hgroup

•若是有连续多个标题和其余文章数据，h1-h6标签就用hgroup包住，和其余文章元数据一块儿放入header标签

四、nav元素

nav元素表明页面的导航连接区域。用于定义页面的主要导航部分。可是我在有些时候却不由自主的想用它，譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，可是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的连接列表，虽然指向不一样网站的不一样区域，譬如服务条款，版权页等，这些footer元素就可以用了。

nav使用注意：

•用在整个页面主要导航部分上，不合适就不要用nav元素；

五、aside元素

aside元素被包含在article元素中做为主要内容的附属信息部分，其中的内容能够是与当前文章有关的相关资料、标签、名词解释等。（特殊的section）

在article元素以外使用做为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容能够是日志串连，其余组的导航，甚至广告，这些内容相关的页面。

aside使用总结：

•aside在article内表示主要内容的附属信息，

•在article以外则可作侧边栏，没有article与之对应，最好不用。

•若是是广告，其余日志连接或者其余分类导航也能够用

六、article元素

article元素最容易跟section和div容易混淆，其实article表明一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

除了它的内容，article会有一个标题（一般会在header里），会有一个footer页脚。

article使用注意：

•自身独立的状况下：用article

•是相关内容：用section

•没有语义的：用div

另外，说一下，HTML5其余结构元素标签

HTML5节元素标签包括body article nav aside section header footer hgroup ，还有h1-h6和address。

•address表明区块容器，必须是做为联系信息出现，邮编地址、邮件地址等等,通常出如今footer。demo

•h1-h6由于hgroup，section和article的出现，h1-h6定义也发生了变化，容许一张页面出现多个h1。