H5
HTML5新增语义化标签
- <header>：头部标签
- <nav>：导航标签
- <article>：内容标签
- <section>：定义文档某个区域
- <aside>：侧边栏标签
- <footer>：尾部标签
音频标签<audio>
-
当前<audio></audio>音频元素仅支持三种视频格式，尽量使用MP3格式。
<audio src="vidio/a.mp3" autoplay="autoplay" controls="controls" > 当前浏览器不支持audio </audio>属性 值 描述 autoplay autoplay 就绪后马上播放 controls controls 显示播放控件 loop loop 循环播放 src url 音频文件url地址
视频标签<video>
-
当前<video></video>视频元素仅支持三种视频格式，尽量使用MP4格式。
属性 值 描述 autoplay autoplay 视频准备就绪自动播放（谷歌浏览器需添加muted） controls controls 显示播放控件 width pixels(像素) 播放器宽度 height pixels(像素) 播放器高度 loop loop 循环播放 preload auto(预先加载视频)
none(不预加载视频)是否预加载视频 src url 视频文件url地址 poster imgurl 加载时的等待图片 muted muted 静音播放 <video src="vidio/a.mp4" width="600px" autoplay="autoplay"> <source src="myvideo.mp4" type="video/mp4"></source> <source src="myvideo.ogv" type="video/ogg"></source> 当前浏览器不支持 video直接播放 </video>
新增 input 类型
-
新增 input 输入类型
属性值 描述 type=“email” 限制输入必须是Email类型 type=“url” 限制输入必须是URL类型 type=“date” 限制输入必须是日期类型 type=“time” 限制输入必须是时间l类型 type=“month” 限制输入必须是月的数量类型 type=“week” 限制输入必须是周的数量类型 type=“number” 限制输入必须是数字类型 type=“tel” 输入手机号 type=“search” 搜索框 type=“color” 生成一个颜色 <form action="" method=""> email:<input type="email" name="" id="" value="" /><br> 地址：<input type="url" name="" id="" value="" /><br> 日期：<input type="date" name="" id="" value="" /><br> 时间：<input type="time" name="" id="" value="" /><br> 月份：<input type="month" name="" id="" value="" /><br> 周：<input type="week" name="" id="" value="" /><br> 数字：<input type="number" name="" id="" value="" /><br> 电话：<input type="tel" name="" id="" value="" /><br> 搜索：<input type="search" name="" id="" value="" /><br> 颜色：<input type="color" name="" id="" value="" /><br> <input type="submit" name="" id="" value="确定" /> </form> -
新增 input 元素属性
属性 值 描述 required required 设置该内容为必填项 placeholder 提示文本 表单提示信息，存在默认值不显示 autofocus autofocus 聚焦光标 autocomplete off / on 提示之前键入的字段 multiple multiple 可以多选文件提交 <form action="" method=""> <input type="text" required="required" /><br> <!--必填--> <input type="text" placeholder="重庆"/><br> <!--提示信息--> <input type="text" autofocus="autofocus"/><br> <!--自动聚焦光标--> <input type="text" name="sreac" autocomplete="on"/><br> <!--提示历史键入--> <input type="file" multiple="multiple"/> <!--多选上传--> <input type="submit" name="" id="" value="提交" /> </form>
C3
c3新增选择器
-
①属性选择器（根据元素的特定属性来选择元素）
选择符 描述 E[att] 选择具有 att 属性的 E 元素 E[att=“val”] 选择具有att属性且属性值为 val 的 E 元素 E[att^=“val”] 选择具有 att 属性且以 val 开头的所有 E 元素 E[att$=“val”] 选择具有 att 属性且以 val 结尾的所有 E 元素 E[att*=“val”] 选择具有 att 属性且有 val 的所有 E 元素 <style> /* 选择具有 value 属性的 input 元素 */ input[value] { color: red; } /* 选择具有 type 属性且值为 password 的 input 元素 */ input[type=password] { color: #0000FF; } </style> -
②结构伪类选择器（根据文档结构来选择元素）
选择符 描述 E:first-child 选择父元素中的第一个子元素 E E:last-child 选择父元素中的最后一个子元素 E E:nth-child(n) 选择父元素中的第n个子元素 E(选择奇偶数even/odd、选择所有子元素括号输入n) E:first-of-type 选择类型 E 的第一个 E:last-of-type 选择类型 E 的最后一个 E:nth-of-type(n) 选择类型 E 的第 n 个 区别：first-of-type(n):选择父元素中 E 元素的第n个 ; first-child(n):选择父元素中的第 n个元素
<head> <style> /* 选择父元素中的第一个子元素 */ div span:first-child { color: red; } /* 选择父元素中的最后一个子元素 */ div span:last-child { color: red; } /* 选择父元素中的第n个子元素 */ div span:nth-child(3) { color: pink; } /* 选择偶数的子元素 偶even/奇odd */ div span:nth-child(even) { background-color: #0077AA; } /* 选择所有子元素 */ div span:nth-child(n) { background-color: yellow; } /* 选择所有奇数子元素 */ div span:nth-child(2n+1){ background-color: #0000FF; } /* 选择第二个子元素后所有元素 */ div span:nth-child(n+2) { background-color: pink; } </style> </head> <body> <div> <span>你</span> <span>好</span> <span>世</span> <span>界</span> <span>。</span> </div> </body> -
③伪元素选择器（用css创建标签元素，而不需要HTML标签。简化HTML结构）
选择符 描述 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意：创建的元素属于行内元素，不在html文档中显示，必须有content属性，权重为1。
<head> <style> /* 在p盒子前插入一个盒子内容为'你' */ p::before { content: '你'; color: red; background-color: black; } /* 在p盒子后插入一个盒子内容为'啊' */ p::after { content: '啊'; } </style> </head> <body> <p>嗨</p> </body>
伪元素选择器案例：
<head>
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2657885_qu2czvstpr.css"/>
<style type="text/css">
div {
position: relative;
width: 300px;
height: 28px;
border: 1px solid #333333;
}
div::after {
position: absolute;
top: 5px;
right: 5px;
font-family: "iconfont";
content: '';
font-weight: 700;
color: red;
}
</style>
</head>
<body>
<div>
</div>
c3的盒子模型
box-sizing: content-box; (之前的)会撑大盒子
box-sizing: border-box; (c3)不会撑大盒子，前提是padding和border不超过宽度
图片模糊
css3滤镜 filter:
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
filter: blur(15px);/*设置图片模糊，数值高模糊大*/
}
img:hover {
filter: blur(0px);/*设置鼠标经过图片图片不模糊*/
}
</style>
</head>
<body>
<img src="../images/bj.jpg" >
</body>
calc函数设置盒子宽度
<style type="text/css">
div {
width: calc(100% - 200px);
height: 100px;
background-color: black;
}
</style>
过渡
transition: 要过渡的属性 过渡时间 运动曲线 开始时间
① 属性：想要变化的css属性，宽度高度 背景颜色 内外边距等。所有属性写all。
② 过渡时间：1s（单位秒，必须写s）
③ 运动曲线：linear(匀速)/ease(渐慢)/ease-in(渐快)
④ 开始时间：1s（单位秒，必须写s默认0s）
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: rgb(129, 25, 25);
transition: width 1s ease .3s, height 1s;/*多个属性逗号隔开*/
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
注意：过渡属性，谁做给谁加；所有属性都过渡写all；
/*过渡练习*/
<head>
<style>
body {
padding: 0;
margin: 0;
}
div {
width: 120px;
height: 15px;
border: 1px solid red;
margin: 0 auto;
border-radius: 8px;
}
p {
font-size: 0;
height: 15px;
width: 50%;
border-radius: 7px;
background-color: red;
transition: width 1s;
}
div:hover p {
width: 100%;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
2D转换
转换变形:transform，可实现元素的位移、旋转、缩放等效果-
移动 - translate
<head> <style> div { width: 100px; height: 100px; background-color: rgb(92, 37, 37); transform: translate(20px, 20px);/*移动x和y*/ transform: translateX(20px); /*移动x*/ transform: translateY(50%); /*移动y，盒子宽度的50%*/ } p { height: 100px; background-color: rgb(19, 119, 133); } </style> </head> <body> <div></div> <p></p> </body>
注意：使用transform移动会保留原来位置，不会影响布局。 -
旋转 - rotate
<head> <style> div { height: 100px; width: 100px; background-color: rgb(110, 49, 49); transform: rotate(45deg); /*设置盒子旋转*/ } </style> </head> <body> <div></div> </body>
旋转中心点设置：transform-origin: top left; transform-origin: 50% 50%; -
缩放 - scale
<head> <style> p { margin: 50px auto; height: 100px; width: 100px; background-color: rgb(49, 91, 110); transition: all 1s; } p:hover { transform: scale(2, 0.5);/*设置缩放 宽度为之前2倍，高度为之前0.5倍*/ } </style> </head> <body> <p></p> </body>
网页favicon图标
favicon图标展示在浏览器网页标题左侧- 将1:1的图片拿到比特虫网站转为ico格式，并放到网站目录中
- head中添加
1949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
