HTML5的变化

来源：互联网发布：淘宝外卖和口碑的区别编辑：程序博客网时间：2024/05/16 13:29

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起比较好了，之前很差。（IE 9+ 都支持）。
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">

H5：

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

<div>""可以去掉<input type=text readonly="readonly"/></div><div>""改成单引号<input type='text' readonly=""/></div><div>value="登录"<input type="text" value="登录" readonly/></div><div>value="登录"<input type="text" value=<登录> 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：

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

contenteditable=true可以直接在页面上进行编辑。编辑之后，元素的宽高自动适应。
contenteditable=false说明这个标签不能被编辑
注：（1）如果只是设置了contenteditable，其默认的值是true；
（2）contenteditable属性可以被继承，需要考虑“就近原则”。
2、designMode：

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

用来指定整个页面是否可以编辑，当设置为on的时候，相当于页面上所有的元素都设置了contenteditable=true。
当设置为off的时候，相当于页面上所有的元素都设置了contenteditable=false。
注：（1）如果同时设置了designMode和contenteditable属性，最终是否可以编辑，采用“就近原则”。
（2）该属性在IE8一下的浏览器无效。–>以兼容IE6，7，8为耻

<body><div class="box" >    <p contenteditable="false">我是一个段落，但是我可以编辑</p>    <p>我是一个段落，但是我不可以编辑</p>    <p>我是一个段落，我没有设置contenteditable的值</p></div><div>    我是一个div</div></body><script>    document.designMode = "on";//    document.designMode = "off";</script>

3、hidden：

<div class="div1">让我消失吧11</div><div class="box">box1</div><div class="div2">让我消失吧22</div><div class="box">box2</div><div hidden>让我消失吧33</div><div class="box">box3</div>

这里写图片描述
hidden属性可以实现对属性的隐藏，隐藏的元素不会被现实，同时不会占原有的位置。类似于display：none；
注意：hidden属性默认值就是“hidden”，所以设置该属性的时候，只需要写属性名就好了。
hidden：看不见，不占位置
visibility：hidden：看不见，占位置
display：none：看不见，不占位置
4、spellcheck：

<body>输入apple试试看：<input type="text" spellcheck="true"/><textarea spellcheck="true" cols="30" rows="10"></textarea></body>

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

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

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

2、主体结构元素

主体结构元素：它是为了语义可以结构化，实际上就是为了更好的SFO，再是实际点说就是为了浏览器更好的抓数据。包含的元素：article、section、nav、aside、time
（1）article–使用频率低

<body>    <article>        <header>            HTML5课程        </header>        <p>轻松学习HTML5，欢迎来到<a href="http://www.huadianedu.com">华点</a></p>    </article></body>

article标签从语义上看，可以理解为文章、文档、页面。通常的用法：一篇文章、一个页面、一个独立完整的内容。这个标签强调的是内容的独立性。同时，一般article元素里面会嵌套一个header标签。
（2）section–使用频率低
article标签从语言上看，可以理解为段落、章节。通常的用法：是文章中的一段，这一段通常由标题和内容组成。该标签的特点：强调分段分块

<body>    <article>        <h1>苹果</h1>        <p>苹果是一种可以吃的水果，而且大家都喜欢吃</p>        <section>           <h3>红富士</h3>            <p>是红色的一种苹果</p>        </section>        <section>            <h3>国光</h3>            <p>是酸酸的一种苹果</p>        </section>    </article></body>

（3）nav–使用频率高
导航：navigable的缩写。通常用在：导航条、页面导航、翻页操作。

<body>    <haeder>        <div class="logo"></div>        <nav>            <ul>                <li>H5发展史</li>                <li>CSS3发展史</li>                <li>EMScript发展史</li>            </ul>        </nav>    </haeder></body>

（4）aside–使用频率低
aside元素定义：旁边、侧边、辅助。
通常用法：
放在article元素里面，作为附属信息部分。比如：参考信息、名称解释。
放在article元素外面，作为整个页面的附属信息，比如侧边栏、友情链接、广告区域

<body>    <article>        <h1>马云是谁？</h1>        <p>马云，男，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市（原嵊县）谷来镇， 阿里巴巴集团主要创始人，           现担任阿里巴巴集团董事局主席、日本软银董事、大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事。</p>        <aside>            <h1>参考资料</h1>            <p>百度百科</p>        </aside>    </article>    <aside>        <nav>            <ul>                <li><a href="#">王朝博客</a></li>                <li><a href="#">马汉博客</a></li>                <li><a href="#">张龙博客</a></li>                <li><a href="#">赵虎博客</a></li>            </ul>        </nav>    </aside></body>

（5）time–不需要用
事件标签，通常用法，表示24小时的某个时刻或者某个日期
注：该标签所有浏览器都不支持

3、非主体结构元素

（1）header标签
一般用来放置整个页面的标题。比如说一个新闻页面，header一般放新闻的标题。如果是一个官方网址，一般header用来放logo和网站导航。
（2）footer标签
一般用来放置脚注，主要包含：作者信息、copyright（版权）。
（3）address标签
一般用来呈现联系信息，主要包括：网站的联系方式、电子邮箱、地址、电话号码等

阅读全文

0 0