关于HTML5你必须知道的28个新特性,新技巧以及新技
1. 新的Doctype
尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素
用<figure>和<figcaption>来语义化地表示带标题的图片
<figure>
<img src=”path/to/p_w_picpath” alt=”About p_w_picpath” />
<figcaption>
<p>This is an p_w_picpath of something interesting. </p>
</figcaption>
</figure>
3. 重新定义的<small>
<small>已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明
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方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup
一般在header里面用来将一组标题组合在一起，如
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
14. Required属性
required属性定义了一个input是否是必须的，你可以像下面这样声明
<input type=”text” name=”someInput” required>
或者
<input type=”text” name=”someInput” required=”required”>
15. Autofocus属性
正如它的词义，就是聚焦到输入框里面
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
16. Audio支持
HTML5提供了<audio>标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” /><!–FF–>
<source src=”file.mp3″ /><!–Webkit–>
<a href=”file.mp3″>Download this file.</a>
</audio>
17. Video支持
和Audio很像，<video>标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏 览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供：
<video controls preload>
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” />
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” />
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
</video>
18. 预加载视频
preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频
<video preload>
19. 显示视频控制
<video preload controls>
20. 正则表达式
由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
<form action=”" method=”post”>
<label for=”username”>Create a Username: </label>
<input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required>
<button type=”submit”>Go </button>
</form>
21. 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：
<script>
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
</script>
22. Mark元素
把<mark>元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>
23. 什么时候用<div>
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属性
<div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>
CSS中使用：
<style>
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>
27. Output元素
<output>元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”">
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}
转载于:https://blog.51cto.com/11996267/1847347
关于HTML5你必须知道的28个新特性,新技巧以及新技相关推荐
- html5 心,HTML5你必须知道的28个新特性
1. 新的Doctype 尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用 和 来语义化地表示带标题的图片 1 2 3 4 5 6 Thisisanimageofsom ...
- 【建立个人品牌】自媒体人必须知道的28个新媒体平台
2017自媒体排行:微信公号 企鹅媒体开放平台 今日头条 一点咨询 网易号 大鱼号 UC订阅号 搜狐自媒体 新浪看点 今日头条号 百度百家 360自媒体平台 自媒体人必须知道的28个新媒体平台 互联网 ...
- 你必须知道的28个HTML5特征、窍门和技术
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1058 原文地址:h ...
- 智慧城市发展下一程：2016年，你必须知道的28个关键场景
城市趋势研究将城市和区域作为研究对象,它的思考对于推进我国新型城镇化和城市科学发展具有战略意义,是现阶段指导我国新型城镇化发展的核心理论与方法体系.它的全面推进将有助于从整体角度认知城市发展的本质.城 ...
- 你必须知道的10个提高Canvas性能技巧
https://blog.csdn.net/qq_32609883/article/details/49883407
- css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
- html5技术有哪些新特性,28个你必须知道的HTML5的新特性,技巧以及技术
崭新新的页面布局 传统的: HTML5: 1. 新的Doctype 尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用 和 来语义化地表示带标题的图片 This is a ...
- 看《你必须知道的.NET》有感--工厂模式的另类解读
最近在看博客园里的推荐的<你必须知道的.NET>,对里面有一段关于银行的客户和职员的安排的程序有点兴趣.这里我把他改了下,促进理解: Code 1using System; 2us ...
- 程序员必须知道的HTML常用代码有哪些？
HTML即超文本标记语言,是目前应用最为广泛的语言之一,是组成一个网页的主要语言.在现今这个HTML5华丽丽地占领了整个互联网的时候,如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的,程序猿们需要 ...
最新文章
- 使用ffmpeg从mp4文件中提取视频流到h264文件中
- WinForm 数据库无限填充树目录 treeView
- php计算时间顺延3分,PHP关于strtotime函数的大坑
- Start application automatically during controller boot-up
- 美育在计算机教育中应用,在现代教育技术中绽放数学美育之花
- 【转】ABP源码分析四十：ZERO的Application和Tenant
- Java基础（二）：基本数据类型和变量类型
- android显示网络gif图片
- 覆盖索引与联合索引_MySQL：你知道什么是覆盖索引吗？
- 定时任务schedule(spring boot )
- CAM350 12.1免费下载
- 【笨木头Cocos2dx 038】战争迷雾效果 第01章_要探索，不要地图全开！
- Python -- 堆数据结构 heapq - I love this game! - 博客频道 - CSDN.NET
- yxy小菊蒻的201130总结
- 网络基本功（二十四）：Wireshark抓包实例分析TCP重传
- MySQL数据库（九） 集群 Cluster 和性能优化
- 判断两个IP地址（ipv4）是否在同一个网段
- 芯片低功耗设计的两种常用EDA流程
- 爬虫入门——爬虫可以采集哪些格式的数据？
- Vue实现复制粘贴功能
热门文章
- css左边是图片右边是文字方法
- 无线蓝牙骨传导哪款好，盘点几款性能高的骨传导耳机
- 如何使用 Python 实现彩票自由（双色球）
- 测验6: 组合数据类型 (第6周) 程序题
- Flutter 编译报错 Error: The method DioHttpHeaders.add has fewer named arguments than those Context
- 51单片机有几个通用io口_51单片机IO端口基础知识及应用
- Html5标签（列表、行级、文本格式、字符实体、语义化）
- 腾讯GAD的游戏开发入门课程
- 23.2.28 Staffing System
- linux slab机制,详解slab机制