你的位置:主页 > SEO文章 > 正文

SEO里面html5的标签使用方法

时间:2018-01-24 14:23       来源:保定SEO研究中心    作者:保定SEO研究中心       点击:

意义

HTML5有利于搜索引擎优化和语义分析,同时更好地帮助小屏幕装置和视障人士使用。更多语义化标签的出现是为了减少div的使用,嵌套div影响搜索引擎判断网页内容。HTML5取代Flash和Silverlight。

文档类型和标准声明

html文档,text/html媒体类型
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>大保健会所</title>
  </head>
  <body>
    <p>晚上去大保健吗</p>
  </body>
</html>
 
xml文档,xml媒体类型。根据xml的规范需要设置命名空间(namespace)为http://www.w3.org/1999/xhtml。
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>大保健会所</title>
  </head>
  <body>
    <p>晚上去大保健吗</p>
  </body>
</html>

文档语言

<html lang="zh-Hans">中文
<html lang="zh-cmn-Hans">简体中文
<html lang="zh-cmn-Hant">繁体中文
<html lang="en">English

头部标签

character

<meta charset="UTF-8">表明该文档是utf-8格式的
<meta charset="gb2312">表明该文档是gbk格式的

viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
针对移动端优化的标签
width:控制viewport的大小,可以指定一个值如600,或者特殊的值如device-width为设备的宽度。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,页面第一次载入时的比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。

http-equiv

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页
IE=edge:告诉IE使用最新的引擎渲染网页
chrome=1:可以激活Chrome Frame

renderer

<meta name="renderer" content="webkit">渲染内核的使用
 

base

base下的target属性和a的target属性一样,很多老版本浏览器早就支持了。target必须在所有链接元素之前声明。
<head>
<base target="_blank" />
</head>

icon

原来主流的icon尺寸是16*16,由于现在是HTML时代,讲究大,可以把尺寸设置为32*32,各大主流浏览器也支持。还可以根据不同浏览器设置不同的icon尺寸,不过没这个必要,弄一个可以了。
<link rel="icon" href="/skin/web/favicon.ico" type="image/x-icon" sizes="32x32" />

布局标签

section

一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节,或者一个tab标签下的box块。一个页面里可以拆分成多个section。
适合用于章节、标签切换效果的每一个tab容器或论文中有编号的地方,也可以用于网站主页中划分简介、新闻、联系信息等板块。多为一些公司主页的版块化区域,新闻版块可能只有简单文章列表而没有正文,此类版块多在主要区域展示。
如果元素的内容集中到一起显示可以表达相应的意思,那就可以用article元素,而没必要使用section元素。
section元素不是一般的容器元素,所以如果一个元素需要定义相应的css或者js,那推荐使用div元素,section的使用条件是确保这个元素的内容能够明确地展示在文档大纲里。
section里可以任意使用h1
<article>
    <p>北京丝足会所排名大会</p>
    <section>
        <h1>海淀区丝足会所</h1>
        <p>海淀区是一个历史悠久的文化区,这里洋溢着很多古典与现代结合的会所</p>
    </section>
    <section>
        <h1>朝阳区丝足会所</h1>
        <p>朝阳区和其名字一样,整个地区的会所发展始终朝气蓬勃</p>
    </section>
</article>
 
<!DOCTYPE Html>
<html>
<head>
    <title>2017中南海不睡觉跨年舞台</title>
</head>
<body>
    <h1>节目表</h1>
    <section>
        <h1>RAP之战</h1>
        <p>跟邓紫棋干</p>
        <p>跟邓超干</p>
        <p>跟韩红干</p>
        <p>跟韩寒干</p>
        <p>跟郭敬明干</p>
    </section>
    <section>
        <h1>颁奖表彰</h1>
        <ul>
            <li>六小龄童颁奖祝贺</li>
            <li>六小小龄童颁奖祝贺</li>
            <li>小六龄童颁奖祝贺</li>
            <li>六龄童颁奖祝贺</li>
            <li>为湿颁奖祝贺</li>
            <li>高老庄姥姥颁奖祝贺</li>
        </ul>
    </section>
</body>
</html>

article

