内容类型(contentTytp)HTML文件的后缀名“.HTML”或“.htm”,HTML文件内容类型是“text/html”
2、DOCTYPE(HTML开头的地方的关键字):
HTML5之前的样式:
<!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的声明方式向下兼容(兼容所有的低版本)。
3、字符集
H5之前
<metahttp-equiv="Content-Type"content="text/html"charset="utf-8">
H5:
<metacharset="UTF-8">
HTML5默认的字符集编码是UTF-8,之前的大部分版本默认字符集编码是ISO-8859-1
4、标签标记省略
1)、省略全部:body、tbody、head、colgroup、html
2)、不允许写结束标签的标签:img、input、br、base、link、mata等等
3)、允许写结束标签:p、li、dt、dd、tr、td、th、
5、布尔类型的属性
对于布尔类型的属性,比如:readonly、dissabled、checked、selected不写值默认为TRUE,同时对于值是任何东西都是无效的,说白了只要写这个属性,属性立马生效。
6、属性省略引号
<div>可以省略<input type=textreadonly=readonly/></div>
<div>单引号<input type=‘text’readonly=‘’/></div>
<div>登录<inputtype="text" readonly value="登录"></div>
<div>登录<inputtype="text" readonly value=<登录></div>
在之前的学习中,属性只都是放在引号里面,在H5中如果属性值中不包括特殊字符(”<”,”>”,”=”)双引号和单引号都可以去掉
1.3新增和废弃的元素新增和废弃的属性
新增的结构(布局)标签:section、article、nav、foot、header、hgroup、aside、figure
新增的其他标签:video、audio、mark、time、menu、canvas、svg、details、datalist、progress、output、source等等
Input type的新增:email、url、number、datepickers、range
废弃标签:font、center、s、basefon、u、tt
1.4全局属性
在HTML5中,定义了少量对所有元素都有效的属性。
1、 Contenteditable
<p contenteditable="true">我是一个段落,但是我可以编辑</p>//可以被编辑
<p contenteditable="false">我是一个段落,但是我不能编辑</p>//不能被编辑
<p contenteditable>我是一个段落,但是我能编辑</p>//可以被编辑
设置contenteditable=TRUE属性之后可以直接在页面上进行编辑,编辑之后元素的宽高自动适应。
contenteditable=FALSE说明这个标签不能被编辑。
注意:1)、如果只是设置了这个属性,默认的值是TRUE。
2)、属性可以被继承。需要考虑“就近原则”
2、designMode
<script>
document.designMode = "on";
</script>
用来指定整个页面是否可以编辑,当designMode设置为on的时候相当于页面上所有的元素都设置contenteditable=TRUE。当designMode设置为off的时候相当于页面上所有的元素都设置contenteditable=FALSE。
注意:1)、如果同时设置了designMode和contenteditable,最终采用“就近原则”。
2)、该属性在IE8以下的浏览器无效,以兼容IE 678为耻。
3、hidden
<!DOCTYPEhtml>
<html>
<head lang="en">
<metacharset="UTF-8">
<title>全局属性designMode的继承性</title>
<style>
.div1{
width: 100px;
height: 200px;
background-color: red;
display: none;
}
.div2{
width: 100px;
height: 100px;
background-color: red;
visibility: hidden;
}
div{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1"></div>
<div></div>
<div class="div2"></div>
<div></div>
<div hidden></div>
<div></div>
</body>
<script>
document.designMode="off";
</script>
</html>
Hidden属性可以实现对元素的隐藏,隐藏的元素不会被显示,同时不会占原来的位置。类似于display:none
注意:hidden的属性默认值是“”hidden,所以说设置只需要设置属性名,不需要属性值。
Hidden:看不见,不占位置。
Visibility:hidden看不见,占位置
Display:none看不见,不占位置。
4、spellcheck
<inputtype="text"spellcheck="true">
Spellcheck属性是HTML5专门为了input和textarea标签提供新属性,他的功能是对用户输入的内容进行拼写和语法检查,如果拼写错文字下面有一条波浪线。属性值为TRUE和FALSE,TRUE为检查拼写和语法。FALSE反之。
5、tabindex
<!DOCTYPE html>
<html>
<head lang="en">
<metacharset="UTF-8">
<title></title>
<style>
div{
height: 44px;
width: 181px;
background: #71b9fe;
}
</style>
</head>
<body>
<div>
<label>名字</label>
<inputtype="text"tabindex="1">
</div>
<div>
<label>性别</label>
<inputtype="text">
</div>
<div>
<label>年龄</label><input type="text" tabindex="3">
</div>
<div>
<label>智商</label><input type="text" tabindex="2">
</div>
<div>
<inputtype="submit"tabindex="4">
</div>
<div>
<a href="http://www.huadianedu.com">华电</a>
<a href="http://www.baidu.com"tabindex="4">百度</a>
</div>
</body>
</html>
Tabindex=“正整数”:按tab键可以选中(获得焦点),这里选择的标签可以是input输入框、按钮、a标签等等。同时按tab键选中的顺序和设置的tabindex属性一致,tabindex值越大,越后面选中。建议不使用tabindex=0;
Tabindex=-1:按tab键不选中。