HTML5自学

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>基本很少用到,是告诉搜索引擎这些不是很重要的内容,当一篇文章内容较多的时候,可以用来说明一些内容是不很重要的。

原文地址:https://www.cnblogs.com/wwttc/p/11329877.html

时间: 2025-01-02 01:33:30

HTML5自学的相关文章

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

用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>购物车拖拽</title> 6 7 <style> 8 *{ margin:0; padding:0;} 9 #proList{ overflow:hidden;} 10 #pro

HTML5自学(一)

一.标签: <!-- -->:注释:cmd +/ 1 <!DOCTYPE html><!--HTML5 专属版本声明标签(表明该页面使用HTML编写),代码最上层--> 2 <html><!--表明类型,代码最外层--> 3 <head> 4 <meta charset="utf-8"><!--字符编码格式--> 5 <title>标题</title><!--当

HTML5自学(二)

1 <p> 2 <b>今天周一</b>,<span>呵呵呵呵呵...</span> 3 </p> 4 <i>斜体文字</i> 5 6 <b>加粗文字</b> 7 8 <span>块span</span> 9 10 <div class=""> 11 块标签_头部 12 <div class=""> 1

HTML5 —— 自学第一课

1.心得 首先遇见问题要寻根源,而不是将问题抛出:其次要经常查看参考文档.参考示例:学会百度. 2.技能需求 HTML5.XHTML.CSS3.JavaScript.jQuery(jQuery-UI/jQuery-Mobile) 3.HTML5 基本标签 <!DOCTYPE html>   //申明 <html lang="en">    //html标签,en 表示英文,zh 表示中文 <head>       //头 <meta chars

HTML5自学_CSS(三)

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS常用属性</title> 6 7 <style media="screen"> 8 /*标签+ 空格 + 大括号 = 标签选择器 ,可在标签选择器中定义标签属性*/ 9 .d23 { 10 color: white; 11 font-siz

HTML5自学2

1.1   文字格式 一个杂乱无序.堆砌而成的网页,会让人感觉枯无味,而一个美观大方的网页,会让人有美轮美奂,流连忘返的感觉,本节将介绍如何设置网页文本格式. 文字格式包括字体.字号.文字颜色.字体风格等内容 1.1.1          设置文字字体 一.网页字体概述 网页字体设置不同于平面设计等其他媒体设计,有更多的艺术字体可供选择,浏览器解析字体的过程是这样的,当浏览器加载 CSS 后,解析到有关字体的样式,它会在你的系统中查找这个字体,只有找到了相应的字体文件,才会根据那个字体文件对网页

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>马赛克</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[20 ]canvas绘图实例之绘制倒影

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>倒影</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[ 8 ]历史管理

触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <title>随机产生彩票号码</title> 5 <meta charset="utf-8"/> 6 <script> 7 window.onload = func