1.2语法改变
(1)内容类型(contentType):HTML文件的后缀名依旧是.html或者html,HTML 文件的内容类型
(2)Doctype:文档解析
H5以前:<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01Transitional//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">
H5默认的字符集编码: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中,如果属性中不包含特殊字符,双引号和单引号都可以去掉
特殊字符:“<“ , “>” ,”=”
1.3新增和废弃的元素新增和废弃的属性
新增的结构(布局) 标签:section、artcle、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全局属性
全局属性
在H5中,定义了少量对所有元素都有效的属性。
<p contenteditable="true">我是一个段落,但我可以编辑</p>//可以被编辑
<p contenteditable="false">我是一个段落,但我不能编辑</p>//不能被编辑
<p contenteditable>我是一个没有设置contenteditable的段落,</p>//可以被编辑
Contenteditable=true:标签设置了此属性之后可以在页面上直接进行编辑。编辑之后元素的宽高自动适应。
Contenteditable=false:说明这个标签不可以被编辑
注意:如果不设置contenteditable,其默认的值时true
Contenteditable:属性是可以被继承的,需要考虑就近原则
可以加到body里,使全局都可以被编辑。
2. designMode:
用来指定整个页面是否可以编辑,当designMode设置为on的时候相当于页面上所有的元素都设置了Contenteditable=true;设置为off时,则相当于全局都设置了Contenteditable=false.
document.designMode="on";
document.designMode="off";
注意事项:1如果同时设置了designMode和Contenteditable属性,最终是否可以编辑使用就看就近原则了。
2,该属性在IE8一下的浏览器无效。 以兼容IE6.7,8为耻。
Hidden属性可以实现对元素的隐藏,隐藏的元素不会被显示,同时不会占原有的位置。类思域display:none;
注意:hidden属性默认的值时:“hidden“,所以设置该属性的时候,只需要写属性名就可以了。
Hidden:看不见不占位置
"visibility: hidden":看不见,占位置
display: none:看不见,不占位置
4、spellchck
Spellchck属性是H5专门为input和textarea标签提供新属性,它的功能是对用户输入的内容进行拼写和语法检查,如果拼写错了,文字下面有一个波浪线。
<input type="text"spellcheck="true">
spellcheck="false":取消语法和和拼写检查
spellcheck="true":开启语法和拼写检查
tabindex:
<label>姓名</label><input type="text" tabindex ="2"><br>
<label>性别</label><input type="text"tabindex="4"><br>
<label>年龄</label><input type="text"tabindex="3"><br>
<label>身份证号</label><input type="text"><br>
Tabindex=”正整数”:按键tab键可以选中(获取焦点),,这里选择的标签可以是input输入框、input按钮、a标签等。同时按下tab键选择的顺序和设置的tabindex属性一致,Tabindex值越大,越在后面选中。建议不使用Tabindex=0;
Tabindex=-1,按tab不选中。
2主体结构元素
主题结构元素,它是为了予以可以结构化,说白了就是更好的SEO,再直白点就是为了浏览器跟好的抓数据。包含元素:article、sction、nav、aside、time
(1) article(文章)--使用频率低
:标签,从语言上来看,可以理解为一个文档一个页面。通常用法:一篇文章,或页面的一个独立的完整内容。这个标签强调的是内容的独立性。同时,一般article元素里面会嵌套一个header标签。
(2) section(章节)--使用频率低
:是文章中的一段,这一段通常有标题和内容组成。
特点:强调分段,分块,
<article>
<h1>苹果</h1>
<p>苹果是一种既便宜又实惠的水果,大家都喜欢吃</p>
</article>
<section>
<h1>红富士</h1>
<p>红色的苹果</p>
</section>
<section>
<h1>旮旯</h1>
<p>又小又青的苹果,味道还不错</p>
</section>
(3) nav(导航)--使用频率高
:navigation的缩写。通常用在:导航条、页面导航、翻页操作。
<header>
<div class="=logo">
<nav>
<ul>
<li>H5发展史</li>
<li>CSS3发展史</li>
<li>EMScript发展史</li>
</ul>
</nav>
</div>
</header>
(4) aside(旁边)--使用频率低
:放在article元素里面,作为附属信息部分,比如:参考信息,名称解释。
通常用法:
放在article元素里面,作为附属信息部分。
放在外面可作为主体部分。///
<article>
<h1>小黑</h1>
<p>小黑,母,我家养的一条汪,今年八岁了,出了四条腿和肚子,全是黑色的,故名小黑
饼干厂老大,常常欺鸡惹鹅,很是厉害</p>
<aside>
<h1>参考资料</h1>
<p>百度百科</p>
</aside>
</article>
<aside>
<nav>
<h1>参考资料</h1>
<p>百度百科</p>
</nav>
</aside>
(5) time(时间)--根本不用
:时间标签,表示24小时的某个时刻或者某个日期
所有浏览器都不支持,了解即可