h5

一、HTML5

1.1 认识HTML5

HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

我们日常讨论的H5其实是一个泛称，它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

相对于HTML的早期版本，HTML5在语法规范上做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。

1.2 DOCTYPE标签

1.2.1 DOCTYPE标签的作用

  • DOCTYPE并不是HTML标签，而是一个声明。
  • 作用是：告诉浏览器按照哪个规则去解析页面。

1.2.2 DOCTYPE标签的写法

  • HTML4中

    1.HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2.HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

3.HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

  • HTML5中

    <!DOCTYPE html>

1.2.3 Emmet语法创建文档结构

- html:5或!：HTML5文档类型
- html:xt：XHTML过渡型文档类型
- html:xs：XHTML严格型文档类型
- html:4t：HTML4过渡型文档类型
- html:4s：HTML4严格型文档类型

1.3 新的语义标签

传统的做法我们通过添加类名如class="header"、class="footer"，使HTML页面具有语义性的，但是不具有通用性（如class="header"也可能被写成class="head"）。HTML5则是通过增加语义化标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以保证其具有通用性。

1.3.1 部分常用的语义标签

标签名 作用
nav 导航
header 页眉
footer 页脚
main 文档主要内容
article 文章
aside 侧边栏
section 区块
progress 进度条

使用HTML5中新的语义标签，内容更为直观，即使删除了注释，依旧能够看出该标签的作用，语义性更强。

尽量避免全局使用header、footer、aside等语义标签。

1.3.2 新语义标签的兼容性

虽然HTML5为我们提供了一些新的语义标签，但老版本的浏览器并不兼容这些内容，比如在IE浏览器版本小于等于IE8时，就不支持新语义标签。

解决方案：

  • 使用js代码创建标签：

    1. 在页面中添加创建header标签的代码。
    2. 修改header的样式，添加display:block。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header{
            height: 100px;
            background-color: orangered;
            /*在低版本的ie中,如果想要显示h5的新语义标签,需要设置为block*/
            display: block;
        }   
    </style>
    <script type="text/javascript">
        // 使用代码创建header标签
      document.createElement("header");
    </script>
</head>
<body>
<!--
    在老版本的ie中无法查看(ie8)
-->
<header>
</header>
</body>
</html>

  • js框架：

    1. 相当于帮助我们实现了创建和添加display:block等操作，内部的处理逻辑会更多一些。
    2. js框架"html5shiv"获取地址
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    header {
      height: 100px;
      background-color: hotpink;
    }

    footer {
      height: 100px;
      background-color: greenyellow;
    }
  </style>

  <!-- 通过 条件注释  让 这个js文件 在指定的 IE版本中 才被加载  -->
  <!--[if lte IE 8]>
    <script src='js/html5shiv.min.js'></script>
  <![endif]-->
</head>

<body>
  <header>
  </header>
  <footer></footer>
</body>

</html>

  • 优化代码执行——hack语法

    无论是js或者js框架都需要执行js代码才能够解决兼容性问题。但是在高版本的浏览器中，那段js代码就没有必要执行了，所以我们通过一个叫做hack的方式来减少性能的浪费。

    1. 浏览器检测：cc:ie6 + tab
    2. lte：less than equal
    3. gte：greater than equal
    <!--[if lte IE 7]>
  IE7及IE7以下的IE6、IE5.x可识别
<![endif]-->

<!--[if gte IE 7]>
  IE7及IE7以上的IE8、IE9可识别
<![endif]-->

<!--[if lt IE 7]>
  IE7以下的IE6、IE5.x可识别
<![endif]-->

<!--[if gt IE 7]>
  IE7以上的IE8、IE9可识别
<![endif]-->

<!--[if IE 7]>
  只有IE7可以识别
<![endif]-->

    ​

1.4 表单

1.4.1 input标签的新type属性

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理变的更加高效。

类型 使用示例 含义
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码格式
url <input type="url"> 输入url格式
number <input type="number"> 输入数字格式
search <input type="search"> 搜索框（体现语义化）
range <input type="range"> 自由拖动滑块
color <input type="color"> 拾色器
time <input type="time"> 定义日期字段的时、分、秒
date <input type="date"> 定义日期字段（带有calendar控件）
datetime <input type="datetime"> 定义日期字段（带有calendar和time控件）
month <input type="month"> 定义日期字段的月
week <input type="week"> 定义日期字段的周

兼容性问题：

  • 由于IE的兼容性问题，在不同的浏览器中显示效果不尽相同。
  • 部分类型是针对移动设备生效的，在实际应用当中应选择性的使用。

