HTML5

标签语义化

语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。
　　传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。
　　HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。
　　此章节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。

  • 传统网页布局：
    <!-- 头部 -->
    <div class="header">
         <ul class="nav"></ul>
    </div>
      <!-- 主体部分 -->
      <div class="main">
         <!-- 文章 -->
      <div class="article"></div>
      <!-- 侧边栏 -->
      <div class="aside"></div>
      </div>
       <!-- 底部 -->
      <div class="footer"></div>
  • H5 经典网页布局:
<!-- 头部 -->
<header>
    <ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
   <!-- 文章 -->
   <article></article>
   <!-- 侧边栏 -->
   <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>

常用新语义标签

<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较
<mark> 表示标记 (带用“UI”，不怎么用)
<progress> 表示进度 (带用“UI”，不怎么用)
<time> 表示日期
　　本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于 <nav>。不要好奇，它只是一个标签！
　　尽量避免全局使用header、footer、aside等语义标签。

兼容处理

(我们在测试ie 的兼容的时候，有一个叫做ietest 的软件，这个软件可以模拟ie6-ie11)
　　在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->

表单

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
　　此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差异，其兼容性较差。

输入类型 (表单类型，表单元素，表单属性,表单事件.)

email 输入email格式
tel 手机号码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 不是绝对的
--datetime 时间日期
month 月份
week 星期
　　部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

表单元素（标签）

  • <datalist> 数据列表
    与input 配合使用
  <input type=”text” list=”data”>
 <datalist id=”data”>
   <option>男</option>
   <option>女</option>
   <option>不详</option> 
</datalist>
  • <keygen> 生成加密字符串
  • keygen 元素的作用是提供一种验证用户的可靠方法。
  • keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键， 一个是私钥，一个公钥。
  • 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<output>   不可当做数据提交？
<meter>   表示度量器，不建议用作进度条
<meter  value="81"    min="0" max="100"  low="60"  high="80" />

Max-width
Min-width

  • <progress></progress>进度条
<head>
    <meta charset="UTF-8">
    <title>应用程序标签</title>
    <style type="text/css">
        .myp{
            -webkit-appearance:none;/*取消默认样式*/
            /*background-color: red;*/
        }
        .myp::-webkit-progress-bar{
            background-color: red;
        }
    </style>
</head>
<body>
    <progress value="20" max="100" class="myp"></progress>
</body>
</html>

表单属性

placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭验证，可用于<form>标签
required 必填项
pattern 正则表达式 验证表单
手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">
表单重写没有提及，自行验证，共包含
应用于提交按钮上，如：<input type="submit" formaction="xxx.php">

表单事件

oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发

常见的链接关系表

关系 含义
alternate 文档的可选版本（例如打印页、翻译页或镜像）
stylesheet 文档的外部样式表
start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
contents 文档目录
index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接
licence 一般用于文献，表示许可证的含义
tag 标签集合
friend 友情链接

结构数据标记

<div itemscope itemtype="http://example.com/hello">
  <p>我叫<span itemprop="主人">汪磊</span>。</p>
  <p>
    我养了一条叫
    <span itemprop="狗名">旺财</span>的
    <span itemprop="品种">金毛</span>犬。
  </p>
</div>

很高级的东西，只有Google支持

aria 属性

Accessible Rich Internet Application (无障碍富互联网应用程序)
主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页
不仅仅是为了盲人用户，更多语义化

WAI-ARIA无障碍网页应用属性完全展示
ARIA让视障人士更了解你的页面

自定义属性 data-*

通过DOM存储与DOM对象强相关的数据

<ul id="users">
  <li data-id="1" data-age="18" data-gender="true">张三</li>
  <li data-id="2" data-age="18" data-gender="false">李四</li>
  <li data-id="3" data-age="18" data-gender="true">王二</li>
</ul>
  • 获取自定义属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul id="ul"></ul>
</body>
<script type="text/javascript">
    // 键是ID 值是信息
    var data = {
        01: {
            name: "张三1",
            age: 18
        },
        02: {
            name: "张三2",
            age: 19
        },
        03: {
            name: "张三3",
            age: 20
        }
    };
    var ul = document.getElementById("ul");
    for(var key in data){
        var item = data[key];
        var liElement = document.createElement("li");
        liElement.appendChild(document.createTextNode(item.name));
        liElement.setAttribute("data-age",item.age);
        liElement.setAttribute("data-id",key);
        ul.appendChild(liElement);

        liElement.addEventListener("click", function () {
            console.log(this.dataset);
            alert(this.dataset["age"]);
        });
    }
</script>
</html>

JavaScript-DOM扩展

新选择器