article代表一个文档内容的独立片段,例如博客条目或报纸文章,<article>包含的内容独立于文档的其余部分。一般用在整个文章部分。
article是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。一般来说,article会有标题部分(通常包含在header内),有时也会包含footer。虽然section也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article更加独立完整。
当article内嵌article时,内部的article内容是和外层的article内容相关的。例如一篇文章中包含用户评论的article就应该嵌套包含在文章主体的article之中。
<article>
  <header>
      <h1>对于莲花池澡堂的全面分析</h1>
   <p>发表日期:<time pubdate="pubdate">2017/2/9</time></p>
  </header>
    <p>莲花池是南京人的老澡堂,不少老南京天天在里面泡澡,吹牛,打牌...</p>
  <section>
      <h2>评论</h2>
     <article>
          <header>
      <h3>发表者:帕克</h3>
      <p>1小时前</p>
     </header>  
       <p>澡堂不错,就是人太多,本身我就胖的一比,没地方泡了</p>
        </article> 
    <article>
          <header>            
      <h3>发表者:凯文</h3>
            <p>2小时前</p>
     </header>
        <p>跟帕克一起来洗澡真尼玛累,一个人抵两个位子,下次不带他了</p>  
    </article>
     </section>
</article>

aside

aside元素用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分。
根据目前的规范,aside元素有两种使用方法:
1、被包含在<article>中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。一般就是相关推荐。
2、在<article>之外使用,作为页面或站点全局的附属信息部分。最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。
<body>
    <header>
        <h1>seo搜索引擎优化</h1>
    </header>
    <article>
        <h1>外链发的好,排名就是好</h1>
        <p>发外链排名不要太好</p>
        <aside>
            <h1>外链平台</h1>
            <dl>
                <dt>58同城</dt>
                <dd>一个神奇的网站</dd>
            </dl>
        </aside>
    </article>
    <aside>
        <h2>最新文章</h2>
        <ul>
            <li><a href="#">内链构造</a></li>
            <li><a href="#">代码优化</a></li>
            <li><a href="#">关键词定位</a></li>
        </ul>
    </aside>
</body>

header

header元素是一种具有引导和导航作用的辅助元素。通常header元素可以包含一个区块的标题(如h1至h6),但也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片。nav标签可以包含在header元素之内。
可以写整个页面的标题,每个内容块也可以自有header元素
<header>
  <h1>CCAV哪些主播被潜规则过</h1>
</header>
<article>
  <header>
    <h1>朱军</h1>
  </header>
  <p>长得磕颤,没人潜规则他</p>
</article>

footer

footer元素可以作为其直接父级内容区块或是一个根区块的结尾。footer通常包括其相关区块的附加信息,如作者、相关阅读链接以及版权信息等。
在同一个页面中可以使用多个footer元素,即可以用作页面整体的页脚,也可以作为一个内容区块的结尾,例如可以将<footer>直接写在<section>或是<article>中
<footer>
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>go to top</li>
  </ul>
</footer>
 
<section>
   敢问路在何方
   <footer>
      原著:西游记
   </footer>
</section>
<article>
   西天取经路上的趣事
   <footer>
      对象:汤姆克鲁斯
   </footer>
</article>

nav

nav元素是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素,例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等,这时使用<footer>元素是最恰当的。
<nav>
  <ul>
    <li><a href="index.html">主页</a></li>
    <li><a href="/about/">公司简介</a></li>
<li><a href="/blog/">产品中心</a></li>
<li><a href="/caonima/">新闻资讯</a></li>
  </ul>
</nav>

dl

定义列表用来标记已经定义的列表项,它们包括定义标题(dt)以及定义本身(dd)。
做电影站的小伙伴注意了,可以使用这个标签
<dl>
     <dt>当月热门</dt>
     <dd>猛鬼街1</dd> <dd>猛鬼街2</dd> <dd>猛鬼街3</dd> <dd>猛鬼街4</dd>
</dl>
<dl>
     <dt>本周热门</dt>
     <dd>我和嫂嫂</dd> <dd>我和舅妈</dd> <dd>我和小姨子</dd> <dd>我和他</dd>
</dl>

表单标签

datalist

datalist与input的新属性list一起使用可以创建组合框,双击input的时候可以提供选项让用户选择,类似历史记录一样。
<input list="browsers">
<datalist id="browsers">
 <option value="洗澡">
 <option value="蒸桑拿">
 <option value="足浴">
 <option value="马杀鸡">
</datalist>

autofocus

