【整理】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和css3新增的常用知识点

H5新增的离线应用: (1)当要开发基于h5的离线应用时,先确定服务器是否支持对manifest文件的解析。 (2)若不支持,需要用户手动设置,在服务器mime.types文件中添加; (3)为...
  • lululul123
  • lululul123
  • 2017年03月31日 20:45
  • 364

CSS3主要知识点复习总结+HTML5新增标签

分享2014-4-1 HTML5上课笔记 2、CSS3属性(内核前缀) Mozilla 内核   css前缀-moz;  WebKit  内核   css前缀-webkit ;(...
  • huangyibin628
  • huangyibin628
  • 2014年05月17日 22:00
  • 2289

HTML5知识点整理1

一、新特点 1. 简单的编码类型 1) 不允许写的结束符的标签:area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param...
  • dlt1993814
  • dlt1993814
  • 2016年05月22日 02:08
  • 159

UML知识点整理

UML——1 1.       2-8原则用例 2.        瀑布模型质量文档、管理文档、设计文档(类比为水) 3.        模型:UML 4.       RUP的软件开发周期:...
  • Wentasy
  • Wentasy
  • 2013年01月10日 16:28
  • 2776

HTML5知识点总结

HTML5知识点学习总结
  • liujie19901217
  • liujie19901217
  • 2016年06月11日 15:05
  • 7279

python一些基本知识点之列表(二)

Python的列表对象是这个语言提供的最通用的序列。 列表是一个任意类型d
  • peng825223208
  • peng825223208
  • 2014年06月04日 09:18
  • 775

ElasticSearch知识点整理

1:es介绍          Elasticsearch是一个基于Lucene的实时的分布式搜索和分析引擎。设计用于云计算中,          能够达到实时搜索,稳定,可靠,快速,安装使用方便...
  • tanga842428
  • tanga842428
  • 2016年09月04日 21:22
  • 352

MySQL数据库知识整理归纳

数据库创建需要考虑的内容
  • cz28274815
  • cz28274815
  • 2014年09月04日 22:21
  • 704

数据结构知识点总结整理

0、常考基础必知必会 A. 排序:排序有几种,各种排序的比较,哪些排序是稳定的,快排的算法; B. 查找:哈希查找、二叉树查找、折半查找的对比,哈希映射和哈希表的区别? C. 链表和数组的区别,...
  • b06340130
  • b06340130
  • 2013年04月23日 09:36
  • 3165

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

新增的结构标签 section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中……;HTML4中 ……...
  • kongjiea
  • kongjiea
  • 2014年08月16日 15:33
  • 12667
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【整理】html5知识点1
举报原因:
原因补充:

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