html5相关笔记（一）
0.推荐开发技术资料网站：http://www.shouce.ren/，里面包含了各种开发技术手册、开发工具插件、各种技术书籍等等。
1 网页开发方式上的两个层次：
◆HTML4.1
◇结构：html4.0
◇样式：css css2
◇行为：js
◆HTML5
◇结构：html5
◇样式：css3
◇行为：js API 有所增强 如 地理定位 web存储 拖拽 重力感应 硬件访问等
2.HTML5狭义的概念上就是HTML4的升级版本，HTML5广义上的概念上就是代表着浏览器技术发展的的一个阶段，也就是 html5+css3+js API 一套前端技术的组合
3.W3C标记验证服务官网：https://validator.w3.org/
4.html页面的 meta标签的主要作用是 用于描述网页的元(最根本的)信息，相当于页面的元神。
5.html5的语法规范更加的简洁、宽松，而html4的语法规范更加严格，但是实际工作中无论是使用html5还是html4都要书写规范，避免后期再看就看不懂了。
6.经典的div加css网页布局和html5网页布局
◆div+css网页布局【
<div class="header"></div>
<div class="nav"></div>
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
】
◆html5网页布局【
<header></header>
<nav></nav>
<section>
<aside></aside>
<article></article>
</section>
<footer></footer>
】
★IE8及以下版本的浏览器不支持html5及css3，所以需要引入一个html5的插件脚本 html5shiv.js ，<script src="html5shiv.min.js"></script>
7.IE浏览器 的条件注释
<!--[if lte ie 8]><![endif]--> 表示当前浏览器的版本小于等于ie 8 就执行注释标签对中的代码，否则就不执行，条件注释只有ie浏览器中可 以识别，例如<!--[if lte ie 8]><script src="html5shiv.min.js"></script><![endif]--> ，这样就能够只会在ie8及其以下的版本浏览器中引入这个脚本了，l表示less既更小，t表示then既比较，e表示equal既等于，g表示great既更大。
8.html5新增的表单标签兼容性并不好，因为这些新增的表单标签实际原理，就是浏览器内置了这些表单标签的js脚本，不同浏览器内置的js脚本并不是完全一样，所以展示这些表单标签的时候，功能虽然大同小异但是样式各不一样，所以说兼容性不好，并不像那些新增的结构化标签一样，只需要弄个脚本让他们显示为块儿级元素。
9.css新增自适应宽度【
width:100%;//宽度
max-width:640px;//最大宽度
min-width:320px;//最小宽度
】，以前需要通过设置一个父容器，然后让两个子容器浮动，左边的固定宽度，右边的自适应父容器，然后设置右边的容器左外边距为左边容器的宽度，这样就能够让右边的容器自适应父容器的宽度，父容器变宽右边的容器也会变宽，父容器变窄，右边的容器也会变窄，但是现在不需要了，只需要设置css新增的自适应宽度的样式即可。
10.html5新表单标签
◆type=email：文本为email格式
◆type=tel：文本为手机号码格式
◆type=number：文本为数字格式
◆type=search：有搜索框的一些样式
◆type=range：有滑块儿的样式，并且value值为数字
◆type=color：拾色器，就是点击之后可以选择颜色
◆type=time：文本为时间格式，兼容好的话可以选择时间
◆type=date：文本为日期格式，兼容好的话可以选择日期
◆type=month：文本为月份格式，兼容好的话可以选择月份
◆type=week：文本为星期格式，兼容好的话可以选择星期
★新表单的兼容性并不好，原理都是浏览器内嵌自带的js脚本支持，所以版本低的浏览器可能不会有这些脚本的支持。
11.html5新增文本框绑定数据下拉列表
【
<input type="text" list="bao" />
<datalist id="bao">
<option>宝马</option>
<option>宝石</option>
<option>宝刀</option>
<option>宝剑</option>
<option>宝宝</option>
</datalist>
】
12.html5新增的其它标签
◆表单分组框：<fieldset><legend></legend></fieldset>
◆文本输出：<output></output> //纯输出的标签，与span相比，仅仅是有语义化而已。
◆加密类型：<keygen /> //在有些浏览器上无效
◆度量器: <meter value="50" max="100" min="0" low="30" high="80"></meter>//max 和min 表示度量器的最大值与最小值，low和high表示度量器的正常取值范围，低于或高于正常取值范围，度量器都会变色，比如变黄或者变红，在正常范围下，度量器的颜色应该是绿色的。
◆进度条：<progress value="40" max="100" min="0"></progress>
13.html5新增的表单属性
◆占位符(提示文字)属性：<input type="text" placeholder="例如：李狗蛋" />
◆自动获取焦点属性：<input type="text" autofocus />
◆自动补全属性（默认 on）：<input type="text" autocomplete="on/off" />
◆文本框必填属性：<input type="text" required />
◆文件 多选 属性：<input type="file" multiple />
◆表单关闭验证功能 属性：<form action="" novalidate></form>
◆文本框自定义正则验证 属性 ：<input type="tel" pattern="^1\d{10}$" />
14.推荐一个网页特效网站：http://www.5iweb.com.cn/，这里面有很多的网页特效，可以用来参考。
15.html5新增的事件
◆oninvalid 当html5表单元素验证不通过时就会触发【
txt1.oninvalid=function(){
//设置验证不通过是的提示文字
this.setCustomValidity("您输入的数据不符合要求，请重新输入！")；
}
】
16.html5新增的多媒体标签
◆之前在网页上播放多媒体 必须依赖于第三方 插件
◇mediaplay
◇快播
◇flash插件
◆现在html5里面提供了 视频video和音频audio的标签
◆audio 音频标签
◇<audio src="music/yinyue.mp3" controls autoplay loop> controls显示控制条、autoplay表示自动播放音乐、loop表示循环播放</audio>
◇audio 音频标签只支持 Ogg Vorbis、MP3、Wav这三种格式的音频文件，所以需要写兼容性的写法，【<audio controls loop autoplay>
<!-- 通过source标签指定多格式音频文件 -->
<source src="music/yinyue.mp3" >
<source src="music/yinyue.ogg" >
<source src="music/yinyue.wav" >
您的浏览器不支持html5音频播放功能
</audio>
】
◆video 视频标签
◇<video src="video/movie.mp4" controls autoplay loop></video>
◇video 视频标签只支持 Ogg MPEG 4 WebM这三种格式的视频文件，所以需要些兼容性的写法，【<video autoplay controls loop >
<source src="video/movie.mp4" >
<source src="video/movie.ogg" >
<source src="video/movie.webm" >
您的浏览器不支持html5视频播放功能
</video>
】
★原本html4中也有一个音乐标签 <embed src="music/yinyue.mp3"></embed> ，其实内部渲染之后就是video了。
17.html5 新增的dom对象获取方式
◆通过查询选择器的方式获取dom对象：document.querySelector("#box");可以通过id获取dom对象，只会获取第一个查询到的对象，无论你是类选择器还是标签选择器在或者id选择器。
◆通过查询选择器的方式获取多个dom对象（装到伪数组中）：document.querySelectorAll(".box");可以获取到查询到的多个dom对象，返回值是一个伪数组，无论你是类选择器还是标签选择器再或者id选择器，就算只有一个dom对象都会返回一个伪数组。
★无论是querySelector还是querySelectorAll，其实都是根据css2选择器来获取dom对象或伪数组dom对象
18.html5 新增的操作类的方式
◆box.classList.add("class5");//添加类，classList属性表示类的列表，这个方法类似于jQuery中的addClass();
◆box.classList.remove("class5");//移除类，这个方法类似于jQuery中的removeClass();
◆box.classList.contains("class5");//是否包含类，这个方法类似于jQuery中的hasClass();
◆box.classList.toggle("class5");//切换类，如果有就删除，如果没有就添加，这个方法类似于jQuery中的toggleClass();
19.html5中的自定义属性，必须以data开头以-连接，如 <div id="box" data-size="200"></div>
◆获取html5中的自定义属性：box.dataset["size"]，表示获取自定义属性key为size的值
◆设置html5中的自定义属性：box.dataset["size"]=500;
◆获取值时注意，如果你设置的html5自定义属性为<div id="box" data-box-size="200"></div>时，有多个-，那么获取的时候就必须使用小驼峰命名法这么获取，box.dataset['boxSize']，只能够这样子来获取。
◆设置html5中的自定义属性【
var box=document.querySelector(".box");
//获取 一个 横杠隔开 - 的自定义属性
console.log(box.dataset["name"]);
//获取 两个 横杠隔开 - 的自定义属性
console.log(box.dataset["childName"]);
//设置 一个 横杠隔开 - 的自定义属性
box.dataset["sex"]="男";
//设置 两个 横杠隔开 - 的自定义属性
box.dataset["childSex"]="不详";
】
★html5标签在页面上设置自定义属性时无法设置大写的，更无法使用小驼峰命名法，就算你设置了大写的自定义属性，到后来都会被页面标签渲染成全小写的自定义属性【
data-haSX-XhxaXi="hahaxixi" 会被渲染成 data-hasx-xhxaxi="hahaxixi"
】，只有在使用js的方式才能使用驼峰命名法来获取或者设置页面标签上显示的多个-的自定义属性。
1 网页开发方式上的两个层次：
◆HTML4.1
◇结构：html4.0
◇样式：css css2
◇行为：js
◆HTML5
◇结构：html5
◇样式：css3
◇行为：js API 有所增强 如 地理定位 web存储 拖拽 重力感应 硬件访问等
2.HTML5狭义的概念上就是HTML4的升级版本，HTML5广义上的概念上就是代表着浏览器技术发展的的一个阶段，也就是 html5+css3+js API 一套前端技术的组合
3.W3C标记验证服务官网：https://validator.w3.org/
4.html页面的 meta标签的主要作用是 用于描述网页的元(最根本的)信息，相当于页面的元神。
5.html5的语法规范更加的简洁、宽松，而html4的语法规范更加严格，但是实际工作中无论是使用html5还是html4都要书写规范，避免后期再看就看不懂了。
6.经典的div加css网页布局和html5网页布局
◆div+css网页布局【
<div class="header"></div>
<div class="nav"></div>
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
】
◆html5网页布局【
<header></header>
<nav></nav>
<section>
<aside></aside>
<article></article>
</section>
<footer></footer>
】
★IE8及以下版本的浏览器不支持html5及css3，所以需要引入一个html5的插件脚本 html5shiv.js ，<script src="html5shiv.min.js"></script>
7.IE浏览器 的条件注释
<!--[if lte ie 8]><![endif]--> 表示当前浏览器的版本小于等于ie 8 就执行注释标签对中的代码，否则就不执行，条件注释只有ie浏览器中可 以识别，例如<!--[if lte ie 8]><script src="html5shiv.min.js"></script><![endif]--> ，这样就能够只会在ie8及其以下的版本浏览器中引入这个脚本了，l表示less既更小，t表示then既比较，e表示equal既等于，g表示great既更大。
8.html5新增的表单标签兼容性并不好，因为这些新增的表单标签实际原理，就是浏览器内置了这些表单标签的js脚本，不同浏览器内置的js脚本并不是完全一样，所以展示这些表单标签的时候，功能虽然大同小异但是样式各不一样，所以说兼容性不好，并不像那些新增的结构化标签一样，只需要弄个脚本让他们显示为块儿级元素。
9.css新增自适应宽度【
width:100%;//宽度
max-width:640px;//最大宽度
min-width:320px;//最小宽度
】，以前需要通过设置一个父容器，然后让两个子容器浮动，左边的固定宽度，右边的自适应父容器，然后设置右边的容器左外边距为左边容器的宽度，这样就能够让右边的容器自适应父容器的宽度，父容器变宽右边的容器也会变宽，父容器变窄，右边的容器也会变窄，但是现在不需要了，只需要设置css新增的自适应宽度的样式即可。
10.html5新表单标签
◆type=email：文本为email格式
◆type=tel：文本为手机号码格式
◆type=number：文本为数字格式
◆type=search：有搜索框的一些样式
◆type=range：有滑块儿的样式，并且value值为数字
◆type=color：拾色器，就是点击之后可以选择颜色
◆type=time：文本为时间格式，兼容好的话可以选择时间
◆type=date：文本为日期格式，兼容好的话可以选择日期
◆type=month：文本为月份格式，兼容好的话可以选择月份
◆type=week：文本为星期格式，兼容好的话可以选择星期
★新表单的兼容性并不好，原理都是浏览器内嵌自带的js脚本支持，所以版本低的浏览器可能不会有这些脚本的支持。
11.html5新增文本框绑定数据下拉列表
【
<input type="text" list="bao" />
<datalist id="bao">
<option>宝马</option>
<option>宝石</option>
<option>宝刀</option>
<option>宝剑</option>
<option>宝宝</option>
</datalist>
】
12.html5新增的其它标签
◆表单分组框：<fieldset><legend></legend></fieldset>
◆文本输出：<output></output> //纯输出的标签，与span相比，仅仅是有语义化而已。
◆加密类型：<keygen /> //在有些浏览器上无效
◆度量器: <meter value="50" max="100" min="0" low="30" high="80"></meter>//max 和min 表示度量器的最大值与最小值，low和high表示度量器的正常取值范围，低于或高于正常取值范围，度量器都会变色，比如变黄或者变红，在正常范围下，度量器的颜色应该是绿色的。
◆进度条：<progress value="40" max="100" min="0"></progress>
13.html5新增的表单属性
◆占位符(提示文字)属性：<input type="text" placeholder="例如：李狗蛋" />
◆自动获取焦点属性：<input type="text" autofocus />
◆自动补全属性（默认 on）：<input type="text" autocomplete="on/off" />
◆文本框必填属性：<input type="text" required />
◆文件 多选 属性：<input type="file" multiple />
◆表单关闭验证功能 属性：<form action="" novalidate></form>
◆文本框自定义正则验证 属性 ：<input type="tel" pattern="^1\d{10}$" />
14.推荐一个网页特效网站：http://www.5iweb.com.cn/，这里面有很多的网页特效，可以用来参考。
15.html5新增的事件
◆oninvalid 当html5表单元素验证不通过时就会触发【
txt1.oninvalid=function(){
//设置验证不通过是的提示文字
this.setCustomValidity("您输入的数据不符合要求，请重新输入！")；
}
】
16.html5新增的多媒体标签
◆之前在网页上播放多媒体 必须依赖于第三方 插件
◇mediaplay
◇快播
◇flash插件
◆现在html5里面提供了 视频video和音频audio的标签
◆audio 音频标签
◇<audio src="music/yinyue.mp3" controls autoplay loop> controls显示控制条、autoplay表示自动播放音乐、loop表示循环播放</audio>
◇audio 音频标签只支持 Ogg Vorbis、MP3、Wav这三种格式的音频文件，所以需要写兼容性的写法，【<audio controls loop autoplay>
<!-- 通过source标签指定多格式音频文件 -->
<source src="music/yinyue.mp3" >
<source src="music/yinyue.ogg" >
<source src="music/yinyue.wav" >
您的浏览器不支持html5音频播放功能
</audio>
】
◆video 视频标签
◇<video src="video/movie.mp4" controls autoplay loop></video>
◇video 视频标签只支持 Ogg MPEG 4 WebM这三种格式的视频文件，所以需要些兼容性的写法，【<video autoplay controls loop >
<source src="video/movie.mp4" >
<source src="video/movie.ogg" >
<source src="video/movie.webm" >
您的浏览器不支持html5视频播放功能
</video>
】
★原本html4中也有一个音乐标签 <embed src="music/yinyue.mp3"></embed> ，其实内部渲染之后就是video了。
17.html5 新增的dom对象获取方式
◆通过查询选择器的方式获取dom对象：document.querySelector("#box");可以通过id获取dom对象，只会获取第一个查询到的对象，无论你是类选择器还是标签选择器在或者id选择器。
◆通过查询选择器的方式获取多个dom对象（装到伪数组中）：document.querySelectorAll(".box");可以获取到查询到的多个dom对象，返回值是一个伪数组，无论你是类选择器还是标签选择器再或者id选择器，就算只有一个dom对象都会返回一个伪数组。
★无论是querySelector还是querySelectorAll，其实都是根据css2选择器来获取dom对象或伪数组dom对象
18.html5 新增的操作类的方式
◆box.classList.add("class5");//添加类，classList属性表示类的列表，这个方法类似于jQuery中的addClass();
◆box.classList.remove("class5");//移除类，这个方法类似于jQuery中的removeClass();
◆box.classList.contains("class5");//是否包含类，这个方法类似于jQuery中的hasClass();
◆box.classList.toggle("class5");//切换类，如果有就删除，如果没有就添加，这个方法类似于jQuery中的toggleClass();
19.html5中的自定义属性，必须以data开头以-连接，如 <div id="box" data-size="200"></div>
◆获取html5中的自定义属性：box.dataset["size"]，表示获取自定义属性key为size的值
◆设置html5中的自定义属性：box.dataset["size"]=500;
◆获取值时注意，如果你设置的html5自定义属性为<div id="box" data-box-size="200"></div>时，有多个-，那么获取的时候就必须使用小驼峰命名法这么获取，box.dataset['boxSize']，只能够这样子来获取。
◆设置html5中的自定义属性【
var box=document.querySelector(".box");
//获取 一个 横杠隔开 - 的自定义属性
console.log(box.dataset["name"]);
//获取 两个 横杠隔开 - 的自定义属性
console.log(box.dataset["childName"]);
//设置 一个 横杠隔开 - 的自定义属性
box.dataset["sex"]="男";
//设置 两个 横杠隔开 - 的自定义属性
box.dataset["childSex"]="不详";
】
★html5标签在页面上设置自定义属性时无法设置大写的，更无法使用小驼峰命名法，就算你设置了大写的自定义属性，到后来都会被页面标签渲染成全小写的自定义属性【
data-haSX-XhxaXi="hahaxixi" 会被渲染成 data-hasx-xhxaxi="hahaxixi"
】，只有在使用js的方式才能使用驼峰命名法来获取或者设置页面标签上显示的多个-的自定义属性。
