HTML5的变化1

来源：互联网发布：php 空格分割字符串编辑：程序博客网时间：2024/05/17 03:43

1.1 HTML5推出的理由

推出的缘由和目标：
目前web端存在的一些问题，比如兼容性问题，同样页面，在不同浏览器上呈现的效果不同，那么开发人员需要做很多额外的工作去解决这一问题，需要花费过多的时间在这上面；一些特殊的权限没有开放给开发人员，比如：定位权限、拉起照相机拍照权限、动画、绘画。那么H5的推出就是为了解决这一问题。
H5解决了什么问题：
（1）开放了一些特殊的权限给开发者：有了这些权限，开发者可以轻易地获取用户的定位信息、拍照功能等等。
（2）解决不同浏览器的兼容性问题：HTML5也可以理解成协议标准，它让绝大部分浏览器生产商都遵守这一标准
（3）文档结构不清晰：在之前的开发中，页面的布局都是使用Div+CSS，不利于搜索引擎去抓取页面信息，也就是说浏览器抓取一片新闻网页的时候，根本抓不住作者，新闻发布会时间等信息。
这里写图片描述
H5的浏览器支持情况：
Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。
Safari，Opera：同样支持html5很多年，支持也很好。
IE：IE10起比较好了，之前很差。（IE9+都支持）

1.2语法的改变

（1）内容类型（contentType）：
HTML文件的后缀名依然是.html或.htm，HTML文件的内容类型“text/html”
（2）DOCTYPE:
H5之前:

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

HTML5:

<!DOCTYPE html>

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,dd,dt,tr,td,th…..
（5）布尔类型的属性
对于布尔类型的属性，比如：readonly,当它们不写值的时候，默认是true,
同时对于值写成任何东西都是无效的。说白了，只要写了这个属性，属性里面立马生效。
（6）属性值省略引号
在之前的学习中，属性值都是放在双（单）引号里面的，在H5中，如果属性值中不包括特殊字符，双引号和单引号都可以去掉
特殊字符：’()’<>’,’-’

<div><input type="text" value="登录" readonly="readonly"/></div><div><input type="text" value=<登录> readonly="readonly"/></div>

1.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， Range
废弃的标签：font,center,s,tt,u,big,basefont,

1.4全局属性

在HTML5中，定义了少量对所有元素都有效的属性。
1、contenteditable
contenteditable=true，可以直接在页面上进行编辑，编辑之后，元素的宽、高自动适应。
contenteditable=false，说明这个标签不能被编辑

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

注意：

（1）如果只是设置了contenteditable，默认是true,
（2）contenteditable属性可以被继承，需要考虑“就近原则”。

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

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

当designMode设置为off的时候，相当于页面上所有的元素都设置了contentediable=false.

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

注意：如果设置了designMode和contenteditable属性，采用就近原则。
（2）该属性在IE8以下的浏览器无效，以兼容IE6,7,8为耻。
3、hidden

<style>        .box{            width: 100px;            height: 40px;            background: skyblue;        }    </style></head><body><div style="display: none;">我是div1，我想隐藏起来</div><div class="box">div</div><div style="visibility: hidden">我是div2，我想隐藏起来</div><div class="box">divdiv</div><div hidden>我是div3，我想隐藏起来</div><div class="box">divdivdiv</div></body>

hidden属性可以实现对元素的隐藏，同时不会占位，类似于display:none.
注意：hidden的默认值为“hidden”，设置该属性的时候，只需要写属性名就可以了。
hidden:看不见，不占位置
visibility:hidden:看不见，但是占位置
display:none:看不见，不占位置

4、spellcheck 拼写检查

<body>输入一个单词试试看<input type="text" spellcheck="true">//有波浪线<input type="text" spellcheck="false">//没有波浪线<input type="email" spellcheck="true">//有波浪线<input type="email" tabindex>//有波浪线</body>

spellcheck属性是HTML5专门为input和textarea标签提供新属性，它的功能是对用户输入的内容进行拼写和语法检查，如果拼写错误，文字下面会有波浪线。
spellcheck=false：取消语法和拼写检测
spellcheck=true：开启语法和拼写检测
5、tabindex

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

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

阅读全文

0 0