前端学习（HTML5）

最新推荐文章于 2024-08-03 22:09:54 发布

这名没人用吧

最新推荐文章于 2024-08-03 22:09:54 发布

阅读量273

点赞数 1

分类专栏： html基础知识文章标签： html

本文链接：https://blog.csdn.net/weixin_43866830/article/details/114915137

版权

前端学习之HTML5

一、HTML5介绍
二、HTML5修改和新增的内容

一、HTML5介绍

        HTML5几乎代表了新一代的HTML和CSS和JavaScript的总和。HTML5拥有很好的跨平台特性，可以同时在PC端和移动端、Windows和Linux、安卓与ios中使用，这样子也可以很好地节约成本。
        HTML5还对多媒体有很好的支持，在HTML5之前我们想要在浏览器浏览视频等，有时候会需要安装一些插件如flash等等，而HTML5提供了免插件的视频、图像、动画等等。
        基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些都得益于HTML5应用程序缓存以及本地存储功能，它不受数据大小限制，有更好的弹性和框架，可以将数据写入到本机的ROM当中，还可以在关闭浏览器，再次打开浏览器时回复数据以减少网络流量。
        HTML5还可以使得页面更加的炫酷，HTML5的画图标签可以使得我们做更多的互动和动画。
        HTML5将结构标签标准规范化，更有利于搜索引擎衡量网页上的内容和相关性，甚至分配权重的流向。当涉及网站的抓取和索引的时候，对SEO很友好。（SEO是搜索引擎优化）

二、HTML5修改和新增的内容

html声明

html4.01是基于SGML，需要引用DTD文件，而html5不基于SGML，不需要引用DTD文件，声明只需要写成：

<!DOCTYPE html>

html指定字符编码

相比于html4.01：

<meta http-equiv="Content-Type" content="text/html:charset=UTF-8">

html5表示字符编码的方式更加简洁：

<meta charset="UTF-8">

html5新增的标签

1.结构语义化标签

<header>：文档的头部区域，通常放置导航、标题等头部信息。
<nav>：页面的导航链接部分，通常放的就是导航链接。
<main>：页面的主要内容部分，有且只有一个。
<article>：定义正文内容。
<section>：定义一块区域，比如章节、页眉、页脚或页面其他部分。

2.表单控制标签

html5中新增了一些的表单控制标签，如：
input类型：
email、url、tel、number、range、Date pickers、search、color等等，这些类型都会对输入的内容进行判断，判断是否符合格式。
email：判断输入的内容是否符合邮箱格式。
url：判断输入的内容是否符合路径格式。
tel：判断输入的内容是否符合电话格式。
number：判断输入的内容是否是数字，注意，字母的话只有e可以，代表的是一个无限不循环小数，值大约是2.71828.
range：允许用户输入一段范围内的数值，样式为滑动条（也可以设置min、max、step等属性）：
在这里插入图片描述
Date pickers：日期选择器，包含了date、month、week、time、datetime（UTC时间）、datetime-local（本地时间）等类型。如date：

<form action="">
	<input type="date">
</form>

结果：
在这里插入图片描述
search：搜索框，框的后面会有一个打叉的小图标，点击可以重置内容：

color：颜色选择框：

input属性：
list、autocomplete、autofocus、min、max、step、multiple、pattern、placeholder、required等等。
min、max、step：这几个属性用于为包含数字或日期的input类型规定限定。min和max规定的是允许的最小值和最大值，step规定的是合法的数字间隔。

3.其他标签的应用（多媒体、web应用标签）

多媒体标签

<video>：定义视频，比如电影片段或其他视频流，支持三种视频格式：MP4、WebM、Ogg。
<audio>：定义音频，比如电影片段或其他视频流，支持三种音频格式：MP3、Wav、Ogg。
<source>：为媒介元素（比如<video>和<audio>）定义媒介资源，定义多种格式的多媒体文件，浏览器会选择它所支持的格式播放，若不支持会出现文字提示。
<embed>：标记定义外部的可交互的内容或插件，比如flash。写法：

<embed src="../media/搁浅.mp3" width="800" height="500" wmode="transparent">

<canvas>：用于绘制图像（通过脚本，一般是js），它本身没有绘制能力，只作为图形的容器，我们必须使用脚本绘制图形。

多媒体标签属性

src：定义媒体资源路径。
autoplay：资源一加载就马上播放（自动播放）。
controls：向用户显示空间，比如播放按钮。
loop：重复播放。
muted：静音。
poster：用户点击播放（视频）之前显示的封面图像。
preload：视频加载，并预备播放。同时存在autoplay，则忽略该属性。
例子（音频播放）：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<header>
	</header>
	<main>
		<video src="../media/搁浅.mp3" controls></video>
	</main>
</body>
</html>