1.4.2 input表单验证

  • email标签：自带格式验证

    1. 当我们点击提交按钮时，如果输入的email格式不正确，会弹出提示信息。
    2. email标签并不会验证内容是否为空，这个需要注意。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

  • required属性：对于没有自带验证效果的标签，就需要手动添加属性增加验证了。

    1. required为非空验证。
    2. 只需要添加required属性即可，不需要赋值。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

  • pattern自定义验证规则：

    1. 在需要添加自定义验证规则的元素中添加required标签。
    2. 使用pattern后的正则表达式编写验证规则。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

  • 自定义验证信息：系统的提示消息只能够提示格式错误，如果想要更为详细的提示内容就需要我们通过js来自定义了。

    1. 注册事件：
      • oninput：输入时。
      • oninvalid：验证失败时。
    2. 设置自定义信息：dom.setCustomValidity("这里输入提示信息");。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在输入时
    telInput.oninput=function () {
        this.setCustomValidity("请正确输入您的手机号码");
    }
    // 验证失败时
    telInput.oninvalid=function(){
        this.setCustomValidity("您输入的手机号码不正确，请重新输入");
    };

</script>

优点：HTML5自带的验证使用便捷，不需要额外的js框架。

缺点：兼容性问题，如果想要兼容所有浏览器，建议使用js验证框架。

1.4.3 新表单元素

除了在input标签中增加了一些新的type属性以外，H5也推出了一些新的表单元素。由于浏览器的兼容问题，使用频率并不广，了解即可。

  • datalist：该元素规定了输入区域的选项列表，可以让用户有一些选项。

    1. datalist：id属性，想要使用该datalist的元素需要通过list=id的方式来指定。
    2. option：
      • value：指定具体的值。
      • label：提示信息。
    3. 如果input的type为url，option中对应的value需要使用http://开始。
    <!--注：测试代码只是body内部的代码。-->
网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移动">移动</option>
    <option value="187xxx" label="联通">联通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>

  • keygen：使用频率很低。

    keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

    私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密。

    目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

  • output：使用频率很低。

    属于新的语义标签：用来放置输出的内容，但是不能自动的计算结果，依旧需要通过js的方式来动态修改结果，只是相比于其他的标签语义性更强。

1.4.4 新表单属性

属性 用法 含义
placeholder <input type="text" placeholder="请输入用户名"> 占位符
autofocus <input type="text" autofocus> 自动获得焦点
multiple <input type="file" multiple> 多文件上传
autocomplete <input type="text" autocomplete="off"> 自动完成
form <input type="text" form="某表单ID">
novalidate <form novalidate></form> 关闭验证
required <input type="text" required> 必填项
pattern <input type="text" pattern="\d"> 自定义验证

  • autocomplete（自动完成）：

    1. 能够记录用户的输入，并且给予提示，这就是autocomplete的作用。
    2. 取值：on开启，off关闭。
    3. 一般用在input标签中。
    4. 标签需要添加name属性。
    5. 只有提交了一次以后才会出现提示。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" autocomplete="on" name="userName">
    <input type="submit">
</form>
</body>
</html>

  • autofocus（获取焦点）：

    1. 当某一页有很多个可供输入的元素时，用户需要使用鼠标点选元素进行输入，为了提升用户体验，我们可以通过autofocus属性来指定页面中默认选中的元素。
    2. 需要哪个表单元素获得焦点，只需要添加该属性即可，不需要赋值。
    3. 如果页面中多个元素设置了该属性，最后一个会获得焦点。
    4. 在没有该属性之前，能够使用JavaScript来指定元素。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄<input type="number" name="telNum" autofocus>
    <input type="submit">
</form>
</body>
</html>

  • form（表单关联）：

    1. 当我们想要提交数据时，需要把表单元素放到对应的form标签中，这个属性的出现让表单元素的放置位置不再受到约束。
    2. 想要某个表单外元素与该表建立联系，只需要为元素添加属性form="表单id"设置为想要建立联系的表单id即可。
    3. 虽然这个属性可以让元素的放置位置不再成为限制，但是编码时依旧建议将元素放置到对应的表单中，除了兼容性问题以外，也为了提升代码的可读以及可维护性。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="userForm" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄:<input type="number" name="telNum" autofocus>
    <br/>
    <input type="submit">
</form>

<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>

  • multiple（多选）：

    1. 如果想要在某个input标签中选择多个值，可以使用该属性。
    2. 该属性可以用在type为file标签内。
    3. 选择多文件时，需要按住ctrl按钮。
    <input type="file" multiple >

  • placeholder（占位提示）：

    1. 输入元素内默认显示一些提示信息，当用户输入之后自动消失，这种效果我们需要使用JavaScript来实现，直到出现了placeholder这个属性。
    2. 如不想通过JavaScript来实现提示功能，直接为该属性赋值想要提示的内容即可。
    <input type="text"placeholder="输入用户名">

1.5 多媒体

1.5.1 多媒体标签

  • HTML5为了解决使用Flash的各种问题推出了多媒体标签。
  • 由于视频格式问题，不同的浏览器对于相同格式的视频支持不同，需要准备多份视频。
  • 无法对播放的视频提供很好的保护效果,因为用户可以直接对视频文件另存为。

