HTML5中语义化标签怎么用

现在可以替换为

HTML5可以让很多更语义化的结构化代码标签代替大量无意义的div标签

1. 这种语义化的特性提升了网页的质量和语义

2. 减少了以前用于CSS 调用的class和id属性

并且对搜索引擎的友好，新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。

解决办法：

1. 使用1的方法，意味着对每个语义标签都要创建元素，这样未免比较麻烦，更好的办法是使用插件，引入html5shiv.js文件，该插件的实质还是创建了语义元素

1. 上面的方法还有需要改进的地方，比如在谷歌浏览器中完全支持 HTML5，这就意味着在渲染HTML网页时不需要下载html5shiv.js 文件，但是上面的方法是在任何的浏览器中都会下载的，所以再次改进如下

上面的代码只有IE浏览器才会识别，意思是如果IE浏览器的版本是IE8及以下的版本，才会下载这个js文件，在其他浏览器中会认为这时注释，自动忽略。

video和audio

在浏览器中插入视频和音频文件，以往是使用flash来实现，但是在移动端使用flash就会比较慢，HTML5给了两个新的标签，用来插入视频和音频文件。二者的使用相似，现以video为例介绍该标签的属性

还有一些属性没有介绍，以上是较为常用的，剩余的请参考网站HTML5视频。这里给出一个实例

另一个需要注意的是，目前只支持三种格式的视频

• Ogg

• MPEG 4(mp4)

• WebM

并且不同的浏览器支持的程度也不一样，具体的可以参考上面的链接。那么这个时候怎么办? 我们不能这么写

虽然我们的本意是：如果支持.mp4，那么就使用.mp4，否则如果支持.ogg，则用.ogg，以此类推。但是上面的效果是出现3个video，而不是一个，这个时候的解决办法是使用source标签，如下

这个时候达到的效果就是我们想要的。

表单

HTML5在表单这里也做了很多的改进，比如新增了一些属性以进行表单验证(以往这些工作我们都是使用JavaScript进行正则表达式的验证)，以及新的标签和方法。

智能表单控件

• emial

• url

• number

• range

• color

• date

• month

• week

• time

首先用法如下

    email:  

    url:  

    number:  

    range:  

    color:  

    date:  

    week:  

    time:  

    提交

当type设置为emial时，如果输入的不是电子邮箱，当点击提交按钮时，不能提交成功，并给出提示信息

当type设置为url时，如果输入的不是url地址，那么当点击提交按钮时，也不能提交成功，并给出提示信息

正确的url地址应该以http或者https开头，如http://www.baidu.com。

当type设置为number时，这时在控件里面只能输入数字，当你按其他键时没有反应，可以自行实验看看效果。

当type设置为color时，点击color后的颜色，会出现拾色器，可以选择颜色，如下

设置type设置为date, week, time时，显示的是各种格式的时间，这里不多加解释想必可以明白。

表单属性

form表单的属性

1. autocomplete

直译过来就是自动完成，当我们提交表单后，表单会记录我们提交的内容，当我们再次填写时，它会给出我们已经提交过的内容作为提示信息。有时这种情况下可能会造成信息的泄漏，不安全，我们可以将autocomplete设置为off，这时就不会出现上面的情况。默认情况下autocomplete为on

    ... ...

1. novadilate

上面我们提到，当我们使用智能表单控件时，如果不能满足格式的要求，如email，则不能提交成功，当表单添加novadilate属性时，那么这时即使所填写的格式不满足要求，那么也可以提交成功。

    ... ...

input的属性

1. autofocus

自动获得焦点，我们先来看一个淘宝的案例

当我们进入淘宝，搜索框会自动的获得焦点，用户可以直接输入，不需要用鼠标先点击搜索框获得焦点才能输入。input添加autofocus的属性即可有这种效果。

1. form

先来看这么一个结构

    
    提交

我们可以知道当提交form表单时，只会提交表单域里面的表单，表单域外的表单不会提交，所以当我们提交时，只会有one的数据才会提交

但是如果希望当提交时，two的数据也能进行提交(别奇怪，真的有这种需求)，这个时候就需要用到form属性了

    
    提交

form属性的值为form表单的id值。这时再次进行提交

这时two的数据也得到了提交。

1. list

list属性要配合HTML5新添加的表单标签

list属性的值为datalist标签的id值。当我们在text中输入时，会有datalist中option值的提示

1. multiple

multiple可以实现多选的效果，比如选择多个文件，假设有下面的input标签

这时只能选择一个文件，为了选择多个文件，我们为input标签添加multiple属性

这时就可以选择多个文件了。

1. placeholder

使用placeholder作为提示信息，假设有如下标签

当我们输入文字时，提示信息会消失，当我们将文字消失时，文字又会出现。

1. required

当input使用该属性时，表示该input控件是必填项，否则无法提交，具体可以自己试验一下，这里就不演示了。

HTML5 API

获取DOM元素

假设有如下的html结构

    

        span1
    
    

        span2
    

如果我们要改变span的样式(通过JS)，我们我们一般要为span标签添加id属性或者class属性，这样才能获取要对应的DOM元素，HTML5新增了两个方法

• querySelector()：只能选择一个元素

• querySelectorAll()：可以选择所有符合条件的元素

可以向其中传入选择器(任何CSS支持的选择器)，从而来选择DOM元素，如

//使用子代选择器选择span元素
document.querySelector("li>span").style.color = "red";

类名操作

有时候我们需要为某个标签添加或者移除类样式，HTML5为我们提供了API接口

• classList.add()：为DOM元素添加指定的类样式

• classList.remove()：为DOM元素移除指定的类样式

• classList.toggle()：切换，意思即如果DOM元素有这个类样式，则移除这个类样式，如果没有这个类样式，这添加这个类样式

• classList.contains()：判断该DOM元素是否包含这个类样式，包含则返回true，否则返回false。

    
    

    



    

    添加类名
    移除类名
    切换类名
    是否包含类名

    

自定义属性

HTML5规定自定义属性需要以data-开头，如