为什么使用新标签?
为了语义化。
语义化好处:去掉样式能让页面结构清晰呈现
有益于SEO
便与团队开发和维护
一、结构标签
article 定义文章
aside 定义文章的的侧边栏
section 定义文档中的某个区域
nav 定义导航部分
header 头部信息
footer 底部信息
details 定义展开详细内容
figure 定义一组媒体元素及文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新的结构标签</title>
</head>
<body>
<nav>
<ul>
<li>105个男人与3个女人的故事</li>
<li>一群男人的故事</li>
<li>一群女人与一个男人的故事</li>
<li>一个和尚的故事</li>
</ul>
</nav>
<article>
<h1>105个男人与3个女人的故事</h1>
<aside>
<ul>
<li>风雪山神庙</li>
<li>大郎,该吃药了!</li>
<li>智取生辰纲</li>
</ul>
</aside>
<section>
<header>
林冲,鲁智深,武松,宋江,李逵,戴宗,燕青,柴进
</header>
<main>
有很多段故事
</main>
<footer>
总结
</footer>
</section>
</article>
<em></em>
<strong></strong>
<details>
<p>欲知详情,请见下回分晓!</p>
</details>
<figure>
<img src="img/qq.png" alt="">
<figcaption>这个是qq</figcaption>
</figure>
<!-- H5新标签:标签语义化 -->
<!-- 为什么,作用,好处? -->
</body>
</html>
二、表单元素
date 日期
time 时间
url
number
range 输入一定范围内的数字值
属性: placeholder 提示文字
required 定义该input为必填项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>new form</title>
</head>
<body>
<form action="">
日期
<input type="date">
<br>
时间
<input type="time">
<br>
邮箱
<!-- required 必须填写 -->
<input required type="email" name="" id="">
<br>