HTML5+CSS3总结

HTML5+CSS3

新增标签

<!-- 头部页眉 -->
<header></header>

<!-- 导航 -->
<nav></nav>

<!-- 块 -->
<section></section>

<!-- 侧边栏 -->
<aside></aside>

<!-- 文章内容 -->
<article></article>

<!-- 底部页脚 -->
<footer></footer>

<!-- 画布 -->
<canvas></canvas>

<!-- 定义 figure 元素的标题 -->
<figcaption></figcaption>

audio video多媒体标签

<!-- 音频 audio  -->
<audio autoplay  controls>
    <source src="audio/yinyue.mp3">
    <source src="audio/yinyue.ogg">
</audio>

<!-- 音频 video  -->
<video autoplay controls>
  <source src="video/movie.ogg">
  <source src="video/movie.mp4">
  <source src="video/movie.webm">
</video>

<!-- 属性 直接放在标签里就行了 paused暂停zhuangtai controls显示控件 autoplay自动播放 -->

<!-- 方法 play()播放 pause()暂停播放 -->
obj.play() //播放
obj.pause() //暂停播放

<!-- 事件 onpause暂停事件 onplay播放事件 -->

智能表单

表单格式

<!-- form标签放在外面 label选框点字也可以 -->
<form action="">
    <fieldset>
        <label for="">
            <input type="text" />
        </label>
        <label for="">
            <input type="button"/>
        </label>
    </fieldset>
</form>

<!-- email邮箱 tel手机号码 url输入url number输入数字格式 search搜索框 -->
<!-- range自由拖动滑块 color拾色器 time时间 datetime日期时间  month月份 -->

<!-- 新增表单属性 -->
autofocus 自动获得焦点
autocompulete="on"
autocompulete="off" 提示之前输入的内容
required 表单不能为空，如果为空，则提示用户
placeholder="请输入用户名"  初始提示

<!-- 新增表单事件 -->
oninvalid="this.setCustomValidity('请输入11位的手机号码')" 当元素无效时运行脚本，配合正则
oninput 随时触发，只要数字改变就会触发
onchange 改变值才会触发，以最后的结果为准，如果没有确定的话，就不会触发

新增API

<!-- querySelector选择器 类似于jQuery的 $ 只会获取第一个，默认是第一个 -->
document.querySelector("#id")
document.querySelector(".name") //name是class类


<!-- querySelectorAll选择器 可以获取多个，是一个伪数组 -->
document.querySelectorAll(".name")

操作类样式classList

/**classList.add()增加类 classList.remove()删除类 classList.toggle()切换类 classList.container()判断类**/
document.querySelector(".demo").classList.add("abc");
document.querySelector(".demo").classList.remove("abc");
document.querySelector(".demo").classList.toggle("abc");
document.querySelector(".demo").classList.contains("abc"); //f返回的是布尔值

自定义属性

/**凡是以自定义属性都需要 data- 开头**/

/**读取自定义属性**/
<li data-src="movies/movie.mp4">海鸟捕鱼</li>
document.querySelector("li").dataset['src'] //会得到movies/movie.mp4

/**设置自定义属性**/
<li>海鸟捕鱼</li>
document.querySelector("li").dataset['src']="movies/movie.mp4" //会得到<li data-src="movies/movie.mp4">海鸟捕鱼</li>

Web存储

参考网址http://caibaojian.com/localstorage-sessionstorage.html

cookie

/**cookie是存储于访问者计算机中的变量，并且只有4k的大小，发送请求都会存在url中**/

/**存取cookie并设置有效期**/
var date = new Date();
date.setDate(_date.getDate() + 30);
date.toGMTString();
document.cookie = "name=yulong;expires=date" //存储的是变量name里面的值是yulong,有效期是30天

sessionStorage临时存储

/**sessionStorage生命周期是会话**/

localStorage永久存储

/**localStorage生命周期是永久，sessionStorage跟localStorage设置和读取是一致的**/

/**添加键值对 setItem**/
// 把一个用户名(lilei)存储到 name 的键上
localStorage.setItem('name', 'lilei');
// localStorage.name = 'lilei';
// localStorage['name'] = 'lilei';
// 把一个用户存储到user的键上
localStorage.setItem('user', JSON.stringify({id:1, name:'lilei'}));

