HTML标签语义化，裸奔都那么帅

1、HTML语义化

根据内容的结构，选择合适的标签和结构。

 

2、语义化的作用

1）使用户更容易阅读，页面结构清晰，即便没有css，裸奔，也能够让用户获取到关键信息。

2）方便一些特殊的设备更好的解析。

3）使开发者更容易维护。

4）让搜索引擎和爬虫更好的解析。

 

3、常用标签及我们要需要注意的点

1）尽可能少的使用无语义的标签

 

2）使用表格时应该如下

<table><caption>日常消费</caption><thead>表头
  <tr><th>项目</th><th>支出</th>
  </tr>
  </thead>
  <tbody><tr><td>聚餐</td><td>200元</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$180</td>
  </tr>
  </tfoot>
</table>

 

3）<hn>标题

<h1> <h2> <h3> <h4> <h5> <h6>
用于文章的标题使用，重要性和字号逐渐减小，样式默认加粗。虽然我们可以定义hn的字体大小，但其字号排序应遵循原标准h1-h6字体逐渐减小。

 

4）<p>段落
段落标记，使用p作为段落是，p中的文字会自动换行。不需要使用<br>来区分锻炼，尽量少使用<br>

 

5）常见文本格式化标签。HTML现在只负责语义，而不负责样式。因此使用格式化标签时我们将他当作css钩子使用

<strong> :定义重要性强调的文字

<em> ：定义强调的文字

<ins>：定义插入的文字

<del>：定义删除的文字

 

6）<code> 计算机代码格式

固定的字母尺寸和间距，便于代码的展示

 

7）<a> 超链接
指向其他位置的连接

 

8）<img>图像

 

9）<ul>无序列表
一个项目的列表

 

10）<ol>有序列表
对项目使用数字进行标记

 

11）<hr>水平横线

 

12) <pre>标签
定义预格式化区域，在其区域中的文本会保留空格和换行符，经常会看到在code前出现。

 

13)<div>标签
Division,我们常用于划分页面逻辑。用于组合其他HTML元素的容器。

 

14）<form>标签
用于处理用户输入数据

 

15）<input>标签
type="text"，文本输入框;
type="password"时, 密码输入框。
type="radio" 时，单选框。
type="checkbox" 时，复选框。
type="submit时" 提交按钮。
type="reset时" 重置按钮。

 

16）<textarea>标签
<textarea rows="行数" cols="列数">用于显示大段文本</textarea>

17）<select>标签
<select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select>

 

18）<label>标签
无特殊效果，当鼠标指向它时，会将焦点转移到其指定的from上

19）<button>标签
定义一个按钮，我们使用CSS和JS可以让任何标签变成一个按钮，但是在特殊环境下它可能会出现意外。详见：https://segmentfault.com/q/1010000009486869?_ea=1945542

 

H5新增标签

1）<header></header>

页眉，网站标志、导航、全站链接以及搜索框。

 

2）<footer></footer>

页脚，父级是body时是整个页面的页脚。

 

2）<nav></nav>

标记导航，放弃我们使用的li，使用nav。

 

3）<main></main>

页面主要内容，唯一，<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

 

4）<article></article>

报纸的一页，一篇文章

 

5）<section></section>

具有相关性的一组内容

<section>
  <h1>HTML标签语义化</h1>
  <article>
    <h2>什么是语义化</h2>
    <p>...</p>
  </article>
  <article>
    <h2>语义化的作用</h2>
    <p>...</p>
  </article>
  <article>
    <h2>常用的标签及我们需要注意的</h2>
    <section>
      <h3>常用标签</h3>
      <p>....</p>
    </section>
    <section>
      <h3>H5新增标签</h3>
      <p>....</p>
    </section>
  </article>
</section>

 

 6）<aside></aside>

指定附注栏。主要有侧栏、指向文章的链接等

 

9.<mark></mark>

突出显示文本，提醒读者。样式差强人意，需要CSS修改。

 

10.<cite></cite>

标签定义作品

 

11.figure

标签规定独立的流内容，就像报纸上每页的插图。

<figure>
    <img src="/macaque.jpg" alt="Macaque in the trees">
    <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by
      <a  href="http://www.flickr.com/photos/rclark/">Richard Clark</a>
     </figcaption>
</figure>

 

12.<address>
联系信息

 

13）<progress value="22" max="100"></progress>

定义运行中的进度