HTML5基础篇

来源：互联网发布：网络直播需要什么资质编辑：程序博客网时间：2024/06/05 17:44

好久没来更新博客了，今天又重新回来了。

这次要和大家分享的是H5的一些知识点。希望大家发现不足之处多多指教。

1.1 H5 推出的理由：

推出缘由和目标：
目前web存在一些问题，比如兼容性问题，同样的页面，在不同的浏览器上显示的效果不一样。
那么开发人员需要做很多的额外工作解决问题，需要花费太多的时间。一些特殊的权限没有
开放给开发人员，比如定位权限，拉起照相机拍照权限、动画、绘画。那么H5推出就是为了解决
这一系列的问题
H5解决了什么问题：
1.开发了一些特殊的权限给开发者：有了这些权限，开发者可以轻易的获取用户的定位信息、拍照功能等等。
2.解决不同浏览器的兼容性问题：HTML5页也可以理解为一个协议标准，他让绝大部分浏览器产商都遵守这一标准。
3.文档结构不清晰：在之前的开发中，页面的布局都是使用DIV+CSS,不利于搜索引擎去抓取页面信息，
比如：浏览器抓取一片新闻网页的时候，根本抓不到作者，新闻发布时间等信息。

h5之前我们的网页绝大部分是div标签嵌套，这样对于SEO是很不利的，为了解决这一问题，h5就新增了很多语义很强的

标签，比如header、article、nav等等一系列标签

既然是新版本，那么各大主流浏览器的支持情况如何呢?

（1）Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。
（2）Safari，Opera：同样支持html5很多年，支持也很好。
（3）IE：IE10起比较好了，之前很差。

1.2 语法的改变：

h5之前是很长的一串 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

h5就简洁了很多：<!DOCTYPE HTML>

h5的声明方式向下兼容（兼容所有的低版本）

1.3 字符集：

h5之前 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

h5 <meta charset="UTF-8">

默认的字符编码就是 UTF-8

1.4 标签标记省略：

<m可以省略全部：body、tbody、head、colgroup、html
不允许写结束标记的标签 Img input br、hr、base、link、meta
允许写结束标记的标签 p li dd dt td th
5.布尔类型的属性
对于布尔类型的属性，比如：readonly，disabled，checked、selected，当他们不写值的时候，默认是true，同时对于值是任何东西都是无效的。只要写了这个属性，该属性就生效。
6.属性省略引号
在之前的学习中，属性值都是放在双（单）引号里面的，在H5中，如果属性值中不宝库特殊字符，单双引号都可以省略，
特殊字符：“（”“）”，‘=’

1.3新增和废弃的元素新增和废弃的属性
新增的结构（布局）标签：section（章节）、article（文章），nav（导航）
footer、header、hrgroup、aside、figure
新增其他标签：video、audio、mark（标记），time、menu、canvas、svg、
Details、datalist、progress、output、source ……
Input type的新增：email、url、number、date pickers，range
废弃标签：font center、tt、s、u、big、basefont
1.4全局属性
在html5中定义了少量对所有元素都有效的属性
1.Contenteditable = true：可以直接在页面上进行编辑，编辑之后元素的宽高自动适应
Contenteditable = false 说明这个标签不能被编辑。
注意:如果只设置了Contenteditable，其默认值是true

Display:none：看不见，不占位置
4.Spellcheck

<input type="email" spellcheck="true"/>
<textarea spellcheck="true" cols="30" rows="10"></textarea>

Spellcheck属性是html5专门为input和textarea标签提供新属性，他的功能是对用户输入的内容进行拼写和语法检查，如果拼写出错，文字下方会出现波浪线。
Spellcheck = true：开启语法和拼写检查。
Spellcheck = false：取消语法和拼写检查。
5.tabindex
<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="5"/>
</div>
<div>
<button tabindex="4"></button>
</div>
<div><a href="http://www.huadianedu.com">华点软件学院</a></div>
<div><a href="http://www.baidu.com">百度</a></div>
Tableindex=正整数：按键盘tab键可以选中（获取焦点），这里选择的标签可以是input输入框、a标签等等；同时，按table键选中的顺序和设置的table属性一致，tableindex越大，越后选中；tableindex=0不建议使用；tableindex=-1 按tab不选中。

阅读全文

0 0