原 HTML5及CSS3的简单介绍（语义化标签、表单、多媒体、属性/伪类选择器）

一.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 在内的一套技术组合.
二.语义化标签
1.

表示页眉(头部)
2.

文章
3.

侧边栏
4.

尾部
5.

导航
6.

表示区块
7.

表示媒介内容分组
8.表示标记
9.进度条(value,max属性)
10.表示日期
三.表单元素(form)
//action=""提交的地址// //method=’’’‘请求方式提交方式//
1.

2.placeholder:表示内容的阴影提示/占位符
3. 姓名:(驼峰命名法)
密码:(name="password’’)
手机号:(name=“tel”)
4.表单类型
email 输入email 格式 ; number 只能输入数字 ; search 搜索框 ;tel 手机号码 ;url 只能输入url 格式 ;
range 范围 滑动条 ;color 拾色器 ;time 时间 ;date 日期 不是绝对的 ;datetime 时间日期 ;month 月份 ;week 星期
5.智能列表/数据列表

6.keygen加密
		生成两个键i私钥(private key)ii公钥(public key)
		加密类型算法方式:dsa;rsa;等
7.表单属性
		meter度量器(不建议用作进度条)
		autofocus获取焦点(设置焦点事件)
		required 必填项
		novalidate 关闭验证
		placeholder 占位符
10.多选下拉框
		(multiple 文件上传多选或多个邮箱地址 )
			
		
11. 表单事件
		pattern 正则表达式
		js:="/^\d{}$/"
		表单:="\d{}"
		{}表示位数如{2,6}表示2~6位
		oninput用户输入内容时触发可用于移动端输入字数统计
		oninvalid验证不通过时触发
		alert消息框

四.视窗(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。
五.多媒体
1.视频video
i.
ii.
2.poster=“img…“添加视频初始加载时间的图片
3.loop=“loop"循环播放
4.autoplay自动加载播放
5.音频audio(WAV ogg mp4)
audio既可以播放mp4的文件,也可以播放mp3的文件
i.
ii.
6.
既可以插入音频也可以插入视频,不能添加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{}首字下沉