/**获取键值对**/
// 获取存储到 name 的键上的值
var name = localStorage.getItem('name');
// var name = localStorage.name;
// var name = localStorage['name'];
// 获取存储到user的键上的值
var user = JSON.parse(localStorage.getItem('user'));

/**删除键值对 removeItem **/
var name = localStorage.getItem('name'); // 'lilei'
// 删除存储到 name 的键上的值
localStorage.removeItem('name');
name = localStorage.getItem('name'); // null

/**清除所有键值对 clear**/
// 清除 localStorage
localStorage.clear();
var len = localStorage.length; // 0

/**获取 localStorage 的属性名称(键名称)：localStorage.key(index)key 方法用于获取指定索引的键名称。**/
localStorage.setItem('name','lilei');
var key = localStorage.key(0); // 'name'
localStorage.setItem('age', 10);
key = localStorage.key(0); // 'age'
key = localStorage.key(1); // 'name'

/**获取 localStorage 中保存的键值对的数量：localStorage.lengthlength 属性用于获取 localStorage 中键值对的数量。**/
localStorage.setItem('name','lilei');
var len = localStorage.len; // 1
localStorage.setItem('age', 10);
len = localStorage.len; // 2

Web Storage 事件

/**storage事件 当存储的数据发生变化时，会触发 storage 事件。**/
function storageChanged() {
    console.log(arguments);
 }

window.addEventListener('storage', storageChanged, false);

选择器

关系选择器

<ul>
  <li>这是第1个li标签</li>
  <li>这是第2个li标签</li>
  <li class="li3">这是第3个li标签</li>
  <li>这是第4个li标签</li>
  <li>这是第5个li标签</li>
  <li>这是第6个li标签</li>
</ul>

<!-- +下一个兄弟选择器 -->
.li3+li //是第4个li标签

<!-- ~下面所有的兄弟选择器 -->
.li3~li //是第4，5，3个li标签

属性选择器

~~~html

• 这是第1个li标签
• 这是第2个li标签
• 这是第3个li标签
• 这是第4个li标签
• 这是第5个li标签
• 这是第6个li标签
• 这是第7个li标签
• 这是第8个li标签

所有的li标签都是

第1个标签就是

第1，2，3，4，5，7，8个标签就是

第2个标签就是

第1，2，3，4，5，7，8个标签就是
~~~

伪类选择器

<!-- first-child第一个 last-child最后一个 nth-child(3)第n个 nth-of-type(n)第n个 -->
<ul>
  <li>这是第1个li标签</li>
  <li>这是第2个li标签</li>
  <li class="li3">这是第3个li标签</li>
  <li>这是第4个li标签</li>
  <li>这是第5个li标签</li>
  <li>这是第6个li标签</li>
</ul>

<!-- li:first-child选择属于父元素的第一个子元素的li标签 -->
第1个li标签

<!-- li:last-child选择属于父元素的最后一个个子元素的li标签 -->
第1个li标签

<!-- li:nth-child(3)选择属于父元素的第3个子元素的li标签 -->
第3个li标签

<!-- li:nth-of-type(n)选择属于父元素的第n个子元素的li标签,不是li标签的会忽略 -->
第n个li标签，还得是li标签

其他选取器

/**checked表单选中的状态 disabled表单禁用的时候 enabled表单正常的时候**/

/** input:checked表单选框选中的状态 **/
input:checked{
  color:white;
}

/** input:disabled表单禁用的状态 **/
input:disabled{
  color:gray;
}

/** input:enabled表单正常的状态 **/
input:disabled{
  color:block;
}

/** :target 选择器会突出显示当前活动的 HTML 锚 **/

参考网址 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

<div class="box box1"></div>
<div class="box box2">
  <p></p>
</div>
<div class="box box3">
  <span></span>
</div>
<div class="box box4"></div>
/** not()除了自己其他兄弟级元素跟siblings类似 **/

div:not(".box4"){
  color:white //第1，2，3个颜色变成白色
}