HTML5为input,select,textarea和button元素增加了一个autofocus属性,利于用户体验的一个标签,比如我们在登录页面设置,页面载入以后自动将焦点设置到用户名的textbox上。一个页面声明一次autofocus属性。
可以构想一下,是不是注册页面、登录页面做的比较好,可以不再用robots文件屏蔽。
<input maxlength="256" name="loginName" autofocus>
<input type="submit" value="Login">

placeholder

input和textarea元素新增加了placeholder属性,该属性是提升用户输入内容。当用户点击的时候,该内容文本自动消失,离开焦点并且值为空的话,再次显示。
<input type="username" placeholder="请输入你的银行卡密码">

form

允许你将<form>表单里的表单控件声明在表单外,只需要在相应的控件上设置form属性为指定的<form>表单id就行了,不需要非得把元素声明在<form>元素里。
支持该属性的元素有:input,output,select,textarea,button,label,object,fieldset。
<label>Email:
 <input type="email" form="foo" name="email">
</label>
<form id="foo"></form>

required

required属性是一个验证属性,表明该控件是必填项,在提交表单之前必须填写。可用的元素是input,select和textarea。
<label>Color: <select name=color required>
 <option value="">Choose one
 <option>Red
 <option>Green
 <option>Blue
</select></label>

fieldset

fieldset元素可将表单内的相关元素分组。
<fieldset>标签将表单内容的一部分打包,生成一组相关表单的字段。<fieldset>标签没有必需的或唯一的属性。
当一组表单元素放到<fieldset>标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D效果。
<legend>表示这个组的标题
<form>
<fieldset>
<legend>你有港澳通行证吗?</legend>
<input type="radio" id="yes">
<label for="yes"></label>
<input type="radio" id="no">
<label for="no">没有</label>
</fieldset>
</form>

formaction,formenctype,formmethod,formnovalidate,formtarget

input和button元素新增的几个新属性,如果设置这些属性,那所对应的form属性值将被覆盖,即input或button所属的form元素的action,enctype,method,novalidate和target属性将被覆盖。
<form action="demo_form.asp" method="get" target="_self">
First name:<input type="text" name="fname" /><br />
Last name:<input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" formtarget="_blank" value="Submit" />
</form>

文本标签

i

语义化的<i>元素可以用来表示:外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。
<p>董事长:我们要始终围绕三个代表重要思想,构建社会主义和谐社会</p>
<p>马加爵:<i>去你妈的!</i></p>

b

b元素只有表重要的<strong>,表强调的<em>,表标题的<h1>-<h6>,表高亮或标记文本的<mark>等都不适用的时候,才拿来用,算是没有办法的措施。
<p><b>马加爵</b>我今天就要当众戳穿你</p>

em

em表示特别有强调意思的压力标签,侧重点更加明显。
我叫王大锤,从现在起我就要成为你的<em>领导</em>,干死你!
给人一种无形的压力,现在变成你的领导了,怎么样,比你职位高。

strong

几乎没有改变的标签,表示文本相当重要。
<strong>挖掘机</strong>学校哪家强,中国山东找蓝翔。

mark

使用mark标签元素,可以高亮显示文档中的文字以达到醒目的效果,但并非强调的意思。
<p>天气越来越冷了,好久没去<mark>洗澡</mark>了,是时候去一次莲花池了。</p>
<p>莲花池现在服务不行了,<mark>洗澡</mark>的话换一家吧</p>

figure

<figure>标签规定独立的流内容(图像、图表、照片、代码等),主要用于图片。figure元素的内容应该与主内容相关,删除不应对文档流产生影响。插图独立于文本,但文本中会提到它。
你可以在一个figure中放置多张图片,如果这些图片在你的文档中存在上下文关系。<figcaption>标签作为组图的标题或者说明,位置可以随意放在组图上方、下方和图片之间,<figcaption>并非一定要出现,如果需要只能出现一次。
作为插图标签,并不是说文章中只要出现了图片都要使用figure,在能对文章语意进行说明的图片上使用figure标签。
<figure>
<img src="dog1.jpg" alt="周立波吸毒">
<img src="dog2.jpg" alt="房祖名吸毒">
<img src="dog3.jpg" alt="段誉吸毒">
<figcaption>娱乐圈吸毒哪家强</figcaption>
</figure>
 
