HTML5的语法和新属性

最新推荐文章于 2022-05-26 09:18:05 发布

温凉皆可

最新推荐文章于 2022-05-26 09:18:05 发布

阅读量967

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_38844939/article/details/77488597

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1 HTML5的变化

1.1 HTML5推出的理由

推出的缘由和目标：

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

H5解决了什么问题？

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

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

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

H5浏览器支持情况：

（1）Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。
（2）Safari，Opera：同样支持html5很多年，支持也很好。
（3）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之前:

H5：

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，Pickers，Range

废弃的标签：font,center,s,tt,u,big,basefont,

1.4全局属性

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

1、contenteditable

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

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

<p contenteditable>我是一个段落，但是我可以编辑</p>
<p contenteditable="false">我是一个段落，但是我不可以编辑</p>

注意：（1）如果只是设置了contenteditable，默认是true,

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

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

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

注意：如果设置了designMode和contenteditable属性，采用就近原则。

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

3、hidden

<div style="visibility:hidden" >我是一个div</div>
<div style="display: none" >我是一个div</div>
<div hidden>我是一个div</div>

hidden属性可以实现对元素的隐藏，同时不会占位，类似于display:none.

注意：hidden的默认值为“hidden”，设置该属性的时候，只需要写属性名就可以了。
hidden:看不见，不占位置

visibility:hidden:看不见，但是占位置

display:none:看不见，不占位置

4、spellcheck

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5的语法和新属性

1 HTML5的变化1.1 HTML5推出的理由推出的缘由和目标：目前，web端存在一些问题，比如兼容性问题，同样的页面，在不同的浏览器上显示的效果是不一样的，那么开发人员需要做很多额外的工作去解决这一问题，需要花费大把的事件在这上面，一些特殊的权限没有开放给开发人员，比如，定位权限，拉起照相机拍照权限，动画、绘画。所以H5的推出就是为了解决这一系列的问题。H5解决了什么问题？
复制链接

扫一扫