JS多了一个原始支持，类似jquery的DOM选择器

  • document.querySelector(selector);
    返回第一个满足选择器条件的元素 一个dom对象
  • document.querySelectorAll('.item');
    返回所有满足该条件的元素 一个元素类型是dom类型的数组
  • $('.item')
  • 返回一个jQuery对象（dom元素的数组）
  • 本质上jquery方式和qs方式都是获取DOM数组， 只不过jquery会多一些其他成员
  • $('.item').on和document.querySelectorAll('.item').addEventListener
    DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册
  • h5就是将我们经常需要的操作又包装一层
  • querySelector已经非常接近jquery的选择器了
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
</ul>
</body>
<script type="text/javascript">
    var qs = document.querySelector(".item");
    console.log(qs);//第一个li

    var qsa = document.querySelectorAll(".item");
    console.log(qsa);//6个li

    var all = document.querySelectorAll("ul>.item");//也支持
    console.log(all);//6个li
</script>
</html>

类名操作

  1. 新H5中DOM对象多了一个classList属性，是一个数组
  2. add 添加一个新的类名
  3. remove 删除一个的类名
  4. contains 判断是否包含一个指定的类名
  5. toggle 切换一个class element.toggle('class-name',[add_or_remove])
  6. toggle函数的第二个参数true为添加 false删除

1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切换class，有则移除，无则添加
4、Node.classList.contains('class') 检测是否存在class
Node指一个有效的DOM节点，是一个通称。

访问历史 API

界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态
在HTML5中可以通过window.history操作访问历史状态，让一个页面可以有多个历史状态

  1. window.history.forward(); // 前进
  2. window.history.back(); // 后退
  3. window.history.go(); // 刷新
  4. 通过JS可以加入一个访问状态
  5. history.pushState(放入历史中的状态数据, 设置title(现在浏览器不支持)， 改变历史状态)

全屏 API

HTML5规范允许用户自定义网页上任一元素全屏显示。
　requestFullscreen() 开启全屏显示
　cancleFullscreen() 关闭全屏显示
不同浏览器需要添加前缀如：
　webkitRequestFullScreen、mozRequestFullScreen
　webkitCancleFullScreen、mozCancleFullScreen
通过document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
　document.webkitIsFullScreen、document.mozFullScreen
全屏伪类
　:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

var docElm = 需要全屏的元素;
    if (docElm.requestFullscreen) {
       docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
       docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
       docElm.webkitRequestFullScreen();
    }

Web存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
Storage 存储
window.sessionStorage
window.localStorage
(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面.)

特性

1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享

window.localStorage

1、永久生效，除非手动删除
2、可以多窗口共享

方法详解

setItem(key, value)设置存储内容
getItem(key)读取存储内容
removeItem(key)删除键值为key的存储内容
clear()清空所有存储内容
key(n)以索引值来获取存储内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" id="input"/>
    <button>存储</button>
    <button>获取</button>
    <button>更新</button>
    <button>删除</button>
    <button>清除</button>
</body>
    <script type="text/javascript">
        //在h5中提供两种web存储方式
        //sessionStorage 5M
        //localStorage 20M
        var text = document.getElementById("input");
        var btns = document.getElementsByTagName("button");
        btns[0].onclick = function () {
            var val = text.value;
            window.sessionStorage.setItem("name",val);
            window.sessionStorage.setItem("age",23);
        }
        btns[1].onclick = function () {
            var val = window.sessionStorage.getItem("name");
            alert(val);
        }

        btns[2].onclick = function () {
            window.sessionStorage.setItem("name","这是更新的值");
        }
        btns[3].onclick = function () {
            window.sessionStorage.removeItem("name");
        }
        btns[4].onclick = function () {
            window.sessionStorage.clear();
        }
    </script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" id="input"/>
    <button>存储</button>
    <button>获取</button>
    <button>更新</button>
    <button>删除</button>
    <button>清除</button>
</body>
    <script type="text/javascript">
        //localStorage
        //数据存储在硬盘上，永久生效
        //20M
        var text = document.getElementById("input");
        var btns = document.getElementsByTagName("button");
        btns[0].onclick = function () {
            window.localStorage.setItem("userName",text.value);
            window.localStorage.setItem("age",23);
        }
        btns[1].onclick = function () {
            var val = window.localStorage.getItem("userName");
            alert(val);
        }

        btns[2].onclick = function () {
            window.localStorage.setItem("userName","这是更新的值");
        }
        btns[3].onclick = function () {
            window.localStorage.removeItem("userName");
        }
        btns[4].onclick = function () {
            window.localStorage.clear();
        }
    </script>
</html>

其它

WebSQL、IndexDB
已经被w3c 放弃了..
生命周期差异，存储空间差异
WebSQL、IndexDB

