2022年2月27日
1 HTML5新增标签
1.1 HTML5新增语义化标签
1.2 HTML5新增多媒体标签
1.2.1 视频 <video>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="images/mi9.jpg"></video>
1.2.2 音频 <audio>
<audio src="media/music.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
1.2.3 多媒体标签总结
<h3>HTML5新增input类型</h3>
<form action="">
<ul>
<li>邮箱：<input type="email"></li>
<li>网址：<input type="url"></li>
<li>日期：<input type="date"></li>
<li>时间：<input type="time"></li>
<li>数量：<input type="number"></li>
<li>手机号码：<input type="tel"></li>
<li>搜索：<input type="search"></li>
<li>颜色：<input type="color"></li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
1.4 HTML5新增表单属性
<head>
<style type="text/css">
input::placeholder {
color: orange;
}
</style>
</head>
<body>
<h3>HTML新增的表单属性</h3>
<form action="">
<input type="search" name="sear" required="required" placeholder="请输入" autofocus="autofocus" autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" name="" value="提交">
</form>
</body>
2 CSS3 新特性
2.1 CSS3新增选择器
2.1.1 属性选择器
<head>
<style type="text/css">
/* 必须是input 但同时具有 value 这个属性 */
input[value] {
color: pink;
}
/* 必须是input 但同时具有 value 值等于 “请输入密码” */
input[value="请输入密码"] {
color: orange;
}
/* 必须是input 但同时具有 value 值以 “请输入” 开头*/
input[value^="请输入"] {
font-size: 20px;
}
/* 必须是input 但同时具有 value 值以 “用户名” 结尾 */
input[value$="用户名"] {
font-weight: 600;
}
/* 必须是input 但同时具有 value 值含有 “用” */
input[value*="用"] {
font-style: italic;
}
</style>
</head>
<body>
<h3>CSS3新增属性选择器</h3>
<input type="text" value="请输入用户名">
<input type="text" value="请输入密码">
<input type="text" value="用户名">
</body>
2.1.2 结构伪类选择器
<head>
<style type="text/css">
/* ul中第一个孩子 */
ul li:first-child {
background-color: orange;
}
ul li:first-of-type {
font-size: 20px;
}
/* ul中最后一个孩子 */
ul li:last-child {
background-color: red;
}
ul li:last-of-type {
font-size: 20px;
}
/* ul中第三个孩子 */
ul li:nth-child(3) {
background-color: yellow;
}
ul li:nth-of-type(3) {
font-size: 20px;
}
/* nth-child(n) 从0开始 每次加1 往后面计算 */
/* 选择所有孩子 */
ol li:nth-child(n) {
font-weight: 700;
}
/* ol中序号是偶数的孩子 */
ol li:nth-child(even) {
background-color: blue;
}
ol li:nth-child(2n) {
font-size: 30px;
}
/* ol中序号是奇数的孩子 */
ol li:nth-child(odd) {
background-color: gray;
}
ol li:nth-child(2n+1) {
font-size: 20px;
}
/* nth-child(n) 会把所有盒子都排序号 执行是先看nth-child 再看前面的 div */
/* 执行时发现第一个盒子不是div 所以不执行 */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type(n) 会把指定元素的盒子排序号 执行是先看 指定元素div 再看 序号n */
section div:nth-of-type(1) {
background-color: red;
}
</style>
</head>
<body>
<h3>CSS3新增结构伪类选择器</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ol>
<section>
<p>1</p>
<div>2</div>
<div>3</div>
</section>
</body>
2.1.3 CSS3伪元素选择器
<head>
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
background-color: pink;
}
.div1::before {
/* content 必写 */
content: '你';
background-color: yellow;
}
.div1::after {
content: '6';
background-color: white;
}
</style>
</head>
<body>
<h3>CSS3伪元素选择器</h3>
<div class="div1">好</div>
</body>
2.2 CSS3盒子模型
<head>
<style type="text/css">
.div2 {
width: 100px;
height: 100px;
background-color: pink;
padding: 10px;
margin: 5px;
border: 2px solid black;
/* 盒子大小为 width+padding+border */
box-sizing: content-box;
}
.div3 {
width: 100px;
height: 100px;
background-color: pink;
padding: 10px;
margin: 5px;
border: 2px solid black;
/* 盒子大小为width */
box-sizing: border-box;
}
</style>
</head>
<body>
<h3>CSS3伪元素选择器</h3>
<div class="div1">好</div>
<div class="div2"></div>
<div class="div3"></div>
</body>
2.3 CSS3图片模糊处理
<head>
<style type="text/css">
img {
/* 数值越大越模糊 */
filter: blur(5px);
}
</style>
</head>
<body>
<h3>CSS3图片模糊处理</h3>
<img src="images/img.jpg" alt="">
</body>
2.4 calc计算盒子宽度
<head>
<style type="text/css">
.div4 {
width: calc(100% - 300px);
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<h3>计算盒子宽度</h3>
<div class="div4"></div>
</body>
2.5 CSS3过渡
<head>
<style type="text/css">
.div5 {
width: 100px;
height: 100px;
background-color: pink;
/*transition: 变化属性 花费时间 运动曲线 何时开始*/
/*多个变化属性用逗号分隔*/
/*全部属性变化，变化属性写all*/
transition: width .5s ease .5s, height .5s ease .5s;
}
.div5:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h3>CSS3过渡</h3>
<div class="div5"></div>
</body>
3 上传网站
4 总结
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
header {
width: 100%;
height: 50px;
background-color: rgb(151, 178, 83);
border-radius: 10px;
text-align: center;
line-height: 50px;
margin: 10px;
}
nav {
width: 100%;
height: 50px;
background-color: rgb(151, 178, 83);
border-radius: 10px;
text-align: center;
line-height: 50px;
margin: 10px;
}
article {
float: left;
width: 75%;
height: 100px;
background-color: rgb(151, 178, 83);
border-radius: 10px;
text-align: center;
margin: 10px;
}
section {
width: 100%;
height: 25px;
background-color: rgb(201, 214, 177);
border-radius: 10px;
text-align: center;
line-height: 25px;
}
aside {
float: left;
width: 20%;
height: 100px;
background-color: rgb(151, 178, 83);
border-radius: 10px;
text-align: center;
margin: 10px;
}
footer {
float: left;
width: 100%;
height: 50px;
background-color: rgb(151, 178, 83);
border-radius: 10px;
text-align: center;
margin: 10px;
}
video {
width: 100%;
}
li {
list-style: none;
}
input::placeholder {
color: orange;
}
/* 必须是input 但同时具有 value 这个属性 */
input[value] {
color: pink;
}
/* 必须是input 但同时具有 value 值等于 “请输入密码” */
input[value="请输入密码"] {
color: orange;
}
/* 必须是input 但同时具有 value 值以 “请输入” 开头*/
input[value^="请输入"] {
font-size: 20px;
}
/* 必须是input 但同时具有 value 值以 “用户名” 结尾 */
input[value$="用户名"] {
font-weight: 600;
}
/* 必须是input 但同时具有 value 值含有 “用” */
input[value*="用"] {
font-style: italic;
}
/* ul中第一个孩子 */
ul li:first-child {
background-color: orange;
}
ul li:first-of-type {
font-size: 20px;
}
/* ul中最后一个孩子 */
ul li:last-child {
background-color: red;
}
ul li:last-of-type {
font-size: 20px;
}
/* ul中第三个孩子 */
ul li:nth-child(3) {
background-color: yellow;
}
ul li:nth-of-type(3) {
font-size: 20px;
}
/* nth-child(n) 从0开始 每次加1 往后面计算 */
/* 选择所有孩子 */
ol li:nth-child(n) {
font-weight: 700;
}
/* ol中序号是偶数的孩子 */
ol li:nth-child(even) {
background-color: blue;
}
ol li:nth-child(2n) {
font-size: 30px;
}
/* ol中序号是奇数的孩子 */
ol li:nth-child(odd) {
background-color: gray;
}
ol li:nth-child(2n+1) {
font-size: 20px;
}
/* nth-child(n) 会把所有盒子都排序号 执行是先看nth-child 再看前面的 div */
/* 执行时发现第一个盒子不是div 所以不执行 */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type(n) 会把指定元素的盒子排序号 执行是先看 指定元素div 再看 序号n */
section div:nth-of-type(1) {
background-color: red;
}
.div1 {
width: 100px;
height: 100px;
background-color: pink;
}
.div1::before {
/* content 必写 */
content: '你';
background-color: yellow;
}
.div1::after {
content: '6';
background-color: white;
}
.div2 {
width: 100px;
height: 100px;
background-color: pink;
padding: 10px;
margin: 5px;
border: 2px solid black;
/* 盒子大小为 width+padding+border */
box-sizing: content-box;
}
.div3 {
width: 100px;
height: 100px;
background-color: pink;
padding: 10px;
margin: 5px;
border: 2px solid black;
/* 盒子大小为with */
box-sizing: border-box;
}
img {
/* 数值越大越模糊 */
filter: blur(5px);
}
.div4 {
width: calc(100% - 300px);
height: 100px;
background-color: pink;
}
.div5 {
width: 100px;
height: 100px;
background-color: pink;
/*transition: 变化属性 花费时间 运动曲线 何时开始*/
/*多个变化属性用逗号分隔*/
/*全部属性变化，变化属性写all*/
transition: width .5s ease .5s, height .5s ease .5s;
}
.div5:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h3>HTML5新增语义化标签</h3>
<header>头部标签</header>
<nav>导航栏标签</nav>
<article>
<p>内容标签</p>
<section>某个区域</section>
</article>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>
<h3>HTML5新增多媒体标签</h3>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="images/mi9.jpg"></video>
<audio src="media/music.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
<h3>HTML5新增input类型</h3>
<form action="">
<ul>
<li>邮箱：<input type="email"></li>
<li>网址：<input type="url"></li>
<li>日期：<input type="date"></li>
<li>时间：<input type="time"></li>
<li>数量：<input type="number"></li>
<li>手机号码：<input type="tel"></li>
<li>搜索：<input type="search"></li>
<li>颜色：<input type="color"></li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
<h3>HTML新增的表单属性</h3>
<form action="">
<input type="search" name="sear" required="required" placeholder="请输入" autofocus="autofocus" autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" name="" value="提交">
</form>
<h3>CSS3新增属性选择器</h3>
<input type="text" value="请输入用户名">
<input type="text" value="请输入密码">
<input type="text" value="用户名">
<h3>CSS3新增结构伪类选择器</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ol>
<section>
<p>1</p>
<div>2</div>
<div>3</div>
</section>
<h3>CSS3伪元素选择器</h3>
<div class="div1">好</div>
<h3>CSS3盒子模型</h3>
<div class="div2"></div>
<div class="div3"></div>
<h3>CSS3图片模糊处理</h3>
<img src="images/img.jpg" alt="">
<h3>计算盒子宽度</h3>
<div class="div4"></div>
<h3>CSS3过渡</h3>
<div class="div5"></div>
</body>
</html>
733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
