HTML5的一些增强和常用标签

最新推荐文章于 2023-04-09 22:24:15 发布

赵广陆

最新推荐文章于 2023-04-09 22:24:15 发布

阅读量728

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/ZGL_cyy/article/details/105622404

版权

front 专栏收录该内容

45 篇文章 6 订阅

订阅专栏

1.HTML5 中增强表单标签

<form>
<!--邮箱-->
邮箱: <input type="email" />
<!--数字-->
年龄: <input type="number" />
<!--滑动器-->
滑动器: <input type="range" />
<!--搜索框-->
搜索: <input type="search" />
<!--日期的框-->
日期: <input type="date" />
<!--日期的框-->
日期: <input type="week" />
<!--日期的框-->
日期: <input type="month" />
<!--颜色-->
颜色: <input type="color" />
<!--网址-->
网址: <input type="url" />
</form>H5中表单增强的属性
placeholder
autofocus:自动的获得焦点
max：最大值
min：最小值
minlength:最小长度
maxlength:最大长度
<form>
账号:<input type="text" placeholder="手机号/邮箱/账
号" autofocus/>
密码:<input type="number" max="130" min="0" />
密码:<input type="password" minlength="2"
maxlength="4" />
</form>

效果：

2.HTML5 中新增结构标签

原来设计：(不过这个依然是流行)

新加入的标签：

3. 标签的使用

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			header{
			height:100px;
			
			width: 100%;
			/*背景颜色*/
			background-color: red;
				
			}
			
		   nav{
		   		
				width: 100%;
				
				height: 40px;
				
				background-color: pink;
				
			}
			
			.center{
				
				width: 100%;
				
				height: 475px;
				
				background-color: palegreen;
				
			}
			
			footer{
				
				width: 100%;
				
				height: 150px;
				
				background-color: paleturquoise;
				
			}
			
			.login{
				
				width: 350px;
				
				height: 400px;
				
				background-color: #ffffff;
				
				/*相对定位*/
				position: relative;
				
				left: 950px;
				
				top: 10px; 
				
				
			}
			
		</style>
		
	</head>
	<body>
		
		<!--头部模块-->
		<header></header>
		<!--中间提示-->
		<nav></nav>
		<!--中间的展现-->
		<div class="center">
			
			<div class="login">
				
				
			</div>
			
			
		</div>
		<!--底部模块-->
		<footer></footer>
	</body>
</html>

效果：

4. HTML5 中音频视频标签

标签的使用
<!--引入音频的标签-->
<audio src="img/1.mp3" controls="controls">
改网页不支持媒体标签
</audio>
<audio>
<source src="img/1.mp3"></source>
<source src="img/1.ogg"></source>
改网页不支持媒体标签
</audio>
<!--引入视频的标签-->
<video src="img/movie.mp4" controls="controls"
width="300px" height="300px"></video>
<video>
<source src="img/movie.mp4"></source>
<source src="img/movie.ogg"></source>
<source src="img/movie.webm"></source>
改网页不支持媒体标签</video>
<hr />
<!--多媒体标签 -->
<embed src="img/1.mp3"></embed>
<embed
src="img/movie.mp4"
width="500px"
height="500px">
</embed>

效果：

5.HTML5 中的绘图标签

标签的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<figure>
			
			<img src="img/1.jpg" />
			
			<figcaption>IT程序员</figcaption>
			
		</figure>
		<!--
		<dl>
			<dd>
				<img src="img/1.jpg" />
				
			</dd>
			<dd>
				IT程序员
				
			</dd>
			
		</dl>-->
		
		<!--展示文章的细节
			
		   mark：着重突出的内容
		-->
		<details>
			
			<summary>请选择</summary>
			<p>中国1</p>
			<p><mark>中国2</mark></p>
			<p>中国3</p>
			<p>中国4</p>
			
		</details>
		
		<!--刻度标签
			
			max:规定的最大值
			min:规定最小值
			value：当前的值
			low：自己定义的最小值
			high：自己定义的最大值
		-->
		
		<meter max="100" min="0" value="10" low="20" high="80"></meter>
		
		<!--进度条-->
		<progress max="100" value="40"></progress>
		
		<br />
		<input type="text" list="city" />
		
		<datalist id="city">
			
			
			<option value="IBM">IBM</option>
			<option value="IBM1">IBM1</option>
			<option value="IBM2">IBM2</option>
			<option value="IBM3">IBM3</option>
			
		</datalist>
		
		<!--画布标签-->
		<canvas id="mycat"></canvas>
		
		<script>
		   
		   var  ca=document.getElementById("mycat");
		   
		   var  te= ca.getContext("2d");
		   //背景颜色
		   te.fillStyle="#FF0000";
		   //绘制图形的大小
		   te.fillRect(0,0,80,100);
		
		</script>
		
	</body>
</html>

效果：