前端之html5和css3
圆角，透明度，rgba
css3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;
rgba（新的颜色值表示法）
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容ie）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
css3阴影
box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/* box-shadow:10px 10px 5px 2px pink inset; */
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div>
<!-- 给盒子加上了粉红色的阴影 -->
css3圆角示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css3圆角</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 300px;
height: 300px;
background-color: aqua;
border: 3px solid black;
margin: 50px auto 0;
/*border-top-left-radius: 30px 60px; !* 椭圆形角 *!*/
border-top-left-radius: 60px; /* 圆角 */
border-top-right-radius: 100px; /* 圆角 */
}
.box2 {
width: 300px;
height: 300px;
background-color: aqua;
border: 3px solid black;
margin: 50px auto 0;
/*border-radius: 150px;*/
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
透明度rgba示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>透明度</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: url(../../images/banner01.jpg);
}
.box {
width: 300px;
height: 100px;
background-color: black;
font-size: 20px;
color: white;
text-align: center;
line-height: 100px;
/* 元素透明度的完整写法，会将背景和字体的透明度的变化 */
opacity:0.3;
filter:alpha(opacity=30); /* 兼容ie */
}
.box2 {
width: 300px;
height: 100px;
background-color: rgba(0,0,0,0.3); /* 仅会设置背景的透明度 */
font-size: 20px;
color: white;
text-align: center;
line-height: 100px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box">这是一个div标签</div>
<div class="box2">这是一个div2标签</div>
</body>
</html>
transition动画
css3 transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式
linear 匀速
- ease 开始和结束慢速
- ease-in 开始是慢速
- ease-out 结束时慢速
- ease-in-out 开始和结束时慢速
- cubic-bezier(n,n,n,n)
比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲线设置网站：https://matthewlein.com/ceaser/
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
一般用缓冲状态；
鼠标移动到图形上变化动画
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 100px;
height: 100px;
background-color: aqua;
/*transition: width 1s ease;*/
/*transition: width 1s ease 1s; !* 延迟一秒再做动画 *!*/
/*transition: width 1s ease, height 1s ease 1s; !* 宽先动，高延迟一秒再动 *!*/
/*transition: width 1s ease, height 1s ease 1s, background-color 1s ease 2s; !* 宽先动，高延迟一秒再动 *!*/
/*transition: width 1s ease, height 1s ease, background-color 1s ease; !* 所有的一起动 *!*/
transition: all 1s ease; /* 所有的一起动，相当于上面一句 */
}
.box:hover {
/*width: 600px;*/
width: 600px;
height: 500px;
background-color: gray;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
鼠标移动图片弹出说明动画
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>图片说明文字</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pic_con {
width: 200px;
height: 300px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
.pic_info {
position: absolute;
left: 0;
top: 300px;
width: 200px;
height: 120px;
background-color: rgba(0,0,0,0.3);
color: white;
transition: all 500ms ease;
}
.pic_con:hover .pic_info {
top: 180px;
}
</style>
</head>
<body>
<div class="pic_con">
<img src="../../images/banner01.jpg" alt="产品图片">
<div class="pic_info">
<h3>文字标题</h3>
<p>文字说明</p>
</div>
</div>
</body>
</html>
transform变换
css3 transform变换
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translatex、translatey、translatez 设置三维移动
8、rotatex、rotatey、rotatez 设置三维旋转
9、scalex、scaley、scalez 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
transform是一个静态的效果，不是做动画的；但可以和动画进行配合使用；
其中，旋转用的比较多；
位移，缩放，旋转，斜切示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>transform</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 200px;
height: 200px;
border: 3px solid black;
margin: 50px auto 0;
background-color: aqua;
/* translate位移一比定位做的位移性能高，建议使用这种； */
transform: translate(0px, 0px);
transition: all 500ms ease; /* 通过transition将下面hover的效果实现动画化 */
}
.box:hover {
transform: translate(30px, 30px);
}
.box2 {
width: 200px;
height: 200px;
border: 3px solid black;
margin: 50px auto 0;
background-color: aqua;
transform: scale(1,1); /* 垂直缩放 */
transition: all 500ms ease; /* 通过transition将下面hover的效果实现动画化 */
}
.box2:hover {
transform: scale(2,2);
}
.box3 {
width: 200px;
height: 200px;
border: 3px solid black;
margin: 50px auto 0;
background-color: aqua;
transform: rotate(0deg); /* 旋转 */
transition: all 500ms ease; /* 通过transition将下面hover的效果实现动画化 */
}
.box3:hover {
transform: rotate(45deg);
}
.box4 {
width: 200px;
height: 200px;
border: 3px solid black;
margin: 50px auto 0;
background-color: aqua;
transform: skew(0,0); /* 斜切，将图形倾斜 */
transition: all 500ms ease; /* 通过transition将下面hover的效果实现动画化 */
}
.box4:hover {
transform: skew(45deg,0);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
transform-origin变换中心示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>变换中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box01, .box02, .box03, .box04 {
width: 200px;
height: 200px;
border: 2px solid black;
background-color: aqua;
margin: 30px;
float: left;
transition: all 500ms ease;
}
.box02 {transform-origin: left center}
.box03 {transform-origin: left top}
.box04 {transform-origin: 50px 50px} /* 相对于第四个盒子最左上角的下面50排序，右边50px转动 */
.box01:hover, .box02:hover, .box03:hover, .box04:hover {transform: rotate(90deg)}
</style>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
<div class="box04"></div>
</body>
</html>
图片翻转示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 图片翻转示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 700px;
height: 272px;
border: 2px solid black;
/*background-color: aqua;*/
margin: 50px auto 0;
transform-style:preserve-3d;
position: relative;
}
.box img {
position: absolute;
left: 0;
top: 0;
transform: perspective(800px) rotatey(0deg);
transition: all 1s ease;
}
.box:hover img {
transform: perspective(800px) rotatey(180deg);
}
</style>
</head>
<body>
<div class="box">
<img src="../../images/location_bg.jpg" alt="花的图片">
</div>
</body>
</html>
翻面动画示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 图片翻转示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 700px;
height: 272px;
border: 2px solid black;
/*background-color: aqua;*/
margin: 50px auto 0;
transform-style:preserve-3d;
position: relative;
}
.box img {
position: absolute;
left: 200px;
top: 0;
transform: perspective(800px) rotatey(0deg);
transition: all 1s ease;
backface-visibility: hidden; /* 设置盒子背面不可见 */
}
.box:hover img {
transform: perspective(800px) rotatey(180deg);
}
.box .back {
width: 300px;
height: 272px;
background-color: pink;
position: absolute;
left: 200px;
top: 0;
transition: all 1s ease;
font-size: 20px;
text-align: center;
line-height: 272px;
transform: perspective(800px) rotatey(-180deg);
backface-visibility: hidden; /* 设置盒子背面不可见 */
}
.box:hover .back {
transform: perspective(800px) rotatey(0deg);
}
</style>
</head>
<body>
<div class="box">
<img src="../../images/location_bg.jpg" alt="花的图片">
<div class="back">图片的说明文字</div>
</div>
</body>
</html>
animation动画
css3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction
normal 默认动画结束不返回
alternate 动画结束后返回
8、animation-play-state 动画状态
paused 停止
running 运动
9、animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
animation使用示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animation动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 定义动画 */
@keyframes moving {
from {
width: 100px;
}
to {
width: 500px;
}
}
.box {
width: 100px;
height: 100px;
background-color: aqua;
/*animation: moving 1s ease;*/
/*animation: moving 1s ease 1s; !*延迟一秒*!*/
/*animation: moving 1s ease 0s 5; !*反复五次，可以不写延迟*!*/
/*animation: moving 1s ease 0s 5 alternate; !*反复五次，并且返回，来回算两次*!*/
animation: moving 1s ease 0s infinite alternate; /*反复无数次*/
animation-play-state: paused; /*默认不移动*/
}
.box:hover {
/*animation-play-state: paused; !*鼠标放在图形上停止移动，拿走继续移动*!*/
animation-play-state: running; /*鼠标放在图形上开始移动，拿走不移动*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
风车旋转示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>风车旋转</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.cycle {
display: block;
width: 400px;
height: 400px;
margin: 50px auto 0;
animation: rotating 1s linear infinite;
}
</style>
</head>
<body>
<img src="./images/fengche.png" alt="风车图片" class="cycle">
</body>
</html>
风车图片
loading动画的制作
css3新增选择器，不用写过多的class，直接用某某下的某某的第几个即可；
loading动画
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>等待动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes loading {
from {
transform: scale(1, 1);
}
to {
transform: scale(1, 0.5);
}
}
.con {
width: 300px;
height: 158px;
border: 2px solid black;
margin: 50px auto 0;
}
.con div {
width: 30px;
height: 100px;
float: left;
background-color: aqua;
margin: 15px;
border-radius: 15px;
animation: loading 500ms ease 0s infinite alternate;
}
.con div:nth-child(1) {background-color: red;}
.con div:nth-child(2) {background-color: green; animation-delay: 200ms}
.con div:nth-child(3) {background-color: blue; animation-delay: 400ms}
.con div:nth-child(4) {background-color: aqua; animation-delay: 600ms}
.con div:nth-child(5) {background-color: gray; animation-delay: 800ms}
.con p {text-align: center}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>loading...</p>
</div>
</body>
</html>
走路动画
animation步数的应用-走路动画
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>走路动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes walking {
from {
left: 0;
}
to {
left: -960px;
}
}
.box {
width: 120px;
height: 180px;
border: 2px solid black;
margin: 50px auto 0;
overflow: hidden;
position: relative;
}
.box img {
position: absolute;
left: 0;
top: 0;
animation: walking 1s steps(8) infinite;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/walking.png" alt="走路图片">
</div>
</body>
</html>
走路图片
css权重
css权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、id选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0；
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
.box{
color:red!important;
}
/* body #content .main_content h2{
color:blue;
} */
#content div.main_content h2{
color:blue;
}
#content .main_content h2{
color:red;
}
</style>
</head>
<body>
<div class="box" style="color:blue">这是一个div元素</div>
<div id="content">
<div class="main_content">
<h2>这是一个h2标题</h2>
</div>
</div>
</body>
</html>
css3新增选择器
1、e:nth-child(n)：匹配元素类型为e且是父元素的第n个子元素
<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- 第2个子元素div匹配 -->
2、e:nth-last-child(n)：匹配元素类型为e且是父元素的倒数第n个子元素（与上一项顺序相反）
3、e:first-child：匹配元素类型为e且是父元素的第一个子元素
4、e:last-child：匹配元素类型为e且是父元素的最后一个子元素
5、e:only-child：匹配元素类型为e且是父元素中唯一的子元素
6、e:nth-of-type(n)：匹配父元素的第n个类型为e的子元素
7、e:nth-last-of-type(n)：匹配父元素的倒数第n个类型为e的子元素（与上一项顺序相反）
8、e:first-of-type：匹配父元素的第一个类型为e的子元素
9、e:last-of-type：匹配父元素的最后一个类型为e的子元素
10、e:only-of-type：匹配父元素中唯一子元素是e的子元素
11、e:empty 选择一个空的元素
12、e:enabled 可用的表单控件
13、e:disabled 失效的表单控件
14、e:checked 选中的checkbox
15、e:not(s) 不包含某元素
<style type="text/css">
.list div:not(:nth-child(2)){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- 第 3、4、5 子元素div匹配 -->
16、e:target 对应锚点的样式
<style type="text/css">
h2:target{
color:red;
}
</style>
......
<a href="#tit01">标题一</a>
......
<h2 id="tit01">标题一</h2>
<!-- 点击链接，h2标题变红 -->
17、e > f e元素下面第一层子集
18、e ~ f e元素后面的兄弟元素
19、e + f 紧挨着的兄弟元素
属性选择器：
1、e[data-attr] 含有data-attr属性的元素
<style type="text/css">
div[data-attr='ok']{
color:red;
}
</style>
......
<div data-attr="ok">这是一个div元素</div>
<!-- 点击链接，h2标题变红 -->
2、e[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”
3、e[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”
4、e[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”
5、e[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok”
css新增选择器示例01
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
/* 匹配第二个类型是div子元素 */
.con div:nth-child(2){
color:red;
}
.con div:nth-child(3){
color:pink;
}
/*
.list li:nth-child(1){
background-color:red;
}
等同于下面的写法：
*/
.list li:first-child{
background-color:red;
}
/* .list li:nth-child(8){
background-color:green;
}
等同于下面的写法：
*/
.list li:last-child{
background-color:green;
}
/*
2n:偶数行;
2n+1:奇数行;
*/
.list2 li:nth-child(2n+1){
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<h3>标题</h3>
<div>这是一个div</div>
<div>这是第二个div</div>
</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul class="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
css新增选择器示例02
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
.box > div{
border:1px solid red;
padding:10px;
margin:10px;
}
.box2 .title2{
color:red;
}
.box2 .title2 ~ p{
color:pink
}
.box2 .title2 + p{
color:gold;
}
.box2 .title1 + p{
color:green;
}
</style>
</head>
<body>
<div class="box">
<div>
<div>这是div里面的文字</div>
</div>
</div>
<div class="box2">
<h3 class="title1">这是标题一</h3>
<p>这是段落一</p>
<h3 class="title2">这是标题二</h3>
<p>这是段落二</p>
<p>这是段落二二</p>
<h3>这是标题三</h3>
<p>这是段落三</p>
</div>
</body>
</html>
css新增选择器示例03
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
/* 匹配所有有class属性的div */
.con div[class]{
background-color:gold;
margin-bottom:10px;
}
/* 匹配class属性值是ok的div */
.con div[class="ok"]{
background-color:pink
}
/* 匹配class属性值是“ok”开头的div */
.con div[class^="ok"]{
text-indent:30px;
}
/* 匹配class属性值是“ok”结尾的div */
.con div[class$="ok"]{
font-size:30px;
}
/* 匹配class属性值含有“ok”的div */
.con div[class*="ok"]{
border-bottom:2px solid #000;
}
</style>
</head>
<body>
<div class="con">
<div class="ok">1</div>
<div class="okabc">2</div>
<div class="abcok">3</div>
<div class="abcok123">4</div>
<div>5</div>
</div>
</body>
</html>
css3前缀和h5新增标签
css浏览器前缀
浏览器样式前缀
为了让css3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容ie浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
比如：
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
自动添加浏览器前缀
目前的状况是，有些css3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer
sublime text 中安装 autoprefixer 执行 preferences/key bindings-users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。
在写好的样式处按ctrl+alt+x即可自动添加前缀；
h5新增标签
html5新结构标签
h5新增的主要语义化标签如下：
1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚
pc端兼容h5的新标签的方法，在页面中引入以下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
h5新增标签示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<div class="header"></div>
<header></header>
<div class="menu"></div>
<nav></nav>
<div class="footer"></div>
<footer></footer>
</body>
</html>
html5 音频和视频
html5增加了audio和video标签，提供了在页面上插入音频和视频的标准方法。
audio标签
支持格式：ogg、wav、mp3
对应属性：
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音
举例：
<audio src="source/audio.mp3" autoplay controls loop preload></audio>
<!-- 或者用如下方式： -->
<audio autoplay controls loop preload>
<source src="source/audio.mp3" type="">
<source src="source/audio02.wav" type="">
</audio>
source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。
video标签
支持格式：ogg、mp4、webm
属性：
1、width
2、height
3、poster
可选第三方播放器：
1、cyberplayer
2、tencentplayer
3、youkuplayer
html5 新增表单控件
新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
<label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type="email" name="" required><br><br> <label>日期:</label><input type="date" name=""><br><br> <label>时间:</label><input type="time" name=""><br><br> <label>星期:</label><input type="week" name=""><br><br> <label>数量:</label><input type="number" name=""> <br><br> <label>范围:</label><input type="range" name=""><br><br> <label>电话:</label><input type="tel" name=""><br><br> <label>颜色:</label><input type="color" name=""><br><br> <label>搜索:</label><input type="search" name=""><br><br>
新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词
h5新增表单控件属性示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<input type="text" name="" placeholder="搜索">
<input type="text" name="" autofocus>
</body>
</html>
推荐阅读
-
HTML5和CSS3实例教程总结(推荐)
-
前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API
-
前端笔记之微信小程序（三）GET请求案例&文件上传和相册API&配置https
-
前端笔记之微信小程序（一）初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
-
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
-
前端校招知识体系之HTML5
-
HTML5 常见面试题之PC端和移动端区别介绍
-
使用HTML5和CSS3制作一个模态框的示例
-
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
-
一款利用html5和css3动画排列人物头像的实例演示