HTML5新增标签和属性_01

最新推荐文章于 2023-02-27 17:27:20 发布

Milly_Liu

最新推荐文章于 2023-02-27 17:27:20 发布

阅读量278

点赞数

分类专栏：前端初级H5+C3

本文链接：https://blog.csdn.net/qq_38148024/article/details/102600898

版权

前端初级H5+C3 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

本文详细介绍了HTML5的文档类型设定、新增标签如header、nav、footer等，以及input元素的新属性和类型，如placeholder、autofocus和email、tel等，同时提供了表单综合案例和多媒体标签的使用示例。

摘要由CSDN通过智能技术生成

1.文档类型设定

HTML : sublime 中输入html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

XHTML : sublime中输入html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

HTML5 : sublime 中输入 ! +Tab

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2.常用新标签

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

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

datalist ：定义选项列表，请与input元素配合使用该元素

<input type="text" value="输入明星" list="star" /> <!-- input里面使用list属性 -->
<datalist id="star">   <!-- datalist里面使用id来实现和input的链接 -->
	<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" /> <br><br>
</fieldset>
```
上面代码实现的效果是：会有一个框将用户名和密码两个表单控件包住，用户登录显示在上边框上。
要学会经常查看手册

3.新增的input type属性值

类型	使用示例	含义
email	`<input type="email" />`	输入邮箱格式
tel	`<input type="tel" />`	输入手机号码格式
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="week" />`	星期年

代码示例：

<fieldset>
	<legend>HTML5新增的 input type 属性值</legend>
	<form action="">
		用户名：<input type="text" /> <br><br>
		密　码：<input type="password" /> <br><br>
		邮　箱：<input type="email" />  <br><br>
		手机号：<input type="tel" />   <br><br>
		数　字：<input type="number" />   <br><br>
		 U R L：<input type="url" />   <br><br>
		搜 索：<input type="search" />   <br><br>
		区域滑块：<input type="range" />   <br><br>
		时间：<input type="time" />   <br><br>
		年月日：<input type="date" />   <br><br>
		年月日与时间：<input type="datetime" />   <br><br>
		月年：<input type="month" />   <br><br>
		星期年：<input type="week" />   <br><br>
         颜色：<input type="color" />   <br><br>
		<input type="submit" /> <br />
	</form>
</fieldset>

4.新增input常用新属性

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

代码示例1：placeholder属性比value属性更好用，使用value时，需要先将value的值删除再输入，而placeholder属性是在用户输入的时候placeholder值消失，删除掉输入的内容，placeholder值会自动恢复。autofocus是指在刚打开网页时光标就会在输入框中闪烁了可以直接输入。

<fieldset>
	<legend>HTML5新增常用新属性</legend>
	<form action="">
		用户名：<input type="text" placeholder="请输入用户名" autofocus /> <br><br> 
		上传头像：<input type="file" multiple /> <br><br><!--  可以实现多个文件的上传 -->
	</form>
	</fieldset>

代码示例2：自动记录完成，即，当用户的名字或者是电话号码之类的是比较长的信息时，希望在出入一次后将相应的信息自动记录，当用户再次输入时，将会出现记录的全部内容。

<form action="">
		姓名：<input type="text" autocomplete="on" name="username" />
		<input type="submit">
</form>

注意：使用autocomplete属性需要满足一定的条件：1.需要有提交按钮；2.需要有一个name

代码示例3：内容不能为空和获得焦点属性

<form action="">
		昵称：<input type="text" required accesskey="s"/>
</form>

上述的accesskey属性表示的是，当用户刚打开页面时，光标不会在输入框中闪烁，使用ctrl+s就可以自动定位到输入框，或者在浏览的过程中想要搜索一些内容时，也可以使用这个快捷键进行光标定位。这里所说的焦点就是指的光标。

5.表单综合案例——学生档案

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学生档案</title>
</head>
<body>
	<form action="">
		<fieldset>
			<legend>学生档案</legend>
			<label></label>
			<label>姓名：<input type="text" placeholder="请输入学生姓名" /></label> <br /><br />
			<label>手机号：<input type="tel" /></label> <br><br>
			<label>邮箱：<input type="email" /></label> <br><br>
			<label>所属学院：<input type="text" placeholder="请选择学院" list="xueyuan" /></label> <br /><br />
			<datalist id="xueyuan">
				<option>通信学院</option>
				<option>计算机学院</option>
				<option>物理学院</option>
				<option>数学院</option>
			</datalist>
			<label>出生日期：<input type="date" /></label> <br /><br />
			<label>成绩：<input type="number" /></label> <br /><br />
			<label>毕业日期：<input type="date" /></label> <br /><br />
			<input type="submit"> &nbsp;&nbsp;&nbsp;  <input type="reset" />

		</fieldset>
	</form>
</body>
</html>

6.多媒体标签

embed：定义嵌入的内容，需要处理兼容性问题，主键向以下两种形式过渡
audio：播放音频
video：播放视频

在本地不提倡放视频，因为一个视频有几十兆或者几百兆，而网站的容量空间是有限的，网站中的容量上传到服务器是很贵，1G就要几百块钱，视频3-5个就满了。一般情况下是，将视频上传到优酷视频，然后去调用优酷里面的视频地址，既不占用网站的空间，而且还可以显示视频。即：先上传再分享。

它的缺点是：广告太多，看上去不太专业，大型企业一般都有自己的视频服务器。

1.多媒体embed

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

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

2.多媒体audio

H5通过<audio> 标签来解决音频播放问题。

例如：

<body>
	<audio src="Luv Letter.mp3" autoplay="autoplay" controls loop="2"></audio>
</body>/>

可以通过附加属性更友好控制音频播放，如：autoplay自动播放，controls是否显示默认播放控件，loop循环播放，其中，loop=“2"循环播放2次，loop或者loop=”-1"表示无限循环。

由于版权原因，不同的浏览器可支持的播放格式不一样，当前audio元素支持3种音频格式，一般是将同一首歌转换成3中格式，任何一个浏览器都可以兼容性播放：

	IE9	Firefox3.5	Opera	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

多浏览器支持方案：

<body>
	<audio controls autoplay >
		<source src="Luv Letter.mp3" />
		<source src="Luv Letter.ogg" />
		<source src="Luv Letter.wav" />
	</audio>
</body>

3.多媒体video

<video src="movie.mp4" controls></video>

其他附加属性：autoplay自动播放，controls是否显示默认播放控件，loop循环播放，width设置播放窗口宽度，height设置播放窗口高度。由于版权等原因，不同浏览器可支持播放的格式不同，如下：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg		3.5+	10.5+	5.0+
MPEG4	9.0+			5.0+	3.0+
WebM		4.0+	10.6+	6.0+

多浏览器支持方案：

<video autoplay controls>
		<source src="movie.mp4" />
		<source src="movie.ogg" />
		<source src="movie.webm" />
</video>

Milly_Liu

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录