div:not(":nth-child(3)"){
  color:white //第1，2，4个颜色变成白色
}

/** :empty没有子元素div **/
input:disabled{
  color:gray; //第1，4个颜色变成灰色
}

伪元素选择器

/**伪元素就是一个假的元素，不占用内存，前面需要两个冒号 ::,并且content不能省略*/
/** before之前 after之后 selection被用户选取的 first-letter第一行第一个文字 first-line第一行字 **/

/** ::before元素之前 content属性不能省略 ::after也是类似的 **/
div::before{
  content:"你好吗";//用伪元素必须有content属性
  color:white;
}

/** ::selection选择被用户选取的部分**/
div::selection{
  content:"你好吗";//用伪元素必须有content属性
  color:white;
}

/** ::first-letter获取第一行第一个文字**/
div::first-letter{
  content:"你好吗";//用伪元素必须有content属性
  color:white;
}

/** ::first-line获取段落第一行字**/
div::first-line{
  content:"你好吗";//用伪元素必须有content属性
  color:white;
}

伪类

/**:link鼠标未访问状态的连接 :visitive鼠标访问状态后的连接 :hover鼠标移入的状态(div也可以) :active鼠标点击没有放手的状态(div也可以)**/
a:link{
  color:white;
}

边框

/**border-raduis边框圆角 border-image边框图片**/

/**border-radius边框圆角 **/
div{
  border-radius:5px 10px; //x轴圆角5px y轴圆角10px
}
div{
  border-radius:50%; //50%以上就是个圆
}

/**border-image边框图片 **/

字体

字体阴影

/**text-shadow字体阴影**/
div{
  text-shadow:5px 5px 5px #FF0000; //x轴5px y轴5px 羽化5px 颜色
}

背景

/**background-size背景尺寸 cover铺满整个盒子 contain只要一边触及边线会停止铺**/
div{
  background-size:200px //设置背景尺寸高为200px的等比例缩放
  background-size:200px 200px; //设置背景尺寸宽为200px，高为400px
  background-size:cover; //铺满整个盒子
  background-size:contain //只要一遍触及边线会停止铺
}

/*background-origin背景圆点 border-box背景圆点在边框左上角为准 padding-box填充左上角(默认是左上角) content-box内容左上角为准*/
div{
  background-origin:border-box;
  background-origin:padding-box;
  background-origin:content-box;
}

/*background-clip背景裁剪，跟背景圆点是类似的*/

/*linear-gradient线性渐变*/
div{
  background-image: linear-gradient(to right,red 10%, blue 80%)
    //渐变的方向，渐变开始的颜色 渐变开始的位置，渐变结束的颜色 渐变结束的位置 需要加to 默认是90从上到下
}

/*radial-gradient径向渐变*/
div{
  background-image:radial-gradient(200px at 30px 50px,red,blue); //半径 at X轴位置 Y轴位置,开始颜色，结束颜色
  background-image:radial-gradient(200px 80px at 30px 50px,red,blue) //X轴半径 Y轴半径 at X轴位置 Y轴位置,开始颜色，结束颜色
}

transition过渡

/*transition过渡，可以设置属性 过渡时间 运动曲线*/
div{
  transition: all 2s //所有的属性过渡2s

}

/*transitionend过渡完成的事件 */
box.addEventListener("transitionend",function(){
   console.log(123)
},false)

box-sizing盒子

/*content-box盒子外扩模式，border-box总宽高不变*/
div{
  box-sizing:content-box; /*这是盒子默认模式，设置margin和padding会增大总盒子的面积*/
  box-sizing:border-box /*总宽高不变，设置margin和padding会减少content宽度和高度*/
}

/*box-shadow盒子阴影*/
div{
  box-shadow: -28px -21px 142px 100px #000 inset;
}

transform转换

