HTML的语义化_html seaction-CSDN博客

HTML的语义化

什么是语义化？

根据内容的结构化（内容语义化）来选择合适的标签（代码语义化），便于开发者阅读和，爬虫的解析，禁止多次使用div造成“多div症”，因为div实际上也是存在语义的！代表部分，可以把文档分成几个有意义的内容块。为了尽量少产生无意义的语义化，就需要在当可以实现区域切割的时候，停止使用div。（例如：<div><ul><li></li></ul></div>时可以去除外部div）

为什么要语义化？

1.方便在css未加载出来的时候呈现出基本结构。

2.有利于爬虫获取资料，有利于seo

3.有利于开发人员阅读和开发。

需要注意什么？

1.少使用div和span

2.语义不明显的时候使用div或p

3.不要使用css标签，用css控制。如果要强调就使用strong和em

4.input标签的说明要使用lebal！设置id~

5.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

有哪些语义化标签呢？

基本的

html5

  1、<header>

<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

  2、<nav>

<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。

在一个文档中，可定义多个<nav>元素。

  3、<main>

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

需要注意的是在一个文档中不能出现多个<main>标签。

  4、<article>

<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

  5、<aside>

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

  6、<footer>

<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。

注意不能包含<footer>或者<header>

  7、<section>

<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。

如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。

article和seaction的区别在于整体和部分。

article：假如一段主题性内容脱离上下文后仍是完整且独立存在的一段内容，则就适用 article。它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

section：用作一段有专题性的内容，一般在它里面会带有标题（他有独自的h1）。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

关系：对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。

div 语义：Division(分隔)
span 语义：Span(范围)
ol 语义：Ordered List(排序列表)
ul 语义：Unordered List(不排序列表)
li 语义：List Item(列表项目)

1.<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。

2.<p>

段落标记，知道了<p>作为段落，你就不会再使用<br/>来换行了，而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br>。

3.<em>和<strong>

<em>标签语义为“强调”

<strong>标签语义为“更强烈的强调” 而且em 默认用斜体表示，strong 用粗体表示。

当我们知道了这三个标签的语义时，做SEO时就好决定用哪个来强调重要的关键字了，强调用<em>和<strong>，纯粹加粗用<b>。

4.<ul>标签、<ol>标签、<li>标签

<ul>标签语义为定义无序列表

<ol>标签语义为定义有序列表

<li>标签语义为定义列表项目

因此当涉及到列表的项目，应该用<ul><li>或<ol><li>（或者是<dl><dt><dd>来布局），而不是用<table>或<p>甚至<span>。

5.<dl>标签、<dt>标签、<dd>标签

<dl>标签语义为定义了定义列表

<dt>标签语义为定义了定义列表中的项目（即术语部分）

<dd>标签语义为定义列表中定义条目的定义部分

所以，当我们用带标题的列表时，即可采用<dl><dt><dd>自定义列表实现

6.<span>标签

<span>标签的语义为被用来组合文档中的行内元素

（另外应当区分<span>和<div>的区别，<div>是块级元素（block level），而<span>是行内元素，前者的内容会自动换行，而后者前后不会自动换行

http://www.cnblogs.com/coco1s/p/3578947.html）

7.<table>、<th>、<td>、<caption>

<table>标签的语义的为定义 HTML 表格

<th>标签的语义为定义表格内的表头单元格

<caption>标签的语义为定义表格标题

8.<button>标签、<input>标签、<textarea>标签

<button>标签的语义为定义一个按钮

<input> 标签的语义为用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<textarea>标签的语义为定义多行的文本输入控件

button控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。

9.<label> 标签

<label>标签的语义为为input元素定义标注（标记）