HTML5学习1

来源：互联网发布：java 字符串补位编辑：程序博客网时间：2024/06/11 12:07

1 HTML5的变化

1.1 HTML5推出的理由

目前文本存在一定的问题，比如说兼容性，同样的内容，同样的页面在不同浏览器上显示不一样，那么开发者就会需要额外的工作来解决问题。

一些特殊的权限没有开放给开发人员，比如定位、拍照等，h5的推出就是为了解决这一系列的问题

（1）开放了一些特殊的权限给开发者，开发者通过这些权限可以获取用户的定位，拍照功能等

（2）解决不同浏览器的兼容性问题，可以理解为协议标准

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

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

1.2语法的改变

（1）内容类型<>HTML文件后缀名html或htm，内容类型“text/”

（2）doctype

h5之前

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>

doctype声明在html文件中必不可少，位于第一行，随着版本更新，声明方式也在更改，但是html5的声明方式向下兼容（所有低版本）

（3）字符集

h5之前

HTML5的默认编码：UTF-8，之前大部分为ISO-8839

（4）标签标记省略

可省略全部标签body、tbody、html

不允许写结束标记的标签img、input、br、hr、link、

允许写结束标记的标签p、li、dt、dd、tr、tb、td

（5）布尔类型

对于布尔类型的属性如：readonly、disabled不写值的时候，默认为true

（6）属性值

属性值是放在双（单）引号中的，h5如果不包含特殊值，单双引号可以去掉

1.3新增和废弃的元素新增和废弃的属性

新增的标签：section、article、nav、footer、header、figure、asidk、bgroup。。。

新增的其他标签：video、acdio、mark、time、meau、dtails、datalist。。。

input type新增：email、url、number、date pickers、range、tel。。。

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

1.4全局属性

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

1、contenteditable

标签设置该属性为true之后，可以直接在页面上进行编辑，编辑之前宽高自动适应，false则无法编辑。如果只设定了contenteditable，则默认值是true

这群只有我还在欧洲 可以被编辑
这群只有我不是狗托了 不可以被编辑
这群只有我不是狗托了 可以被编辑

注意：（1）属性可以被继承

（2）需要考虑“就近原则”

2、designMode用来指定整个页面是否可以编辑，为“on”是可以编辑

为“off”时则不能编辑

如果同时设置了designMode和contenteditable，最终是否可以编辑，采用“就近原则”

在ie8以下的浏览器无效

3、hidden

hidden属性可以实现对元素的隐藏，隐藏的元素不会被显示，不会站原有的位置

注意：默认值为hidden，所以只要属性名就可以了

hidden：看不见，不占位

visibility:hidden：看不见，占位置

display:none：看不见，不占位

4、spellcheck

是HTML5专门为input和textarea标签提供新属性，用于检查语法和拼写，出错下方会出现波浪线，true开启检查、false取消检查

5、tabindex

tabindex：“正整数”：按键盘tab可以选中，对象为各种输入框和标签，同时选择顺序和tabindex属性有关，值越大，越后面选中，建议不使用tabindex=0

12 HTML5地理定位

geolocationAPI（地理定位）允许分享我们的位置信息，在开发中使用JS获取位置坐标（经纬度）。

geolocation基于navigator的一个新属性，创建地理定位的方式

var geolocation = navigator.geolocation

getCurrentPosition是基于地理定位的一个方法，可以让我们获取到当前的位置

注意：location是关键字，不能用作变量名

没有设置点击事件时，要设置页面加载函数

获取到的坐标与实际位置有偏差，原因是系统使用的是火星坐标

火星坐标是一种国家保密插件，也叫做加密插件或者加偏或者SM模组，其实就是对真实坐标系统进行人为的加偏处理，按照特殊的算法，将真实的坐标加密成虚假的坐标，而这个加偏并不是线性的加偏，所以各地的偏移情况都会有所不同。而加密后的坐标也常被人称为火星坐标系统。

通过正规地图公司（高德JSAPI、百度JSAPI）我们可以申请key值，通过网站提供的密钥进行解析，从而可以获取到真正的坐标值

注意：高德地图提供key值获取到的实际坐标，用百度地图反查会有偏移，反过来一样，所以开发时要注意只能用一种地图工具

阅读全文

1 0