admin管理员组文章数量:1530951
文章目录
- 一、语义化标签
- 1、之前写页面都是用div标签，为了区分div盒子的作用，需要给其添加不同的class类名，html5语义化标签可以根据标签名称区分不同盒子
- 2、常见的标签有：section、header、nav、article、aside、main、figure、figcaption、footer等
- 3、应用
- 二、音视频标签
- 1、音频标签：audio；视频标签：video
- 2、属性
- 3、使用
- 三、智能表单
- 代码及运行效果
- 四、input标签新增属性
- 代码运行及效果
- 五、选项列表
一、语义化标签
1、之前写页面都是用div标签，为了区分div盒子的作用，需要给其添加不同的class类名，html5语义化标签可以根据标签名称区分不同盒子
2、常见的标签有：section、header、nav、article、aside、main、figure、figcaption、footer等
3、应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
section {
width: 1000px;
height: 500px;
border: 1px solid #000;
margin: 100px auto;
}
header {
width: 100%;
height: 50px;
background: pink;
}
nav a {
float: left;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
aside {
width: 200px;
height: 400px;
background: orange;
float: left;
}
article {
width: 800px;
height: 400px;
background: skyblue;
float: right;
}
footer {
width: 100%;
height: 50px;
background: purple;
float: left;
}
</style>
</head>
<body>
<section>
<header>
<nav>
<a href="">首页1</a>
<a href="">首页2</a>
<a href="">首页3</a>
<a href="">首页4</a>
<a href="">首页5</a>
</nav>
</header>
<main>
<aside>导航页面</aside>
<article>文章列表页面</article>
</main>
<footer>版权信息版权信息版权信息版权信息版权信息</footer>
</section>
</body>
</html>
二、音视频标签
1、音频标签：audio；视频标签：video
2、属性
src 资源的相对路径
controls 控件按钮，有这个属性才会显示音频标签
autoplay 自动播放
loop 可以循环播放
muted 静音，设置静音后视频可以自动播放
poster 只有视频标签有，视频未加载播放时，首屏图片
3、使用
<body>
<!-- 音频标签 -->
<audio src="xxx.mp3" controls autoplay loop muted></audio>
<!-- 视频标签 -->
<video src="xxx.mp4" controls autoplay loop poster="xxx"></video>
</body>
三、智能表单
input标签的type属性新增了email、number、url、range、search、color、time、date、month、week等，更加智能，可以作一些简单的验证
代码及运行效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form>
邮件: <input type="email" required /> <br />
数字: <input type="number" min="0" max="10" step="2" /> <br />
地址: <input type="url" /> <br />
滑块: <input type="range" step="10" /> <br />
搜索: <input type="search" /> <br />
颜色: <input type="color" /> <br />
时间: <input type="time" /> <br />
时间: <input type="date" /> <br />
月份: <input type="month" /> <br />
周数: <input type="week" /> <br />
本地时间: <input type="datetime-local" /> <br />
<input type="submit" />
</form>
</body>
</html>
四、input标签新增属性
placeholder 未输入时的提示文本
autofocus 自动聚焦
autocomplete 历史记录，前提条件是需要form标签和提交按钮
novalidate 取消验证
Multiple 表示可以输入多个值
pattern 验证表单 属性值是正则表达式
代码运行及效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form action="">
<input
type="text"
placeholder="请输入你的姓名..."
autofocus
autocomplete="on"
name="history"
/>
<br />
<input type="file" multiple />
<hr />
<!--
验证qq号码 5~11
- 纯数字
- 第一位不能为0
-->
<input type="text" pattern="[1-9][0-9]{4,10}" />
<input type="submit" />
</form>
</body>
</html>
五、选项列表
datalist标签id属性，与input标签list属性值绑定，就可以实现选项列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<input type="text" list="box" />
<datalist id="box">
<option value="http://xxx">4399</option>
<option value="http://xxx">百度</option>
<option value="http://xxx">小游戏</option>
<option value="http://xxx">学习</option>
</datalist>
</body>
</html>
本文标签： 标签
版权声明：本文标题：html5标签总结 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725689758a1036947.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论