标题文本的设计

川长思鸟来 2022-06-04 03:58 198阅读 0赞

# **1.1 标题文本** #

在HTML5中，文本的结构除了以行和段落出现之外，还可以作为标题存在，通常一篇文档最基本的结构就是由不同级别的标题和正文组成的。

例如1：（中国门户网站）

http://www.gov.cn/xinwen/2017-11/06/content\_5237462.htm

例如2：（百度知道）

https://zhidao.baidu.com/question/1737748898441802467.html?entry=home\_new\_content

例如3:（百度百科）

https://baike.baidu.com/item/%E6%B5%A3%E7%86%8A\#hotspotmining

## **1.1.1 标题文本的标签** ##

HTML5文档中的各级标题由<h1>到<h6>元素来定义，英文h是headline（标题行）的简称，其中，h1表示1级标题，级别最高，文字最大，其它元素依次递减，h6级别最小。h标签是成对出现的，以<h>开始，以</h>结束。h1，h2，h3，h4，h5，h6作为标题标签，并且依据重要性递减。这种布局原则能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等。

![20171203231015389][]

![20171203231025585][]

## **1.1.2 标题标签的作用** ##

在html里的每一个标签都有其自身的意义，而H标签作为标题标签，它的意义更是至关重要。

1) 标签直观的告诉用户，网页哪部分是重要的，哪些是不那么重要的。heading标签通常用来为用户展现网页的结构，由于heading 标签通常会使某些文字比普通的文字大，对于用户来说，便于他们更直观地看出这些文字的重要性，而且可以帮助他们理解heading文字下方的内容。多种渐变大小的heading一开始主要为网页的内容创建分层结构，便于用户直观地浏览网站；

2) H标签引导搜索引擎，网页哪些是重要的内容。对搜索引擎来说，<h>标签的主要意义是告诉搜索引擎这个是一段文字的标题或说是主题，起强调作用，h标签的权重会高于Strong。因此在搜索引擎优化中H标签的运用非常重要。因为，搜索引擎需要在一堆文本中明白它写的是什么，所以，它也依照人们的阅读习惯，首先寻找文章的标题，然而，不像人们那样可以迅速确定标题是什么，搜索引擎是“盲人”，所以，使用<h>标签就指导搜索引擎标题在那里，便于它们迅速掌握文本大意。标题（H1-H6）标签是采用关键词的重要地方，这个标签应该包括文本中最重要的关键词。

## **1.1.3 合理使用标题标签** ##

1) <h1>用来修饰网页的主标题，即网页中最上层的标题，一般是网页的标题，文章标题，<h1>中部署主关键词。<h1>尽量靠近在html中的<body>标签，越近越好，以便让搜索引擎最快的领略主题。每个页面只使用一次H1，并且H1中务必包含网站的关键字。多个H1造成的后果是搜索引擎不知道页面的哪个标题内容最重要,会淡化这个页面的标题和关键词。H1用得好的话会提高关键字的排名，用得不好会对SEO和用户造成伤害。

2) <h2>表示一个段落的标题，或者说副标题，部署长尾关键词（即网站上的非目标关键词但与目标关键词相关的也可以带来搜索流量的组合型关键词）。

3) <h3>表示段落的小节标题，<h3>效果跟Strong差不多，一般是用在段落小节。

a) <h4>-<h6>基本很少用到，是告诉搜索引擎这些不是很重要的内容，当一篇文章内容较多的时候，可以用来说明一些内容是不很重要的。

## 案例设计： ##

代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>创建标题文本</title>
    </head>
    
    <body>
    <hgroup>
    	<h1>第一章 初始HTML5</h1>
    	<h2>1.1 HTML5简介</h2>
    	<h3>1.1.1 HTML5简介</h3>
    	<h3>1.1.2 HTML5文件的基本结构</h3>
    	<h2>1.2 HTML5文件的编写方法</h2>
    	<h3>1.2.1 案例1——手工编写HTML5</h3>
    	<h3>1.2.2 案例2——使用HTML5编辑器</h3>
    	<h2>1.3 使用浏览器查看HTML5文件</h2>
    	<h3>1.3.1 各大浏览器与HTML5的兼容</h3>
    	<h3>1.3.2 案例3——查看页面效果</h3>
    	<h3>1.3.3 案例4——查看源文件</h3>
    </hgroup>
    </body>
    </html>

结果：

![20171203231103656][]

小技巧：

1. 当代码对不整齐时，可以选择【格式化源代码】——【应用源格式】将代码对整齐。

![20171203231319724][] ![20171203231353234][]

2. 快速编写标题代码

![20171203231602510][]然后按“TAB”键，则出现![20171203231722240][]

3. 另一种创建标题文本的方法：【按Ctrl+t】键——输入h1(或h2等）——按两次enter键就可以了

![20171203232147536][]

# 1.2 标题文本的默认属性 #

![20171204164547636][]

另一种表示：

![20171204165644243][]

![20171204165654369][]

![20171204165950375][]

代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>创建标题文本</title>
    <style>
    	body{font-size: 20px;}
    	h1{background-color:#EF5CCE;font-weight: normal}
    	h2{background-color: #50DCB3}
    </style>
    </head>
    
    <body>
    <h1>第一章 初始HTML5</h1>
    
    <h2>1.1 HTML5简介</h2>
    <h3>1.1.1 HTML5简介</h3>
    1.1.2 HTML5文件的基本结构
    
    1.2 HTML5文件的编写方法
    1.2.1 案例1——手工编写HTML5
    1.2.2 案例2——使用HTML5编辑器
    
    1.3 使用浏览器查看HTML5文件
    1.3.1 各大浏览器与HTML5的兼容
    1.3.2 案例3——查看页面效果
    1.3.3 案例4——查看源文件
    
    1.4 跟我练练手
    1.4.1 练习目标
    1.4.2 上机练习
    
    1.5 高手甜点
    </body>
    </html>

结果：

![20171204170129532][]

[20171203231015389]: /images/20220604/65777f29789f4f2db7d6608323f7db16.png
[20171203231025585]: /images/20220604/604b0d077ff1486f8de9024b753f1be7.png
[20171203231103656]: /images/20220604/deb7d6085dee4920bac0fbe5c93544fc.png
[20171203231319724]: https://img-blog.csdn.net/20171203231319724
[20171203231353234]: /images/20220604/76b117b1d0924e04abc9b3a1d4b5a597.png
[20171203231602510]: https://img-blog.csdn.net/20171203231602510
[20171203231722240]: /images/20220604/01861c90c53645c89e20b55f89834783.png
[20171203232147536]: /images/20220604/02e59cd6d0f640e58ada4ea172efb598.png
[20171204164547636]: /images/20220604/205295edc6244cc4aa54230f0752d7d4.png
[20171204165644243]: /images/20220604/24accf81f8bc4bc9b2695c681e031393.png
[20171204165654369]: /images/20220604/fe658973cbf54bc08502bf6f39735787.png
[20171204165950375]: /images/20220604/bf60e8098e6844d6850f5b53048349d8.png
[20171204170129532]: /images/20220604/6a24bd8278d749c4a6d9df303a23c31d.png