免费分享SEO优化技术、思路、技巧、方式 - 付费运营网站SEO优化服务、网络舆论处理方案
您现在的位置是:首页>网站的事

HTML页面标签规范使用说明

作者:SEO私馆时间:2021-10-31 00:05:38分类:网站的事阅读:57

我们在做网站SEO优化时涉及的前端代码层有很方面值得就是HTML,所以非常有必要掌握HTML知识,HTML是Hypertext Markup Language(超文本标记语言)的缩写,是一种基于SGML(标准通用标记语言)的标记语言,是Web用于编辑网页的主要工具。在网上,如果要向全球范围内出版和发布信息,需要有一种能够被广泛理解的语言,即所有的计算机都能够理解的一种用于出版的"母语"。WWW是环球信息网的缩写,所使用的出版语言就是HTML语言。

HTML结构

<html> <head> <meta charset="utf-8"> <title>文档标题</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="index.js"></script> <style></style> </head> <body>......</body> </html>

HTML解释

<html></html>称为根元素,所有的网页元素都在<html></html>中

<head></head>元素用于定义文档的头部

头部元素含有有:<meta> <title> <link> <script> <style>

<title>标签定义文档的标题

<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的 典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 针对搜索引擎的关键词,一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面

<meta charset="UTF-8"><!--网页编码--><meta name="Generator" content="EditPlus®"><!--用以说明生成工具--><meta name="Author" content="xxx@qq.com"><!--文档的作者--><meta name="Keywords" content="HTML,CSS,HTML5,CSS3,jQuery"><!--关键字--><meta name="Description" content="辛苦一阵子,幸福一辈子"><!--描述-->

<link>元素引入外部样式

<!-- 可以通过以下代码引入图标 --><link rel="shortcut icon " type="images/x-icon" href="https://www.seosiguan.com/favicon.ico">

<script> 元素该元素可以定义页面的脚本内容

<style>标签用于为 HTML 文档定义样式信息

<body></body>元素用于定义网页显示的内容

HTML基本标签

<div>:div标签它是可用于组合其他HTML元素的容器。

可用于对大的内容块设置样式属性。

文档布局。它取代了使用表格定义布局的老式方法。

<hx>:hx标签只用于标题,不要仅仅是为了生成粗体或大号的文本而使用标题,html提供的标题有六种分别是h1 h2 h3 h4 h5 h6 。

<h1>定义字号最大的标题,代表大标题,一般一个页面只用一次。

<h6>定义字号最小的标题。

<p>:p元素定义段落,会自动在其前后创建一些空白。浏览器会自动添加这些空间。

<br>:br元素会在浏览器插入一个简单的换行符。

<hr>:hr标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

<a>:a标签签用来设置超文本链接。 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

href属性:描述了链接的目标URL。

target属性:设置链接跳转方式

<img>:img 标签 用来申明图像的插入。

src属性:规定显示图像的 URL。URL为图片的相对路径或者绝对路径均可。

alt属性:规定图像的替代文本。

title属性:定义图片的标题,鼠标移动到图片出现。

<span>:span 用来组合文档中的行内元素,可用作文本的容器。 span 元素没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化。

<ul>:ul 标签作为无序列表,它是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记,无序列表始于 <ul> 标签。每个列表项始于 <li> 标签

<ul><li>无序列表一</li> <li>无序列表二</li></ul>

<ol>有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签

<ol><li>有序列表一</li><li>有序列表二</li></ol>

<!--注释--> 注释标签用于在源代码中插入注释。注释不会显示在浏览器中。 可使用注释对代码进行解释,这样做有助于在以后的时间对代码的修改,当编写了大量代码时尤其有用

<!-- 这就是一个p标签的写法 --><p>这是一个p标签</p>

HTML标签属性

HTML元素可以通过设置属性,实现某些特定的效果。

属性可以在元素中添加附加信息。

属性一般描述于开始标签。

属性总是以名称/值对的形式出现,比如:name="value"。

<p class="container"> 这是一个带有class属性且值为container的段落<P>标签</p>

HTML文本格式化标签

<b>:b标签表示 以粗体字体形式展现内容

 <strong>:strong标签与b标签都表示粗体。 但strong表示强调。例如,一个单词或短语需要显示得更高调,更响亮...总之要比一般文本更加突出。这里我们就使用strong标签在SEO中的应用,告知搜索引擎我们内容强调的是什么。

<i>:i标签表示 以斜体字体形式展现内容。

<em>:em标签告诉浏览器把其中的文本表示为强调的内容 并以斜体形式展现。

