自学WEB前端-1（HTML5新特性）

最新推荐文章于 2022-03-25 22:07:20 发布

IT_Joliu

最新推荐文章于 2022-03-25 22:07:20 发布

阅读量334

点赞数 1

分类专栏：前端自学文章标签： html5

本文链接：https://blog.csdn.net/Sim_perfect/article/details/106189708

版权

本文介绍了HTML5的基本概念及新特性，包括新的语义元素、音频和视频支持、表单改进、MathML支持、iframe改进以及Web Video Text Tracks Format（WebVTT）。详细讲解了如何使用这些新特性，特别是音频和视频的属性，以及WebVTT在添加字幕和文本轨道方面的重要性。

摘要由CSDN通过智能技术生成

一、什么是HTML5

HTML5是第五代HTML标准的意思。它不仅提供丰富的媒体支持，而且还增强了对与用户进行交互的Web应用的支持，使本地数据和服务器交互比以前更有效、更容易。
我们来创建一个HTML5来看看HTML5包括几个部分
我们在编译器中通常在开头输入！
然后按TAB键快速补全HTML5骨架
补全后的代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

也可以输入html:5然后按TAB补全，效果是一样的。

1.HTML5标记

用doctype声明文件包含HTML5标记

<!DOCTYPE html>

声明HTML内容是使用HTML5的，不支持HTML5的浏览器会采用标准模式来解析该HTML文件，而忽略不支持的HTML5新特性。

2.字符集

在head标签中会声明使用的字符集，HTML5简化了旧版本过长的meta

<head>
	<meta charset="UTF-8">
</head>

注意：HTML5限制了可用的字符集，这样做是为了加强安全，防止某些类型的攻击。

3.其他和旧版的HTML骨架一样

html的语言设置 head标签 title标签 body标签

二、HTML5的新特性

新的语义元素
新的通信方式
新的离线存储方式（能够让网页在客户端本地存储数据以及更高效地离线运行）
多媒体
2D/3D 绘图效果
性能集成
设备访问（Device Access：能够处理各种输入和输出设备）

1.新的语义元素

1.1 HTML5中的块级元素和段落元素

<section> 		表示文档中的一个区域（或节），比如，内容中的一个专题，一般来说会有一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6> 元素) 作为子节点来辨识每一个<section>。
<article>		表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<nav>			HTML导航栏是一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.
<header>		用于展示介绍性内容，通常包含一组介绍性的或是