简介
HTML的第五代版本HTML5(简称H5),相比较前一代版本有特别大的改进。HTML5增加了一些新特性,赋予了Web端一些重要的能力,比如新增了audio video用于处理网页音视频,新增canvas用于网页绘图,新增geolocation API用于定位,新增localStorage sessionStorage存储等。
HTML5标准文档使用<!DOCTYPE html>
声明
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML5语义结构标签
HTML5的新特性之一就是语义化标签,语义化标签让HTML文档结构显得更加清晰规范。
<header
标签:用于定义文档头部。<nav>
标签:用于定义导航。<article>
标签:用于定义文章。<section>
标签:用于定义文章的每一小节。<aside>
标签:用于定义文档的侧边栏。<footer>
标签:用于定义文档的页尾。
HTML5新增的语义标签我们可以看作一个容器,正如我们之前写的
<div id="header"></div>
一样,严格按照语义标签书写文档,更有利于搜索引擎对文章的收录。
其它常用标签
<meter>
标签:定义已知最大和最小值的度量。<bdi>
标签:使文本其脱离其父元素的文本方向设置。<progress>
标签:定义任务的进度。<time>
标签:定义日期或时间。<dialog>
标签:定义对话框。
HTML5表单
相对于HTML4,HTML5的表单标签页有很大的改进。比如新增的type属性,提示词,自动验证
type属性:color date datetime datetime-local email month number rang search tel time url week
placeholder:该数性可以设置一个字符串类型的提示词
required:设置该属性会要求该字段必须有值
pattern:设置验证输入字段的模式
autocomplete:该属性开启自动完成功能
autofocus:自动获得焦点
HTML5兼容情况
主流的浏览器Safari Chrome FireFox Opera Edge对HTML5的新特性均有比较好的兼容,IE8以下的IE浏览器对HTML5没什么支持
IE9 以下版本浏览器兼容HTML5的方法
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
载入后,初始化新标签的CSS:
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}