首页

# H5 的新的设计理念

  1. 避免不必要的复杂性 - 在做减法

  2. 支持已有内容–完全向下兼容，H5 的语法还更加宽松些

  3. 新增语义化元素，给内容分区

  4. 减少脚本操作（input type:number,range,search,email;placeholder）

H5 在 PC 端需要考虑兼容问题，在移动端则可以放心的使用，移动端是必须，PC 端是首选

# H5 是革命性的变化

  1. 新增语义化标签，给内容分区（今天）
  2. 新增了表单控件，减少不必要的脚本操作（学）
  3. canvas 画图 - 2 次课
  4. 多媒体标签（音频、视频）- 自定义播放器 1 次课
  5. 本地存储（离线存储 - 多页面通信） 1 次课
  6. 地理定位（本地服务） 1 次课

# 语义化标签有什么用

H5 的语义化标签分两部分：布局标签 + 功能型标签。

  1. 可维护性更强–开发

  2. SEO–搜索引擎优化–自然流量–标签，

    百度蜘蛛 - 爬虫会定时抓取各个网站的内容。

    SEO - 推销产品，让尽可能多的人知道。站内、站外

# 学习 H5 需要注意的问题

  1. PC 端低版本浏览器（IE9 即以下）不支持 H5 的新特性
    如果要开发针对低版本浏览器，需要使用之前的标签

    PC 端是主流，而不是必选，就在于兼容性问题

  2. 移动端则不需要考虑以上问题，可以任意使用。也就是移动端是必选。

# 如何解决兼容性问题

只能解决布局型的新标签。对于功能型新标签则无解。因为浏览器本身就不支持。

条件注释语句，即只针对特定的浏览器生效，该语句主要是针对 IE 浏览器，只有 IE 可以使用，其他浏览器无效。

在条件注释语句中可以放其他的代码

  1. 手动模式

    要支持的标签不多的情况下。可以手动写。先写样式，再写 JS，然后将代码使用条件注释包裹起来

  2. 使用插件

    要支持所有的布局标签。直接导入一个插件即可。

开发时到底是以低版本浏览器为主还是以高版本浏览器为主

  1. 渐进增强。
    保守式的开发，在开发时，使用没有兼容性问题的标签，新的标签只是作为锦上添花，不考虑所有的设备都支持。适用于要给低版本浏览器开发时使用的方案。比如要针对低版本浏览器时。
  2. 优雅降级。
    激进式的开发，所有的都用最新的最好的技术和标签来开发，而不用考虑兼容性问题，只保证那些低版本浏览器可用（不保证效果和好用）。适用于高版本浏览器和移动端。

# 手动解决兼容性问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 手动如何解决兼容性问题 -->
    <!-- 1、写样式 
    lt  小于
    gt  大于
    lte 小于等于
    gte 大于等于
    -->
    <!--[if lt IE 9]> 

    <style type="text/css">
        header,footer,section,nav,aside,article{
            display: block;
        }
    </style>
    <![endif]-->
    <!-- 2、写JS -->
    <!--[if lt IE 9]> 
    <script>
        document.createElement("header");
        document.createElement("footer");
        document.createElement("section");
        document.createElement("nav");
        document.createElement("aside");
    </script>
    <![endif]-->
</head>
<body>
    <header>
        IE8及不支持
    </header>
     <footer>
        IE8及不支持
    </footer>
</body>
</html>

# 引入插件解决兼容性问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 如何解决兼容性问题 导入一个插件-->
    <!--[if lt IE 9]> 
    <script src="html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        IE8及不支持，可以通过JS来解决
    </header>
     <footer>
        IE8及不支持，可以通过JS来解决
    </footer>
</body>
</html>