一.HTML5
1.HTML：超文本标记语言（超文本:视频.音频.超链接.图片…;标记语言:标签组合）
2.HTML5的简单介绍:
html5 是html4.0 升级版,HTML5 并不仅仅只是做为HTML 标记语言的一个最新版本,更重要的是它制定了Web 应用开发的一系列标准,成为第一个将Web 做为应用开发平台的 HTML 语言.html5 是html4.0 升级版,HTML5 并不仅仅只是做为HTML 标记语言的一个最新版本,更重要的是它制定了Web 应用开发的一系列标准,成为第一个将Web 做为应用开发平台的 HTML 语言.HTML5 定义了一系列新元素，如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地 理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合 Canvas 我们可开发网页版游戏.
广义概念：HTML5代表浏览器端技术的一个发展阶段.在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括：HTML5,CSS3, Javascript,API 在内的一套技术组合.
Html5 范称 HTML5 + CSS3 + JS
3. 语法规范 :
HTML5 在语法规范上也做了比较大的调整,去除了许多冗余的内容,书 写规则更加简洁,清晰.
4. 特点?*
i.更简洁
ii.更宽松
单标签不用写关闭符号双标签省略结束标签 html、head、body、colgroup、tbody 可以完全省略
( 实际开发中应规范书写,不建议太随意!)
5.html5与html的区别:
首先在文档类型的书写上不同,html5中新增了一些语义化的标签,以及 表单属性和表单的类型,还包含新的伪类.
二.语义化标签
1.<header> 表示页眉(头部)
2.<article>文章
3.<aside>侧边栏
4.<footer>尾部
5.<nav>导航
6.<section>表示区块
7.<figure>表示媒介内容分组
8.<mark>表示标记
9.<progress>进度条(value,max属性)
10.<time>表示日期
三.视窗(viewport)单位
比方说我们有一个1000px（宽）和800px（高）的视窗(Viewport)
1.vw---------------代表视窗(Viewport)的宽度为1%，在我们的例子里50vw = 500px
2.vh--------------窗口高度的百分比 50vh = 400px。
3.vmin------------vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式，所以50vim = 400px。
4.vmax-----------大尺寸的百分比。50vmax = 500px。
四.表单(form)
//action=""提交的地址// //method=’’’‘请求方式提交方式//
1.<fieldset>
<legend> </legend>
</fieldset>
2.placeholder:表示内容的阴影提示/占位符
3.<label>
姓名:<input type=“text” name=“username”/>(驼峰命名法)
</labekl>
密码:(name="password’’)
手机号:(name=“tel”)
4.表单类型
email 输入email 格式 ; number 只能输入数字 ; search 搜索框 ;tel 手机号码 ;url 只能输入url 格式 ;
range 范围 滑动条 ;color 拾色器 ;time 时间 ;date 日期 不是绝对的 ;datetime 时间日期 ;month 月份 ;week 星期
5.智能列表/数据列表
<datalist> 数据列表与input 配合使用:
<input type=”text” list=”data”>
<datalist id=”data”>
<option>男</option>
<option>女</option>
<option>不详</option>
</datalist>
6.keygen加密
生成两个键i私钥(private key)ii公钥(public key)
加密类型算法方式:dsa;rsa;等
7.表单属性
meter度量器(不建议用作进度条)
autofocus获取焦点(设置焦点事件)
required 必填项
novalidate 关闭验证
placeholder 占位符
10.多选下拉框
<select multiple>(multiple 文件上传多选或多个邮箱地址 )
<option></option>
</select>
11. 表单事件
pattern 正则表达式
js:="/^\d{}$/"
表单:="\d{}"
{}表示位数如{2,6}表示2~6位
oninput用户输入内容时触发可用于移动端输入字数统计
oninvalid验证不通过时触发
alert消息框
五.多媒体
1.视频video
i. <video src="" controls=“controls”>(controls设置视频的播放控件)
</video>
ii. <video controls=“controls’’ poster=“img…’’>
<source src=”” ></source>
</video>
2.poster=“img…“添加视频初始加载时间的图片
3.loop=“loop"循环播放
4.autoplay自动加载播放
5.音频audio(WAV ogg mp4)
audio既可以播放mp4的文件,也可以播放mp3的文件
i. <audio src=”” controls=“controls”>
</audio>
ii. <audio controls=“controls’’>
<source src=”” ></source>
</audio>
6.<embed src=’’’’></embed>
既可以插入音频也可以插入视频,不能添加controls,loop,autoplay等属性.
六.css3
如同人类的的进化一样,CSS3 是CSS2 的“进化”版本, 在CSS2 基础上,增强或新增了许多特性,弥补了CSS2 的众多不足之处,使得 Web 开发变得更为高效和便捷.
CSS3 的现状i.浏览器支持程度差，需要添加私有前缀 ii.移动端支持优于PC 端 iii.不断改进中 iv.应用相对广泛
1.属性选择器
div[class]所有div中带有class的
div[class=div1]所有div中class=div1的
div[class*=d]属性class的值中包含d的
div[id^=i]属性id值以i开始的(以…开头)
div[id$=i]属性id的值以i结束的(以…结束)
2.伪类选择器(E父元素)
E:first-child 选择第一个子元素
E:last-chid 选择最后一个子元素
E:nth-child()
例:ul li :nth-child(2n){}2n偶数,2n+1奇数,2n-1奇数
ul li :nth-chid(odd){}
odd奇数,even奇数
ul li:nth-chid(3n)3的倍数
ul li:nth-chid(-1n+5)前五个
ul li:nth-last-chid(-1n+5)后五个
E:empty选中没有任何子节点的子元素
3.target 结合锚点进行使用，处于当前锚点的元素会被选中；
4.selection选中时的区域
5.before(前)和after(后)集合content一起使用
6.first-line第一行
7.first-letter{}首字下沉