当前位置：首页 > SEO网站 > 正文内容

HTML页面标签规范使用说明

admin3年前 (2023-02-21)SEO网站234

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

HTML结构

文档标题 ......

HTML解释

称为根元素，所有的网页元素都在中

元素用于定义文档的头部

头部元素含有有: <link> <script> <style><title>标签定义文档的标题<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。针对搜索引擎的关键词，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面<link>元素引入外部样式<body></body>元素用于定义网页显示的内容HTML基本标签<div>：div标签它是可用于组合其他HTML元素的容器。可用于对大的内容块设置样式属性。文档布局。它取代了使用表格定义布局的老式方法。<hx>：hx标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题，html提供的标题有六种分别是h1 h2 h3 h4 h5 h6 。<h1>定义字号最大的标题,代表大标题,一般一个页面只用一次。<h6>定义字号最小的标题。：p元素定义段落,会自动在其前后创建一些空白。浏览器会自动添加这些空间。 ：br元素会在浏览器插入一个简单的换行符。<hr>：hr标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。<a>：a标签签用来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。href属性：描述了链接的目标URL。target属性：设置链接跳转方式<img>：img 标签用来申明图像的插入。src属性：规定显示图像的 URL。URL为图片的相对路径或者绝对路径均可。alt属性：规定图像的替代文本。title属性：定义图片的标题，鼠标移动到图片出现。：span 用来组合文档中的行内元素,可用作文本的容器。 span 元素没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。<ul>：ul 标签作为无序列表，它是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签。每个列表项始于 <li> 标签<ul><li>无序列表一</li> <li>无序列表二</li></ul><ol>有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签<ol><li>有序列表一</li><li>有序列表二</li></ol> 注释标签用于在源代码中插入注释。注释不会显示在浏览器中。可使用注释对代码进行解释，这样做有助于在以后的时间对代码的修改，当编写了大量代码时尤其有用这是一个p标签HTML标签属性HTML元素可以通过设置属性，实现某些特定的效果。属性可以在元素中添加附加信息。属性一般描述于开始标签。属性总是以名称/值对的形式出现，比如：name="value"。 这是一个带有class属性且值为container的段落标签HTML文本格式化标签：b标签表示以粗体字体形式展现内容：strong标签与b标签都表示粗体。但strong表示强调。例如，一个单词或短语需要显示得更高调，更响亮...总之要比一般文本更加突出。这里我们就使用strong标签在SEO中的应用，告知搜索引擎我们内容强调的是什么。：i标签表示以斜体字体形式展现内容。：em标签告诉浏览器把其中的文本表示为强调的内容并以斜体形式展现。<pre>：pre标签可定义预格式化的文本。被包围在 pre 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。：small标签定义小型文本。<bdo>：bdo 标签指定文本方向，其dir属性申明文本显示方向。ltr 属性值默认从左到右显示。rtl 属性值从右到左显示。:sub标签定义下标文本，下标文本将会显示在当前文本流中字符高度的一半为基准线的下方。：sup 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方。HTML单双标记的区别单标记指的是由一个标签组成。比如：换行符： ，水平线：<hr/>，图片标签:<img/>，文本标签:<input/>，link标签：<link/>，元信息标签： <meta/>。双标记由"开始标签"和"结束标签"两部分构成，必须成对使用。如：段落标签，其中是开始标签表示一个段落的开始，是结束标签，表示一个段落的结束。常见的双标记标签的有：<html> <head> <title> <body> <table> <div> <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、textareaHTML标签嵌套规则1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素。<div><h1></h1></div> —— 对<a href="#"></a> —— 对<div></div> —— 错。2. 块级元素不能放在里面。<ol><li></li></ol> —— 错<div></div> —— 错。3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是h1、h2、h3、h4、h5、h6、p、dt。4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列。<div><h2></h2></div> —— 对<div><a href="#"></a></div> —— 对<div><h2></h2></div> —— 错。HTML语义化标签什么是语义化标签那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如：网页上的文章的标题就可以用h1~h6，网页上的各个栏目的栏目名称也可以使`h1~h6。文章中内容的段落就得放在段落标签p 中，在文章中有想强调的文本，就可以使用em标签表示强调等等。1. 为啥使用语义化标签。2. 更容易被搜索引擎收录。3. 更容易让屏幕阅读器读出网页内容。4. 能够更好的体现页面的主题。5. 兼容性更好，支持更多的网络设备。<a>标签：实现超链接强调:title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。标签：文章段落放到标签中。<hx>标签：文章标题，栏目标题用<hx>表示标题标签一共有6个， h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。 <h1> 是最高的等级。和标签：特别强调某几个文字但两者在强调的语气上有区别: 表示强调， 表示更强烈的强调。并且在浏览器中 默认用斜体表示，用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用表示强调。<q>标签：短文本引用注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。<blockquote>标签：长文本引用注意浏览器对 <blockquote>标签的解析是缩进样式。<address>标签：为网页加入地址信息。<ul>标签：无序列表。<ol>标签：有序列表。<caption>标签：为表格添加标题和摘要摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容语法： <table summary="表格简介文本"> 标题用以描述表格内容，标题的显示位置：表格上方。语法：<caption>标题文本</caption>。如果你能熟练运用HTML标签及w3c规范，那对于网站的SEO会有很强的优化功底，因为HTML几乎覆盖了页面前端80%的优化范畴，也是SEO技术的核心部分之一。SEO结束语：熟悉掌握HTML全套标签和代码的运用是我们SEO优化专员必修课，也是必要的工作，而且也能具备前端开发的能力。</div></body></html>