HTML5新增---新知

最新推荐文章于 2024-06-17 12:03:55 发布

哈哈ha~

最新推荐文章于 2024-06-17 12:03:55 发布

阅读量204

点赞数 1

分类专栏：前端开发课程文章标签： html5 前端 html

本文链接：https://blog.csdn.net/qq_56668869/article/details/123768202

版权

前端开发课程专栏收录该内容

37 篇文章 1 订阅

订阅专栏

新增的标签

1.结构标签（块级标签）：

header：定义网页的头部区域页眉

nav：定义导航链接的部分

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

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

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

footer：定义网页的底部区域页脚

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

2.datalist标签：

定义选项option列表与input结合使用 input使用list属性

datalist使用id属性 list属性与id属性的值一致表示与input形成链接

<input type="text" list="yy" >
      <datalist id="yy">
         <option>A</option>
         <option>B</option>
         <option>C</option>
         <option>D</option>
         <option>E</option>
      </datalist>

3.fieldset标签：

和form一起使用对表单分组分组后每一组大概的描述与legend搭配使用

<fieldset>
    <legend>账户信息</legend>
    用户名：<input type="text"><br><br>
    密　码：<input type="password">
</fieldset>

4.mark：

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

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

5.meter：

定义度量衡仅用于已知最大和最小值的度量不能当做进度条使用

min：规定范围最小值
max：规定范围最大值
value：规定度量的当前值，是必须的属性。可以用数值表示
low：范围界定的最低值，需大于min、小于等于(min+max)/2
high：范围界定的最大值，需小于max、大于等于(min+max)/2

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

6.progress：

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

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

新增的input的type属性值

新增的input的属性

1.placeholder 表示占位符，用于提示用户输入，当用户输入数据时，这个提示会自动消失

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

2.autofocus 表示页面加载时，input自动获得焦点

<input type="text" autofocus>

3.multiple 表示可以选择多文件上传

<input type="file" multiple>

4.required 表示必填项，内容不能为空

<input type="text" required>

5.accesskey 表示使用alt+字母可以让input表单快速获得焦点

<input type="text" accesskey="s">

6.autocomplete 表示记录之前输入的信息，完成自动输入功能

<!-- autocomplete首先需要提交按钮 这个表单必须给name值 -->
<input type="text" autocomplete="off/on">

实例：

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

多媒体标签

1.embed标签（弃用）：音、视频文件可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3、MP4等

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

弃用原因：插入文档片段不安全

2.audio标签：加载音频文件

支持的三种音频格式：

MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

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

autoplay:自动播放现在的浏览器已经不支持自动播放禁用：性能缘故

<audio> <video> 元素都允许使用多个 <source> 元素. 
<source> 元素可以链接不同的音视频文件  浏览器将使用第一个支持的音视频文件 
浏览器的兼容：IE 8不支持

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

3.video标签：加载视频资源

属性	值	描述
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属性。