HTML5 学习笔记

HTML5的变化

1、HTML5推出的理由

推出的缘由和目标：

目前web端存在的一些问题，比如兼容性问题，同样的页面，在不同的浏览器上显示的效果不一样，那么开发人员需要做很多额外的工作去解决一些问题，需要花费大把的时间在这上面；一些特殊的权限没有给开发人员，比如，定位权限、；拉起照相机权限、动画、绘画。那么H5的推出就是为了解决这一系列的问题。

H5解决了什么问题：

（1）开发了一些特殊的权限给开发者，有了这些权限，开发者就可以轻易的获取用户的定位信息、拍照功能等等。

（2）解决不同的浏览器的兼容性问题：HTML5也可以理解为是一个协议标准，它让绝大部分浏览器产商都遵守这一标准

（3）文档结构不清晰：在之前的开发中页面的布局都是使用div+css，不利于搜索引擎去抓取页面信息，不如，浏览器抓取一片新闻网页的时候，根本抓不到作者，新闻发布时间等信息。

H5的浏览器支持情况：

①  Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。

②  Safari，Opera：同样支持html5很多年，支持也很好。

③  IE：IE10起比较好了，之前很差。（IE9+都支持）

2、语法的改变      

                                                          

（1）内容类型：（contentType）：

HTML文件的后缀名依旧是.html或.htm，HTML文件的内容类型“text/html”

（2）doctype：

H5之前：

<!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

H5：

Doctype声明在HTML文档中必不可少，位于HTML文档的第一行代码，随着HTML版本的更新，其声明方式也在更改。但是H5的doctype的声明方式向下兼容（兼容所有的低版本）

 

（3）字符集

H5之前：

<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>

H5：

<meta charset="UTF-8">

HTML5默认的字符集编码是UTF-8，之前的大部分版本的默认字符编码：

ISO-8859-1

（4）标签标记省略

可以省略全部：body、tbody、head、colgroup、html

不允许写结束标记的标签：img、input、br、hr、base、link、meta

允许写结束标记的标签：p、li、dt、dd、tr、td、th

（5）布尔类型的属性

对于布尔类型的属性，比如：readonly、disabled、checked、selected，当他们不写值得时候默认是true，同时对于值是任何东西都是无效的。说白了，只要写了这个属性，属性立马生效

（6）属性省略引号

在之前的学习中，属性值都是方在双（单）引号里面的，在H5中，如果属性值中不包括特殊字符，双引号和单引号都可以去掉。

特殊字符：“<>”,“=”

3、新增和废弃的元素新增和废弃的属性       

新增的结构（布局）标签：section、article、nav、footer、header、hgroup、aside、figure。

新增的其他标签：video、audio、mark、time、menu、canvas、svg、details、datalist、progress、output、source

Input type的新增：email、url、number、date pickers、range。

废弃的标签：font、conter、s、tt、u、big、basefont

4、全局属性

在HTML5中，定义了少量对所有元素都有效的属性。

1、contenteditable：

<p contenteditable="true">我是一个段落，但是我可以编辑</p>  //可以被编辑
<p contenteditable="false">我是一个段落，但是我可以编辑</p>  //不能被编辑
<p contenteditable="">我是一个段落，我没有设置值</p>  //可以被编辑

 

contenteditable-true，可以直接在页面上编辑，编辑之后，元素的宽高自动适应。

contenteditable-false，说明这个标签不能被编辑

注意：（1）如果只是设置了contenteditable，其默认的值是true。

     （2）contenteditable属性可以被继承。需要考虑“就近原则”，

2、designMode：

<script>
    document.designMode = "on";
</script>

用来指定整个页面是否可以编辑，当designMode设置on的时候相当于页面上所有的元素都设置了contenteditable-true

当designMode设置off的时候，相当于页面上所有的元素都设置了contenteditable-false。

注意：（1）如果同时设置了designMode和contenteditable-false属性最终是否可以编辑，采用“就近原则”。

     （2）该属性在IE8以下的浏览器无效。 以兼容IE6,7,8为耻

3、hidden

<div style="display: none">我想隐藏</div>
<div class="box">box1</div>
<div style="visibility: hidden">我想隐藏</div>
<div class="box">box2</div>
<div hidden>我想隐藏</div>
<div class="box">box3</div>

Hidden属性可以实现第元素的隐藏，隐藏的元素不会被显示，同时不会占原有的位置，类似display：none。

注意：hidden属性默认值是“hidden”，所见呢，设置该属性的时候，只需要写属性名称就OK了。

Hidden：看不见，不占位置

Visibility：hidden：看不见，占位置

Display：none：看不见，不占位置

4、spellcheck

输入appple试试看
<input type="number" spellcheck="true"/>
<textarea  spellcheck="true"></textarea>

 

spellcheck属性是HTML5专门为input和textarea标签提供的新属性，它的功能是对用户输入的内容进行拼写和语法检查，如果拼写出错文字下面有一个波浪线。

spellcheck=false 取消语法和拼写检查

spellcheck=true  开启语法和拼写检查

5、tabindex

<div>
    <label>名字</label> <inputtype="text"tabindex="1"/>
</div>
<div>
    <label>身份证号</label> <inputtype="text"tabindex="2"/>
</div>
<div>
    <label>性别</label> <inputtype="text"tabindex="4"/>
</div>
<div>
    <label>年龄</label> <inputtype="text"tabindex="3"/>
</div>
<div>
    <label>电话</label> <inputtype="text"/>
</div>
<div>
     <input type="button" value="提交"tabindex="5"/>
</div>
<div>
    <a href="http://www.huadianedu.com" tabindex="6">华点软件学院</a>
    <a href="http://www.baidu.com">百度首页</a>
</div>

Tabindex=“正整数”：按键盘tab键可以选中（获取焦点），这里选中的标签可以是input输入框、input按钮、a标签等等。同时按tab键选择的循序和设置的tabindex属性一致，tabindex越大，越后面选中。建议不使用tabindex=0。

Tabindex=-1：按tab不选中。