1.5.2 音频 audio标签

  • 不考虑兼容性：

    1. src：音频的地址。
    2. controls：音频播放控制器。
    3. autoplay：自动播放。
    4. loop：循环。
    <audio src="song.ogg" controls="controls" autoplay loop></audio>

  • 考虑兼容性：

    1. source：指定多个音频，如果找到了当前浏览器支持的，那么会直接使用；如果所有的source标签格式都不支持，会显示最后的文本内容。
    <audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的浏览器不支持此种格式
</audio>

1.5.3 视频 Video标签

Video标签用来播放视频，用法跟audio标签十分类似。

  • 不考虑兼容性：

    1. src：视频地址。
    2. controls：控制器。
    3. autoplay：自动播放。
    4. loop：循环。
    5. poster：指定视频不播放时显示的封面。
    6. width：宽度。
    7. height：高度。
    <video src="movie.ogg" controls autoplay loop width = "200px" height = "200px"></video>

  • 考虑兼容性：

    1. source：指定多个视频，如果找到了当前浏览器支持的，那么会直接使用；如果所有的source标签格式都不支持，会显示最后的文本内容。
    <video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持video标签
</video>

1.5.4 多媒体加强

  • 方法：加载load()、播放play()、暂停pause()。
  • 属性：当前URLcurrentSrc、当前时间currentTime、总时间duration。
  • 事件：播放时持续触发ontimeupdate，结束时触发onended等。

1.6 两种进度条

在HTML5之前如果我们想要使用进度条，可以通过一些前端框架，或者自己使用控件搭建出类似的外观。但是在HTML5中推出了两个进度条控件，两种进度条都能够用来显示进度，由于兼容性以及语义性的问题，在实际开发中需要结合实际情况决定是否使用它们或者是使用对应的前端框架。

1.6.1 process

  • 作用：
    • 用来显示任务的进度（进程）。
    • 如果想要用来显示度量值（比如容量使用情况），请使用meter标签。
  • 属性：
    • max：总工作量。
    • value： 已完成工作量。
  • 兼容性：
    • 为了保证显示效果，可以在progress标签中写入内容，在当前浏览器无法显示该控件时，会转而显示内容。

1.6.2 meter

  • 外观：通过属性值的搭配能够显示出多重不同的变化。
  • 常见属性：
    • high：规定较高的值。
    • low：规定较低的值。
    • max：规定最大值（可以超过,但是进度条已经满了）。
    • min：规定最小值。
    • value：规定度量的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
<br/>
<meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
<br/>
<meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
<br/>
<meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
<br/>
</body>
</html>

1.7 DOM扩展

在jQuery中我们可以通过选择器快速获取元素，在HTML5中也提供了一些类似的方法。

1.7.1 获取元素

  • querySelector：返回当前文档中第一个匹配特定选择器的元素。

    var node = document.querySelector(css选择器);

  • querySelectorAll：返回当前文档中所有匹配特定选择器的元素（返回值是数组）。

    var nodeLists = document.querySelectorAll(css选择器);

1.7.2 类名操作 classList

这个元素返回的是dom元素的class列表，这个属性本身是只读的，但是我们可以通过几个方法去操作元素的class。

  • add ： 添加一个class到元素的class列表中。

    Node.classList.add('class')

  • remove ： 从元素的class列表中移除一个class。

    Node.classList.remove('class')

  • toggle ： 切换一个class是否存在于一个元素的class列表中。

    Node.classList.toggle('class')

  • contains ： 查询一个指定的class是否存在于元素的class列表中。

    Node.classList.contains('class')

Node指一个有效的DOM节点，是一个通称。

1.7.3 自定义属性 data-

  • 定义属性：

    1. data-xxx：data-是固定格式，xxx是自定义的值。
    2. 属性名不应该包含任何大写字母，并且在前缀data-之后必须有至少一个字符。
    3. 属性值可以是任意字符串。
    4. 不要使用纯数字、特殊字符等作为自定义值。
    <div id="demo" data-name="jack" data-age="10">
<div data-my-name="bob">

  • 获取属性：

    1. 在js中获取了元素之后，通过dataset["key"]即可获取保存的值，其中key为data-xxx中xxx的字符。
    2. 如果data-之后使用-连接多个值，取值时，需要使用驼峰命名。
    var demo = document.querySelector('#demo');
<!--获取-->
demo.dataset['name'];
demo.dataset['age'];
<!--设置-->
demo.dataset['name'] = 'rick';
<!--驼峰命名获取-->
Node.dataset['myName'];

1.8 新增API

1.8.1 网络连接状态

  • 获取网络状态：

     window.navigator.onLine

  • 网络连接、断开事件：

    // 网络连接
window.ononline = function(){
      alert('网络已连接');
  }
// 网络断开
window.onoffline= function(){
      alert('网络已断开');
  }

1.8.2 全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

  • 开启全屏显示：

    Node.requestFullScreen()

  • 关闭全屏显示：

    Node.cancelFullScreen()

  • 由于其兼容性原因，不同浏览器需要添加前缀如：

    • webkit内核浏览器：

      webkitRequestFullScreen、webkitCancelFullScreen

  • Gecko内核浏览器�：

    mozRequestFullScreen、mozCancelFullScreen

  • 检测当前是否处于全屏：

      document.fullScreen
  <!--不同浏览器需要添加前缀-->
  document.webkitIsFullScreen
  document.mozFullScreen

