HTML5
HTML5 is the fifth major revision of html. As a new HTML language, HTML5 has new elements, new attributes and behaviors.
In a broad sense, HTML5=HTML5 itself+css+javascript HTML5 is compatible, but it has a trend of development.
New semantic tags in HTML5
- header: header tag
- nav: navigation label
- article: content tag
- section: block-level label
- aside: sidebar label
- footer: foot label
Precautions
- New label can be used multiple times
- Versions below IE9 have compatibility issues and need to be converted to block-level elements
<!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 multimedia tags
audio audio tags
<audio>音频标签常见属性
- autoplay: autoplay
- controls: controls
- loop: loop playback indefinitely
- src: address to play
<!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 video tags
<!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 new forms and their attributes
<!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 selector
Attribute selector
Note: The weight of the class selector, attribute selector, and pseudo-class selector is 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>
Structural pseudo-class selector
nth-chid(n): n can be a formula or a keyword even (even) old (odd)
<!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>
Pseudo element selector
<!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>
Precautions
- ::before and ::after are pseudo-element selectors, and the content attribute must be written
- No dom structure exists for pseudo-elements
- Pseudo element selectors are inline elements
- Weight 1
Pseudo element selector to make font icons
<!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>
Note: The fonts file must be in the root directory
transition: transition
Precautions
- Transition effect is the change of one effect from another effect
- The transition has multiple sets of attributes separated by commas
- all represents all attributes
- The effect of the transition is on its own elements
<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>
