HTML5
HTML5作为html的第五次重大修改，作为新的HTML语言，具有新的元素，新的属性及行为。
广义的HTML5=HTML5本身+css+javascript HTML5具有兼容性，但具有发展趋势。
HTML5新增语义化标签
- header:头部标签
- nav:导航标签
- article:内容标签
- section:块级标签
- aside:侧边栏标签
- footer：脚部标签
注意事项
- 新增标签可以使用多次
- 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>
HTML多媒体标签
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>audio标签</title>
</head>
<body>
<audio src="./media/snow.mp3" controls='controls' loop='loop' autoplay='autoplay'></audio>
<audio loop='loop' autoplay='autoplay' controls='controls'>
<source src="./media/snow.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="./media/video.mp4" type="video/mp4">
<!-- 你的浏览器不支持播放视频 -->
</video>
</body>
</html>
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;
}
form {
width: 400px;
padding: 20px 15px;
margin: 50px auto;
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: black;
}
</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>
* {
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: '\e900';
font-size: 50px;
font-family: "icomoon";
}
</style>
</head>
<body>
<p></p>
</body>
</html>
注意：根目录下必须要fonts文件
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>
