html5 内容-CSDN博客

本文链接：https://blog.csdn.net/weixin_44698566/article/details/105440461

一、html5概述

1.1 概述
HTML5 是 HTML 标准的最新演进版本。这个术语代表了两个不同的概念：
① 它是一个新的 HTML 语言版本包含了新的元素，属性和行为
② 同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术

html5的改变：
● 语义：能够让你更恰当地描述你的内容是什么。
● 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
● 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
● 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
● 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
● 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
● 设备访问 Device Access：能够处理各种输入和输出设备。
● 样式设计: 让作者们来创作更加复杂的主题吧！
HTML5的改变，涵盖了CSS3和JS的一些新特性，这些东西统称HTML5技术。
我们之前学习的是HTML4.01（XHTML1.0）。2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。

1.2 兼容性

官方HTML5浏览器性能评分：http://html5test.com/
满分555分，1个特性就是1分，一共555个新特性。

http://caniuse.com/
可以检索任何一个HTML5新特性，在各个浏览器里面的兼容情况。

二、html5新的骨架和语义化标签

2.1 html5骨架
DTD：书写骨架第一步就是书写ＤＴＤ，

1	<!DOCTYPE html>

这种DTD书写不要加5，因为表示书写网页对于不支持html5新特性的浏览器采用标准模式解析。就是对于不认识的属性或者标签，直接静默处理不报错，对于支持的html5新特性直接显示。

还需要设置字符集

1	<meta charset=”UTF-8”>

HTML5骨架：

1	<!DOCTYPE html>
2	<html lang="en">
3		<head>
4			<title>网页标题</title>
5			<meta charset="UTF-8">
6		</head>
7		<body>
8			网页主体部分
9		</body>
10	</html>

2.2 新的特性
 自封闭标签（单标签）不写关闭符号也是合法的。（可以使用）

1	<img src="images/0.jpg" alt="">

 所有的type属性不写也是合法的。必须要（可以使用）

1	<style></style>
2	<link href=””>
3	<script></script>

 属性值不写双引号也是合法的。（别使用）

1	<img src=images/12.jpg alt=图片加载失败>

 标签大小写都合法。（别使用）

1	<div class="box">文字</div>
2	<!-- 标签可以书写大写字母，不许同学们用 -->
3	<Div>文字</Div>
4	<DIV>文字</DIV>

2.3 新的语义化标签
HTML就是负责页面语义的，HTML4.01中，div负责的任务太多，具体的语义没有拆分。
HTML5中，就是把div拆分为了更多的标签：

  <header>头部
  <nav>导航
  <section>区域
  <aside>侧边栏
  <article>文章
  <footer>底部

这些标签都和div一样，是容器级标签，可以互相嵌套，放什么都行，放自己也行。都是block-level，标准流中是块级元素。

其他的语义化标签：
一组：figure和figcaption。一般用于图片的文字介绍。

4	<figure>
5		<figcaption>这是标题</figcaption>
6		<img src="images/c1.jpg" alt="">
7	</figure>

time标签，时间语义化标签。是行内元素。

1	<p>我们上午课上时间是从<time>9点</time>开始</p>

mark，有强调的语义。有背景色，为黄色。

4	同学们早点到校<mark>学习</mark>

. 同学们早点到校学习

一组：details和summary。有总结含义的标签可展开。

1	<details>
2		<summary>我们每一阶段有考试</summary>
3		<p>html考试</p>
4		<p>js基础考试</p>
5		<p>js进阶考试</p>
6	</details>

在这里插入图片描述

三、表单

3.1 表单元素可以不书写在form标签内部

1	<form action="" id="biaodan"></form>
2	<input type="text" value="用户名" form="biaodan">

3.2 label标签改变

1	<label>
2		请输入用户名：<input type="text">
3	</label>

3.3 datalist
自动感应标签，输入匹配。

1	<p>
2		你学会技能：<input type="text" list="ganying">
3		<datalist id="ganying">
4			<option value="html">网页制作</option>
5			<option value="css">样式设置</option>
6			<option value="javascript">用户交互</option>
7		</datalist>
8	</p>

在这里插入图片描述
3.4 placeholder属性
占位符

用户名：`<input type="text" placeholder="请输入用户名">输入时默认清除

3.5 autofocus
自动获取焦点属性

用户名：<input type="text" placeholder="请输入用户名" autofocus>

3.6 required
必填项属性，提交时表单验证，没填则提交不了。


用户名：<input type="text" placeholder="请输入用户名" required>

3.7输入控件
input标签更改type属性值表示不同的表单元素
电子邮箱：email
电话：tel
搜索框：search
网址:url
数字：number min:最小值 max:最大值

数字：<input type="number" min="1" max="50" value="25">

3.8其他控件
拖拽条：range min:最小值 max:最大值

拖拽条：<input type="range" min="100" max="200" value="150">

在这里插入图片描述
日期：date

日期：<input type="date">

颜色：color

颜色：<input type="color">

四、html5插入视频和音频

4.1 html4视频
之前借助flash，链接外部视频地址

1	<embed src="//player.video.iqiyi.com/a147354accc0191887458cfddaf5ceac/0/0/v_19rqvdm9eo.swf-albumId=2133665100-tvId=2133665100-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

4.2 html5插入视频
不需要借助flash插件直接使用标签video
video具有属性
src:插入视频路径
controls:控制条
autoplay:自动播放
loop:循环播放

还可以通过source标签引入路径

方式一：
<!-- controls控制条 autoplay:自动播放  loop循环-->
	<!-- <video src="video/1.mp4" controls autoplay loop></video> -->

方式二：
	<!-- 还可以通过source引入视频-->
	<video controls>
		<source src="video/2.mp4">
	</video>

4.3 html5插入音频
audio标签具有属性
src:路径
controls:控制条
autoplay:自动播放
loop:循环播放
同样可以使用source引入路径

	<!-- 如果不设置controls类似于背景音乐 -->
	<audio src="audio/a0.ogg" autoplay loop></audio>