<figure>
<img src="dog1.jpg" alt="周立波吸毒">
<img src="dog2.jpg" alt="房祖名吸毒">
<figcaption>娱乐圈吸毒哪家强</figcaption>
<img src="dog3.jpg" alt="段誉吸毒">
</figure>
需要对一张图片添加更多的语义,这时你可以使用多个元素,如h标签和p标签。figure可以嵌套使用,一般很少用到,这里只简单提一下。
<figure>
<img src="dogs.jpg" alt="王者荣耀黄忠">
<figcaption>
<h2>黄忠是个贱逼</h2>
<p>黄忠的远程技能非常的贱,引起了公愤</p>
</figcaption>
</figure>

code

定义计算机代码文本,写技术型文章涉及到代码标签可以使用。
<code>figure</code><code>figcaption</code>是插图标签,可以在图片优化时使用。

cite

<cite>标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。按照惯例,引用的文本将以斜体显示。
如果引用的这些文档有联机版本,还应该把引用包括在一个<a>标签中,从而把一个超链接指向该联机版本。
今天我讲的课题是<cite>全国会所指南</cite>,由本人亲自编辑。

time

网页中经常会出现日期和时间信息,比如文章的发表时间。过去一直没有标准的方式来标注日期。<time>标签便是为了解决这个问题,其目的是让搜索引擎等其它程序可以更容易的提取这些信息。
<time>元素可以标注日期,时间或日期与时间的组合,只要在datetime属性中提供计算机能看懂的通用格式日期即可。
<p><time datetime="2018-02-14">明天</time>要陪一个客户打高尔,没办法,明天晚上不能回去吃饭了老婆!</p>
<p>我决定<time datetime="2018-02-14T20:00">明天晚上</time>发动全民大保健运动!</p>
 
使用pubdate属性,表示这个时间是当前内容的发布日期,比如<article>里的<time>
<article>
<time datetime="2018-06-22" pubdate="pubdate">2018-06-22</time>
我欲成仙,快乐齐天...
</article>

details

<details>是一个全新的HTML5元素,功能是描述文档某个部分的细节。<details>标记常与<summary>标记配合使用。在默认情况下,不显示<details>中的内容。当与<summary>标记配合使用时,在单击<summary>标记后才会显示<datails>元素中设置的内容。
<details open="open">
   <summary>百度有什么用</summary>
   只会卖假药
</details>

address

address元素用来在文档中呈现联系信息,包括文档创建者的名字、站点链接、邮箱、地址、电话号码等;address不只是用来呈现邮箱或真实地址这样的“地址”概念,还可以包括与文档创建人相关的各类联系方式信息。可以被article,aside,nav,section限定范围,一般用于网页底部联系方式。
<address>
  <a href="http://facebook.com/jacko">JK杨幂</a>,
  <a href="http://facebook.com/richc">QN蒋欣</a>,
  <a href="http://facebook.com/miker">S</a>,
</address>
同时还使用到了<footer>及<time>元素:
<footer>
  <div class="vcard"> by
    <address class="author">
      <em class="fn">哈利波特</em>
    </address> on
    <time datetime="2017-12-31" class="published updated">2017.12.31</time>
  </div>
</footer>

hr

<hr>标签定义内容中的主题变化,并显示为一条水平线。
<article>
今天我讲的课题是<cite>全国会所指南</cite>,由本人亲自编辑。
<p>这本书包含了各位知名老司机的智慧结晶</p>
<hr>
午饭时间
</article>

del

取代了s标签的存在,定义为删除文本,适合技术型网站或者做软件系统类的网站使用。
<p>一夜<del></del>八次的男人才是真男人</p>

small

small元素将旁注呈现为小型文本,免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。对于由em元素强调过的或由strong元素标记为重要的文本,small元素不会取消对文本的强调,也不会降低这些文本的重要性。
<a href="/about/"><small>关于我们</small></a>
<a href="/lianxi/"><small>联系我们</small></a>
<a href="/mianze/"><small>免责声明</small></a>

blockquote

<blockquote>标签定义块引用,表示引用一段长文本,如一段话,一首诗等长文本,常用于引言。浏览器解析为缩进。
<blockquote>暗淡轻黄体性柔,情疏迹远只香留。何须浅碧深红色,自是花中第一流。</blockquote>

q

不需要段落分隔的短引用,表示引用一小段文字,如一句话,一句诗等短文本,常在文章内部使用。浏览器解析为双引号。
<p>当想成为一个人生赢家的时候,我总会想起那句诗<q>窗前明月光,我叫田伯光。</q></p>
 

新增标签

