1.新增布局标签
header 整个页面,或部分区域的头部
footer 整个页面,或部分区域的底部
nav 导航
artical 文章、帖子、杂志、新闻、博客、评论等
section 页面中的某段文字,或文章中的某段文字(里面文字通常里面会包含标题)
aside 侧边栏
2.新增状态标签

image.png
<span>手机电量:</span>
<meter max="100" value="70" low="10" high="20" optimum="90"></meter>
<span>当前进度:</span>
<progress max="100" value="20"></progress>

image.png
3.新增列表标签

image.png
<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>
<br>
<details>
<summary>问题</summary>
<p>对于问题的解释</p>
</details>

image.png

image.png
4.新增文本标签
4.1 文本注音
ruby 包裹需要注音的文字
rt 写注音,rt标签写在ruby的里面
<ruby>
<span>尚硅谷</span>
<rt>shàng guī gǔ</rt>
</ruby>

image.png
4.2 文本标记
mark
5.表单相关的新增
5.1新增表单控件属性
placeholder="" 提示文字
required 必填
autofocus 自动获取焦点
autocomplete="" 值为on/off
pattern="正则表达式" 与required配合
5.2input新增的type属性值

image.png
<form action="" novalidate>
<div>
邮箱:
<input type="email" name="email">
</div>
<div>
url:
<input type="url" name="url">
</div>
<div>
数值:
<input type="number" name="number" step="2">
</div>
<div>
搜索:
<input type="search" name="keyword">
</div>
<div>
电话:
<input type="tel" name="phone">
</div>
<div>
范围:
<input type="range" name="range" max="80" min="0" value="22">
</div>
<div>
颜色选择器:
<input type="color" name="color">
</div>
<div>
日期:
<input type="date" name="date">
月份:
<input type="month" name="month">
周:
<input type="week" name="week">
时间:
<input type="time" name="time">
日期+时间:
<input type="datetime-local" name="time2">
</div>
<button>提交</button>
</form>

image.png
6.新增多媒体标签
video
audio