Html5和Css3简介

一.HTML5
HTML：超文本标记语言（超文本:视频.音频.超链接.图片…;标记语言:标签组合）
HTML5的简单介绍:
html5 是html4.0 升级版,更重要的是它制定了Web 应用开发的一系列标准,成为第一个将Web 做为应用开发平台的 HTML 语言.html5 是html4.0 升级版,HTML5 并不仅仅只是做为HTML 标记语言的一个最新版本,更重要的是它制定了Web 应用开发的一系列标准,成为第一个将Web 做为应用开发平台的 HTML 语言.
HTML5 定义了一系列新元素，如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地 理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合 Canvas 我们可开发网页版游戏.
广义概念：HTML5代表浏览器端技术的一个发展阶段.在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括：HTML5,CSS3, Javascript,API 在内的一套技术组合.
Html5 范称 HTML5 + CSS3 + JS
语法规范 :
HTML5 在语法规范上也做了比较大的调整,去除了许多冗余的内容,书 写规则更加简洁,清晰.
特点 i.更简洁 ii.更宽松
单标签不用写关闭符号双标签省略结束标签 html、head、body、colgroup、tbody 可以完全省略.
html5与html的区别:
首先在文档类型的书写上不同,html5中新增了一些语义化的标签,以及 表单属性和表单的类型,还包含新的伪类.
二.语义化标签
1.header 表示页眉(头部)
2.articl>文章
3.aside侧边栏
4.footer尾部
5.nav导航
6.section表示区块
7.figure表示媒介内容分组
8.mark表示标记
9.progress进度条(value,max属性)
10.time表示日期
三.视窗(viewport)单位
1.vh,代表视窗(Viewport)的宽度为1%，
2.vh,窗口高度的百分比 。
3.vmin的值是当前vw和vh中较小的值
4.vmax大尺寸的百分比
四.表单(form)
//action="“提交的地址// //method=’’’‘请求方式提交方式//
1.fieldset
legend legend
fieldset
2.placeholder:表示内容的阴影提示/占位符
3. name=“username”/>(驼峰命名法)
密码:(name=“password’’)
手机号:(name=“tel”)
4.表单类型
email 输入email 格式 ; number 只能输入数字 ; search 搜索框 ;tel 手机号码 ;url 只能输入url 格式 ;
range 范围 滑动条 ;color 拾色器 ;time 时间 ;date 日期 不是绝对的 ;datetime 时间日期 ;month 月份 ;week 星期
5.智能列表/数据列表
datalist数据列表与input 配合使用:
6.keygen加密
生成两个键i私钥(private key)ii公钥(public key)
加密类型算法方式:dsa;rsa;等
7.表单属性
meter度量器(不建议用作进度条)
autofocus获取焦点(设置焦点事件)
required 必填项
novalidate 关闭验证
placeholder 占位符
8.多选下拉框
select multiple(multiple 文件上传多选或多个邮箱地址 )
option> select
11. 表单事件
pattern 正则表达式
js:=”/^\d{}$/”
表单:="\d{}"
{}表示位数如{2,6}表示2~6位
oninput用户输入内容时触发可用于移动端输入字数统计
oninvalid验证不通过时触发
alert消息框
五.插入视频音频
.视频video
i. video src="" controls=“controls”>(controls设置视频的播放控件)
ii. video controls=“controls’’ poster=“img…’’>
source src=”” > 2.poster=“img…“添加视频初始加载时间的图片
3.loop=“loop"循环播放
4.autoplay自动加载播放
5.音频audio(WAV ogg mp4)
audio既可以播放mp4的文件,也可以播放mp3的文件
i. audio src=”” controls=“controls”>
ii. audio controls=“controls’’>
source src=”” > /audio>
6.embed src=’’’’> 既可以插入音频也可以插入视频,不能添加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{}首字下沉