H5基础
-
概念：html第五个版本，2014年发布，其中包含一些前端新特性
-
新特性（面试题）：
- 音频视频标签
- 语义化标签
- 表单控件增强
- 本地存储技术
- canvas（绘图技术）
- 地图api
- 拖拽
- 新增视口类型
- 。。。
语义化标签
-
概念：通过语义化含义进行标签的命名
<header>header</header> <main>main</main> <footer>footer</footer> -
常用语义化标签
| 标签名 | 描述 |
|---|---|
<header> | 代表网页的头部 |
<main> | 代表网页的主体内容，页面上有且仅有一个 |
<footer> | 代表网页的尾部 |
<nav> | 代表导航区域 |
<aside> | 代表侧边栏，可以放侧边导航或者推荐信息等等 |
<article> | 代表网页中一个独立的区域，存放内容 |
<section> | 代表网页中一个模块 |
<thead> | 代表表格的头部 |
<tbody> | 代表表格的内容 |
<tfoot> | 代表表格的尾部 |
<video> | 视频 |
<audio> | 音频 |
<canvas> | 画布 |
-
优点：
- 易于阅读、后期维护方便
- 利于SEO优化
- 方便其他设备解析
表单控件增强
<!-- h5新特性 -->
<!-- 数字输入框 -->
<input type="number">
<!-- 地址框 -->
<input type="url">
<!-- 邮箱 -->
<input type="email">
<!-- 搜索框 -->
<input type="search">
<!-- 颜色 -->
<input type="color">
<!-- 范围 -->
<input type="range" max="20" min="0" name="range">
<!-- 时间控件 -->
<!-- 年月日 -->
<input type="date">
<!-- 年月 -->
<input type="month">
<!-- 年周 -->
<input type="week">
<!-- 时分 -->
<input type="time">
<!-- 年月日时分 -->
<input type="datetime-local">
<!-- 数据列表 -->
<input type="text" list="demo">
<datalist id="demo">
<option value="小米手机">
<option value="小米耳机">
<option value="华为平板">
<option value="华为电脑">
</datalist>
<!-- 文件上传 multiple:多选文件--><input type="file" multiple>
