首页 > 代码库 > 初识 HTML5
初识 HTML5
初识 HTML5（一）
H5其实就是H4的一个增强版本，我们在利用H5进行网页的构造会更简便，标签语义更简洁明了。首先，我们要理解HTML4，它是HTML的标记+css2+JavaScript的一些基本应用，简言之，就是API+语法；而H5无非就是在原先的基础上面提供了一些新的功能。
1 <nav> 表示导航 2 <header> 表示页眉 3 <footer> 表示页脚 4 <section> 表示区块 5 <article> 表示文章 如文章、评论、帖子、博客 6 <aside> 表示侧边栏 如文章的侧栏 7 <figure> 表示媒介内容分组 与 ul > li 做个比较 8 <!--以上是常用到的--> 9 <mark> 表示标记 (带用“UI”，不怎么用) 10 <progress> 表示进度 (带用“UI”，不怎么用) 11 <time> 表示日期 12 <hgroup> 标题列表 (据说已废弃) 13 <details> 14 <bdi> 15 <command> 16 <summary> 17 <rp> 18 <rt> 19 <ruby> 20 <!--尽量避免全局使用header、footer、aside等语义标签。-->
3）兼容处理
<!-- [if lte IE 8]>
<script src="http://www.mamicode.com/js/html5shiv.min.js"></script>
<![endif]-->
【注意】<footer></footer> 这个是html5 里面的标记，相当于div，只不过有语义；然后放在ie6 里面，它会把这个footer 这个不认识的标记当做行内元素来处理；所以我们就需要屏蔽兼容性，这个时候我们就需要导入一个js 库。
html5shiv.min.js
2、表单
——form 是用来声明表单. input 是用来表示表单项，type 是用来控制表单项的类型.（html5 在表单上面进行一些增强）
1）输入类型（表单类型、表单元素、表单属性、表单事件）
1 <input type="text" /> 2 email 输入email格式 3 tel 手机号码 4 url 只能输入url格式 5 number 只能输入数字 6 search 搜索框 7 range 范围 8 color 拾色器 9 time 时间 10 date 日期 不是绝对的 11 datetime 时间日期 12 month 月份 13 week 星期
部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用
2）新增了一些标签
① 数据列表： <datalist></datalist>
②用来做安全的表单提交数据传输的安全：<keygen></keygen>
③用来做度量： <meter></meter>
④想表单里面输出，没什么作用：<outputer><outputer>
3）新增了一些属性:
1 placeholder 占位符
2 autofocus 获取焦点
3 multiple 文件上传多选或多个邮箱地址
4 autocomplete 自动完成，用于表单元素，也可用于表单自身
5 form 指定表单项属于哪个form，处理复杂表单时会需要
6 novalidate 关闭验证，可用于<form>标签
7 required 验证条件，必填项
8 pattern 正则表达式 验证表单
9 手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">
【PS】我们用新增的这些属性，可以来完成我们之前要使用js 才能实现的效果.
4）表单里面的事件
①监听文本框的数据的输入： oninput 事件
②当验证不通过的时候触发： oninvalid
③进度这个标记，我们使用 progress
3、多媒体
1）早之前我们做网页播放器
①我们是通过js 去调用windows 里面自带的一个播放器 media player 操作系统捆绑的
②adobe 的这样的一个flash ，基本上面每个用户电脑上面都会安装.
③后期我们出现了一个东西，每个电脑上面都可以装一个快播，js 调用快播.
【javascript 里面的内容】 javascript 分为三部分：
①ECMAScript
(定义了js 的语法，变量，语句)
②BOM 浏览器对象模型
(我们可以通过浏览器的自带的一些对象，可以调出浏览器的功能.)
③Dom 文档对象模型
我首先有一个html 文件，我通过浏览器去打开这个html 文件；浏览器会去解析这个html 文件，把这个文件解析之后放在一个document 对象里面； 我以后要操作html 里面的内容，我就直接操作document 就可以
1 //(操作dom 就是熟练dom 的api)
2 // (操作dom 的前期，要操作dom 必须先得到dom)
3 document.getElementById("");
4 document.getElementsByTagName("");
2） html5 可以提供一些标签来完成播放.
我们做这种音频文件，以及视频文件，最麻烦地方就是解码【音频文件，以及视频文件，都有格式，各种各样的格式】
1:假设你网站的视频资源是自己产生的
2:假设网站的资源是用户上传上去的，我们需要在用户上传的时候对这个资源进行转码.
//根据class 的值去获取
document.getElementByClassName("")
// 这个里面支持css 里面的选择器
//这里返回的是第一个元素..
document.querySelector(".username")
//获取的所有的,返回的是一个集合.
document.querySelectorAll(".username>li");
【表单的总结】我现在有一个表单，定义属性，什么时候id ，什么是时候使用name，什么时候使用class
① 我为一个元素加id 的目的，为了js 方便去获取这个元素
②name ：如果我要跟服务器进行交互，服务器到时候要获取客户端表单提交的数据.它是根据name 的值去获取
<input type="text" name="username" value="http://www.mamicode.com/zhangsan"> // username=zhangsan
③class 一般，如果我要通过样式去批量控制元素，我就为元素添加class 属性.
我们以后做案例：第一步，我要把页面的基本布局画好（html,css）
第二步：分析功能，根据功能找到对应的事件
第三步：事件出来了，方法就出来了
【ps】我看要完成什么功能，一般情况下我们都是操作dom； 获取dom，操作dom （api 操作.）；即使调试,一个案例，都是调出来的
【小结】 html5 概念：就是在html4 上面的一个增强版本。在 标签，css，js 上面的一个增强。
标签：出现了一些新的比较具有颠覆性的标记.
1:html5 的声明
2:语义标签(大家当做div ，或者span 来理解就可以.)
3:兼容性处理，需要导入一个js 库.
4:表单，我们传统的表单，难以完成比较复杂的页面应用
4.1：新增了一些类型 type=""
4.2: 新增了一些标签 datalist
4.3: 新增了属性 (文档)
4.4：事件 oninput
小案例：学生档案，案例.
多媒体处理:
audio 针对mp3 音频
video 针对视频的
解码；做客户端不用处理.
dom 的处理
新增了一些api ，来让我们去获取页面上面的内容.
document.getElementByTagName
document.querySelector();
document.querySelectorAll();
新增了属性操作:
document.getElementById("").classList.add();
document.getElementById("").classList.remove();
document.getElementById("").classList.toggle();
document.getElementById("").classList.contains();
自定义属性：
我可以为元素自定义属性 我们是在元素上面加 data-itcast-name="";
遵守驼峰命名法则
tabs 选项卡切换.(就是属性api )
4、CSS3 与 JS 的区别
1）css:出现了css3，支持3d 效果.
js:定位（直接在网站里面可以嵌入地图.），重力感应
2）css3 肯定可以使页面的显示更加的丰富效果
javascript 新增了一些api，定位（百度地图），重力感应 js 的一些对象
初识 HTML5