1.8.3 文件读取

使用js对象FileReader，配合File对象可以指定读取本地文件，可以读取选取的文件，也可以读取DataTransfor。

  • 获取文件：

    1. 由于File标签支持多文件上传，所以我们想要获取到选取的文件，需要配合索引。

      // 其中this为file标签
    this.files[0]

  • 读取文件：

    1. 读取文件需要使用js对象FileReader。
    var reader = new FileReader; //实例化一个对象
reader.readAsDataURL(this.files[0]) //以DataURL形式读取文件,获取的值可以用在任意通过链接指定的地方
// 通过onload事件监测加载完毕
reader.onload = function (){
  // result 就是我们需要的结果
    console.log(this.result);
  //可以用在指定连接地址的元素中比如
  // 设置图片
  document.querySelector('#img').src = this.result;
  // 设置图像
  document.querySelector("#video").src= this.result;
  // 设置CSS
  document.querySelector("#link").href = this.result;
}

1.8.4 文件拖拽

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

  • 拖拽元素：添加了draggable="true" 属性即可实现拖拽，其中<img>、<a>标签默认是可以被拖拽的。

  • 目标元素：拖拽元素的放置位置。任意元素都可以成为目标元素。

  • 支持事件：

    1. 拖拽元素：

      • ondrag：整个拖拽过程都会调用。
      • ondragstart：当拖拽开始时调用。
      • ondragend：当拖拽结束时调用。
      • ondragleave：当鼠标离开拖拽元素时调用。

    2. 目标元素：

      • ondrop：当在目标元素上松开鼠标时调用。
      • ondragover：当停留在目标元素上时调用。
      • ondragenter：当拖拽元素进入时调用。
      • ondragleave：当鼠标离开目标元素时调用。

    3. 注意事项：

      如果想要调用ondrop事件，必须在ondragover中使用事件参数阻止浏览器的默认行为。

      thirdBox.ondragover = function (argument) {
   // 在 ondragover时 必须阻止默认行为 才能够 看到拖放效果
   argument.preventDefault();
}

    4. 数据传递：

      • 配合事件对象的dataTransfor 可以实现数据的传递。
      • setData(key,value) 设置数据。
      • getData(key) 获取数据。
      dom1.ondragstart = function (argument) {
   argument.dataTransfer.setData("fox",this.id);
}

//dom2为拖放的目标元素
dom2.ondrop = function (argument) {
   console.log(argument);
   var fromBoxID =argument.dataTransfer.getData("fox");
}

1.8.5 地理定位

  • 获取地理信息

    通过IP地址、三维坐标、GPS、Wi-Fi、手机信息等多种方式获取地址信息，不同获取方式的优缺点并不相同，浏览器会自动以最优方式去获取用户地理信息。

  • 安全性

    HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。

  • 语法

    1. 获取当前地理信息：

      navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

    2. 重复获取当前地理信息：

      navigator.geolocation.watchPosition(successCallback, errorCallback, options)
    • 当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
    • 当获取地理信息失败后，会调用errorCallback，并返回错误信息error。
    • 可选参数options对象可以调整位置信息数据收集方式。
      1. enableHighAccuracy：高精度模式。
      2. timeout：超时设置，单位为ms。
      3. maximumAge：表示浏览器重新获取位置信息的时间间隔，单位为ms。
    navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功会调用该方法
    // position.coords.latitude 纬度
    // position.coords.longitude 经度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失败会调用该方法
    // error 是错误信息
}, )

  • 应用：

    在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。

1.8.6 Web存储

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

  • 使用特点：

    1. 设置读取方便（通过键值对）。
    2. 容量较大，sessionStorage大约5m，localStorage大约20m。
    3. 如果要保存json数据，可以使用JSON.stringify()将对象编码后保存。

  • window.sessionStorage：

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

  • window.localStorage：

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

  • 使用方法：

    两种存储方式，只是前缀不同，调用方法是一致的。

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

二、CSS3

2.1 CSS3简介

CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。但是由于浏览器的兼容性问题，所以并不是所有的浏览器都能够使用，为了保证显示效果，我们在使用某些属性的时候需要添加额外的前缀。

Trident内核(IE)：          // 前缀为 -ms
Gecko内核(FireFox)：       // 前缀为 -moz
Presto内核(Opera)：        // 前缀为 -o
Webkit内核(Chrome,Safari)：// 前缀为 -webkit

2.2 CSS3选择器

CSS3中给了我们更多的选择器让我们来获取元素，极大程度提高了查找元素的精度以及准确性，并且绝大多数的选择器语法与jQuery中兼容。

2.2.1 属性选择器

属性选择器的作用就是，根据标签的属性去筛选对应的元素，属性选择器从CSS2推出，在CSS3中增加了几个新的属性。

