Html與CSS學習記錄四
阿新 • • 發佈：2018-11-08
HTML5新標籤和特性
*header：定義文件的頁首 頭部
*aside：定義其所處內容之外的內容 側邊
*article：定義文章。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> header { width: 200px; height: 100px; background-color: purple; } </style> </head> <body> <header></header> <aside></aside> <article></article> <time> 12:09 </time> </body> </html>
datalist和fieldset標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> fieldset { width: 300px; } </style> </head> <body> <input type="text" value="請輸入明星" list="star"/> <datalist id="star"> <option value="劉德華">劉德華</option> <option value="劉若英">劉若英</option> <option value="劉曉慶">劉曉慶</option> <option value="戚薇">戚薇</option> <option value="戚繼光">戚繼光</option> </datalist> <fieldset> <legend>使用者登入</legend> 使用者名稱： <input type="text"> <br> 密碼： <input type="password"> </fieldset> </body> </html>
表單和強大的input
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 600px; border: 1px solid #ccc; margin: 0 auto; } .box dl { overflow: hidden; margin: 15px 0; } .box dl dt, .box dl dd { float: left; } .box dl dt { width: 100px; } .box dl dd { width: 200px; } </style> </head> <body> <form action=""> <div class="box"> <dl> <dt>您的郵箱</dt> <dd><input type="email"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>手機號碼</dt> <dd><input type="tel"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>網址</dt> <dd><input type="url"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>郵政編碼</dt> <dd><input type="number"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>拖動滑塊</dt> <dd><input type="range"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>時間</dt> <dd><input type="time"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>出生日期</dt> <dd><input type="date"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>時間</dt> <dd><input type="datetime"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>月份</dt> <dd><input type="month"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt>星期</dt> <dd><input type="week"></dd> <dd>* 註冊後不可更改</dd> </dl> <dl> <dt></dt> <dd><input type="submit" value="提交"> <input type="reset" value="重置"></dd> </dl> </div> </form> </body> </html>
別樣的表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
使用者名稱： <input type="text" placeholder="請輸入使用者名稱" autofocus> <br />
上傳頭像： <input type="file" name="" id="" multiple > <br />
暱稱： <input type="text" required accesskey="s"> <br />
<input type="submit" value="提交按鈕">
</form>
</body>
</html>插入視訊。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XMzIzNTc0MTAwMA==' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>HTML5中的視訊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<audio controls loop>
<source src="bgsound.mp3"/>
<source src="music.ogg"/>
您的瀏覽器版本太低
</audio>
<video autoplay controls>
<source src="movie04.ogg"/>
<source src="mp4.mp4"/>
</video>
</body>
</html>結構偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*a:hover 滑鼠經過a連結的時候 */
/*ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: pink;
}
li:nth-child(3) { 選擇第3個
background-color: purple;
}*/
/*li:nth-child(even) { even 選擇所有的偶數
background-color: pink;
}
li:nth-child(odd) { odd 選擇所有的奇數
background-color: purple;
}*/
/* li:nth-child(2n) { n = 0 1 2 3 4 5 2n 0 2 4 6 8 10...開始 2n 類似於even
background-color: pink;
}
*/
/* li:nth-child(2n+1) { 奇數 odd
background-color: pink;
}
*/
li:nth-child(4n) { /* 4.8.12 */
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>地方</li>
<li>二父</li>
<li>與父</li>
<li>二分</li>
<li>梧桐</li>
<li>梧桐</li>
<li>梧桐</li>
<li>梧桐</li>
<li>梧桐</li>
</ul>
</body>
</html>屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div[class] { 選出所有 帶有 class 屬性的
background-color: pink;
}*/
/*div[class=demo] { 選出 class = demo 的
background-color: pink;
}*/
/* div[class^=test] { 選出test 開頭的 標籤
background-color: purple;
}*/
div[class$=test] { /*選出test 結尾的 標籤 ^ $ */
background-color: purple;
}
</style>
</head>
<body>
<div class="demo">王者榮耀</div>
<div>王者榮耀</div>
<div class="firsttest">王者榮耀</div>
<div class="test">王者榮耀</div>
<div class="test1">王者榮耀</div>
<div class="test2">王者榮耀</div>
<div class="test3">王者榮耀</div>
</body>
</html>偽元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*p::first-letter { 選擇第一個字
font-size: 100px;
}*/
/*p::first-line { 第一行
color: red;
}*/
p::selection { /*選擇文字時候的狀態*/
background-color: pink;
color: yellow;
}
</style>
</head>
<body>
<p>中國有嘻哈,2017中國有嘻哈巡迴演唱會 北京站,首都體育館!立享188元新人大禮包!中國有嘻哈,100%正票,票品保障!更多折扣票,熱門票,上票牛網!中國有嘻哈,2017中國有嘻哈巡迴演唱會 北京站,首都體育館!立享188元新人大禮包!中國有嘻哈,100%正票,票品保障!更多折扣票,熱門票,上票牛網!中國有嘻哈,2017中國有嘻哈巡迴演唱會 北京站,首都體育館!立享188元新人大禮包!中國有嘻哈,100%正票,票品保障!更多折扣票,熱門票,上票牛網!</p>
</body>
</html>after和before偽元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div::before { /*必須帶一個屬性 content 偽元素 其實這個 before 是個盒子*/
/* 這個盒子是行內的盒子 可以轉換*/
content: "我";
}
div::after {
content: "18歲";
}
</style>
</head>
<body>
<div>今年</div> 我今年18歲
</body>
</html>圖示字型的兩種表方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span , div {
font-family: 'icomoon';
}
div::after {
content: "\e91b";
}
</style>
</head>
<body>
<span></span>
<div></div>
</body>
</html>css3盒子模型：內減模式，可以保證我們設定的寬高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding: 30px;
border-right: 20px solid red;
box-sizing: border-box; /*內減模式*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>案例：盒子模型實現的特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 632px;
height: 340px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
div:hover::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 20px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="mi.jpg" alt="">
</div>
</body>
</html>可以插入元素的選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div {
width: 200px;
height: 30px;
border: 1px solid #ccc;
margin: 100px auto;
font-family: "icomoon";
position: relative;
}
div::before { /*是一個能插入元素的選擇器*/
content: "\ea51";
position: absolute;
right: 10px;
top: 5px;
}
div:hover {
border: 1px solid red;
}
div:hover::before {
color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>