HTML语义化

title: HTML方面的知识积累

1.HTML语义化

2.HTML5新增属性

3.HTML5API

HTML语义化

1. 什么是语义化

从搜索引擎来看，这个HTML元素有什么作用，扮演了什么角色，表达了什么意思；从开发者来看，就像看一篇文章，能更好地阅读以及续写下去。

2. 为什么需要语义化

• 优雅地裸奔：在没有CSS的情况下，页面也能呈现基本的内容结构

• 用户体验：如title，图片的alt，当发生意外时，可以表达出基本的含义

• 有利于SEO：搜索引擎根据语义标签确定上下文和关键字权重

• 方便其他设备解析：如屏幕阅读器，盲人阅读器，根据语义渲染网页

• 有利于开发和维护：代码可读性更好，更容易维护，更适合CSS3

3. 需要注意的地方写HTML代码的时候

   • 少使用无语义的标签 div 和 span ；
   • 语义不明显的时候，用 p 来替代 div ，p 在默认情况下有上下间距，对兼容特殊终端有利 ；
   • 不使用纯样式标签，如 b , font, u ;
   • 需要强调的文本，用 strong 替代 b , em 替代 i , 不能用其更改样式；
   • 表格，标题要用 caption ,表头用 thead ，主体用 tbody 包围， 尾部用 tfoot 包住。表头用 th ， 单元格用 td ;
   • 表单用 fieldset 标签包围，用 legend 标签说明表单的用途;
   • br 仅仅用在 p 标签中对内容换行，不能用来布局。
   • ul 如导航栏等具有列表性质的组件应当用 ul 标签构建。

4. HTML5新增的语义标签

   
   
   1559789985050.png

• header

  定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个header 元素，但需要注意的是header元素不能作为address、footer 或header 元素的子元素。

• main

  定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能。需要注意的是在一个文档中不能出现多个main 标签

• footer

  定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。使用 footer 插入联系信息时，应在 footer 元素内使用 address 元素。注意不能包含 footer 或者 header 。

• hgroup

  代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。由于该元素，h标签可重复出现。

• nav

  描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。在一个文档中，可定义多个nav 元素

• aside

  元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

• section

  代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section 通常还带标题，虽然 html5 中 section 会自动给标题 h1-h6 降级，但是最好手动给他们降级。

• article

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

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

  如果在 article 内部再嵌套 article ，那就代表内嵌的 article 是与它外部的内容有关联的，如博客文章下面的评论。

  如果元素内容可以分为几个部分的话，应该使用 article 而不是 section 。通俗来说就是 article 比 section 更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。

5. 具体语义化

   • 标题语义化

     1. 一个页面只能有一个 h1 标签，hgroup 可以打破这个规则
     2. h1 ~ h6 之间不要有断层
     3. 不要用 h1 ~ h6 来定义样式
     4. 不要用 div 来代替 h1 ~ h6

   • 图片语义化

     1. alt 和 title 属性
     • alt 用于图片描述，面向搜索引擎，当图片无法加载显示其属性值。
     • title 用于图片描述。面向用户，鼠标移动到图片上显示其属性值。

     2. figure 和 figcaption 元素，实现图片加图注的效果

        <figure>
            <img src="../images/day2-01.png">
            <figcaption>元素构成图</figcaption>
        </figure>
        

   • 表格语义化

     标签	说明
     <table>	表格
     <caption>	标题
     <thead>	表头（语义划分）
     <tboday>	表身（语义划分）
     <tfoot>	表尾(语义划分)
     <tr>	行
     <th>	表头单元格
     <td>	单元格

   • 表单语义化

     1. label 标签
     • 将表单与说明文字关联 <label for="id">说明性文字</label>
     • 语义上绑定 lable 元素和表单元素
     • 点击 lable 时，表单元素也获得焦点
     2. fieldset 标签和 lengend 标签
     • filedset给表单元素分组
     • lengend 定义表单分组下的标题

     <form>
     <filedset>
     <legend>个人信息<legend>
     <p>
     <label for="name">姓名：</label><input type=“text”>
     </p>
     <p>
     <label for="sex">性别：</label>
     <input type="radio" id="male" name=”sex“><label for="male">男</label>
     <input type="radio" id="female" name=”sex“><label for="female">女</label>
     </p>
     </filedset>   
     </form>