/*scale扩大 translate盒子移动 rotate旋转 skew倾斜或者切斜*/
div{
  transform:scale(1.2); /*扩大缩放1.2倍*/
  transform:translate(300px,200px); /*盒子向右移动300px,向下移动200px*/
  transform:translate(300px); /*盒子向右移动300px)*/  
  transform:translateZ(300px); /*Z轴向下移动300px*/  
  transform:rotate(45deg); /*顺时针旋转45度，默认是中心旋转(Z轴)*/
  transform:rotateX(45deg); /*正数的时候往里推倒，负值得时候往外*/  
  transform:rotateY(45deg); /*正数的时候往里面转，负值往外转*/
  transform-origin:50px 50px; /*旋转中心点*/
  transform-origin:center center; /*默认是中心对其*/
  transform:skew(30deg); /*X轴斜切30度*/
}

/*perspective：1000px 一般放在当前父盒子上，旋转的时候很明显*/
fatherdiv{
  perspective：1000px;
}

/*transform-style: preserve-3d 表示支持3D应用场景*/
fatherdiv{
  transform-style: preserve-3d; /*表示支持3D显示，保持一个3D应用场景 一般给父元素添加*/
}

/*backface-visibility指定元素背面可见，允许显示正面的镜像(默认显示的)*/
div{
  backface-visibility:visible; /*指定元素背面可见，允许显示正面的镜像(默认显示的)*/
  backface-visibility:hidden; /*指定元素背面不可见 */
}

animation动画

/*@keyframes定义动画和调用动画*/
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;  /*意思是动画用mymove这个动画，5秒走完，并且是无限循环*/
    animation:play 2s linear 0.6s alternate; /**/
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}

flex伸缩布局

/*flex伸缩布局 flex-direction主轴方向 justify-content主轴对齐方式 align-items侧轴对齐方式 align-content排列方式 flex-wrap控制换行*/

/*display:flex让对应的盒子变成伸缩布局,在父盒子设置*/
fatherdiv{
  display:flex; /*变成弹性盒子伸缩布局模式*/
}

/*flex-direction设置主轴方向 row向右 row-reverse向左 column向下 column-reverse向上*/
fatherdiv{
  flex-direction:row; /*主轴方向为水平向右*/
  flex-direction:row-reverse; /*主轴方向为水平向左*/
  flex-direction:column; /*主轴方向为竖直向下*/
  flex-direction:column-reverse; /*主轴方向是竖直向上*/
}

/*justify-content主轴(横轴)对齐方式 flex-start起始位置 flex-end结束位置 center居中 space-between左右靠边，中间平均 space-around所有盒子平均 在父盒子设置 */
fatherdiv{
  justify-content:flex-start; /*起始位置*/
  justify-content:flex-end; /*结束位置*/
  justify-content:center; /*居中*/
  justify-content:space-between; /*左右靠边，中间平均*/
  justify-content:space-around; /*所有盒子平均*/
}

/*align-items侧轴对齐方式 flex-start起始位置 flex-end结束位置 center居中 stretch拉伸到父元素一样高 在父盒子设置 */
fatherdiv{
  align-items:flex-start; /*起始位置*/
  align-items:flex-end; /*结束位置*/
  align-items:center; /*居中*/
  align-items:stretch; /*会把子元素的高度进行拉伸，拉伸到父元素一样高（高没有设置）*/
}

/*align-content用来设置多行的flex容器的排列方式，在侧轴的排列方式 在父盒子设置*/
fatherdiv{
  align-content:flex-start; /*各行侧轴的起始位置堆叠*/
  align-content:flex-end; /*各行向弹性盒容器的结束位置堆叠*/
  align-content:center; /*各行向弹性盒容器的中间位置堆叠*/
  align-content:space-between; /*各行在侧轴中平均分布*/
  align-content:space-around; /*第一行贴上边，最后一行贴下边，其他行在弹性容器中平均分布*/
  align-content:stretch; /*会把子元素的高度进行拉伸，拉伸到父元素一样高（高没有设置）*/
}

/*flex-wrap属性控制flex容器是单行或者多行,默认不换行 在父盒子设置*/
fatherdiv{
  flex-wrap:nowrap; /*默认是不换行的，会压缩盒子的宽度*/
  flex-wrap:wrap; /*换行，当宽度不够时会换行*/
}

/*flex:1均分子元素分配空间 order:0越小越靠前*/
sondiv{
  flex:1;
  order:0;
}