H5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
main{
height: 600px;
border: solid 1px red;
}
</style>
</head>
<body>
<!-- H5新标签 -->
<header>头</header>
<main>主体
<meter max="20" value="1">进度条</meter>
<progress max="20" value="1"></progress>
</main>
<footer>底部</footer>
<nav>导航</nav>
<aside>侧导航</aside>
<!-- 组合标签 -->
<figure>图片
<figcaption>图片标题</figcaption>
</figure>
</body>
</html>
表单
<!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>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>基本信息</legend>
邮箱:<input type="email" name="" id=""><br>
电话:<input type="tel" name="" id=""><br>
网址:<input type="url" name="" id=""><br>
数量:<input type="number" name="" id=""><br>
搜索:<input type="search" name="" id=""><br>
滑块:<input type="range" name="" id=""><br>
时分秒:<input type="time" name="" id=""><br>
日期框:<input type="date" name="" id=""><br>
全部的日期:<input type="datetime-local" name="" id=""><br>
月:<input type="month" name="" id=""><br>
星期:<input type="week" name="" id=""><br>
<!-- 下拉框 -->
<!-- 需要id和list保持一致,如果value和文字不一样,下拉框会出现多个值 -->
<input list="city">
<datalist id="city">
<option value="上海">上海</option>
<option value="2">北京</option>
<option value="郑州">郑州</option>
</datalist>
<!-- 新属性:
placeholder:提示
required:必填写
pattern:匹配正则
autofocus:加载完成时自动获得焦点
tabindex:指定获取焦点的顺序
accesskey='u' 默认alt+* 设置快捷键
data-*='' 手动添加属性
-->
<!-- 多文件上传 以正文上传-->
<input type="file" multiple>
</fieldset>
</form>
</body>
</html>
多媒体
<!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>Document</title>
</head>
<body>
<!-- 插入音频 -->
<audio src=""></audio>
<!-- 属性:
src 路径
controls 控制
autoplay 自动播放
loop 循环播放
-->
<!-- 插入视频 -->
<video src=""></video>
<video controls>
<source src="">
</video>
</body>
</html>
字体图标库
<!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>Document</title>
</head>
<body>
<!-- 字体图标
1.去阿里/bootstrap字体图标库
2.选中想要的图片,加入购物车,下载代码
3.把生成的代码复制在style中,可以修改路径,引用哪个就把相对应的字体代码放标签里
4.放大不失真,可以像字体一样调大小
-->
</body>
</html>