1.1   标题文本

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

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

https://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作为标题标签，并且依据重要性递减。这种布局原则能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等。

1.1.2          标题标签的作用

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

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

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

1.1.3          合理使用标题标签

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

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

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

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

HTML5自学的更多相关文章

  1. html5开发学习 html5自学需要怎么学

    记得很多大鳄都说过一句话:只要站在风口上,猪都能飞起来.而对于如今的IT技术领域来说,无疑这只幸运的"猪"非html5莫属.html5开发技术在16年迎来了一个飞跃的发展,这也让很 ...

  2. HTML5 —— 自学第一课

    1.心得 首先遇见问题要寻根源,而不是将问题抛出:其次要经常查看参考文档.参考示例:学会百度. 2.技能需求 HTML5.XHTML.CSS3.JavaScript.jQuery(jQuery-UI/ ...

  3. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  4. HTML5自学笔记[ 10 ]简单的购物车拖拽

    用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...

  5. HTML5自学笔记[ 9 ]HTML5实现元素的拖放

    要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不 ...

  6. HTML5自学2

    1.1   文字格式 一个杂乱无序.堆砌而成的网页,会让人感觉枯无味,而一个美观大方的网页,会让人有美轮美奂,流连忘返的感觉,本节将介绍如何设置网页文本格式. 文字格式包括字体.字号.文字颜色.字体风 ...

  7. Html5 自学笔记

      1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...

  8. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. HTML5自学笔记[ 23 ]canvas绘图基础7

    变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.

随机推荐

  1. AtCoder AGC019E Shuffle and Swap (DP、FFT、多项式求逆、多项式快速幂)

    题目链接 https://atcoder.jp/contests/agc019/tasks/agc019_e 题解 tourist的神仙E题啊做不来做不来--这题我好像想歪了啊= =-- 首先我们可以 ...

  2. 微信小程序_(校园视)开发视频的展示页_上

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  3. mysql5.7以上基本配置

    MySQL表名区分大小写设置 关闭MySQL服务 在服务运行目录找到my.ini或者my.cnf文件 find / -name my.cnf 打开文件,找到[mysqld]在下面增加一行 lower_ ...

  4. Tag 标签

    用于标记和选择. 基础用法 由type属性来选择tag的类型,也可以通过color属性来自定义背景色. <el-tag>标签一</el-tag> <el-tag type ...

  5. 1.Oracle 11g 精简客户端

    大型项目开发中,当属Oracle的使用率最高.通常开发人员的机器上都会装上一个 oracle客户端,但一般我们不会再自己的机器上安装Oracle database,因为我们的项目中有专为开发使用的or ...

  6. Access denied for user XX

    解决方法:将pom.xml中的mysql-connector-java降低版本(直接去maven仓库复制:https://mvnrepository.com/),比如: <!-- https:/ ...

  7. asp.net文件夹上传下载控件分享

    用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个需要在.net环境下大文件上传的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助. 以下是此例中各种脚本文件 ...

  8. 【JVM学习笔记】类加载过程

    在Java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的:提供了更大的灵活性,增加了更多的可能性 JVM启动过程包括:加载.连接.初始化 加载:就是将class文件加载到内存.详细的说是 ...

  9. js Date格式转化

    Date格式转化为日期  年-月-日(格式随意修改) GetDateStr(dd, AddDayCount) { dd.setDate(dd.getDate() + AddDayCount)// 获取 ...

  10. 怎么在 localhost 下访问多个 Laravel 项目，通过一个IP访问多个项目（不仅仅是改变端口哦）

    server { listen 80; server_name blog.sweetsunnyflower.com; index index.html index.htm index.php; cha ...