HTML5
1.用于
酷炫网站制。游戏开发(小,不卡,轻便,代码写的速度快)。移动开发。应用开发。地理定位
2.优点
① 跨平台
PC。windows。IOS。Android都可用。
② 兼容性
③ 世界知名浏览器厂商的支持(微软、Google、苹果、opera、Mozilla)
(iOS不支持Java,Java有平台的限制,只需一个浏览器去解析就可用)
3.什么是html5
HTML+CSS+JavaScript+HTML5+CSS3+API
h5的meta已简化成一行<metacharset=UTF-8>
不同浏览器的支持情况,坚持支不支持的 http://caniuse.com
第1==HTML5新增的元素/属性
一、新增的结构元素/标签(语义化)
1. header
页面或页面中某一区块的页眉,通常是一些引导或导航信息
2. nav
页面导航的链接组
3. section
页面中的一个内容区块,通常由内容及其标题组成
4. article
代表一个独立的完整的相关内容块,可独立于页面其他内容使用
5. aside
非正文内容
与页面主要内容是分开的,被删除不会影响到网页的内容
6. footer
页面或页面中某一区块的脚注
(logo一般用h1)
二、新增网页元素/标签
1. video
定义视频,如影片片段或其它视频流
2. audio
定义音频,如音乐或其它音频流
3. canvas
定义图形
4. datalist
定义可选数据的列表
5. time
标签定义时间或日期
eg:<time>10:45</time><!--搜索引擎--><br/>
6. mark
在视觉上向用户呈现那些需要突出的文字
(自动加背景颜色)
eg:<mark>I am markmark</mark>
7. progress
运行中的进度(进程)
eg:<progress></progress><br/>
<progress value="50" max="100"></progress>
三、h5废除的元素
能用css替代的元素,big,center,font,s,u,strike。不再使用frame框架?
只有部分浏览器支持的元素,applet,blink,bgsound(背景音乐),marquee(左右滚动的)等。其他…………
四、新增全局属性
(全网页可用的)
1. contentEditable
规定是否允许用户编辑内容
eg: <p class="green" contentEditable="true">这是一个可编辑的段落</p>
2. designMode
整个页面是否可编辑
eg: document.designMode="on";
(on可被编辑的,off不可被编辑)
3. hidden
规定对元素进行隐藏
eg:<p hidden="hidden">隐藏了的</p>
4. spellcheck
是否对元素进行拼写或语法检查
(true检查,false不检查)
eg:<p contentEditable="true" spellcheck="true">进行语法检查</p>
5. tabindex
规定元素的tab键迭制次序(按Tab键获取光标的顺序)
(基本元素可被编辑的,如index里的text,password等,最先获取光标)
eg:<p tabindex="3">第三</p><p tabindex="1">第一</p><p tabindex="2">第二</p>
五、废除的属性
(改用css样式)
table(align,bgcolor,border,cellpadding,width)html(version) a/link(charset) lor(clear)、img(align)
第2==CSS3高级选择器
1. first-of-type
p:first-of-type,选择属性其父元素的首个<p>元素的每个<p>元素
第一个这种类型的孩子,所有层级里的第一个p
2. last-of-type
p:last-of-type,最后<p>元素的每个<p>元素
3. first-child
p:first-child,第一个子元素的每个<p>元素
第一个且符合要求p,要是第一个儿子不是p就不符合
4. last-child
p:last-child,最后一个子元素的每个<p>元素
5. nth-child(n) (下标从1开始 )
p:nth-child(n),选择属性其父元素的第n个子元素的每个<p>元素
6. :before
p:before,在每个<p>元素之前插入内容(content:)
7. :after
p:after,在每个<p>元素之后插入内容
eg:ul li:nth-child(odd){ background-color:lawngreen;} ul li:nth-child(even){ background-color:orangered;}
nth-child(1)=first-child;
clear:after{clear:both}???????
第3==HTML5表单
target{ 掌控新增表单元素、属性
用html5进行表单验证}
一、新增input类型
(type=“”)
1. email
电子邮件地址文本框,提交表单时会自动验证email值
2. url
网页的url,自动验证url值
3. number
只包含数值的字段,能够设定对所接受的数字的限定(即number的属性)
最大值max
最小值min
数字间隔step
默认值value
以上可填入的只有数字2,7,12,17
4. range
滑动条,特定值范围内的数值选择器
eg:<input type="range" value="3" step="2" max="12"/>
5. search
搜索框(用于搜索引擎)
6. Date pickers(日期选择器)
拥有多个可供选取日期的新输入类型
① date:可选择年/月/日
② month:选择年/月
③ week:选择年/第几周
④ time:选择时间,小时和分钟,上午/下午 12:00
⑤ datetime:选择时间,年/月/日,UTC时间
(UTC,世界统一时间,协调世界时,universal time coordinated)
⑥ datetime-local:选择时间,年/月/日/时间,本地时间
二、新增的input属性
1. autofocus
页面加载时自动获得焦点
优先,不可能同时获得光标,从上到下
eg:<input