以属性名 attr 为例：
E[attr]:            包含att属性
E[attr="val"]:      属性值为val
E[attr^="val"]:     属性值以val开头
E[attr$="val"]:     属性值以val结尾
E[attr*="val"]:     属性中包含val
E[attr~="val"]:     属性值使用空格进行分割,有一个为val
E[attr|="val"]:     属性以‘-’分割，其中有val值（如果属性只有val,那么也会被选中）

2.2.2 兄弟选择器

  • 选择器1 ~ 选择器2 ：选择相同父元素中，选择器1之后的所有满足选择器2的元素。
  • 选择器1 + 选择器2 ：选择相同父元素中，选择器1之后的第一个满足选择器2的元素。

2.2.3 伪类选择器

  • 结构伪类：以某元素（E）相对于其父元素或兄弟元素的位置来获取无素，并对应位置的子元素或兄弟元素必须是该元素（E）。
    1. E:first-child：其父元素的第一个子元素�。
    2. E:last-child：其父元素的最后一个子元素。
    3. E:nth-child(n)： 第n个子元素，计算方法是E元素的全部兄弟元素。
    4. E:nth-last-child(n)： 跟E:nth-child(n)类似 ，只是倒着计算。
    5. 注意：其中n的取值范围是：0，1，2，3，4... 线性累加，可以传入表达式，比如2n，2n+1等等，也可以传入特殊字符：even(偶数)，odd(奇数)。
  • 空伪类：E:empty：选中没有任何子节点的E元素（使用不是非常广泛）。
  • 目标伪类：E:target：结合锚点进行使用，处于当前锚点的元素会被选中。
  • 排除伪类：E:not(任意选择器)：不满足括号内选择器条件的元素E会被选中。

2.2.4 伪元素选择器

  • E::before和E::after：

    在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

    注意：E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

  • E::first-letter：

    获取的是内容的第一个文字，根据语言的不同会有细微差别，如中文、日文、韩文等。

  • E::first-linet：

    获取的是内容的第一行，可以配合P标签使用。

  • E::selection：

    可改变选中文本的样式，目前只能设置的属性为：background-color，color，text-shadow。

2.3 颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，跟opacity相比，它们不具有继承性，不会影响子元素的透明度。

  • RGBA：

    1. Red：0-255；Green：0-255；Blue：0-255；Alpha：0-1(小数)。
    2. 不使用A那么认为没有透明度。
    color:RGBA(100,100,100,0.3);
color:RGB(100,100,100);

  • HSLA：

    1. Hue(色调)：0-360；Saturation(饱和度)：0-100%；Lightness(亮度)：0-100%；Alpha(透明度)：0-1(小数)。
    color: hsla(308, 85%, 58%, 1);
color: hsl(308, 85%, 58%);

  • 关于CSS透明度：

    1. opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度 ，是作为CSS的属性来使用的。
    2. transparent不可调节透明度，始终完全透明，是作为颜色的取值来使用的color:transparent。

2.4 字体阴影 text-shadow

取值：

  1. 第1个长度值用来设置对象的阴影水平偏移值，可以为负值 。
  2. 第2个长度值用来设置对象的阴影垂直偏移值，可以为负值 。
  3. 如果提供了第3个长度值则用来设置对象的阴影模糊值，不允许负值。
  4. 设置对象的阴影的颜色。
  5. 可以通过,来分隔不同的阴影，从而为字体设置多个阴影。
text-shadow: 10px 10px 5px red;
text-shadow: 1px 1px #fff,-1px -1px #000;

2.5 盒子模型 box-sizing

CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box或是border-box，这样我们计算盒子大小的方式就发生了改变。

  • content-box：默认取值，盒子模型大小为width + padding + border。
  • border-box：盒子模型的大小为width。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .first {
            border: 10px solid red;
            padding: 20px;
            margin:20px;
            box-sizing: content-box;
        }
        .second{
            border: 10px solid red;
            padding: 20px;
            margin:20px;
            box-sizing: border-box;
        }

    </style>
</head>
<body>
<div class="first">first盒子</div>
<div class="second">second盒子</div>
</body>
</html>

2.6 边框

2.6.1 边框圆角 border-radius

赋值方法：

border-radius:20px;                 /*设置四周的圆角*/
border-radius: 50px 10px;           /*上左下右,上右下左*/
border-radius: 50px 30px 10px;      /*上左,上右下左,下右*/
border-radius: 50px 40px 30px 20px; /*上左,上右,下右,下左*/
border-radius: 50px/100px;          /*上下的圆角/左右的圆角*/
border-top-left-radius: 40px;       /*上左*/
border-top-right-radius: 10px;      /*上右*/
border-bottom-left-radius: 20px;    /*下左*/
border-bottom-right-radius: 50px;   /*下右*/

2.6.2 边框阴影 box-shadow

