HTML5新增属性

2022-05-20 17:02:56 作者：互联网

1、文档类型设定

document

HTML

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

XHTML

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

HTML5
```
<!DOCTYPE html>
```

2、字符设定

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

<meta charset="UTF-8" />： HTMl5中建议写法

3、常用新标签

w3c手册中文官网： http://www.w3school.com.cn/

header：定义文档的头部区域
nav：定义导航链接的部分
footer：定义section或document的页脚
article：定义页面独立的内容区域
section：定义文档的节（section、区段）

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

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

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

<!-- input使用list属性 -->
<input type="text" value="输入明星" list="star"/>  
<!-- datalist使用id属性，list属性与id属性的值一致，表示与input形成链接 -->
<datalist id="star">    
    <option>张学友</option>
    <option>张韶涵</option>
    <option>张敬轩</option>
    <option>孙燕姿</option>
    <option>孙悦</option>
    <option>张碧晨</option>
</datalist>

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

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

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

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

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

meter：定义度量衡，仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。不能当做进度条使用。
- min：规定范围最小值
- max：规定范围最大值
- value：规定度量的当前值，是必须的属性。可以用数值表示
- low：范围界定的最低值，需大于min、小于等于(min+max)/2
- high：范围界定的最大值，需小于max、大于等于(min+max)/2
注意：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>

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

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

4、新增的input type属性值

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

tel: 用于让用户输入和编辑电话号码, 在提交表格之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。尽管 tel 类型的输入在功能上和 text 输入一致，但在手机上 — 可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。

<form action="">
	邮箱：<input type="email"><br><br>
	url： <input type="url"><br><br>
	数字：<input type="number"><br><br>
    电话：<input type="tel"><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>

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、input常用新属性

属性	用法	含义
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值(相应的input框必须有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、综合案例

<fieldset>
	<legend>学生档案</legend>
	<label>姓名：<input type="text" required placeholder="请输入学生名字"></label><br /><br />
	<label>手机号：<input type="tel"></label> <br /><br />
	<label>邮箱：<input type="email"></label> <br /><br />
	<label>所属专业：<input type="text" placeholder="请选择专业" list="subject"></label>
	<datalist id="subject">
		<option>Java</option>
		<option>HTML5</option>
		<option>php</option>
		<option>android</option>
	</datalist><br /><br />
	<label>出生年月：<input type="date"> </label><br /><br />
	<label>成绩：<input type="number"> </label><br /><br />
	<input type="submit"> <input type="reset">
</fieldset>

7、多媒体标签

7.1 多媒体embed(弃用)

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

<!-- 播放音频文件 -->
<embed width="300px" height="50px" src="./music/loveyou.mp3"/>

<!-- 播放优酷视频 -->
<embed src='http://vali-g1.cp31.ott.cibntv.net/youku/69755558eb34271be0fed6367/03000801006062DC4A2E325DA76967DB170C24-06D3-4178-A887-3ED248FDB682.mp4?sid=161906583800010007087_00_B685bff2637e02d0311d387bfea2f578d&amp;sign=917f2102ab608683eda167c340607e44&amp;ctype=50&amp;si=183&amp;psid=151f4ff1a12e8794367d4a3b9e5c17a443346' width='480' height='400'></embed>

属性	值	描述
src	url	要播放的视频音频地址
width	px	控制面板的宽度
height	px/数值	控制面板的高度

7.2 多媒体audio

audio支持三种音频格式：

MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 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> 元素在老式浏览器中不起作用。

常见属性

属性	值	描述
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的url
muted	muted	静音播放
autoplay	autoplay	准备就绪自动播放（各大浏览器已经禁用了)

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

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

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

IE浏览器8及以上版本支持

7.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>

Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。

浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。

此标签包含src、type、media三个属性。

src属性：用于指定媒体的地址，和video标签的一样。

了解Type属性：用于说明src属性指定媒体的MIME类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

了解Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到<style>标签的media属性了么？一样一样一样的。

video常见属性 (西瓜视频 -- 库 -- API)

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放的问题)
controls	controls	向用户显示播放控件
width	px	设置播放器的宽度写不写px单位都没影响
height	px	设置播放器的高度写不写px单位都没影响
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none（不应加载视频） metadata: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。	规定是否预加载视频，如果有了autoplay，就忽略该属性
src	url	视频url地址
poster	imgurl图片路径	poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误可能是转圈圈等待
muted	muted	加载视频静音播放

preload不设置值时，则采用默认值，默认值就是浏览器定义的了（即，不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。

Chrome：preload默认值为auto，加载部分视频；

FireFox：preload默认值为空，不加载视频；

IE：preload默认值为metadata，加载视频（貌似是全部）；

Safari：preload默认值为auto，加载视频（大小未知）；

preload设为none时，只有IE会加载视频

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

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

<video autoplay></video>

所以好多需求会要求在网页背后播放一段音频文件这种需求就头疼了，解决方案

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

MIME类型(了解)

什么是MIME类型

在把输出结果传送到浏览器上的时候，浏览器必须启动应用程序来处理这个输出文档。这可以通过多种类型MIME（多功能网际邮件扩充协议）来完成。在HTTP中，MIME类型被定义在Content-Type header中。

例如，假设你要传送一个Microsoft Excel文件到客户端。那么这时的MIME类型就是“application/vnd.ms-excel”。在大多数实际情况中，这个文件然后将传送给Execl来处理（假设我们设定Execl为处理特殊MIME类型的应用程序）。在ASP中，设定MIME类型的方法是通过Response对象的ContentType属性。

多媒体文件格式MIME

最早的HTTP协议中，并没有附加的数据类型信息，所有传送的数据都被客户程序解释为超文本标记语言HTML 文档，而为了支持多媒体数据类型，HTTP协议中就使用了附加在文档之前的MIME数据类型信息来标识数据类型。

MIME意为多目Internet邮件扩展，它设计的最初目的是为了在发送电子邮件时附加多媒体数据，让邮件客户程序能根据其类型进行处理。然而当它被HTTP协议支持之后，它的意义就更为显著了。它使得HTTP传输的不仅是普通的文本，而变得丰富多彩。

每个MIME类型由两部分组成，前面是数据的大类别，例如声音audio、图象image等，后面定义具体的种类。

常见的MIME类型

超文本标记语言文本 .html,.html text/html

普通文本 .txt text/plain

RTF文本 .rtf application/rtf

GIF图形 .gif image/gif

JPEG图形 .ipeg,.jpg image/jpeg

au声音文件 .au audio/basic

MIDI音乐文件 mid,.midi audio/midi,audio/x-midi

RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio

MPEG文件 .mpg,.mpeg video/mpeg

AVI文件 .avi video/x-msvideo

GZIP文件 .gz application/x-gzip

TAR文件 .tar application/x-tar

标签：视频,浏览器,标签,新增,MIME,HTML5,yes,属性
来源： https://www.cnblogs.com/xiaohuliya/p/16292913.html