<pre>:pre标签可定义预格式化的文本。 被包围在 pre 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<small>:small标签 定义小型文本。

<bdo>:bdo 标签指定文本方向,其dir属性申明文本显示方向。

ltr 属性值默认从左到右显示。

rtl 属性值从右到左显示。

<sub>:sub标签定义下标文本,下标文本将会显示在当前文本流中字符高度的一半为基准线的下方。

<sup>:sup 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方。

HTML单双标记的区别

单标记指的是由一个标签组成。

比如:换行符:<br/>,水平线:<hr/>,图片标签:<img/>,文本标签:<input/>,link标签:<link/>,元信息标签: <meta/>。

双标记由"开始标签"和"结束标签"两部分构成,必须成对使用。

如:<p></p>段落标签,其中<p>是开始标签表示一个段落的开始,</p>是结束标签,表示一个段落的结束。

常见的双标记标签的有:

<html> <head> <title> <body> <table> <span> <div> <p> <h1>等等。

HTML实体转义

在HTML中,内容编辑时,如果是通过空格键编辑的多个空格,网页只会显示成一个,而小于号(<)和大于号(>),网站则会认为是标签而无法直接显示在页面中。而这些都可以通过实体字符来解决。

HTML块状元素&&行内元素

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为block,成为"块级"元素(block-level);而span元素的默认display属性值为inline,称为"行内"元素。

块状元素

块级元素会独占一行,其宽度自动填满其父元素宽度,一般情况下,块级元素可以设置width, height属性一般用来搭建网站架构、布局、承载内容……

它包括以下这些标签: address、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、menu、noframes、ol、p、pre、table、ul

行内元素

行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下才会换行,其宽度随元素的内容而变化,行内元素设置width, height无效。一般用在网站内容之中的某些细节或部位,用以"强调、区分样式、上标、下标、锚点"等等。

下面这些标签都属于内嵌元素: a、b、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、strong、sub、sup、textarea

HTML标签嵌套规则

1. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素。

<div><h1></h1><p></p></div> —— 对<a href="#"><span></span></a> —— 对<span><div></div></span> —— 错。

2. 块级元素不能放在<p>里面。

<p><ol><li></li></ol></p> —— 错<p><div></div></p> —— 错。

3. 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是h1、h2、h3、h4、h5、h6、p、dt。

4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列。

<div><h2></h2><p></p></div> —— 对<div><a href="#"></a><span></span></div> —— 对<div><h2></h2><span></span></div> —— 错。

HTML语义化标签

什么是语义化标签 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如: 网页上的文章的 标题 就可以用h1~h6,网页上的各个栏目的 栏目名称 也可以使`h1~h6。 文章中内容的段落就得放在 段落标签p 中,在文章中有想强调的文本,就可以使用em标签表示强调等等。

1. 为啥使用语义化标签。

2. 更容易被搜索引擎收录。

3. 更容易让屏幕阅读器读出网页内容。

4. 能够更好的体现页面的主题。

5. 兼容性更好,支持更多的网络设备。

<a>标签:实现超链接 强调:title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。

<p>标签:文章段落放到<p>标签中。

<hx>标签:文章标题,栏目标题用<hx>表示 标题标签一共有6个, h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。 <h1> 是最高的等级。

<strong>和<em>标签:特别强调某几个文字 但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用 斜体 表示,<strong>用 粗体 表示。 两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

<q>标签:短文本引用 注意要引用的文本不用加 双引号 ,浏览器会对q标签自动添加双引号。

<blockquote>标签:长文本引用 注意浏览器对 <blockquote>标签的解析是 缩进样式。

<address>标签:为网页加入地址信息。

<ul>标签:无序列表。

<ol>标签:有序列表。

<caption>标签:为表格添加标题和摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容 语法: <table summary="表格简介文本"> 标题用以描述表格内容,标题的显示位置:表格上方。 语法:<caption>标题文本</caption>。

如果你能熟练运用HTML标签及w3c规范,那对于网站的SEO会有很强的优化功底,因为HTML几乎覆盖了页面前端80%的优化范畴,也是SEO技术的核心部分之一。

SEO私馆结束语:熟悉掌握HTML全套标签和代码的运用是我们SEO优化专员必修课,也是必要的工作,而且也能具备前端开发的能力。

原创版权声明
本文章由“SEO私馆”纯手工原创撰写,转载必须以链接形式注明原创作者。

咨询SEO服务QQ在线

上班时间:9:00-22:00
添加微信号:seosiguan