首页 前端知识 html学习笔记12-HTML5、浏览器兼容性问题

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

2024-05-27 10:05:38 前端知识 前端哥 561 994 我要收藏

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支持添加新的元素。旧版本不支持,用以下代码兼容

<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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9720.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!