html5标签及语义化

html5标签

结构标签:

article标记定义一篇文章
header标记定义一个页面或一个区域的头部
nav标记定义导航链接
section标记定义一个区域
aside标记定义页面内容部分的侧边栏
hgroup标记定义文件中一个区块的相关信息
figure标记定义一组媒体内容以及它们的标题

figcaption标签定义 figure 元素的标
footer标记定义一个页面或一个区域的底部
dialog标记定义一个对话框(会话框)类似微信

多媒体交互标签

video标记定义一个视频
audio标记定义音频内容
source标记定义媒体资源
canvas标记定义图片
embed标记定义外部的可交互的内容或插件 比如flash

Web应用标签

menu命令列表
menuitemmenu命令列表标签 FF(嵌入系统
commandmenu标记定义一个命令按钮
meter状态标签(实时状态显示:气压、气温)C、O
progress状态标签 (任务过程:安装、加载) C、F、O
datalist为input标记定义一个下拉列表,配合option F、O
details标记定义一个元素的详细内容 ,配合dt、dd C

注释标签

ruby 标记定义 注释或音标
rp告诉那些不支持 Ruby元素的浏览器如何去显示
rt标记定义对ruby的注释内容文本

其他标签

keygen标记定义表单里一个生成的键值(加密信息传送)O、F
mark标记定义有标记的文本 (黄色选中状态)
output标记定义一些输出类型,计算表单结果配合oninput事

删除的HTML标签

纯表现的元素: basefont,big,center,font, s,strike,tt,u;

对可用性产生负面影响的元素: frame,frameset,noframes;

产生混淆的元素: acronym ,applet,isindex,dir

重新定义的HTML标签

b代表内联文本,通常是粗体,没有传递表示重要的意思
i代表内联文本,通常是斜体,没有传递表示重要的意思
dd可以同details与figure一同使用,定义包含文本,dialog也可用
dt可以同details与figure一同使用,汇总细节,dialog也可用
hr表示主题结束,而不是水平线,虽然显示相同
menu重新定义用户界面的菜单,配合commond或者menuitem使用
small表示小字体,例如打印注释或者法律条款
strong表示重要性而不是强调符号

语义化的HTML结构的好处

1.去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如h1是粗体,字体大小2em,加粗;strong是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的

2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱.

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况(包括现有的或者将来新的设备).例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重. 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记。

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。

6.便于团队开发和维护 W3C给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

时间: 2024-10-05 09:48:00

html5标签及语义化的相关文章

HTML标签的语义化

标签的语义化就是指标签的含义.标签为什么要使用语义化的定义呢?是为了使我们的网站更好的被搜索引擎收录. 下面是一个例子 <table> <tr> <td>单价</td> <td>数量</td> </tr> <tr> <td>5.0</td> <td>1</td> </tr> </table> 上面的代码没有使用语义化,下面是使用语义化的代码

html标签的语义化之搜索引擎优化

为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量, 网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义.为了更好的理解标签的语义化,先看下面这个例子: <table> <tr> <td>娱乐项目</td> <td>项目支出</td> </tr> <tr> <td>聚餐</td> <td>200元</td> </tr> &l

Html块标签、含样式的标签、语义化的标签:

Html块标签: (1)<div>标签 块元素,表示一块内容,没有具体的语义 (2)<span>标签 行内元素,表示一行中的一小段内容,没有具体的语义 <p>标签 默认是带空行的样式的 <div>标签 默认是不带空行的样式的 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

我的启蒙--HTML5 第一章 语义化标签

HTML5 1.HTML5:万维网的核心语言,HTML规范的第五次重大修改.现在大部分网站的主流编译语言.学好HTML5是每一个前端的基础课,当然她也很简单 2.HTML5新增语义化标签(虽然很少用到,但是还是要说一下) (1)<laomaoshi>老猫师:恩,你没看错HTML5可以自己定义标签,而且属于行内标签</laomaoshi> (2)其他的我就不一一列举了比如 导航栏常用的nav  时间常用的time (3)但是新增的表单标签,我们还是要熟悉下 就是这样的新标签,还有很多

HTML5的新语义化的标签

在HTML5之前采用HTML+CSS文档结构写法 Diagram illustrates a typical two-column layout marked up using divs with id and class attributes.It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar 

html5新增的语义化标签

1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义化标签? 1. 更容易被搜索引擎收录. 2. 更容易让屏幕阅读器读出网页内容. 3. 能够更好的体现页面的主题 4.兼容性更好,支持更多的网络设备 3.html语义化标签 1):

Html5新增的语义化标签(部分)

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习及使用: 1.<header></header> 页眉:主要用于页面的头部的信息介绍,也可用于板块头部: 2.<hgroup></hgroup> 页面上的一个标题组合:一个标题和一个子标题,或者标语的组合: 3.<nav></nav> 导

HTML5新特性,语义化

1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of

从浏览器渲染的角度谈谈html标签的语义化

大家都看过报纸或者杂志的排版,里面最主要的一些概念,就是版面的分割,标题的分级等等,web页面作为一种信息展示的形式,其基本的排版形式是从报纸杂志等传统媒介借鉴过来的,看一看html一些常用的tag就可以知道,比如h1-h6,p,img等等. html的语义化从字面的意思来看,就是你选用的tag要尽可能的符合它适用的场景.为什么要语义化呢?可以从浏览器开始说起,报纸和杂志作为信息的载体是通过印刷机将其呈现在大众面前的,同理html是通过浏览器的界面将其展现在用户面前的.html页面展现在我们面前