HTML5

標簽語義化

語義標簽對于我們并不陌生勺卢，如<p>表示一個段落轻庆、<ul>表示一個無序列表<h1> ~ <h6>表示一系列標題等氮双，在此基礎上HTML5增加了大量更有意義的語義標簽昭伸，更有利于搜索引擎或輔助設備理解HTML頁面內(nèi)容布隔。
　　傳統(tǒng)的做法我們或許通過增加類名如class="header"离陶、class="footer"，使HTML頁面具有語義性衅檀，但是不具有通用性招刨。
　　HTML5則是通過新增語義標簽的形式來解決這個問題，例如<header></header>哀军、<footer></footer>等沉眶，這樣就可以使其具有通用性。
　　此章節(jié)學習目的為了解增加語義標簽的目的杉适，以及各語義標簽所表達的意義谎倔，在網(wǎng)頁布局中能夠合理使用標簽。

傳統(tǒng)網(wǎng)頁布局：

    <!-- 頭部 -->
    <div class="header">
         <ul class="nav"></ul>
    </div>
      <!-- 主體部分 -->
      <div class="main">
         <!-- 文章 -->
      <div class="article"></div>
      <!-- 側(cè)邊欄 -->
      <div class="aside"></div>
      </div>
       <!-- 底部 -->
      <div class="footer"></div>

H5 經(jīng)典網(wǎng)頁布局:

<!-- 頭部 -->
<header>
    <ul class="nav"></ul>
</header>
<!-- 主體部分 -->
<div class="main">
   <!-- 文章 -->
   <article></article>
   <!-- 側(cè)邊欄 -->
   <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>

常用新語義標簽

<nav> 表示導航
<header> 表示頁眉
<footer> 表示頁腳
<section> 表示區(qū)塊
<article> 表示文章如文章猿推、評論片习、帖子、博客
<aside> 表示側(cè)邊欄如文章的側(cè)欄
<figure> 表示媒介內(nèi)容分組與 ul > li 做個比較
<mark> 表示標記 (帶用“UI”蹬叭，不怎么用)
<progress> 表示進度 (帶用“UI”藕咏，不怎么用)
<time> 表示日期
　　本質(zhì)上新語義標簽與<div>、<span>沒有區(qū)別秽五，只是其具有表意性孽查，使用時除了在HTML結(jié)構(gòu)上需要注意外，其它和普通標簽的使用無任何差別筝蚕，可以理解成<div class="nav"> 相當于 <nav>卦碾。不要好奇铺坞，它只是一個標簽起宽！
　　盡量避免全局使用header、footer济榨、aside等語義標簽坯沪。

兼容處理

(我們在測試ie 的兼容的時候，有一個叫做ietest 的軟件擒滑，這個軟件可以模擬ie6-ie11)
　　在不支持HTML5新標簽的瀏覽器里腐晾，會將這些新的標簽解析成行內(nèi)元素(inline)對待叉弦，所以我們只需要將其轉(zhuǎn)換成塊元素(block)即可使用，但是在IE9版本以下藻糖，并不能正常解析這些新標簽淹冰，但是卻可以識別通過document.createElement('tagName')創(chuàng)建的自定義標簽，于是我們的解決方案就是將HTML5的新標簽全部通過document.createElement('tagName')來創(chuàng)建一遍巨柒，這樣IE低版本也能正常解析HTML5新標簽了樱拴，在實際開發(fā)中我們更多采用的是通過檢測IE瀏覽器的版本來加載三方的一個JS庫來解決兼容問題。

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

表單

伴隨著互聯(lián)網(wǎng)富應用以及移動開發(fā)的興起洋满，傳統(tǒng)的Web表單已經(jīng)越來越不能滿足開發(fā)的需求晶乔，所以HTML5在Web表單方向也做了很大的改進，如拾色器牺勾、日期/時間組件等正罢，使表單處理更加高效。
　　此章節(jié)學習目的驻民，了解HTML5表單的新增的特性翻具，以及PC和移動設備間的差異，其兼容性較差川无。