拖拽

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

  • 拖拽元素
    页面中设置了draggable="true"属性的元素
  • 目标元素
    页面中任何一个元素都可以成为目标元素
  • 事件监听
    拖拽元素
    ondrag 应用于拖拽元素，整个拖拽过程都会调用
    ondragstart 应用于拖拽元素，当拖拽开始时调用
    ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
    ondragend 应用于拖拽元素，当拖拽结束时调用
    目标元素
    ondragenter 应用于目标元素，当拖拽元素进入时调用
    ondragover 应用于目标元素，当停留在目标元素上时调用
    ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
    ondragleave 应用于目标元素，当鼠标离开目标元素时调用
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .two{
            position: absolute;
            left: 30%;
            top: 40%;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="box" draggable="true" id="box"></div>
    <div class="two" id="two"></div>
</body>
<script type="text/javascript">
    var box = document.getElementById("box");
    var two = document.getElementById("two");
    box.ondragstart = function () {
        console.log("拖拽开始");
    }
    box.ondragleave = function () {
        console.log("鼠标离开拖拽元素");
    }
    box.ondragend = function () {
        console.log("拖拽结束");
    }

    //目标元素
    two.ondragenter = function () {
        console.log("拖拽元素进入");
    }
    //当拖拽元素在目标元素上 是连续触发
    two.ondragover = function (e) {
        console.log("停留在目标元素上");
        e.preventDefault();//没有这句，ondrop不会调用
    }
    two.ondrop = function () {
        console.log("在目标元素上松开鼠标");
    }
    two.ondragleave = function () {
        console.log("鼠标离开目标元素");
    }
</script>
</html>

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .one{
            width: 400px;
            height: 300px;
            border:1px solid #999;
            margin: 50px 0 0 50px;
        }
        .red{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50px;
            text-align: center;
            line-height: 100px;
            display: inline-block;
            margin-right: -4px;
        }
        .two{
            position: absolute;
            left: 50%;
            top: 50%;
            border:1px solid #999;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="red" draggable="true">1</div>
        <div class="red" draggable="true">2</div>
        <div class="red" draggable="true">3</div>
        <div class="red" draggable="true">4</div>
        <div class="red" draggable="true">5</div>
        <div class="red" draggable="true">6</div>
        <div class="red" draggable="true">7</div>
        <div class="red" draggable="true">8</div>
    </div>
    <div class="two">

    </div>
</body>
<script type="text/javascript">
    var boxs = document.querySelectorAll(".one div");
    var two = document.querySelector(".two");

    var temp = null;
    for(var i=0;i<boxs.length;i++){
        boxs[i].ondragstart = function () {
            temp = this;
        }
        boxs[i].ondragend = function () {
            temp = null;
            console.log("end");
        }
    }
    two.ondragover = function (e) {
        e.preventDefault();
    }
    two.ondrop = function () {
        this.appendChild(temp);
        console.log("drop");
    }
</script>
</html>

网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值
　　window.online用户网络连接时被调用
　　window.offline用户网络断开时被调用

window.addEventListener("online",function(){
         alert("已经建立了网络连接")
    })
   window.addEventListener("offline",function(){
         alert("已经失去了网络连接")
   })

应用缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

优势

1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担

缓存清单

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。

manifest文件格式

1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)
换行 当被缓存的文件找不到时的备用资源 可自行查阅资料

index.html

<!DOCTYPE html>
<html manifest="index.appcache">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        ![](http://upload-images.jianshu.io/upload_images/2798071-3fc8fdb601260b27.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </div>
</body>
</html>

index.appcache

CACHE MANIFEST

# 注释以#开头
#下面是要缓存的文件

CACHE:
    http://image.tianjimedia.com/uploadImages/2015/204/22/YMG9CAUWUM15.jpg
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,711评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,079评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,194评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,089评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,197评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,306评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,338评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,119评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,541评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,846评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,014评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,694评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,322评论 3赞 318
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,026评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,257评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,863评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,895评论 2赞 351

推荐阅读更多精彩内容

  • HTML5
    1、HTML5:HTML4.1网页开发：结构: html4.0样式：css css2行为：jsHTML5:是HTM...
    Yuann阅读 880评论 0赞 2
  • 09-HTML5新特性
    前言 认识HTML5 之前学的是HTML4或者HTML4.1； 网页开发： html：结构 4.0 Css：样式...
    magic_pill阅读 422评论 0赞 2
  • HTML5
    HTML5 第一章 HTML5概述 H5是下一代的web开发的基础. 1.1 web技术发展时间线 1991 HT...
    whitsats阅读 1,034评论 0赞 0
  • [前端学习]HTML5部分学习笔记，第一天
    HTML5介绍 H5并不是新语言，而是HTML的第五次重大修改(版本)，移动端支持优于PC端 所有主流浏览器都支持...
    印象rcj阅读 560评论 0赞 0
  • 关于HTML/HTML5（二）
    接上 关于HTML/HTML5（一）http://www.jianshu.com/p/33fc7840c079 学...
    Amyyy_阅读 787评论 0赞 4