html5 心,HTML5你必须知道的28个新特性
1. 新的Doctype
尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素
用
1
2
3
4
5
6
Thisisanimageofsomethinginteresting.
3. 重新定义的
已经被重新定义了,现在被用来表示小的排版,如网站底部的版权声明
4. 去掉link和script标签里面的type属性
5. 加/不加 括号
HTML5没有严格的要求属性必须加引号,闭合不闭合,但是建议加上引号和闭合标签
6. 让你的内容可编辑,只需要加一个contenteditable属性
7. Email Inputs
如果我们给Input的type设置为email,浏览器就会验证这个输入是否是email类型,当然不能只依赖前端的校验,后端也得有相应的校验
8. Placeholders
这个input属性的意义就是不必通过javascript来做placeholder的效果了
9. Local Storage
使用Local Storage可以永久存储大的数据片段在客户端(除非主动删除),目前大部分浏览器已经支持,在使用之前可以检测一下window.localStorage是否存在
10. 语义化的header和footer
11. 更多的HTML5表单特性
12. IE和HTML5
默认的,HTML5新元素被以inline的方式渲染,不过可以通过下面这种方式让
其以block方式渲染
1
2
3
header,footer,article,section,nav,menu,hgroup{
display:block;
}
不幸的是IE会忽略这些样式,可以像下面这样fix:
1
2
3
4
5
6
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup
一般在header里面用来将一组标题组合在一起,如
1
2
3
4
5
6
RecallFanPage
Onlyforpeoplewhowantthememoryofalifetime.
14. Required属性
required属性定义了一个input是否是必须的,你可以像下面这样声明
1
或者
1
15. Autofocus属性
正如它的词义,就是聚焦到输入框里面
1
16. Audio支持
HTML5提供了标签,你不需要再按照第三方插件来渲染音频,大多数现代浏览器提供了对于HTML5 Audio的支持,不过目前仍旧需要提供一些兼容处理,如
1
2
3
4
5
Downloadthisfile.
17. Video支持
和Audio很像,标签提供了对于video的支持,由于HTML5文档并没有给video指定一个特定的编码,所以浏 览器去决定要支持哪些编码,导致了很多不一致。Safari和IE支持H.264编码的格式,Firefox和Opera支持Theora和Vorbis 编码的格式,当使用HTML5 video的时候,你必须都提供:
1
2
3
4
5
Yourbrowserisold.Downloadthisvideoinstead.
18. 预加载视频
preload属性就像它的字面意思那么简单,你需要决定是否需要在页面加载的时候去预加载视频
1
19. 显示视频控制
1
20. 正则表达式
由于pattern属性,我们可以在你的markup里面直接使用正则表达式了
1
2
3
4
5
CreateaUsername:
10″pattern=”[A-Za-z]{4,10}”autofocusrequired>
Go
21. 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如:
1
2
3
4
5
if(!’pattern’indocument.createElement(’input’)){
// do client/server side validation
}
22. Mark元素
把元素看做是高亮的作用,当我选择一段文字的时候,javascript对于HTML的markup效果应该是这样的:
1
2
SearchResults
Theywereinterrupted,justafterQuatosaid,”OpenyourMind”.
23. 什么时候用
HTML5已经引入了这么多元素,那么div我们还要用吗?div你可以在没有更好的元素的时候去用。
24. 想立即使用HTML5?
不要等2022了,现在就可以使用了,just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性
1
BlaBla
CSS中使用:
1
2
3
4
5
6
7
8
9
h1:hover:after{
content:attr(data-hover-response);
color:black;
position:absolute;
left:0;
}
Don’tTouchMe
27. Output元素
元素用来显示计算结果,也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块,它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
1
2
3
4
input[type=range]:before{content:attr(min);padding-right:5px;
}
input[type=range]:after{content:attr(max);padding-left:5px;}
html5 心,HTML5你必须知道的28个新特性相关推荐
- 关于HTML5你必须知道的28个新特性,新技巧以及新技
1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figc ...
- 【建立个人品牌】自媒体人必须知道的28个新媒体平台
2017自媒体排行:微信公号 企鹅媒体开放平台 今日头条 一点咨询 网易号 大鱼号 UC订阅号 搜狐自媒体 新浪看点 今日头条号 百度百家 360自媒体平台 自媒体人必须知道的28个新媒体平台 互联网 ...
- 你必须知道的28个HTML5特征、窍门和技术
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1058 原文地址:h ...
- 智慧城市发展下一程:2016年,你必须知道的28个关键场景
城市趋势研究将城市和区域作为研究对象,它的思考对于推进我国新型城镇化和城市科学发展具有战略意义,是现阶段指导我国新型城镇化发展的核心理论与方法体系.它的全面推进将有助于从整体角度认知城市发展的本质.城 ...
- html5技术有哪些新特性,28个你必须知道的HTML5的新特性,技巧以及技术
崭新新的页面布局 传统的: HTML5: 1. 新的Doctype 尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用 和 来语义化地表示带标题的图片 This is a ...
- 开发者必须知道的HTML5十五大新特性
HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术.然而,你能准确地说出HTML5带来了哪些新特性吗? 本文 总结 了 HTML5带来的15项你必须知道的 新特性 . 一起来看下: 1.新的文 ...
- 程序员必须知道的HTML常用代码有哪些?
HTML即超文本标记语言,是目前应用最为广泛的语言之一,是组成一个网页的主要语言.在现今这个HTML5华丽丽地占领了整个互联网的时候,如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的,程序猿们需要 ...
- 中国人必须知道的76个常识
1.[十二生肖] 子鼠.丑牛.寅虎.卯兔.辰龙.巳蛇.午马.未羊.申猴.酉鸡.戌狗.亥猪 2.[十大名茶] 西湖龙井(浙江杭 州西湖区).碧螺春(江苏吴县太湖的洞庭山碧螺峰).信阳毛尖(河南信阳车云山 ...
- 一本你必须知道的.net
<你必须知道的.NET> 作者简介:王涛 微软C# MVP,高级软件工程师,机械工程硕士,主要研究方向为.NET底层架构和企业级系统应 用.现就职于某软件公司负责架构设计.软件开发和项目管 ...
最新文章
- BZOJ4866 Ynoi2017由乃的商场之旅(莫队)
- 交换机的VTP技术应用实训
- 深度学习未来十大趋势
- keil优化等级设置
- C++中如何读取一个数的位数_求1000以内的水仙花数
- 微服务精华问答:什么是微服务架构中的DRY?| 技术头条
- selenium webdriver学习(八)------------如何操作select下拉框(转)
- init.d,rc.d详解 Linux运行时详解
- SpringMVC框架使用注解执行定时任务(转)
- opencv 识别长方形_利用opencv识别并提取图片中的矩形
- java gbk转机内码_GBK/GB2312编码问题分析以及java获取汉字国标码
- 网页右侧在线客服html,漂浮在网页右侧的QQ在线客服代码? 1、怎么样修改以下代码,让其变为最靠右边2、如何插入到网页当中...
- 挪威访学1:My first flight
- 深入分析Voldemort的PerformParallelRequests
- 一步步带你观察vector.push_back()具体拷贝机制,超级详细哦
- matlab ploty,matlab绘制函数 如何利用matlab的ploty
- C++面试-interview
- 403错误怎么解决:盘点常见的IIS 403错误网页
- visual studio西红柿插件过期解决办法——不断恢复试用
- groovy脚本执行与优化
热门文章
- scala的函数(day02)
- python调用simulink_[Python-MATLAB] 在Python中调用MATLAB的API
- go regexp匹配字符串_多模式字符串匹配算法ac自动机(用go语言实现)
- python3.6.5下载安装教程_Ubuntu16.04安装python3.6.5步骤详解
- c语言学习进阶-C语言带命令行参数的文件数据批量计算
- java中entry_Java FastMap.Entry方法代码示例
- .NET、TensorFlow和Kaggle的风车
- Win 10 更新,Linux 内核的 WSL 2 开始上线
- 服务中没有telnet_win7 服务中没有 prints pooler
- stream 多个字段分组_Python Pandas对Excel数据的分组聚合和数据透视