輸入類型 (表單類型呛占，表單元素，表單屬性,表單事件.)

email 輸入email格式
tel 手機號碼
url 只能輸入url格式
number 只能輸入數(shù)字
search 搜索框
range 范圍滑動條
color 拾色器
time 時間
date 日期不是絕對的
--datetime 時間日期
month 月份
week 星期
　　部分類型是針對移動設備生效的懦趋，且具有一定的兼容性晾虑，在實際應用當中可選擇性的使用。

表單元素（標簽）

<datalist> 數(shù)據(jù)列表
與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）則被發(fā)送到服務器竟痰。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。

<output>   不可當做數(shù)據(jù)提交掏呼？
<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 關(guān)閉驗證，可用于<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 用戶輸入內(nèi)容時觸發(fā)，可用于移動端輸入字數(shù)統(tǒng)計
oninvalid 驗證不通過時觸發(fā)

常見的鏈接關(guān)系表

關(guān)系	含義
alternate	文檔的可選版本（例如打印頁级及、翻譯頁或鏡像）
stylesheet	文檔的外部樣式表
start	集合中的第一個文檔
next	集合中的下一個文檔
prev	集合中的前一個文檔
contents	文檔目錄
index	文檔索引
glossary	文檔中所用字詞的術(shù)語表或解釋
copyright	包含版權(quán)信息的文檔
chapter	文檔的章
section	文檔的節(jié)
subsection	文檔的子段
appendix	文檔附錄
help	幫助文檔
bookmark	相關(guān)文檔
nofollow	用于指定 Google 搜索引擎不要跟蹤鏈接
licence	一般用于文獻乒疏，表示許可證的含義
tag	標簽集合
friend	友情鏈接

結(jié)構(gòu)數(shù)據(jù)標記

<div itemscope itemtype="http://example.com/hello">
  <p>我叫<span itemprop="主人">汪磊</span>。</p>
  <p>
    我養(yǎng)了一條叫
    <span itemprop="狗名">旺財</span>的
    <span itemprop="品種">金毛</span>犬饮焦。
  </p>
</div>

很高級的東西缰雇，只有Google支持

aria 屬性

Accessible Rich Internet Application (無障礙富互聯(lián)網(wǎng)應用程序)
主要針對于屏幕閱讀設備(e.g. NVDA)，更快更好地理解網(wǎng)頁
不僅僅是為了盲人用戶追驴，更多語義化

WAI-ARIA無障礙網(wǎng)頁應用屬性完全展示
 ARIA讓視障人士更了解你的頁面

自定義屬性 data-*

通過DOM存儲與DOM對象強相關(guān)的數(shù)據(jù)

<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類型的數(shù)組
$('.item')
返回一個jQuery對象（dom元素的數(shù)組）
本質(zhì)上jquery方式和qs方式都是獲取DOM數(shù)組，只不過jquery會多一些其他成員
$('.item').on和~~document.querySelectorAll('.item').addEventListener~~
DOM數(shù)組的每一個成員注冊事件不能像jquery一樣直接注冊殿雪，必須分別給每個元素注冊
h5就是將我們經(jīng)常需要的操作又包裝一層
querySelector已經(jīng)非常接近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>

類名操作

新H5中DOM對象多了一個classList屬性暇咆，是一個數(shù)組
add 添加一個新的類名
remove 刪除一個的類名
contains 判斷是否包含一個指定的類名
toggle 切換一個class element.toggle('class-name',[add_or_remove])
toggle函數(shù)的第二個參數(shù)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節(jié)點，是一個通稱索抓。

訪問歷史 API

界面上的所有JS操作不會被瀏覽器記住钧忽，就無法回到之前的狀態(tài)
在HTML5中可以通過window.history操作訪問歷史狀態(tài)，讓一個頁面可以有多個歷史狀態(tài)

window.history.forward(); // 前進
window.history.back(); // 后退
window.history.go(); // 刷新
通過JS可以加入一個訪問狀態(tài)
history.pushState(放入歷史中的狀態(tài)數(shù)據(jù), 設置title(現(xiàn)在瀏覽器不支持)逼肯，改變歷史狀態(tài))

