【整理】html5知识点1

原创 2016年05月31日 12:54:59
1、关于html5
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search


2、HTML5 <!DOCTYPE>
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
<!DOCTYPE html>


3、最小的HTML5文档
下面是一个简单的HTML5文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。


4、HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用


5、HTML5 多媒体
使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
HTML5 <video>
HTML5 <audio>


6、HTML5 应用
使用 HTML5 你可以简单地开发应用
本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2


7、HTML5 图形
使用 HTML5 你可以简单的绘制图形:
使用 <canvas> 元素
使用内联 SVG
使用 CSS3 2D/3D


8、HTML5 使用 CSS3
新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体


9、语义元素
HTML5 添加了很多语义元素如下所示:
标签 描述
<article> 定义页面的侧边栏内容
<aside> 定义页面内容之外的内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义运行中的进度(进程)。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。


10、HTML5 表单
新表单元素, 新属性,新输入类型,自动验证。


11、已移除元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>


12、HTML5 浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包:
<!--[if lt IE9]> 
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
载入后,初始化新标签的CSS:
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}


完美的 Shiv 解决方案
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>


<body>


<h1>我的第一篇文章</h1>


<article>
菜鸟教程 —— 学的不仅是技术,更是梦想!!!
</article>


</body>
</html>


13、HTML5 新元素
自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。


14、<canvas> 新元素
标签 描述
<canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API


15、新多媒体元素
标签 描述
<audio> 定义音频内容
<video> 定义视频(video 或者 movie)
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容,比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。


16、新表单元素
标签 描述
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出,比如脚本的输出。


17、
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

html5知识点整理总结

1.html5新元素: 新的输入类型:email;url;number;range;Date pickers (date, month, week, time, datetime, datetime...
  • ymjring
  • ymjring
  • 2012年02月22日 10:55
  • 941

html5桌面通知知识点分享

  • 2017年10月13日 10:33
  • 18KB
  • 下载

HTML5地理定位,百度地图API,知识点熟悉

判断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理...

【基础html5 基础知识点】(全)

新增的结构标签 section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中……;HTML4中 ……...
  • kongjiea
  • kongjiea
  • 2014年08月16日 15:33
  • 12170

html5移动端知识点总结(一)

第1章 使用rem作为单位 html{font-size:10px}11 1.1使用媒体查询,不同分辨率设置不同的html的font-size @(min-width:320px){ h...

Polyfills作为表单验证,html5里面关于表单的知识点!

如前所述在之前的章节,并不是所有的浏览器和平台支持新的令人兴奋的特性的HTML5的表单验证。因此可以派上用场polyfills他们改进用户体验的网站。 h5validate由Eric引领 ...

Qt+HTML5知识点总结

收效甚微飞飞落异端邪飞落飞落飞落民间艺术民间艺术习

html5的细节知识点

目前支持html5的主流浏览器有谷歌、欧朋、火狐。 我用的编辑软件是ws, 快捷键ctrl+d复制一行 br*3 tab键可以补齐 ctrl+/单行注释 ctrl+F查找 ctrl+R替换...
  • wkakasa
  • wkakasa
  • 2016年03月23日 20:14
  • 170

什么是OGG-----HTML5知识点

什么是Ogg Vorbis   Ogg Vorbis 是一种新的音频压缩格式,类似于MP3等现有的音乐格式。但有一点不同的是,它是完全免费、开放和没有专利限制的。Vorbis 是这种音频压缩机制...
  • zithan
  • zithan
  • 2011年08月15日 11:10
  • 2636
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【整理】html5知识点1
举报原因:
原因补充:

(最多只允许输入30个字)