HTML5元素
html5的简介
- 2014 年 10 月 28 日，W3C 组织公开公布 HTML5 标准规范。
- HTML5 针对大量不标准的 HTML 文档，做到了良好的兼容性。
HTML5 和 HTML4 的区别
- DTD 的变动：因为HTML4.01基于SGML，HTML5不基于SGML
HTML5 的语法变动
某些元素能够省略完结标签
（<p> <li> <dt> <dd> 等）没有完结标签的元素
(<br> 等）- 属性值能够不必引号括起来
- 标签不再辨别大小写
- 某些标志性的属性能够省略属性值，通常为 boolean 类型
HTML5 的劣势
- 解决跨浏览器，跨平台问题
- 加强了 web 的应用程序（比方以前用 Flash 来播放视频，当初间接应用 HTML5 来播放视频，使得手机网页也能看视频）
HTML5废除的标签
big center font frame frameset noframesHTML5新增的元素
<header> 用于定义文档或节的页眉<footer> 用于定义文档或节的页脚<article> 用于定义文档内的文章<section> 用于定义文档中的一个区域（或节）<aside> 用于定义与以后页面或以后文章的内容简直无关的从属信息<nav> 用于定义页面上的导航链接局部<audio> 定义声音，比方音乐或其余音频流<video> 定义视频，比方电影片段或其余视频流<mark> 用于定义高亮文本<time> 用于显示被标注的内容是日期或工夫（24 小时制）<progress> 用于示意一个进度条<figure> 用于定义一段独立的援用，常常与阐明(caption)<figcaption>配合应用，通常用在主文中的图片，代码，表格等。<figcaption> 用于示意是与其相关联的援用的阐明/题目，用于形容其父节点<figure>元素里的其余数据。<hgroup> 用于对多个<h1>~<h6>元素进行组合成果
<mark>你好</mark><mark>你好</mark>
<figure>  <figcaption>图片题目</figcaption></figure><!-- 输入框搜寻 --><input type="text" list="list"><datalist id="list"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="山西">山西</option></datalist>成果：
<input type="text" list="list">
<datalist id="list">
<option value="北京">北京</option><option value="上海">上海</option><option value="山西">山西</option></datalist>
<!-- 点击开展 只有谷歌和苹果浏览器反对--><details> <summary>今天天气凉爽吗？</summary> <p>明天下雨了，天气很凉爽</p></details>成果：
<details>
<summary>今天天气凉爽吗？</summary><p>明天下雨了，天气很凉爽</p></details>
### HTML5的表单控件
<form action="" method="get" oninput="x.value=parseInt(a.value)"> 0 <input type="range" id="a" value="50"> 100 <br/> <output name="x" for="a">50</output></form>### HTML5新增的type类型
color number emailtime 生成一个工夫选择器datetime 生成一个 UTC 的日期工夫选择器datetimelocal 生成一个本地化的日期工夫选择器date 显示一个日期输出区域，可同时应用日期选择器，后果值包含年、月、日，不包含工夫。谷歌辨认### HTML5新增的表单属性
placeholder 次要用在文本框，规定可形容输出字段预期值的简短的提示信息autofocus 当为某个表单控件减少该属性后，当浏览器关上这个页面， 这个表单控件会主动取得焦点list 为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会依据输出的字符，主动显示下拉列表提醒，供用户从中抉择pattern 用于验证表单输出的内容，通常 HTML5 的 type 属性，比方email、tel、 number、url 等，曾经自带了简略的数据格式验证性能了，加上 pattern 属性后， 验证会更加高效required 必须在提交之前填写输出字段spellcheck 拼写查看，为<input>、<textarea>等元素新增属性multiple 一次上传多个文件maxlength <textarea>新增<br />maxlength：用于规定文本区域最大字符数。wrap：是否蕴含换号符（soft/ hard） 成果：
<form id="login" action="" method="get"> 用户名：<input type="text" name="username" placeholder="请输入用户名" required><br> 年龄：<input type="number" name="num" min=10 max=20 step="5" value="10"><br> 邮箱：<input type="email" name="email"><br> 生日：<input type="date" name="data"><br> 喜好：<select size="2" multiple name="like"> <option>篮球</option> <option>足球</option> <option>羽毛球球</option> </select> 喜爱的色彩：<input type="color" name="color"><br> <button type="submit">提交</button></form><form id="login" action="" method="get">
用户名：<input type="text" name="username" placeholder="请输入用户名" required><br>年龄：<input type="number" name="num" min=10 max=20 step="5" value="10"><br>邮箱：<input type="email" name="email"><br>生日：<input type="date" name="data"><br> 喜好：<select size="2" multiple name="like"> <option>篮球</option> <option>足球</option> <option>羽毛球球</option></select>喜爱的色彩：<input type="color" name="color"><br><button type="submit">提交</button></form>
css3选择器
兄弟选择器
.box~p： .box所有的p都会被抉择，且这些元素和第一个元素领有同一个父元素（两个元素之间不肯定要相邻)属性选择器：
E[attribute^=value] 用于选取带有以指定值结尾的属性值的元素E[attribute$=value] 用于选取属性值以指定值结尾的元素E[attribute*=value] 用于选取属性值中蕴含指定值的元素，地位不限，也不限度整个单词伪类选择器
:root 抉择文档的根元素，HTML 里，永远是<html>元素:last-child 向元素增加款式，且该元素是它的父元素的最初一个子元素:nth-child(n) 向元素增加款式，且该元素是它的父元素的第 n 个子元素:nth-last-child(n) 向元素增加款式，且该元素是它的父元素的倒数第 n 个子 元素:only-child 向元素增加款式，且该元素是它的父元素的惟一子元素:first-of-type 向元素增加款式，且该元素是同级同类型元素中第一个元 素:last-of-type 向元素增加款式，且该元素是同级同类型元素中最初一个 元素:nth-of-type(n) 向元素增加款式，且该元素是同级同类型元素中第 n 个元 素:nth-last-oftype(n)向元素增加款式，且该元素是同级同类型元素中倒数第 n 个元素:only-of-type 向元素增加款式，且该元素是同级同类型元素中惟一的元素:empty 向没有子元素（包含文本内容）的元素增加款式伪元素选择器
:enabled 向以后处于可用状态的元素增加款式，通常用于定义表单的款式或者超链接的款式:disabled 向以后处于不可用状态的元素增加款式，通常用于定义表单的 款式或者超链接的款式:not(selector) 向不是 selector 元素的元素增加款式:target 向正在拜访的锚点指标元素增加款式css3属性
background
background-clip 设置背景覆盖范围 border-box/padding-box/content-box background-origin 设置背景笼罩的终点 border-box/padding-box/content-box background-size 设置背景的大小 cover/contain/长度/百分比 文字
text-overflow 设置当文本溢出元素框时解决形式 clip/ellipsis word-break 只对英文起作用 以字母作为换行根据 normal/break-word word-wrap 只对英文起作用 以单词作为换行根据 normal/break-all/keep-all white-space:pre-wrap 只对中文起作用，强制换行盒子属性
border-radiusbox-shadowresize变形
translate(x,y)
示意元素程度方向挪动 x，垂直方向挪动 y，其中 y 能够省略，示意垂直方向没有位移
translateX(x)：示意元素程度方向挪动 x。translateY(y)：示意元素垂直方向挪动y。rotate(angle)
示意元素顺时针旋转 angle 角度，angle 的单位通常为 deg
scale(x,y)
示意元素程度方向缩放比为 x，垂直方向上缩放比为y，其中y能够省略，示意y和 x雷同，以放弃缩放比。
scaleX(x)：示意元素程度方向缩放比为 x。scaleY(y)：示意元素垂直方向上缩放比为 y。skew(angleX ,angleY)
示意元素沿着 x 轴方向歪斜angleX角度，沿着y轴方向歪斜angleY角度，其中 angleY能够省略，示意 Y 轴方向不歪斜。
skewX(angleX)：示意元素沿着 x 轴方向歪斜angleX 角度。skewY(angleY)：示意元素沿着 y 轴方向歪斜 angleY 角度。transform-origin
示意元素旋转的中心点
默认值为 50% 50%。
- 第一个值表 示元素旋转中心点的程度地位，它还能够赋值 left、right、center、长度、百分比；
- 第二个值示意元素旋转中心点的垂直地位，它还能够赋值 top、bottom、 center、长度、百分比。
CSS3 的 3D 变形属性
transform 减少了三个变形函数：
rotateX：示意元素沿着 x 轴旋转。rotateY：示意元素沿着 y 轴旋转。rotateZ：示意元素沿着 z 轴旋转。transform-style
用来设置嵌套的子元素在 3D 空间中显示成果。它能够设置两个属性值，flat（子元素不保留其 3D 地位，默认值）和 preserve-3d（子元 素保留它的 3D 地位）。
perspective
设置成透视成果，透视成果为近大远小。该属性值用来设置 3D 元素间隔视图的间隔，单位为像素，曾经内置了，咱们只须要写具体数值即可，默认值为 0。当为元素定义 perspective 属性时，其子元素会取得透视成果，而不是元素自身。
perspective-origin
设置 3D 元素所基于的 x 轴和 y 轴，扭转 3D 元素的底部地位，该属性取值同transform-origin，默认值为 50% 50%。
<style>
.box{ width: 300px; height: 300px; margin: 50px auto; perspective: 500px;}.con{ position: relative; width: 300px; height: 300px; transform-style: preserve-3d; transform-origin: 50% 50% -150px; animation: rotate 4s infinite;}.con .side{ position: absolute; width: 300px; height: 300px; font-size: 44px; line-height: 300px; text-align: center;}.con .before{ background-color: rgba(0,0,0,0.4);}.con .left{ background-color: rgba(255,0,0,0.4); left: -300px; top: 0; transform: rotateY(-90deg); transform-origin:right;}.con .right{ background-color: rgba(255,255,0,0.4); left: 300px; top: 0; transform: rotateY(90deg); transform-origin: left;}.con .top{ background-color: rgba(0,255,0,0.4); left: 0; top: -300px; transform: rotateX(90deg); transform-origin: bottom;}.con .bottom{ background-color: rgba(0,0,255,0.4); left: 0; top: 300px; transform: rotateX(-90deg); transform-origin: top;}.con .back{ background-color: rgba(200,122,0,0.4); transform: translateZ(-300px);}@keyframes rotate{ 0%{ transform:rotateX(0) rotateY(0); } 50%{ transform:rotateX(0) rotateY(360deg); } 100%{ transform:rotateX(360deg) rotateY(360deg); }}</style>
<div class="box">
<div class="con"> <div class="side before">前</div> <div class="side back">后</div> <div class="side top">上</div> <div class="side bottom">下</div> <div class="side left">左</div> <div class="side right">右</div></div></div>
代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>立方体</title> <style> .box{ width: 300px; height: 300px; margin: 100px auto; perspective: 500px; } .con{ position:relative; width:300px; height:300px; transform-style:preserve-3d; transform-origin:50% 50% -150px; animation:rotate 4s infinite; } .con .side{ position:absolute; width:300px; height:300px; font-size:44px; line-height: 300px; text-align: center; } .con .before{ background-color: rgba(0,0,0,0.4); } .con .left{ background-color: rgba(255,0,0,0.4); left:-300px; top:0; transform:rotateY(-90deg); transform-origin:right; } .con .right{ background-color: rgba(255,255,0,0.4); left:300px; top:0; transform:rotateY(90deg); transform-origin:left; } .con .top{ background-color: rgba(0,255,0,0.4); left:0; top:-300px; transform:rotateX(90deg); transform-origin:bottom; } .con .bottom{ background-color: rgba(0,0,255,0.4); left:0; top:300px; transform:rotateX(-90deg); transform-origin:top; } .con .back{ background-color: rgba(200,122,0,0.4); transform:translateZ(-300px); } @keyframes rotate{ 0%{ transform:rotateX(0) rotateY(0); } 50%{ transform:rotateX(0) rotateY(360deg); } 100%{ transform:rotateX(360deg) rotateY(360deg); } } </style></head><body><div class="box"> <div class="con"> <div class="side before">前</div> <div class="side back">后</div> <div class="side top">上</div> <div class="side bottom">下</div> <div class="side left">左</div> <div class="side right">右</div> </div></div></body></html>阐明
CSS3 perspective 属性
实例，设置元素被查看地位的视图：
div{perspective: 500;-webkit-perspective: 500; /* Safari 和 Chrome */}<style>
div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; / Safari and Chrome /
}
div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); / Safari and Chrome /
}
</style>
<div id="div1">
<div id="div2">HELLO</div>
</div>
代码：
<!DOCTYPE html><html><head><style>#div1{position: relative;height: 150px;width: 150px;margin: 50px;padding:10px;border: 1px solid black;perspective:150;-webkit-perspective:150; /* Safari and Chrome */}#div2{padding:50px;position: absolute;border: 1px solid black;background-color: yellow;transform: rotateX(45deg);-webkit-transform: rotateX(45deg); /* Safari and Chrome */}</style></head><body><div id="div1"><div id="div2">HELLO</div></div></body></html>浏览器反对
目前浏览器都不反对 perspective 属性。
Chrome 和 Safari 反对代替的 -webkit-perspective 属性。
定义和用法
perspective 属性定义 3D 元素距视图的间隔，以像素计。该属性容许您扭转 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会取得透视成果，而不是元素自身。
正文：perspective 属性只影响 3D 转换元素。
提醒：请与 perspective-origin 属性一起应用该属性，这样您就可能扭转 3D 元素的底部地位。
过渡动画
transition:property transition-duration transition-delay transition-timing-function transition-delay 设置过渡的延迟时间transition-duration 设置过渡的过渡工夫transition-timing-function 设置过渡的工夫曲线linear/ease/ease-in/easeout/ease-in-out/transition-property 设置哪条 CSS 应用过渡none/all/CSS 属性名称列表@keyframes name{}animation:name duration delay count stateanimation-name 应用@keyframes 定义的动画animation-delay 设置动画的延迟时间animation-timing-function 设置动画的工夫曲线linear/ease/ease-in/easeout/ease-in-outanimation-iteration-count 设置动画播放次数数字 /infiniteanimation-direction 设置动画反向播放 normal/alternateanimation-play-state 设置动画播放状态 paused/runninganimation-fill-mode: forwards 动画放弃最终状态动画
<style>
.box{ position: relative; width: 600px; height: 400px; border:2px solid blue; overflow: hidden;}.box .main{ width: 100px; height: 100px; background-color: red; animation:translate 2s 1s 1 linear forwards; }.box:hover .main{ animation-play-state: paused;}@keyframes translate{ 0%{ transform: translateX(0) translateY(0); } 25%{ transform: translateX(500px) translateY(0); } 50%{ transform: translateX(500px) translateY(300px); } 75%{ transform: translateX(0) translateY(300px); } 100%{ transform: translateX(0) translateY(300px); }}</style>
<div class="box">
<div class="main"></div></div>
代码：
<!DOCTYPE html><html><head><title>过渡动画</title><meta charset="utf-8"><style> .box{ position: relative; width: 600px; height: 400px; border:2px solid blue; overflow: hidden; } .box .main{ width: 100px; height: 100px; background-color: red; animation:translate 2s 1s 1 linear forwards; } .box:hover .main{ animation-play-state: paused; } @keyframes translate{ 0%{ transform: translateX(0) translateY(0); } 25%{ transform: translateX(500px) translateY(0); } 50%{ transform: translateX(500px) translateY(300px); } 75%{ transform: translateX(0) translateY(300px); } 100%{ transform: translateX(0) translateY(300px); } }</style></head><body><div class="box"> <div class="main"></div></div></body></html>弹性盒子
CSS3 弹性盒，是一种当页面须要适应不同的屏幕大小以及设施类型时确保元素领有失当的行为的布局形式。
弹性盒模型概念
任何一个容器都能够指定弹性布局
设置 flex 布局当前，子元素的 float,clear,vertical-align 等款式全副生效
display:flex;或 display:inline-flex;弹性父元素属性
display:flex;flex-direction: row|row-reverse|column| column-reverse指定了弹性子元素在父容器中的地位。juestify-content: flex-start|flex-end|center|space-between| space-around 程度对齐形式align-items:flex-start | flex-end | center | baseline | stretch 垂直对齐形式flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;align-content:当flex-wrap起作用产生换行时，该属性管制每行的对齐形式弹性子元素属性
order:num 数值小的排在后面。能够为负值
flex 属性用于指定弹性子元素如何调配空间