目录
一、HTML5的基础知识
1. html5适用于移动端、PC端都可以
2. 移动端使用相对单位 rem em
3. 移动端布局：flex（弹性布局） 多列布局 也可以使用固定布局
4. html5 移动端自适应 meta标签
5. css3里面有媒体查询（根据不同屏幕分辨率，去添加不同的样式）：根据分辨率不同加载不同的效果
6. html5与html4的区别 +html5语义化更明确
html4：div header
html5: header footer section
二、浏览器的兼容性问题
- 如果浏览器不识别html5 可以做兼容性处理：使用csshack 来写（IE9以下版本对html5的支持不太好）
<!--[IF lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- 作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
- 国内用户请使用本站静态资源库（Google 资源库在国内不稳定），下面这个是国内的静态资源库 处理方案更好
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
三、.HTML新元素
1. canvas
- 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API （绘图元素，后面js会使用canvas api来绘图）
- canvas结合cocos2d游戏引擎可以做网页游戏开发，还可以绘制网页特效
2.新多媒体元素
（1）audio 音频播放器
（2）video 视频播放器
（3）source标签 类似src属性
属性：autoplay 自动播放 controls 控制器 loop 循环播放 muted 静音
3.新的表单元素
datalist 与input联用 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<input type="text" list="put"/> <datalist id="put"> <option>1</option> <option>12</option> <option>123</option> <option>1234</option> <option>12345</option> <option>123456</option> </datalist>output 类似span 输出
4.表单新更新的属性
- autucomplete：on（开启表单输入智能提示） off（关闭智能提示）
浏览器默认存在这个属性
<form action="demo-form.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>
form form 属性规定输入域所属的一个或多个表单。
<form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> <input type="text" name="lname" form="form1">
- multiple属性
multiple 属性是一个 boolean 属性.
multiple 属性规定<input> 元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file:
Select images: <input type="file" name="img" multiple>
- pattern属性
pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password
<form action="demo-form.php"> Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <input type="submit"> </form>
显示了一个只能包含三个字母的文本域（不含数字及特殊字符）
5.新的语义和结构元素
- article 定义页面独立的内容区域。相当于div
- aside 定义页面的侧边栏内容。
- bdi 允许您设置一段文本，使其脱离其父元素的文本设置。相当于span
- details 用于描述文档或文档某个部分的细节
- summary 标签包含 details 元素的标题
<details> <summary>个人信息</summary> <p> 新的语义和结构元素 article 定义页面独立的内容区域。相当于div aside 定义页面的侧边栏内容。 bdi 允许您设置一段文本，使其脱离其父元素的文本设置。相当于span </p> </details>
- dialog 定义对话框，比如提示框
- header 定义头部区域
- footer 定义底部区域
- mark 突出显示
- nav 定义导航的部分
- meter 进度条（仅用于已知最大和最小值的度量）
<meter value="10" max="100"></meter>
- progress 定义任何类型的任务的进度条
- section 定义文档中的节（section、区段）
- time 定义日期或时间
6. input里面新出的HTML5属性
- <input type = "color"/> 颜色提取器
- <input type = "date"/>
- <input type = "datetime-local"/>
- <input type = "email"/>
- <input type = "month"/>
- <input type = "range"/>
- <input type = "week"/>
四、SVG矢量图的使用
1. 什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
2. SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
3. SVG的使用
<h1>My first SVG</h1> <svg xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
4. SVG的路径
<path> 元素用于定义一个路径。
下面的命令可用于路径数据：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
