HTML5 - 新标签及其特性

最新推荐文章于 2022-10-13 17:16:43 发布

友人A ㅤ

最新推荐文章于 2022-10-13 17:16:43 发布

阅读量252

点赞数

分类专栏： # HTML

本文链接：https://blog.csdn.net/qq_46025031/article/details/104085529

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 字符设定

HTML与XHTML中：

 <meta http-equiv = "字符集" content = "text/html" ; charset = "utf-8" >

HTML5中：

 <meta charset = "utf-8" >

2. 常用新标签

header：定义文档的页眉，头部
nav：定义导航链接的部分
footer：定义文档或节的页脚、底部
article：定义文章
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容

如，写网页的头部时，可以直接采用第二种方式

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.header {}
		</style>
	</head>
	<body>
		<div class="header"></div>
	</body>

<head> 		
	<meta charset =“ UTF-8”> 		
	<title> </ title> 	
	<style> 		
		heater { } 		
	</ style> 	
</ head> 	
<body> 		
	<header></ header> 
</body>

datalist：定义选项列表。与输入元素配合使用

<input type="text" list="guitar"/>
		<datalist id="guitar">
			<option value="吉他入门零基础">吉他入门零基础</option>
			<option value="吉他和弦指法图">吉他和弦指法图</option>
			<option value="吉他的英文">吉他的英文</option>
			<option value="吉他谱">吉他谱</option>
		</datalist>

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

<fieldset id="">
			<legend>用户登录</legend>
			用户名：<input type="text" /> <br />
			密码：<input type="password" />
		</fieldset>

3. 新增的表单（input type）属性

类型	使用示例	含义
email	`<input type =“ email”>`	输入邮箱格式
tel	`<INPUT TYPE = “电话”>`	输入侧手机号码酒店格式
url	`<input type =“ url”>`	输入URL格式
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 = “周”>`	-年-周

3.1 常用新属性

属性	用法	含义
placeholder	`<input type="text" placeholder="请输入用户名">`	占位符当用户输入的时候里面的文字消失；删除所有文字，自动返回
autofocus	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
multiple	`<input type="file" multiple>`	多文件上传
autocomplete	`<input type="text" autocomplete="off">`	规定表单是否应该启用自动完成功能，有2个值，一个是on ，一个是off， on 代表记录已经输入的值。1.autocomplete 需要提交按钮 2.这个表单必须给他名字
required	`<input type="text" required>`	必填项，内容不能为空
accesskey	`<input type="text" accesskey="s">`	规定激活（使元素获得焦点）元素的快捷键，采用 alt + s的形式

<form action="">
			用户名：<input type="text" placeholder="请输入用户名" autocomplete="on"/> <br />
			上传头像：<input type="file" multiple=""/> <br />
			昵称：<input type="text" required=""/>
			<input type="submit" value="提交"/>
		</form>

在这里插入图片描述

4. 多媒体标签

embed：标签定义嵌入的内容
audio：播放音频
video：播放视频

4.1 多媒体embed

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

插入网络视频：

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" 
		allowFullScreen="true" 
		quality="high" 
		width="480" 
		height="400" 
		align="middle" 
		allowScriptAccess="always" 
		type="application/x-shockwave-flash">
</embed>

4.2 多媒体音频

HTML5通过 audio 标签解决音频播放的问题：

<audio src="bgsound.mp3" 
		autoplay="autoplay" 
		controls="controls">
</audio>

可以通过附加属性控制音频的播放，如：

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放如果这个属性不写默认播放一次 loop
loop = “loop” 表示无限循环

由于版权等原因，不同的浏览器可支持播放的格式是不一样的。

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0
Ogg Vorbis		√	√	√
MP3	√			√
Wav		√	√

多浏览器支持的方案：

<audio autoplay="autoplay" controls="controls">
			<source src="bgsound.mp3"/>
			<source src="music.ogg"/>
			您的浏览器不支持音频播放功能  /* 版本太低了，救不了 */
		</audio>

source 标签允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或编解码器的支持进行选择

4.3 多媒体视频

HTML5通过 video 标签解决视频播放问题：

 <video src="movic04.0gg" width="600px" height="600px"></video>

通过附加属性控制视频的播放：

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的：

格式	IE	Firefox	Opera	Chrome
Ogg	×	3.5+	10.5+	5.0+
MPEG 4	9.0+	×	×	5.0+
WebM	×	4.0+	10.6+	6.0+

多浏览器支持的方案：

<video autoplay controls>
	<source src="movie04.ogg"/>
	<source src="mp4.mp4"/>
	您的浏览器版本不适合播放视频
</video>

友人A ㅤ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录