赋值方法：

  • h-shadow：必需。水平阴影的位置。允许负值。
  • v-shadow：必需。垂直阴影的位置。允许负值。
  • blur：可选。模糊距离。
  • spread：可选。阴影的尺寸。
  • color：可选。阴影的颜色。
  • inset：可选。将外部阴影 outset 改为内部阴影。
  • 多个影子的添加只需要使用逗号分隔即可。
box-shadow: 5px 5px 20px pink;          /*x偏移值,y偏移值,影子四周模糊程度,影子颜色*/
box-shadow: inset 0px 0px 100px yellow; /*添加了inset以后,影子会往内部伸展,其他的都是一样的*/
box-shadow: 5px 5px yellow,-5px -5px blue,10px 10px green; /*多个影子需要使用逗号分隔*/

注：设置边框阴影不会改变盒子的大小，不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。

2.6.3 边框图片 border-image

border-image为复合属性：

border-image: url("img/border-image.png") 17 / 17px / 17px round;

  • 图片路径border-image-source：设置或检索对象的边框是否用图像定义样式或图像来源路径。

    border-image-source: url("img/border-image.png");

  • 图片切片border-image-slice：设置或检索对象的边框背景图的分割方式。

    取值：
1-4个值(不需要单位),对应的关系跟margin一致；
1-4个百分比,对应的关系跟margin一致；
fill(可选):是否需要中间的区域；

  • 图片宽度border-image-width：设置或检索对象的边框厚度，这个值的大小不会影响到盒子的大小。

    取值：1-4个值,单位为(px,em,%),对应关系跟margin一致。
border-image-width: auto;

  • 图片凹凸border-image-outset：设置或检索对象的边框背景图的扩展。

    取值：1-4个值,单位为(px,em,%),对应关系跟margin一致。
border-image-outset: 10px;

  • 图片重复border-image-repeat：设置或检索对象的边框图像的平铺方式。

    取值：
stretch： 指定用拉伸方式来填充边框背景图。 
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。 
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。 
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

2.7 背景

背景属性在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

  • background-size：

    1. 通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
    2. 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）。
    3. 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
    4. 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
    background-size: 10px;            /* 宽度10 高度根据宽度计算 */
background-size: 10px 10px;       /* 宽度10 高度 10 */
background-size: auto;            /* 背景图片原始大小 */
background-size: cover;           /* 背景图片原比例缩放到完全填满 可能会超出 */
background-size: contain;     /* 背景图片原比例缩放到 高度 或者宽度 跟容器一样 可能会有空白 */

  • background-origin：

    1. 可以设置背景图片定位(background-position)的参照原点。

    2. 可选值为border-box，padding-box，content-box。

      border-box     以边框做为参考原点；
padding-box        以内边距做为参考原点；
content-box        以内容区做为参考点；

  • background-clip：

    1. 可以设置对背景区域进行裁切，即改变背景区域的大小。

    2. 取值：

      border-box     裁切边框以内为背景区域；
padding-box        裁切内边距以内为背景区域；
content-box        裁切内容区做为背景区域；

  • background-repeat：

    1. 在原来只能设置平铺与不平铺的基础上增加了两个属性，让我们在设置背景图时更为灵活。

    2. 取值：

      background-repeat:round;   /* 自动缩放 直到填满 */
background-repeat:space;   /* 缩放,直到某一边充满容器为止 */

  • 多背景：以逗号分隔可以设置多背景，可用于自适应布局。

    background: url('image/01.jpg') no-repeat  200px 300px,
          url('image/02.jpg') no-repeat  100px 200px/100px 100px;

    ​

2.8 渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

2.8.1 线性渐变

线性渐变linear-gradient，指沿着某条直线朝一个方向产生渐变效果。

/*语法组合方式 可以添加多个颜色*/
background-image: linear-gradient(方向,开始颜色 开始位置 ,颜色2 开始位置,颜色3 开始位置.....);

/* 具体代码  */
/* 朝着 右上角 从红色到黄色*/
background-image: linear-gradient(to top left,red,yellow);

/* 朝着 顺时针45度 从红色到黄色*/
background-image: linear-gradient(45deg,red,yellow);

/* 朝着 顺时针45度 红色,黄色,绿色*/
background-image: linear-gradient(45deg,red,yellow,green);

/* 朝着 顺时针45度 红色到 10px结束 黄色从 20px开始 */
background-image: linear-gradient(45deg,red 10px,yellow 20px);

/* 朝着 顺时针45度 红色到10%结束 黄色从 20%开始 */
background-image: linear-gradient(45deg,red 10%,yellow 20%);

/* 注意：如果上一个颜色的结束 与 下一个颜色的开始相等,那么不会出现过渡 */
background-image: linear-gradient(45deg,red 10%,yellow 10%);

2.8.2 径向渐变

径向渐变radial-gradient，指从一个中心点开始沿着四周产生渐变效果。

/* 圆形渐变写法 */
background:radial-gradient(半径  ,颜色1,颜色2等等);

/* 椭圆渐变写法 */
background:radial-gradient(横向半径,竖向半径  ,颜色1,颜色2等等);

