html学习笔记12-HTML5、浏览器兼容性问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了html学习笔记12-HTML5、浏览器兼容性问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

https://www.runoob.com/html/html5-intro.html

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

<!DOCTYPE html> //声明必须位于 HTML5 文档中的第一行
<html>
<head>
<meta charset="utf-8"> //防止乱码
<title>文档标题</title>
</head>
 <body>
文档内容......
</body>
 </html>

HTML5 的改进
新元素
新属性
完全支持 CSS3，https://www.runoob.com/css3/css3-tutorial.html
Video 和 Audio    视频(video)与音频 (audio) 。
2D/3D 制图，使用canvas、内联 SVG、CSS3 2D 转换、CSS3 3D 转换。
本地存储
本地 SQL 数据
Web 应用
缓存引用
Javascript 工作者
XHTMLHttpRequest 2

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  你的浏览器不支持 video 标签。
</video>

HTML 参考手册- (HTML5 标准) https://www.runoob.com/tags/html-reference.html

浏览器兼容性问题 https://www.runoob.com/html/html5-browsers.html

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

HTML5支持添加新的元素。旧版本不支持，用以下代码兼容文章来源地址https://www.toymoban.com/news/detail-506981.html

<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!-- [if lt IE 9] >
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <! [endif] -- >
</head>