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的方式才能使用驼峰命名法来获取或者设置页面标签上显示的多个-的自定义属性。