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>