首页 > 代码库 > HTML5的简介
HTML5的简介
HTML5是新一代的标准，其工作原理主要包括3部分：
1.不破坏web
在web中使用HTML5的标准不应该让已经存在的网页无法工作。
2.修补牛蹄子路
HTML5将使用频率很高，但是不是官方的技术作为一个目标，在某种程度上确实是最 实际解决问题的途径。
3.实用至上
1.1文档声明
虽然即使不加<html><head><body> 浏览器依旧能够识别html的标签元素，但是如果不加<!doctype html> 文档说明，浏览器就会以一种混杂模式去渲染网页，不同的浏览器混杂模式不同，渲染页面差别很大，加入文档声明以后，浏览器会以 更严格的标准模式去渲染页面，以保证以一致的格式和布局显示网页。浏览器不关心你有哪种文档声明，它只要检测到文档声明即可。HTML5文档声明很简单
<!doctype html> /<!DOCTYPE html> html5不区分大小写，大写小写无所谓。
1.2语言和编码
使用选择的语言，只需要在<html lang="en/zh-CN"> 中自己添加要使用的语言即可，en 代表英文，zh-CN代表中文。
编码建议采用utf-8 这种编码简单，转换速度快，支持任何非英文字符，当然包含中文。使用如下：
<meta charset="utf-8">
1.3 引入css样式和javascript
推荐外联式引入css,javascript,可以使html5页面结构清晰，便于修改和维护，css的引入内联式和行间样式不推荐使用，js的内联式也不推荐使用。
外联式 ：
<link rel="stylesheet" href="http://www.mamicode.com/css/1.csss">
<script src="http://www.mamicode.com/js/1.js"></script>
css的引入只能在<head></head> 中，js用<script></script>引入，但是可以放在页面的任何部分，建议放在页面的底部，这样做是要页面加载完以后，再加载交互部分。
2.html5新增的元素
新增的元素有的是添加了功能，有的是形成语义元素，让页面结构更清晰，所有语义元素都有一个特点：不真正做任何事。但是却有一定的用处：容易修改和维护、无障碍性（现代web，让任何人都能无障碍的访问网页）、搜索引擎优化。
2.1构建页面的元素
<article></article> 一块文章、新闻区域。
<aside></aside> 添加附注
<figcaption></figcaption> 插图标题
<figure></figure> 应用插图
<footer></footer> 标示页脚
<header></header> 头部
<hgroup></hgroup> 标题 里面放主标题、副标题，别的不放
<hgroup>
<h1>efgwerwq3</h1>
<h2>efgwerwq3</h2>
</hgroup>
<nav></nav> 标示一组导航
<section></section>
<details></details>
<summary></summary>
对于不识别这些新元素的浏览器 ，浏览器默认是显示为line元素。对于不认识的元素，应该显示为块级元素。有两种方式：
1.自定义
article,aside,figure,figcaption,footer,header,hgroup,nav,section,summary{
display:block;
}
2.引入
这里是使用的boostrap中兼容的小于IE9以下的浏览器
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>2.2标示文本
<mark>awfa</mark> 标记文本 ,默认是有黄色背景
<time>2017-7-1</time> 其实跟不同文本没区别，添加样式很方便
2.3web表单及交互
表单：就是一组文本框、列表、按钮及其他可以点击的小控件，通过这些小控件收集有关访客的某些信息。
2.3.1 input
<input type="text"> 添加了很多类型 button color image email number url tel range datatime data month week time color等
用placeholder=""添加提示信息，默认为灰色
<input type="text" placeholder="请输入.....">
用autofocus 自动获取焦点，表单中只能有一个
<input type="text" autofocus>
用required 验证非空,此为必填的字段。若添加这个属性的表单元素为空，当提交后，会有提示信息。
<input type="text" required>
可添加样式,与伪类结合以体验更好的体验：
必填时的样式
input:required{ background:red;
}
当提交会，无效时显示的样式
input:required:invalid{ background:blue;
}
更好的验证方式是正则表达式
2.3.2
<datalist id="id"></datalist> 用作下拉框，与input 一起使用，input中 指定list="id",即可选择，又可以 自动输入
<progress></progress>
<command>
<menu></menu>
<output></output> 用于js计算后，放一些数据的占位符，通常用span,现在可以用output
2.4音频、视频、插件
<audio src=""></audio>
<video src=""></video>
<embed src="" type="">
2.5画布
<canvas></canvas>
HTML5的简介