HTML5新增

最新推荐文章于 2024-09-19 13:41:23 发布

代码世家

最新推荐文章于 2024-09-19 13:41:23 发布

阅读量1.8k

点赞数 29

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_52820235/article/details/136710788

版权

1.文档类型设定

（1）HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

（2）XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

（3）HTML5

<!DOCTYPE html>

2.字符设定

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">: HTML与XHTML中建议写法
<meta charset="UTF-8" />： HTMl5中建议写法

3.常用新标签

w3c手册中文官网： w3school 在线教程

（1）header：定义文档的头部区域

（2）nav：定义导航链接的部分

（3）footer：定义section或document的页脚

（4）article：定义页面独立的内容区域

（5）section：定义文档的节（section、区段）

（6）aside：定义页面的侧边栏内容

<header>定义网页的头部  页眉</header>
<nav>定义导航链接部分</nav>
<footer>定义网页的底部  页脚</footer>
<article>定义文章</article>
<section>定义区域</section>
<aside>定义侧边栏</aside>

（7）datalist：定义选项列表，与input结合使用

<!-- input使用list属性 -->
<input type="text"  value="输入明星" list="star"/>  
<!-- datalist使用id属性，list属性与id属性的值一致，表示与input形成链接 -->
<datalist id="star">	
	<option>12</option>
	<option>13</option>
	<option>14</option>
	<option>15</option>
	<option>16</option>
	<option>17</option>
</datalist>

（8）fieldset：可将表单内的相关元素分组打包，与legend搭配使用

<fieldset>
	<legend>登录页面</legend> <!--  外边框的标题 -->
	用户名：<input type="text"><br><br>
	密　码：<input type="password">
</fieldset>

（9）mark：用于定义带有记号的文本。在需要突出显示文本时可使用 <mark> 标签。

<p>这是一个段落，中间的<mark>文本</mark>需要标记</p>

注意：IE 8及之前的版本不支持mark标签

（10）meter：定义度量衡，仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。不能当做进度条使用。

min：规定范围最小值

max：规定范围最大值

value：规定度量的当前值，是必须的属性。可以用数值表示

low：范围界定的最低值

high：范围界定的最大值

注意：IE浏览器不支持meter标签。

<meter min="0" max="10" value="6"></meter> <br>

<!-- value的值超过high的值 -->
<meter min="0" max="100" value="95" low="30" high="90"></meter><br>

<!-- value的值在low与high之间 -->
<meter min="0" max="100" value="60" low="30" high="90"></meter><br>

<!-- value的值低于low的值 -->
<meter min="0" max="100" value="25" low="30" high="90"></meter>

（10） progress：定义运行中的任务进度，通常与JavaScript结合使用来显示当前的任务进度。不能作为度量值使用

<progress value="20" max="100"></progress>

4.新增的input type属性值

类型	使用示例	含义
email	<input type="email">	输入邮箱格式，如：xx@163.com
url	<input type="url">	输入url格式，如：http://www.baidu.com
number	<input type="number">	输入数字格式，只能是数字
search	<input type="search">	搜索框
range	<input type="range">	自由拖动滑块
time	<input type="time">	小时分钟
date	<input type="date">	年月日
datetime	<input type="datetime">	时间
month	<input type="month">	年月
week	<input type="week">	星期
color	<input type="color">	颜色
hidden/show	<input type="hidden">	定义表单隐藏/显示

<form action="">
	邮箱：<input type="email"><br><br>
	url： <input type="url"><br><br>
	数字：<input type="number"><br><br>
	搜索：<input type="search"><br><br>
	滑块：<input type="range"><br><br>
	时分：<input type="time"><br><br>
	年月日：<input type="date"><br><br>
	年月：<input type="month"><br><br>
	星期：<input type="week"><br><br>
	颜色：<input type="color"><br><br>
	<input type="submit">
</form>

（1）hidden/show属性的使用：


<script type="text/javascript">
	var flag = true;
	function hide() {
		var input = document.getElementById("myinput");
		var btn = document.getElementById("btn")
		if(flag) {
			input.type = "hidden";
			btn.innerHTML = "显示";
			flag = false;
		} else {
			input.type = "show";
			btn.innerHTML = "隐藏";
			flag = true;
		}
	}	
</script>

<button id="btn" onclick="hide()">隐藏</button><br>
<input id="myinput" name="myinput" type="show" value="小明">