全屏 API

HTML5規(guī)范允許用戶自定義網(wǎng)頁上任一元素全屏顯示耸黑。
　requestFullscreen() 開啟全屏顯示
　cancleFullscreen() 關(guān)閉全屏顯示
不同瀏覽器需要添加前綴如：
　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存儲

隨著互聯(lián)網(wǎng)的快速發(fā)展缺菌，基于網(wǎng)頁的應用越來越普遍，同時也變的越來越復雜搜锰，為了滿足各種各樣的需求伴郁，會經(jīng)常性在本地存儲大量的數(shù)據(jù)，傳統(tǒng)方式我們以document.cookie來進行存儲的纽乱，但是由于其存儲大小只有4k左右蛾绎，并且解析也相當?shù)膹碗s昆箕，給開發(fā)帶來諸多不便鸦列，HTML5規(guī)范則提出解決方案租冠。
Storage 存儲
window.sessionStorage
window.localStorage
(向本地保存數(shù)據(jù),有可能在瀏覽器內(nèi)存里面，有可能在硬盤上面.)

特性

1薯嗤、設置顽爹、讀取方便
2、容量較大骆姐，sessionStorage約5M镜粤、localStorage約20M
3、只能存儲字符串玻褪，可以將對象JSON.stringify() 編碼后存儲

window.sessionStorage

1肉渴、生命周期為關(guān)閉瀏覽器窗口
2、在同一個窗口下數(shù)據(jù)可以共享

window.localStorage

1带射、永久生效同规，除非手動刪除
2、可以多窗口共享

方法詳解

setItem(key, value)設置存儲內(nèi)容
getItem(key)讀取存儲內(nèi)容
removeItem(key)刪除鍵值為key的存儲內(nèi)容
clear()清空所有存儲內(nèi)容
key(n)以索引值來獲取存儲內(nèi)容

<!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
        //數(shù)據(jù)存儲在硬盤上窟社，永久生效
        //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
已經(jīng)被w3c 放棄了..
生命周期差異，存儲空間差異
WebSQL灿里、IndexDB

拖拽

在HTML5的規(guī)范中关炼，我們可以通過為元素增加draggable="true"來設置此元素是否可以進行拖拽操作，其中圖片匣吊、鏈接默認是開啟的儒拂。

拖拽元素
頁面中設置了draggable="true"屬性的元素
目標元素
頁面中任何一個元素都可以成為目標元素
事件監(jiān)聽
拖拽元素
ondrag 應用于拖拽元素，整個拖拽過程都會調(diào)用
ondragstart 應用于拖拽元素色鸳，當拖拽開始時調(diào)用
ondragleave 應用于拖拽元素侣灶，當鼠標離開拖拽元素時調(diào)用
ondragend 應用于拖拽元素，當拖拽結(jié)束時調(diào)用
目標元素
ondragenter 應用于目標元素缕碎，當拖拽元素進入時調(diào)用
ondragover 應用于目標元素褥影，當停留在目標元素上時調(diào)用
ondrop 應用于目標元素，當在目標元素上松開鼠標時調(diào)用
ondragleave 應用于目標元素咏雌，當鼠標離開目標元素時調(diào)用

<!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("拖拽結(jié)束");
    }

    //目標元素
    two.ondragenter = function () {
        console.log("拖拽元素進入");
    }
    //當拖拽元素在目標元素上 是連續(xù)觸發(fā)
    two.ondragover = function (e) {
        console.log("停留在目標元素上");
        e.preventDefault();//沒有這句凡怎，ondrop不會調(diào)用
    }
    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>

網(wǎng)絡狀態(tài)

我們可以通過window.onLine來檢測，用戶當前的網(wǎng)絡狀況赊抖，返回一個布爾值
　　window.online用戶網(wǎng)絡連接時被調(diào)用
　　window.offline用戶網(wǎng)絡斷開時被調(diào)用

