html5新特性（一）
今天就和一起学习前端的朋友探讨一下html5的新特性。
1. 新的文档类型<!DOCTYPE html>
2. 语义Header和Footer
在以前需要这么声明：
<div id="header"></div>
<div id="footer"></div>
现在只需要这么声明：
<header></header>
<footer></footer>
注：html5语义化作用？
1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3.audio标签
<audio controls="controls">
<source src="img/1.mp3"/>
</audio>
<audio autoplay="autoplay" src="img/2.mp3">
</audio>
两种不同的写法
Vedio
<video controls="controls" preload>
<source src="../path.ogv" type="video/ogg; codecs='vorbis,theora'"/>
<source src="../path.mp4" type="video/mp4; codecs='avc1.42E01E,mp4a.40.2'"/>
</video>
支持两种不同的格式
4.正则表达式
<form method="post">
<label for="username">输入一个你喜欢的用户名：</label>
<input type="text"
name="username"
id="username"
placeholder="6-10个英文"
pattern="[A-Z|a-z]{6,10}"
autofocus
required>
<button type="submit">提交</button>
</form>
在表单中文本框类型里添加pattern属性，后面就是跟的正则表达式，利用正则表达式可以完成许多验证，不熟悉正则表达式写法的朋友可以看一下我的关于正则表达式的文章。
5. 必要属性：required
<form method="post">
<label for="someInput">姓名: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">提交</button>
</form>
当文本框当中没有输入任何值得时候点击提交，文本框会改变颜色提示必须输入值。
6. 自动获得焦点autofocus
<input type="text" name="input" autofocus>
当网页加载之后，自动定位到文本框的输入
7. 脚本和链接无需指定type
比如<link rel="stylesheet" href="../css" />
<script src="../script.js"></script>
8. 图像元素：将图片与注释结合
figure>
<img src="img/xiaotubiao2.jpg" alt="image" />
<figcaption>
<p>这是一张小图标</p>
</figcaption>
</figure>
html5新特性（一）相关推荐
- 百度开发者大会-《用HTML5新特性开发移动App》PPT分享
今天百度开发者大会,移动互联网分论坛,我的主题演讲<用HTML5新特性开发移动App>PPT分享如下. 完整PPT可在Slideshare观看,或者在百度开放云平台上下载到.
- html5新特性：利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题 参考文章: (1)html5新特性:利用history的pushState等方法来解决使用aj ...
- HTML中三维特性,前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- 【阿里云大学课程】前端必知——HTML5新特性完整视频教程（音频、视频、画布、web存储、动画……）...
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...
- html5 logo svg,HTML5新特性之用SVG绘制微信logo
html5新特新html5 中的一些有趣的新特性:1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比如 ...
- html5储存类型特点,避免踩雷！你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
- html做微信logo,HTML5新特性之用SVG绘制微信logo
原标题:HTML5新特性之用SVG绘制微信logo 这篇文章主要介绍了HTML5新特性之用SVG绘制的微信logo的相关资料,需要的朋友可以参考下. HTML5新特新 HTML5中的一些有趣的新特性: ...
- 利用HTML5新特性实现拖拽交换表格单元格元素
利用HTML5新特性实现拖拽交换表格单元格元素 HTML5新特性:拖放 拖放 拖放(Drag 和 Drop)是很常见的特性.它指的是您抓取某物并拖入不同的位置. 拖放是 HTML5 标准的组成部分:任 ...
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- 【HTML5新特性】
HTML5新特性 一.语义标签 二.增强型表单 1. input特性 2. 五个表单元素 3. 表单属性 三.音频和视频 四.canvas 五.SVG 六.地理位置 七.拖放API 八.web Wor ...
最新文章
- RayTracking 光线跟踪算法
- （SpringMVC）Controller返回JSON数据
- Swift傻傻分不清楚系列(十一)类和结构体
- 重构，体现一个工程师的基本素养和底蕴（细节篇）
- 同步关键词synchronized
- Google首席决策师告诉你，AI和数据科学团队需要哪10种角色
- ubuntu 自动加载ko_Ubuntu启动后自动加载ext4分区
- linux部署多个jar 会宕机_我常用的自动化部署技巧，贼好用，推荐给大家！
- 工具使用教程(三)【Anaconda虚拟环境下使用Juypter Notebook】
- 迅雷地址转换 php,PHP迅雷/快车/QQ旋风下载地址与普通URL链接互转
- 为保证云应用及虚拟串口功能正常使用，请务必下载安装Windows系统环境补丁
- VS2010旗舰版安装步骤
- 六、HTML高级标签
- Dropping Balls 小球下落
- Podfile语法参考（译）
- 简述使用计算机对会计工作的影响,会计电算化对会计工作的影响有哪些
- 千元机自拍新体验，vivo Z3是你会拍照的“男朋友”
- 流浪地球2真实成本多少？怎么参与？找谁参与？安全可靠吗？
- 入手佳能24-70mm f/2.8L
- [Ant自动打包]ant执行命令的详细参数和Ant自带的系统属性