/* 设置位置 */
background:radial-gradient(横向半径,竖向半径  at 位置,颜色1,颜色2等等);

/*具体代码*/
/*半径100px 红色 绿色*/
background:radial-gradient(100px,red,green);

/*横向半径100px 竖向半径200px 红色 绿色*/
background:radial-gradient(100px 200px,red,green);

/*横向半径100px  红色10px 绿色 20px*/
background:radial-gradient(100px 200px,red 10px,green 20px);

/*横向半径100px  红色10% 绿色20%*/
background:radial-gradient(100px 200px,red 10%,green 10%);

/*横向半径100px  红色10% 绿色20% 在100px 100px位置*/
background:radial-gradient(100px 200px at 100px 100px,red 10%,green 10%);

/*注意：如果上一个颜色的结束,跟下一个颜色的开始相等,那么不会出现过渡*/
background-image: radial-gradient(100px,red 10%,yellow 10%);

2.9 过渡

过渡transition�是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

属性 含义
transition-property 设置过渡属性
transition-duration 设置过渡时间
transition-timing-function 设置过渡速度
transition-delay 设置过渡延时

  • 语法：

    /*语法组合方式*/
transition:过渡CSS属性 持续时间 动画方式 延迟时间;

/* 多属性过渡组合写法  通过逗号分隔*/
transition:过渡1,过渡2....

/*具体代码*/
/* 所有属性 1s动画 ease-in动画方式 延迟1s*/
transition: all 1s ease-in 1s;

