HTML5
HTML5 作为 html 的第五次重大批改，作为新的 HTML 语言，具备新的元素，新的属性及行为。
狭义的 HTML5=HTML5 自身 +css+javascript HTML5 具备兼容性，但具备发展趋势。
HTML5 新增语义化标签
- header: 头部标签
- nav: 导航标签
- article: 内容标签
- section: 块级标签
- aside: 侧边栏标签
- footer：脚部标签
注意事项
1. 新增标签能够应用屡次
2.IE9 以下的版本具备兼容性问题，须要转换成块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,
nav,
aside,
article,
section,
footer {
display:block;
width: 100%;
height: 100px;
margin-top: 20px;
color: #fff;
background-color: purple;
text-align: center;
line-height: 100px;
font-weight: 700;
}
</style>
</head>
<body>
<header> 头部 </header>
<nav> 导航 </nav>
<aside> 侧边栏 </aside>
<article> 内容 </article>
<section> 块级 </section>
<footer> 脚部 </footer>
</body>
</html>
HTML5 多媒体标签
audio 音频标签
<audio> 音频标签常见属性 - autoplay: 自动播放
- controls: 控件
- loop: 有限次循环播放
- src: 播放的地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 第一种办法 -->
<audio src="./audio/Ngẫu_Hứng-Hoaprox-23817485.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>
<!-- 第二种办法 -->
<audio controls="controls" loop="loop" autoplay=“autoplay ">
<source src="./audio/Ngẫu_Hứng-Hoaprox-23817485.mp3">
你的浏览器 不反对播放音乐
</audio>
</body>
</html>
video 视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
width: 1000px;
margin: 10px auto;
}
</style>
</head>
<body>
<!-- 第一种办法 -->
<!-- <video src="./video/mI.mp4" controls="controls" autoplay="autoplay" loop="loop"></video> -->
<!-- 第二种办法 -->
<video muted="muted" autoplay="autoplay">
<source src="./video/mI.mp4" type="video/mp4">
<!-- 你的浏览器不反对播放视频 -->
</video>
</body>
</html>
HTML5 新增 input 表单及属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
form {
width: 400px;
padding: 20px 15px;
margin: 50px auto;
background: url(./image/ 星空.jpg) no-repeat;
background-size: cover;
}
li {list-style: none;}
input {margin: 5px 0px;}
.submit,
.reset {float: left;}
.reset {margin-left: 200px;}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
span {
font: normal normal 16px "楷体";
color: white;
}
</style>
</head>
<body>
<form action="ZiMo.php">
<ul>
<li><span> 账号：</span><input type="text" name="username" autocomplete="on"></li>
<li><span> 邮箱：</span><input type="email" name=""id="" required="required" placeholder="请输出邮箱账号"></li>
<li><span> 网址：</span><input type="url" name=""id=""></li>
<li><span> 日期：</span><input type="date" name=""id=""></li>
<li><span> 工夫：</span><input type="time" name=""id=""></li>
<li><span> 月份：</span><input type="month" name=""id=""></li>
<li><span> 周：</span><input type="week" name=""id=""></li>
<li><span> 数值：</span><input type="number" name=""id=""></li>
<li><span> 手机号：</span><input type="tel" name=""id=""></li>
<li><span> 搜寻框：</span><input type="search" name=""id="" autofocus></li>
<li><span> 色彩 </span><input type="color" name=""id=""></li>
<li class="clearfix">
<div class="submit"><input type="submit" value="提交"></div>
<div class="reset"><input type="reset" value="重置"></div>
</li>
</ul>
</form>
</body>
</html>
CSS3 选择器
属性选择器
类选择器 属性选择器 伪类选择器的权值为 10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
margin :20px 50px;
}
button {background-color: red;}
button[disabled="disabled"] {background-color: blue;}
input[type='text'] {background-color: pink;}
div[class^='box1'] {background-color: black;}
div[class$='box1']{background-color: purple;}
div[class*='box2'] {background-color: saddlebrown;}
</style>
</head>
<body>
<section>
<button> 按钮 </button>
<button> 按钮 </button>
<button disabled="disabled"> 禁用按钮 </button>
<button disabled="disabled"> 禁用按钮 </button>
<input type="text" name=""id="">
<input type="text" name=""id="">
<input type="text" name=""id="">
<input type="number" name=""id="">
<input type="number" name=""id="">
<input type="number" name=""id="">
</section>
<div class="box123"></div>
<div class="box123"></div>
<div class="box123"></div>
<div class="123box1"></div>
<div class="123box1"></div>
<div class="123box1"></div>
<div class="2020box2"></div>
<div class="2020box2"></div>
<div class="2020box2"></div>
</body>
</html>
构造伪类选择器
nth-chid(n):n 能够为公式 也能够为关键字 even(偶数) old(奇数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:first-child {background-color: saddlebrown;}
ul li:last-child {background-color: salmon;}
ul li:nth-child(4n) {background-color: yellow;}
</style>
</head>
<body>
</body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div a:last-of-type {background-color: red;}
div p:first-of-type {background-color: purple;}
div span:nth-of-type(2n) {background-color: yellow;}
</style>
</head>
<body>
<div>
<a href="#"> 百度 </a>
<a href="#"> 新浪 </a>
<a href="#">360</a>
<a href="#"> 阿里巴巴 </a>
<span>span 标签 </span>
<span>span 标签 </span>
<span>span 标签 </span>
<span>span 标签 </span>
<p>p 标签 </p>
<p>p 标签 </p>
<p>p 标签 </p>
<p>p 标签 </p>
</div>
</body>
</html>
两者最大的不同：前者只有是父元素中的子元素，都能够选中，后者能够选中指定元素
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 100px auto;
}
div::before {
display: inline-block;
height: 200px;
width: 200px;
background-color: red;
content: "我是";
}
div::after {
display: inline-block;
height: 200px;
width: 200px;
background-color: blue;
content: "小可爱";
}
</style>
</head>
<body>
<div>
一个
</div>
</body>
</html>
注意事项
- ::before 和::after 属于伪元素选择器，content 属性必须要写
- 伪元素不存在 dom 构造
- 伪元素选择器为行内元素
- 权重为 1
伪元素选择器制作字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width: 600px;
height: 600px;
border: 1px solid red;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?cv013x');
src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
p::after {
content: '\e9da';
font-size: 50px;
font-family: "icomoon";
}
</style>
</head>
<body>
<p></p>
</body>
</html>
留神：目录下必须要 fonts 文件
transition: 过渡
简写
transition: 过渡的属性 过渡的工夫 过渡的工夫曲线 过渡成果何时开始
注意事项
- 过渡成果是一种成果从另一种成果的变动
- 过渡有多组属性之间用逗号相隔
- all 代表所有的属性
- 过渡的成果在本身元素上
<html>
<head>
<title> 过渡 </title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 600px;
width: 600px;
background-color: red;
transition: all 2s linear 0s;
}
.box:hover {
width: 1000px;
height: 1000px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>