本来有一个京东项目需要些但是写了一部分，发现太多了，慢慢就学h5c3再单独写一个京东案例
1：html5新标签与特性
兼容性问题(ie9以上的版本)
常用新标签
header：定义文档的头部，页眉
nav：定义导航链接部分
footer：定义文档或节的底部，页脚
section：定义文档中的节（session,时区）
article：定义文章
aside：定义其所处内容之外的内容，侧边
2：新增表单
email：输入邮箱格式
tel ：输入手机号格式
url：输入ur格式
number：输入数字格式
search：搜索框
range：自由拖动滑块
time：小时分钟
date：年月日
datatime：时间
month：月年
week：周年
代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>新增表单属性</title>
<style>
.box{
width: 700px;
border: 1px solid #000;
/*overflow:hidden;*/
margin:0 auto;
}
.box dl{
overflow:hidden;
margin:15px 5px;
}
.box dl dt, .box dl dd{
float: left;
}
.box dl dt{
width: 100px;
}
.box dl dd{
width: 200px;
}
</style>
</head>
<body>
<form action="">
<div class="box">
<dl>
<dt>邮箱</dt>
<dd><input type="email"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>常住地</dt>
<dd><input type="text"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>常住地</dt>
<dd><input type="text"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>常住地</dt>
<dd><input type="text"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>常住地</dt>
<dd><input type="text"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>常住地</dt>
<dd><input type="text"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>常住地</dt>
<dd><input type="text"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>常住地</dt>
<dd><input type="text"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt></dt>
<dd><input type="submit" value="提交"></dd>
<dd><input type="reset" value="重置"></dd>
</dl>
</div>
</form>
</body>
</html>
效果图：
3：插入视屏，音频
4：css3新增选择器
结构(位置)伪类选择器（css3）
：first-child:选取属于父元素的首个子元素的指定选择器
:last-chid
nth-child(第n个) (even奇数，odd偶数，从0开始，但是本身是从1开始，所以这个o没什么卵用，还是从1开始)
属性选择器
div[class] 选出带有class属性的，div[class='demo'] 选出class=demo div[class^='demo']以demo开头的，$结束
伪元素选择器
定义：
伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
因为伪元素并不在文档树中，所以通过JS，也抓取不到伪元素，也不能给它绑事件。
语法
伪元素以
::
开头。
在CSS1和CSS2中，伪元素和伪类一样，都是用
:
开头。但在CSS3中，伪元素以
::
开头，用以和伪类进行区分。
IE8不支持
::
。因此如果要兼容IE8，只能用
:
。
常见的伪元素
E::first-letter:文本的第一个字或单词
E:first-line:文本第一行
E::first-selection:可改变选中文本的样式
after，before
在当前元素的内容的后面，前面插入一个子元素。插入的元素为内联元素。
需要注意的是，使用::before时， 必须使用
content
来指定子元素的内容。
说到伪元素，不得不解释一下之前用伪元素清除浮动的方法
css3盒模型
小米案例
鼠标经过显示三角
before是一个能插入元素的选择器
先看小米案例：
给一个图片，当鼠标经过的时候，会出现一个透明的边框，而且图片的大小不变，这时候图片的大小不变，还要有边框，自然就会出现缩放的效果
a：首先是给定一张图片，并且用盒子装上。
b:用伪元素给盒子插入一个边框。这边框是和图片框框的大小一样的，100%，100%，这个时候图片和边框都是行内快元素，会多行显示。这时候需要用定位把边框放在图片后面。有边框会将原来的的盒子撑开，这时候css3的属性box-sizing：border-box就起作用了，他会自动将边框的内容减去，边框这里有个妙用，可以将边框颜色弄成半透明的rgba().需要注意的是，子元素设置绝对定位，父元素要设置相对定位
代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 632px;
height: 340px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
div:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 20px solid rgba(255, 255, 255, .5);
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="">
<img src="mi.jpg" alt="">
</div>
</body>
</html>
效果图
鼠标经过显示三角
这个案例就是用before伪元素是可以插入元素的选择器来做的
代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>鼠标经过显示三角</title>
<style type="text/css">
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#SofiaProLight') format('svg');
}
div {
width: 300px;
height: 20px;
border: 1px solid black;
margin: 100px auto;
position: relative;
font-family: 'icomoon';
font-weight: normal;
}
div::before {
content: "\e905";
position: absolute;
top: 5px;
right: 5px;
}
div:hover {
border: 1px solid red;
/*color:red;*/
}
div:hover::before {
color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果图
京东项目，后续会补上
1：轮播模块
2：tab栏切换模块