media

a元素,area元素,link元素都增加了media属性,只有在href存在时才有效。media属性的意思是目标URL是为何种媒介/设备优化的,默认值是all。
<a href="www.cao.com/baidusb/" media="screen and handheld">百度又在瞎搞什么</a>

video

通过<video>标签,我们可以抛弃不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
  <p>
    马云打人视频
    <a href="http://www.youtube.com/demo/google_main.mp4">下载视频</a>
  </p>
</video>
<video>标签有如下几个常用属性:
autoplay:用来设定视频是否在页面加载后自动播放。
src:为视频指定文件链接或下载路径,当浏览器不支持<video>标签或发生某种播放错误时,可以提供用户下载链接。
autobuffer:用来设定视频是否自动缓冲。如果设定,那么页面加载之后,视频会自动下载缓冲,当用户点击播放按钮后,至少有一部分视频可以直接观看而无需等待。
poster:用来为视频设置一个“相框默认图片”性质的背景图片,当视频无法正常加载播放时可以向用户呈现。
controls:用来设置是否为视频添加控制条,例如“播放”、“暂停”等;控制条的外观可以自定义。
loop:用来设置视频是否循环播放。
width,height:用来控制视频的宽度与高度。

audio

它有原生支持音频播放的功能,而不需要浏览器安装额外的扩展。
<audio>标签的一些常用属性:
src:音频文件路径。
autobuffer:设置是否在页面加载时自动缓冲音频。
autoplay:设置音频是否自动播放。
loop:设置音频是否要循环播放。
controls:设置是否显示播放控制面板。
<audio src="elvis.ogg" controls autobuffer></audio>
另外,可以使用<source>元素标签来配合<audio>。<source>用来指定多个音频文件,如果当前浏览器不支持第一个文件,那么<audio>会自动尝试播放下面一个<source>中指定的文件;我们还可以在它们后面加上目前常规的<embed>代码来加载Flash播放器,作为后备方案。
<audio controls autobuffer>
  <source src="elvis.ogg" />
  <source src="elvis.mp3" />
</audio>

scoped

style元素有了一个新的scoped属性,用来启用限定作用范围的样式表。在这样的style元素里的样式规则只应用到当前style元素的父元素根下的子树,即兄弟树。
<!-- 这个article正常使用head里声明的style -->
<article>
    <h1>马云装逼语录</h1>
    <p>我这么多年没有拿过一个月的工资</p>
</article>
 
<article>
    <!-- 这里声明的style只能让该article以及子元素使用 -->
    <style scoped>
        h1 { color: hotpink; }
        article { border: solid 1px hotpink; }
    </style>
    <h1>马云装逼语录续</h1>
    <p>我最大的遗憾就是创建了阿里巴巴</p>
</article>

contextmenu

contextmenu是上下文菜单,即鼠标右击元素会出现一个菜单。要实现鼠标右击元素会出现一个菜单,必须使用<menu>元素。目前只有Firefox支持contextmenu属性。
<p contextmenu="mymenu">最新电影</p>
<menu type="context" id="mymenu">
    <menuitem label="欧美"></menuitem>
    <menuitem label="岛国"></menuitem>
    <menuitem label="港台"></menuitem>
</menu>

role

role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程序)这个元素所扮演的角色,主要是供残疾人使用,同时兼容老版本的浏览器。使用role可以增强文本的可读性和语义化。
告诉屏幕阅读器,此处有一个复选框,且已经被选中。
<div role="checkbox" aria-checked="checked"></div>

rev

HTML5.1标准里重新启用,<a>标签的rev属性用于指定当前文档与被链接文档的关系。rel属性指定从源文档到目标文档的关系,而rev属性指定从目标文档到源文档的关系。我们可以将这个属性用在文章页的上一篇、下一篇里面,搜索引擎可以利用该属性获得更多有关链接的信息。
上一篇:<a rel="prev" rev="next" href="/course/top/348.html">中国足球,何日出头</a>
下一篇:<a rel="next" rev="prev" href="/course/top/392.html">穿金戴银的国足球员</a>

废弃元素和属性

basefont
big
center
font
strike
tt
frame
frameset
noframes
acronym
applet
isindex
dir
u
dialog

版权声明:凡注明“原创”字样的文章,均为保定SEO研究中心原创,转载请务必保留原网址
链接地址: http://www.baodingseo.org/SEOnews/207.html