html什么是语义化,什么是html语义化，HTML5新增标签有哪些

1.什么是语义化标签?(就是用合理、正确的使用标签来展示内容)

那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如，

网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。

文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签表示强调等等。

2.为啥使用语义化标签?

有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重

有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。

兼容性更好，支持更多的网络设备

3.html语义化标签

1):标签:实现超链接

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

2):

标签:文章段落放到

标签中

3):标签:文章标题,栏目标题用表示

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。

是最高的等级。

4):和标签:特别强调某几个文字

但两者在强调的语气上有区别: 表示强调， 表示更强烈的强调。并且在浏览器中 默认用斜体表示， 用粗体表示。

两个标签相比，目前国内前端程序员更喜欢使用表示强调。

5):标签:短文本引用

注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号

6):

标签:长文本引用

注意浏览器对

标签的解析是缩进样式

7):

标签:为网页加入地址信息

8):

• 标签:无序列表

9):

1. 标签:有序列表

10):

标签:为表格添加标题和摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：

标题用以描述表格内容，标题的显示位置：表格上方。

语法：

标题文本

4.Html5语义化标签

image.png

html5相较于之前的版本提供了一些新的语义化标签，下面进行总结下。

1.

定义了文档的头部区域，在一个文档中可以定义多个元素。它是块元素

这是文档的头部

2.

定义文档页脚，它不只是页面的最底部，在文档中也可以定义多个。

南京鼓楼

3.

定义页面独立的内容区域，标签定义的内容本身必须是有意义且必须独立于文档的其他部分，可用在的地方：博客文章，新闻，评论等。

五一劳动节

今天是五一劳动节

4.

定义页面的侧边栏内容

• 腾讯
• 阿里
• 百度

5.

定义时间或日期，time标签中的datetime属性定义的时间不会被显示，但可能被其他应用使用

今天是我生日

6.

加注释，ruby标签有两个子元素，rt注释的内容，rp是该标签不显示时显示的文字

人ren

该标签无法显示

7.

用于描述文档或者文档某一部分细节，summary是details元素的标题

点击查看更多

这是点击后的内容

8.

定义带有几号的文本，它会给你想要突出显示的文本加个 背景色

我最喜欢数学

9.

定义导航栏

百度

360

10.

progress显示数据的进度，属性value指定当前值，max最大值，最小值0不用设置

11.

section一般有两个作用，1.定义文档中的节，和div类似。2.定义文章，这时一般带有标题

12.

定义视频，属性src引入资源，controls视频的控制控件

你的浏览器不支持video标签

以防用户浏览的视频不支持某些格式的视频，可以为用户多准备些格式的视频,目前支持的视频格式video/ogg，video/mp4，video/webm其他格式需要转换

你的浏览器不支持video标签

13.

该标签可定义声音，及其他的音频文件，不加controls不显示音频的控制界面

你的浏览器不支持audio标签

你的浏览器不支持audio标签

目前音频可用类型audio/ogg，audio/mpeg

14.

提示可能的值，datalist及其选项不会被显示出来，它仅仅是合法输入值的列表使用input元素的list属性来邦定datalist，下面选项使用option定义

15.

定义插入的内容，如插件，flash，标签中间不要加内容会显现出来

16.

canvas画布只是个容器，你可以通过控制坐标在canvas上绘制图形，一般配合js可以实现非常复杂的动画效果

Forms

email : 电子邮箱文本框，跟普通的没什么区别,当输入不是邮箱的时候，验证通不过.移动端的键盘会有变化

tel : 电话号码,移动端的键盘

url : 网页的URL

search : 搜索引擎

range : 特定范围内的数值选择器

min、max、step( 步数 )、value

用JS来显示当前数值

新的表单特性和函数

placeholder : 输入框提示信息

例子 : 密码框提示

autocomplete : 是否保存用户输入值默认为on，关闭提示选择off

autofocus : 指定表单获取输入焦点

list和datalist : 为输入框构造一个选择列表

list值为datalist标签的id

required : 此项必填，不能为空带有必填字段的表单

Pattern : 正则验证 pattern="\d{1,5}“

formaction 在submit里定义提交地址

五、HTML5相比HTML新增了哪些功能？

简化的语法

HTML5简化了很多细微的语法，例如doctype的声明，你只需要写就行了。HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。

更加语义化标签(开发者可以更加优雅，网页结构更清晰)

header、footer、nav、article、figure...但这些表情不兼容ie6-8，(兼容处理：html5.min.js；)

新增 和 标签

这两个标签可能是HTML5里面最有用的两个标签了。从意思上不难理解，这两个标签是用来播放音频和视频的。

表单元素的升级

传统的表单元素：form、laber、textarea、select、button...

input(text、password、radio、checkbox、file、submit、reset、button)

Html5给input新增加一些类型(search、email、number、tell、range、color、date)

升级：给表单元素新增加属性placeholder(给表单元素设置提示信息)

升级：提供了新的下拉框方式

新增canvas标签

我们可以基于js，把它作为一个画布，绘制出想要的图形或者动画，Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。标签使得开发者只要使用一个标签就能和用户产生UI交互。虽然目前标签还不能实现Flash的所有功能。

Echarts图表插件(http://echarts.baidu.com)，它是基于canvas实现

删除 和 标签

删除,

, 标签

新增一些API(主要是供js使用的)

webstorage：localStorage、seessionStorage 本地存储解决方案

web socket：新的客户端和服务器端通信方案

获取地理位置或者重力感应等API