第六课 HTML5新特性

最新推荐文章于 2021-11-01 00:03:41 发布

一个严肃的好人

最新推荐文章于 2021-11-01 00:03:41 发布

阅读量112

点赞数

分类专栏： WEB前端文章标签： WEB WEB前端 HTML

本文链接：https://blog.csdn.net/feng950801/article/details/88084515

版权

WEB前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>name</title>
</head>
<body>
	<form action="#" method="get">
		<p>姓名：<input type="text" name="UserName" placeholder="请输入姓名" autofocus autocomplete required /></p>
		<p>密码：<input type="password" name="Pwd" accesskey="s" /></p>
		<p>性别：<input type="radio" name="sex" />男<input type="radio" name="sex" />女</p>
		<p>爱好：
			<input type="checkbox" name="hobby" />足球
			<input type="checkbox" name="hobby" />篮球
			<input type="checkbox" name="hobby" />乒乓球
			<input type="checkbox" name="hobby" />橄榄球
		</p>
		<p><input type="file" name="InputFile" multiple></p>		
		<p>
			<!-- HTML5中的新属性 -->
			邮件：<input type="email" name="email" /><br />
			电话：<input type="tel" name="tel"><br /><br />
			网址：<input type="url" name="url"><br /><br />
			数字：<input type="number" name="number" /><br />
			搜索：<input type="search" name="search" /><br />
			拖动：<input type="range" name="range" /><br />
			时间：<input type="time" name="time" /><br />
			日期：<input type="date" name="date" /><br />
			时期：<input type="datetime" name="datetime" /><br />
			月份：<input type="month" name="month" /><br />
			星期：<input type="week" name="week" /><br />
		</p>
		<p><input type="submit" name="" /></p>
	</form>
</body>
</html>

阶段总结：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学生档案</title>
</head>
<body>
	<form action="#" name="StuInfo">
		<fieldset>
			<legend>学生档案</legend>
			<p>姓名：<input type="text" name="UserName" placeholder="请输入学生名字" autofocus /></p>
			<p>手机：<input type="tel" name="tel" /></p>
			<p>邮箱：<input type="email" name="email"></p>
			<p>
				学院：
				<select>
					<option selected="selected">信工院</option>
					<option>化工院</option>
					<option>新闻院</option>
					<option>机械院</option>
				</select>
			</p>
			<p>
				就业：
				<input type="text" list="career" />
				<datalist id="career">
					<option>PHP</option>
					<option>JAVA</option>
					<option>JAVASCRIPT</option>
					<option>Linux</option>					
				</datalist>
			</p>
			
			<p>出生日期：<input type="date" name="date" /></p>
			<p>成绩：<input type="number" name="chengji" /></p>
			<p>毕业时间：<input type="datetime" name="biyeshijian" /></p>

			<input type="submit" name="submit" />
		</fieldset>
	</form>
</body>
</html>

label标签：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Label标签</title>
</head>
<body>
	<h3>label标签的使用</h3>
	<!-- 未使用label标签时，点击“输入账号”，没有反应，需要鼠标点击输入框才能开始输入内容 -->
	输入账号：<input type="text" /><br />

	<!-- 用来label直接进行包裹之后，点击“输入账号”，就可以输入内容 -->
	<label>输入账号：<input type="text" /></label><br />

	<!-- 如果label里面有多个标签，可以通过for  id的格式来进行,下例就是定位到输入密码 -->
	<label for="password">
		输入账号：<input type="text" id="UserName" />
		输入密码：<input type="password" id="password" />
	</label>
</body>
</html>

媒体标签：

audio标签：

video标签：注意三个属性，autoplay，controls，loop；

embed标签：媒体播放标签；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多媒体标签</title>
</head>
<body>
	<iframe height=498 width=510 src='http://player.youku.com/embed/XNDA4MTExMDY3Mg==' frameborder=0 'allowfullscreen'></iframe>

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


</body>
</html>

一个严肃的好人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六课 HTML5新特性

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;name&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;form action="#" method="get"&gt; &lt;p&gt;姓名：&amp
复制链接

扫一扫