window.addEventListener("online",function(){
         alert("已經(jīng)建立了網(wǎng)絡連接")
    })
   window.addEventListener("offline",function(){
         alert("已經(jīng)失去了網(wǎng)絡連接")
   })

應用緩存

HTML5中我們可以輕松的構(gòu)建一個離線（無網(wǎng)絡狀態(tài)）應用统倒，只需要創(chuàng)建一個cache manifest文件。

優(yōu)勢

1氛雪、可配置需要緩存的資源
2房匆、網(wǎng)絡無連接應用仍可用
3、本地讀取緩存資源，提升訪問速度浴鸿，增強用戶體驗
4井氢、減少請求，緩解服務器負擔

緩存清單

一個普通文本文件岳链，其中列出了瀏覽器應緩存以供離線訪問的資源花竞，推薦使用.appcache為后綴名，添加MIME類型
AddType text/cache-manifest .appcache
例如我們創(chuàng)建了一個名為demo.appcache的文件掸哑，然后在需要應用緩存在頁面的根元素(html)添加屬性manifest="demo.appcache"约急，路徑要保證正確。

manifest文件格式

1苗分、頂行寫CACHE MANIFEST
2厌蔽、CACHE: 換行指定我們需要緩存的靜態(tài)資源，如.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

最后編輯于：2017.12.08 03:59:01

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市近她，隨后出現(xiàn)的幾起案子叉瘩，更是在濱河造成了極大的恐慌，老刑警劉巖粘捎，帶你破解...
沈念sama閱讀 211,123評論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件薇缅，死亡現(xiàn)場離奇詭異，居然都是意外死亡攒磨，警方通過查閱死者的電腦和手機泳桦，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,031評論 2贊 384
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來娩缰，“玉大人灸撰，你說我怎么就攤上這事∑纯玻” “怎么了浮毯？”我有些...
開封第一講書人閱讀 156,723評論 0贊 345
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長泰鸡。經(jīng)常有香客問我债蓝，道長，這世上最難降的妖魔是什么盛龄？我笑而不...
開封第一講書人閱讀 56,357評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任饰迹，我火速辦了婚禮芳誓，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘啊鸭。我一直安慰自己锹淌，他們只是感情好，可當我...
茶點故事閱讀 65,412評論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布莉掂。她就那樣靜靜地躺著，像睡著了一般千扔。火紅的嫁衣襯著肌膚如雪憎妙。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,760評論 1贊 289
城市分裂傳說
那天曲楚，我揣著相機與錄音厘唾，去河邊找鬼。笑死龙誊，一個胖子當著我的面吹牛抚垃，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播趟大，決...
沈念sama閱讀 38,904評論 3贊 405
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼鹤树，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了逊朽？” 一聲冷哼從身側(cè)響起罕伯，我...
開封第一講書人閱讀 37,672評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎叽讳，沒想到半個月后追他，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,118評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡岛蚤，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,456評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年邑狸，在試婚紗的時候發(fā)現(xiàn)自己被綠了井赌。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片圾结。...
茶點故事閱讀 38,599評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖浇雹，靈堂內(nèi)的尸體忽然破棺而出她紫，到底是詐尸還是另有隱情铁坎，我是刑警寧澤，帶...
沈念sama閱讀 34,264評論 4贊 328
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布犁苏，位于F島的核電站硬萍，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏围详。R本人自食惡果不足惜朴乖，卻給世界環(huán)境...
茶點故事閱讀 39,857評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一祖屏、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧买羞，春花似錦袁勺、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,731評論 0贊 21
一樁弒父案期丰，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至吃挑，卻和暖如春钝荡，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背舶衬。一陣腳步聲響...
開封第一講書人閱讀 31,956評論 1贊 264
情欲美人皮
我被黑心中介騙來泰國打工埠通，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人逛犹。一個月前我還...
沈念sama閱讀 46,286評論 2贊 360
代替公主和親
正文我出身青樓端辱，卻偏偏與公主長得像，于是被迫代替她去往敵國和親虽画。傳聞我的和親對象是個殘疾皇子舞蔽，可洞房花燭夜當晚...
茶點故事閱讀 43,465評論 2贊 348