html+css基础：18、html5的新增语义化标签(布局标签、状态标签、列表标签、文本标签)和表单相关的新增(表单控件属性、input新增type属性值)
HTML5新增了多种语义化标签和表单功能。布局标签包括header、nav、aside、article、footer等，帮助构建更清晰的页面结构。状态标签如meter和progress可直观展示数值和进度。列表标签datalist提供下拉选项，details实现可折叠内容。文本标签ruby支持注音，mark高亮文本。表单新增了required、autofocus、autocomplete、patt
·
html5的新增语义化标签的布局标签、状态标签、列表标签、文本标签及表单相关的新增的表单控件属性、input新增type属性值等：
Ⅰ、新增的布局标签：header、nav、aside、article、footer
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_新增布局标签</title>
</head>
<body>
<!-- 头部 -->
<header class="page-header">
<h1>尚品汇</h1>
</header>
<hr>
<!-- 主导航 -->
<nav>
<a href="#">首页</a>
<a href="#">订单</a>
<a href="#">购物车</a>
<a href="#">我的</a>
</nav>
<!-- 主要内容 -->
<div class="page-content">
<!-- 侧边栏导航 -->
<aside style="float: right;">
<nav>
<ul>
<li><a href="#">秒杀专区</a></li>
<li><a href="#">会员专区</a></li>
<li><a href="#">领取优惠券</a></li>
<li><a href="#">品牌专区</a></li>
</ul>
</nav>
</aside>
<!-- 文章 -->
<article>
<h2>《如何一夜暴富》</h2>
<section>
<h3>第一种方式：通过做梦</h3>
<p>你要这么做梦：xxxxxxxxxxxxxxxxxxxxxxx</p>
</section>
<section>
<h3>第二种方式：通过买彩票</h3>
<p>你要这么买彩票：xxxxxxxxxxxxxxxxxxxxxxx</p>
</section>
<section>
<h3>第三种方式：通过学习前端</h3>
<p>你要来到好好好
学前端：xxxxxxxxxxxxxxxxxxxxxxx</p>
</section>
</article>
</div>
<hr>
<footer>
<nav>
<a href="#">友情链接1</a>
<a href="#">友情链接2</a>
<a href="#">友情链接3</a>
<a href="#">友情链接4</a>
</nav>
</footer>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
Ⅱ、新增的状态标签：meter、progress
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_新增状态标签</title>
<style>
progress {
width: 50px;
}
</style>
</head>
<body>
<span>手机电量：</span>
<meter max="100" min="0" value="90" low="10" high="20" optimum="90"></meter>
<br>
<span>当前进度：</span>
<progress max="100" value="20"></progress>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
Ⅲ、新增的列表标签：datalist(option)、details(summary)
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_新增列表标签</title>
</head>
<body>
<form action="#">
<input type="text" list="mydata">
<button>搜索</button>
</form>
<datalist id="mydata">
<option value="周杰伦">周杰伦</option>
<option value="周冬雨">周冬雨</option>
<option value="马冬梅">马冬梅</option>
<option value="温兆伦">温兆伦</option>
</datalist>
<hr>
<details>
<summary>如何一夜暴富？</summary>
<p>来到好好学习前端</p>
</details>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
// 选中并点击后的页面展示：
Ⅳ、新增的文本标签：ruby(rt)、mark
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_新增文本标签</title>
</head>
<body>
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
<hr>
<div>
<ruby>
<span>魑</span>
<rt>chī</rt>
</ruby>
<ruby>
<span>魅</span>
<rt>mèi</rt>
</ruby>
</div>
<hr>
<p>Lorem ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Laboriosam, nemo?</p>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
Ⅴ、新增的表单控件属性：required、autofocus、autocomplete、pattern
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_新增的表单控件属性</title>
</head>
<body>
<form action="">
账号：<input
type="text"
name="account"
placeholder="请输入账号"
required
autofocus
autocomplete="on"
pattern="\w{6}"
>
<br>
密码：<input type="password" name="pwd" placeholder="请输入密码" required pattern="\w{6}">
<br>
性别：
<input type="radio" value="male" name="gender" required>男
<input type="radio" value="female" name="gender">女
<br>
爱好：
<input type="checkbox" value="smoke" name="hobby">抽烟
<input type="checkbox" value="drink" name="hobby" required>喝酒
<input type="checkbox" value="perm" name="hobby">烫头
<br>
其他：<textarea name="other" placeholder="请输入密码" required pattern="\w{6}"></textarea>
<br>
<button>提交</button>
</form>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
Ⅵ、input新增的type属性值：email、url、number、search、tel、range、color、date、month、week、time、datetime-local
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_input新增的type属性值</title>
</head>
<body>
<form action="" novalidate>
邮箱：<input type="email" required name="email">
<br>
url：<input type="url" required name="url">
<br>
数值：<input type="number" required name="number" step="2" max="80" min="20">
<br>
搜索：<input type="search" required name="keyword">
<br>
电话：<input type="tel" required name="phone">
<br>
光照强度：<input type="range" name="range" max="80" min="20" value="22">
<br>
颜色：<input type="color" name="color">
<br>
日期：<input type="date" required name="date">
<br>
月份：<input type="month" required name="month">
<br>
周：<input type="week" required name="week">
<br>
时间：<input type="time" required name="time">
<br>
日期+时间：<input type="datetime-local" required name="time2">
<br>
<button>提交</button>
</form>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
Ⅶ、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
13
0- 0
已为社区贡献4条内容
所有评论(0)