/*
top属性 1s动画 ease-in动画方式 
left属性 1s动画 ease-out动画方式 延迟1s
width属性 1s动画 liner动画方式 延迟2s
height属性 1s动画 ease-in-out动画方式 延迟3s 
*/
transition: top 1s ease-in,
          left 1s  ease-out 1s,
          width 1s  ease-liner 2s,
          height 1s  ease-in-out 3s;

  • 动画方式：

    1. 贝塞尔曲线动画

      • 在设置动画曲线的位置通过cubic-bezier()的方式进行设置。
      • [计算贝塞尔曲线在线网址][http://cubic-bezier.com] 
      /* 其中 需要传入四个值,并且每个值都是0-1的小数*/
transition: top 1s cubic-bezier(0.1,0.2,0.3,0.4);

    2. step动画：

      • 设置动画完成的步数。
      /* 1s动画 每隔 1/6 s 完成一次  在每次间隔的 末尾 开始动画  */
transition: top 1s steps(6,end);
/* 1s动画 每隔 1/6 s 完成一次  在每次间隔的 开始 开始动画  */
transition: top 1s steps(6,start);

2.10 2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

2.10.1 移动 translate

  • 语法：transform:translate(x,y);。
  • 移动位置相当于自身原来位置。
  • x、y可为负值，x轴正方向向右，y轴正方向朝下。
  • 除了可以像素值，也可以是百分比，相对于自身的宽度或高度。

2.10.2 缩放 scale

  • 语法：transform:scale(x,y);。
  • 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数。

2.10.3 旋转 rotate

  • 语法：transform:rotate(deg);。
  • 可以对元素进行旋转，正值为顺时针，负值为逆时针。
  • 当元素旋转以后，坐标轴也跟着发生的转变。
  • 调整顺序可以解决，把旋转放到最后。

2.10.4 倾斜 skew

  • 语法：transform:skew(xdeg,ydeg);。
  • 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

2.10.5 组合写法

tranform:translate(10px,10px) rotate(180deg) scale(1.5,1.5);    /* 多个值 通过空格分隔*/

2.10.6 transform-origint

可以调整元素转换的原点。

/*x:50px y:中心 作为原点*/
transform-origin:50px;

/*x:50px y:50px 作为原点*/
transform-origin:50px 50px;

/*x:10% y:20% 作为原点*/
transform-origin:10% 20%;

/* 传入单词 
可选:top,left,right,center,bottom
*/
/* 左上 作为原点 */
transform-origin:right top;
/* 中心作为原点 */
transform-origin:center center;

2.11 3D转换

3D转换对应的属性依旧是transform，只是多了一个Z轴而已，Z轴的方向是垂直于屏幕，其中正方向指向我们的面部。

2.11.1 3D旋转

  • 左手定则：3D旋转遵循左手定则，即：大拇指指向旋转轴的正方向，其余四指弯曲的方向就是旋转的方向。
/* x方向旋转180°*/
transform:rotateX(180deg)
/* y方向旋转180°*/
transform:rotateY(180deg)
/* z方向旋转180°*/
transform:rotateZ(180deg)

2.11.2 透视 perspective

perspective（透视，视角）这个属性能让图像具有立体感，呈现近大远小的效果。

  • 用法：

    1. 作为一个属性，设置给父元素，作用于所有3D转换的子元素。
    2. 作为transform属性的一个值，做用于元素自身。
    3. 一般我们建议添加到不进行变换的父容器中。
    /*直接添加给transform:标签 距离 显示屏 1000px*/
transform:perspective(1000px)

/*直接使用perspective 属性赋值:标签 距离 显示屏 1000px*/
perspective:1000px

2.11.3 视角方向 perspective-origin

默认我们是直直的看着屏幕，通过该属性可以修改查看屏幕的角度。

2.11.4 3D呈现 transform-style

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形，即让浏览器开启3D渲染。

  • flat：所有子元素在 2D 平面呈现。
  • preserve-3d：开启3D空间。

2.11.5 backface-visibility

设置元素背面是否可见。

2.12 动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

2.12.1 过渡的局限性

  • transition需要事件触发，所以没法在网页加载时自动发生。
  • transition是一次性的，不能重复发生，除非一再触发。
  • transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
  • 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
  • CSS Animation就是为了解决这些问题而提出的。

2.12.2 必要元素

  • 通过@keyframes指定动画序列。
  • 通过百分比将动画序列分割成多个节点。
  • 在各节点中分别定义各属性。
  • 通过animation将动画应用于相应元素。
/*动画名为:sevenColor
    开始背景为红色
    中途背景为橘色
    结束为黄色
*/
@keyframes changeColor{
            0%{background-color:red;}
            50%{background-color:orange;}
            100%{background-color:yellow;}
}    

/*动画名为:changeColor
   效果跟上面的一样,只是使用关键字
   from 开始
   to 结束
*/
@keyframes sevenColor{
            from{background-color:red;}
            50%{background-color:orange;}
            to{background-color:yellow;}
}   

/*动画名为:someProperty
   效果跟上面的一样,只是使用关键字
    添加了多个属性
*/
@keyframes someProperty{
            from{
                background-color:red;
                width:100px;
            }
            50%{
                background-color:orange;
                transform:rotate(100deg);
            }
            to{
                background-color:yellow;
                height:200px;
            }
}

2.12.3 动画属性

  • animation-name：设置动画序列名称。
  • animation-duration：动画持续时间。
  • animation-delay：动画延时时间。
  • animation-timing-function：动画执行速度，linear、ease等。
  • animation-play-state：动画播放状态，running、paused等。
  • animation-direction：动画逆播，alternate等。
  • animation-fill-mode：动画执行完毕后状态，forwards、backwards等。
  • animation-iteration-count：动画执行次数，inifinate等。
  • steps(60)：表示动画分成60步完成。
  • 复合写法：第一个时间必须为动画时间，第二个时间必须为动画延迟时间，其余属性的位置可以任意写。
animation-name: sevenColor;                 /*动画名*/
animation-duration: 1s;                     /*持续时间*/
animation-delay: 1s;                        /*延迟时间*/
animation-fill-mode: forwards;              /*动画播放完毕时的状态 (还原,结束值)*/
animation-iteration-count: infinite;        /*动画次数(具体次数,或者无限次)*/
animation-timing-function: ease-in;         /*动画的播放过渡类型*/
animation-play-state: running;              /*动画状态 running 或者pause*/
animation-direction: alternate;             /*动画的方向 正向 方向 正方,反向交替 方向,正向交替*/

animation: animationName 1s infinite  ease-in forwards 1s;  /*复合写法*/

2.13 伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

  • 必要属性：

    对于想要使用伸缩盒子布局的元素，需要为他们的父盒子添加display:flex属性，才能够开启该选项。

    display:flex  /* 开启弹性布局 */

  • 宽度设置：

    1. 在不设置弹性盒子的方向时，默认是从左往右进行布局。
    2. 如果元素有宽度，那么可以使用自身宽度。
    3. 也可以通过flex:数字的方式设置宽度比例，实现等比例效果。
    /* 会使用设置的宽度 */
width:100px;

/* 使用比例宽度
    假设父容器中 有3个子元素 ,flex都为1 那么 每个宽度为
    100%/3
    有3个子元素 ,flex分别为1,2,3 那么 宽度依次为
    (100%/(1+2+3))*1
    (100%/(1+2+3))*2
    (100%/(1+2+3))*3
*/
flex:1;

  • 轴设置：

    • flex-direction：可调整主轴方向。

      1. 默认情况下横向叫做主轴，竖向叫做副轴。
      2. 需要通过作为容器的父盒子进行修改。
      display:flex;
flex-direction:column;/* 设置纵轴为主轴 */

    • justify-content：调整主轴对齐方式。

      1. space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于flex-start。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
      2. space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于center。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
      justify-content:space-between;  /* 水平方向对齐方式  这个值为间距相等 两边顶边 */

    • align-items：调整副轴对齐方式。

      align-items: center;    /*  副轴的 元素排布 */

  • 换行：

    1. flew-wrap默认为nowrap。
    2. 当我们设置的子元素宽度一行无法装下时，配合该属性可以设置换行。
    3. 多行文本的对齐使用align-content来设置。
    4. 如果使用flex按照比例，只会切割一行，无法实现换行，需要使用数值的尺寸(px,%,em)。
    flex-wrap:wrap;           /*设置换行*/
align-content:center; /*设置多行对齐方式*/

    ​

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