HTML5简介

最新推荐文章于 2020-08-10 11:22:42 发布

刘小妞

最新推荐文章于 2020-08-10 11:22:42 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML(5) 文章标签： html5

本文链接：https://blog.youkuaiyun.com/liuwengai/article/details/51660766

HTML(5) 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了HTML5的主要特性和改进之处，包括新增的元素如canvas、video和audio等，以及如何在不同浏览器中确保兼容性。同时探讨了HTML5在多媒体、应用开发、图形绘制等方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML5的设计目的是为了移动设备上支持多媒体，是下一代HTML标准。
HTML5中一些有趣的新特性：
用于绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素，比如article,footer,header,nav,section
新的表单控件：比如：calendar,date,time,email,url,search
2.HTML5

<DOCTYPE html><!--html5声明-->
<html>
<head>
<meta charset="utf-8">
<title>新的网页</title>
</head>
<body>
文档的内容
</body>
</html>

3.HTML5的改进
完全支持css3，video和audio，2D/3D制图，本地存储，本地SQL语句，web应用
html5多媒体
支持视频video和音频audio
html5应用
本地数据存储，访问本地文件，本地SQL数据，缓存引用，JavaScript工作者，XHTMLHttpRequest2
html5图形
使用canvas元素，使用内联SVG,使用css3 2D/3D
html5使用css3
新选择器，新属性，动画，2D/3D转换，圆角，阴影效果，可下载的字体
4.为了使旧的浏览器支持html5元素，可以设置css的display属性值为block

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

IE浏览器不支持html5解决办法

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
5.html5新元素

canvas:定义图形
//新多媒体元素
audio：定义音频内容
video：定义视频内容
source：定义多媒体资源<video>和<audio>
embed:定义嵌入的内容，比如插件
track：为视频和音频元素之类的媒介规定外部文本轨道
//新表单元素
datalist:定义选项列表，与input配合使用
keygen：用于表单的秘钥对生成器字段
output：定义不同的类型输出，比如脚本的输出
//新的语义和结构元素
article:定义页面独立的内容区域
aside:定义页面的侧边栏内容
bdi：允许设置一段文本，脱离其父元素的文本方向设置
command：定义命令按钮，比如单选按钮，复选框或按钮
details：用于描述文档或文档某个部分的细节
dialog：定义对话框，比如提示框
summary：标签包含detail元素的标题
figure：独立内容的流（图像，图标，照片，代码）
figcaption：定义figure元素的标题
footer：定义section或document的页脚
header：定义文档的头部区域
mark：定义带有记号的文本
meter：定义度量衡，禁用与已知最大和最小值的度量
nav：定义导航链接部分
progress：定义任何类型的任务进度条
ruby：定义注释（中文注音或字符）
rt：定义字符的解释或发音
rp：定义不支持ruby元素的浏览器所显示的内容
section：定义文档中的节
time：定义日期或时间
wbr：规定在文本中的何处适合添加换行符