12.html-h5新增的各种东西

最新推荐文章于 2025-06-10 19:25:27 发布

原创最新推荐文章于 2025-06-10 19:25:27 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了HTML5中新增的结构标签，如<header>、<nav>、<section>等，用于提升网页的语义化。同时，详细讲解了新增的datalist元素，用于创建下拉选项列表，以及input类型的多种新属性，如[type='url']、[type='number']等，增强了表单输入的交互性和数据验证功能。此外，还提及了input的属性，如autofocus、required等，提升了用户体验。

h5新增的结构标签：
<header style="height: 50px; background-color: blueviolet;" >定义网页的头部</header>
<nav style="height: 50px; background-color: blue;">定义网页的导航区域</nav>
<div class="left" style="float: left; width: 70%;" >
<section style="height: 400px; width: 100%; background-color: chartreuse;">定义网页的区段</section>
<article style="height: 200px; width: 100%; background-color: aqua;">定义网页的独立区域</article>
</div>
<aside style="height: 600px; width: 30%; background-color: black; float: right;" >定义网页的侧边栏</aside>.
<footer style="height: 50px; background-color: red ">定义网页的底部</footer>

h5新增的datalist：
<input type="text" list="names">
<datalist id="names">
<option value="11">张三</option>
<option value="12">李四</option>
<option value="13">王麻子</option>
<option value="14">嘤嘤嘤</option>
</datalist>

h5新增的input的type属性值：
地址：<input type="url" name="" id="">
数字：<input type="number" name="" id="">
搜索框：<input type="search" name="" id="">
滑块：<input type="range" name="" id="">
小时分钟：<input type="time" name="" id="">
年月日：<input type="date" name="" id="">
年月：<input type="month" name="" id="">
年星期：<input type="week" name="" id="">
邮箱：<input type="email" name="" id="">
颜色：<input type="color" name="" id="">
显示：<input type="show">
隐藏：<input type="hidden">
手机号：<input type="tell" name="" id="">

h5新增的input的属性：
用户名：<input type="text" placeholder="请输入用户名">
自动聚焦：<input type="" autofocus>
必填项：<input type="text" name="" id="" required>
多文件上传：<input type="file" name="" id="" multiple>
alt+字母聚焦：<input type="text" accesskey="k">
自动完成输入：<input type="text" name="suto" autocapitalize="on">