网页设计：HTML标签语义化

喜欢ヅ旅行 2022-12-27 08:18 141阅读 0赞

#### 标签语义化： ####

为了使我们的网站更好的被搜索引擎抓取收录，更自然的获得更高的流量，网站标签的语义化就显得尤为重要。所谓标签语义化，就是指标签的含义。

#### 语义化的优点： ####

*  使页面没有css的情况下，也能够呈现出很好的内容结构；
 *  有利于SEO，爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息；
 *  提升用户体验；
 *  便于团队开发和维护，语义化使得代码更具有可读性；
 *  方便其他设备解析，以有意义的方式来渲染网页；

#### 常用的语义标签： ####

**`<h1>~<h6>`标签**：

定义页面的标题；

<h1>标题</h1>

**`<header>`标签**:

用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

<header> 
       <h1>标题</h1>    
    <nav>       
       <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>    
    </nav>
    </header>

**`<nav>`元素**

定义页面的导航链接部分区域，用于定义页面的主要导航部分;

<nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>

**`<main>`元素**

定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<main>
        <h1>标题</h1>
        <p>内容</p>
    </main>

**`<article>`元素**

定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

<article>
        <header>
            <h3>
                <a href=""></a>
            </h3>
        </header>
        <section>
            <p></p>
        </section>
        <footer>
            <small>
                <time datetime=""></time> 
                <a href=""></a>
            </small>
        </footer>
    </article>

**`<section>`元素**

元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。

<section>
        <h2></h3>
        <p></p>
    </section>

**`<aside>`元素**

定义与主要内容相关的内容块。通常显示为侧边栏。

<aside>
         <h1></h1>
         <p></p>
    </aside>

**`<footer>`元素**

定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

<footer>
          底部内容
    </footer>

**`<small>`元素**

为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号，那么  标签将不起任何作用。

<p></p>
    <small> 
       <time datetime=""></time>
       <a href=""></a>
    </small>

**`<strong>`元素**

把文本定义为语气更强的强调的内容，以表示内容的重要性。

<strong>内容</strong>

**`<em>`元素**

标记内容着重点（大量用于提升段落文本语义），通常呈现为斜体文字。

<em>内容</em>

**`<blockquote>`元素**

定义块引用，浏览器会在 blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源

<blockquote cite="">内容</blockquote>

**`<abbr>`元素**

解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。

<abbr title="">内容</abbr>

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML标签语义化

标签语义化：语义和默认样式的区别：默认样式是浏览器设定的一些常用tag的表现形式；语义化的主要目的就是让大家直观的认识标签和属性的用途和作用；标签

电玩女神/ 2022年12月27日 08:21/ 0 赞/ 160 阅读

相关网页设计：HTML标签语义化

标签语义化：为了使我们的网站更好的被搜索引擎抓取收录，更自然的获得更高的流量，网站标签的语义化就显得尤为重要。所谓标签语义化，就是指标签的含义。语义化的优点：

喜欢ヅ旅行/ 2022年12月27日 08:18/ 0 赞/ 142 阅读

相关 HTML标签语义化，值得收藏！

思维导图 ![0873c9f8fdaa7d6744e25cf844431925.png][] 学习路线 > 第一阶段：网页制作 HTML：常用标签，锚点，列

àì夳堔傛蜴生んèń/ 2022年10月18日 01:44/ 0 赞/ 210 阅读

相关 html5语义化标签

　　·header 用于页面的头部或板块的头部也可用于板块头部　 ·footer 用于页面的头部或者板块的底部　　·nav 导航　　·hgroup 一个标题和子标

超、凢脫俗/ 2022年10月03日 01:49/ 0 赞/ 233 阅读

相关 html标签语义化：

lable: lable 是有语义标签，只适用于表单中，用于显示在表单傍边的说明行文字； class 和 id：对于页面关键的结构或者大的结构，才

曾经终败给现在/ 2022年07月13日 08:12/ 0 赞/ 295 阅读

相关 HTML5语义化标签

概念语义元素清楚地向浏览器和开发者描述其意义。语义化优点： 1. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。 2. 有利于SEO，搜索引擎根据标签来

淩亂°似流年/ 2022年05月11日 11:14/ 0 赞/ 285 阅读

相关 html5语义化标签

转前端初学者对html语义化标签的理解 2018年06月25日 13:47:31 [liuyingv8][] 阅读数：1116 在学习HTML阶段的最后，我们会涉及

缺乏、安全感/ 2022年03月09日 13:56/ 0 赞/ 293 阅读

相关 HTML语义化标签

header 头部 article 主体 aside 侧边栏 section 划分模块区域 figcaption 图片标题转载于:https://www.cnblo

╰+攻爆jí腚メ/ 2021年12月11日 04:51/ 0 赞/ 366 阅读

相关 html中的语义化标签

html中的语义化标签因为H5新增了很多标签元素这些新增标签元素为我们书写代码带来了很多便利，也可以在开发过程中见名知意。 1. 这个标签一般用在文档前面，表示头部

古城微笑少年丶/ 2021年11月26日 14:12/ 0 赞/ 348 阅读

相关标签语义化

> 使用正确的标签做正确的事，即使是源码也是有意义的，也是可读的。理解起来很简单，人眼能看到的某个标签长什么样，做什么用，但是阅读设备只能阅读源码结构，所以必须要让这个结构是有

我不是女神ヾ/ 2021年09月18日 23:30/ 0 赞/ 378 阅读