5.常用新属性

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名" >	占位符用于提示用户输入，当用户输入数据时，提示信息会自动消失
autofocus	<input type="text" autofocus>	规定当页面加载时input元素应该自动获得焦点
multiple	<input type="file" multiple>	多文件上传
autocomplete	<input type="text" autocomplete="off">	规定表单是否应该启用自动完成功能，有两个值分别是on和off，on表示记录已经输入的值。条件是：1.autocomplete首先需要提交按钮 2.这个表单必须给name值
required	<input type="text" required>	必填项，内容不能为空
accesskey	<input type="text" accesskey="s">	规定激活（使元素获得焦点）元素的快捷键，采用alt+字母的形式

<!-- placeholder表示占位符，用于提示用户输入，当用户输入数据时，这个提示会自动消失
	autofocus表示页面加载时，input自动获得焦点 -->
	用户名：<input type="text" placeholder="请输入用户名" autofocus><br>
	<!-- multiple表示可以选择多文件上传 -->
	上传头像：<input type="file" multiple><br>
	<h4>自动记录完成</h4>
	<!--1.autocomplete首先需要提交按钮
		2.这个表单必须给name值 -->
	<form action="">
		<!-- autocomplete表示记录之前输入的信息，完成自动输入功能 -->
		姓名：<input type="text" autocomplete name="username"><br>
		<input type="submit">
	</form><br>
	<form action="">
		<!-- required 表示必填项，内容不能为空
		  	 accesskey 表示使用alt+字母可以让input表单快速获得焦点-->
		昵称：<input type="text" required accesskey="s"><br>
		<input type="submit">
	</form>

6.多媒体标签

1.多媒体embed

embed可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等，src为音频或视频文件的路径，可以是相对路径或绝对路径。

<!-- 播放音频文件 -->
<embed width="300px" height="50px" src="./music/loveyou.mp3"/>
<!-- 播放优酷视频 -->
<embed src='http://player.youku.com/player.php/sid/XMjQ4MTc0ODMyOA==/v.swf' width='480' height='400' align='middle'></embed>

2.多媒体audio

<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg

浏览器	MP3	Wav	Ogg
IE	yes	no	no
Chrome	yes	yes	yes
Firefox	yes	yes	yes
Safari	yes	yes	yes
Opera	yes	yes	yes

HTML5通过<audio>标签来解决音频播放的问题。<audio> 标签在 HTML 4 中是无效的，页面无法通过 HTML 4 验证。必须把音频文件转换为不同的格式。<audio> 元素在老式浏览器中不起作用。

常见属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的url

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

<audio controls>
	<source src="./music/loveyou.mp3" type="audio/mpeg"></source>
	<source src="./music/loveyou.ogg" type="audio/ogg"></source>
	<source src="./music/loveyou.wav" type="audio/wav"></source>
	您的浏览器不支持 HTML5 audio 标签。
</audio>

3.多媒体video

当前video元素支持的三种格式，也可以原生的支持视频格式的文件的播放，当然，支持的格式是有限的

浏览器	MP4	WebM	Ogg
IE	yes	no	no
Chrome	yes	yes	yes
Firefox	yes	yes	yes
Safari	yes	no	no
Opera	yes	yes	yes

现在大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video> 元素提供了播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 元素支持三种视频格式：

MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

<video width="420" controls>
	<source src="./music/mov_bbb.mp4" type="video/mp4">
	<source src="./music/mov_bbb.ogg" type="video/ogg"> 
	<source src="./music/mov_bbb.webm" type="video/webm">
	您的浏览器不支持 HTML5 video 标签。
</video>

video常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放的问题)
controls	controls	向用户显示播放控件
width	px	设置播放器的宽度
height	px	设置播放器的高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none（不应加载视频）	规定是否预加载视频，如果有了autoplay，就忽略该属性
src	url	视频url地址
poter	imgurl	加载等待的画面图片
muted	muted	静音播放

7.解决Chrome浏览器无法自动播放音频视频的问题

谷歌浏览器做了改革，不再允许自动播放音频和视频。Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频

<video autoplay></video>

（1）比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将muted去掉。或者让用户手动去打开音频（腾讯视频就是这样做的）。

（2）使用iframe来触发权限

<iframe style="display: none" allow="autoplay" src="音频地址"></iframe>

当你页面加载完成后，将原先video的src地址赋值给iframe ，就可以通过iframe来播放音频文件了