一、表格
一、表格的基本結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格的基本結構</title> </head> <body> <table> <caption></caption> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> </tr> </tfoot> </table> </body> </html>
二、表格的常用屬性
table
-- border: <integer>：表格外框及單元格外框
-- cellpadding: <integer>：單元格的內邊距
-- cellspacing: <integer>：單元格之間的間距，最小為0
-- rules：rows、cols、groups、all：邊框規則
td
-- rowspan: <integer>：行合並(該單元格占多行)
-- colspan: <integer>：列合並(該單元格占多列)
-- width: : <integer>%：列寬占比
caption
-- align: top | bottom：標題方位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> <style type="text/css"> table { width: 600px; height: 400px; /*border: 1px solid #333;*/ } td, th { /*border: 1px solid #333;*/ } </style> </head> <body> <!-- table: display: table --> <!-- th,td: dispaly: table-cell --> <!-- tr: 代表表格中的行 --> <!-- td: 代表表格中的單元格 --> <!-- 表格的特點 --> <!-- 1.表頭垂直水平居中 --> <!-- 2.單元格垂直居中 --> <!-- 3.cellspacing控制單元格之間的間距 --> <!-- 4.table的顯示特性:內容不超過規定寬高,采用規定的寬高,當內容顯示區域的寬高超過規定寬高,表格的寬高由內容顯示區域決定 --> <!-- 5.rules:邊框規則,設置后會合並邊框(cellspacing失效): groups rows cols all --> <!-- 6.cellpadding:cell的padding設置,對內容進行格式化布局 --> <!-- --> <!-- 7.cell的width可以規定列寬占比 --> <!-- 8.colspan:合並列 --> <!-- 9.rowspan:合並行 --> <table border="1" cellspacing="0" rules="all" cellpadding="10"> <caption align="bottom">表格標題</caption> <!-- <thead> --> <tr> <th width="1%">表頭</th> <th width="3%">表頭</th> <th width="6%">表頭</th> </tr> <!-- </thead> --> <!-- <tbody> --> <tr> <td colspan="2">單元格</td> <!-- <td>單元格</td> --> <td rowspan="2">單元格</td> </tr> <!-- </tbody> --> <!-- <tfoot> --> <tr> <td>單元格</td> <td>單元格</td> <!-- <td>單元格</td> --> </tr> <!-- </tfoot> --> </table> </body> </html>
三、如何通過表格中的table-cell特點實現水平垂直居中。
</html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> .sup { width: 200px; height: 200px; display: table-cell; vertical-align: middle; } .sub { width: 100px; height: 100px; margin: 0 auto; } </style> </head> <body> <div class="sub"> <div class="sup"></div> </div> </body> </html>
二、表單
一、基本結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單基本結構</title> </head> <body> <form> <label>輸入框</label><input type="text" /> <button type="submit">提交</button> </form> </body> </html>
二、from標簽簡介
簡述：作用將前台用戶數據通過get或post請求方式提交給后台，並在新頁面標簽中接受后台響應的數據
請求方式get與post的區別：
get：將數據以URL連接方式提交給后台，速度快，但安全性低並且有數據大小限制。
post：將數據以數據包方式提交給禍胎，速度較慢，但安全性高並且沒有數據大小限制
了解：前后台交換數據的依據為：表單元素的name與value，name為key，value為value；form標簽中action為提交的后台接口（請求的服務器指定路徑），method為請求方式。
三、表單常用標簽類型
1、input常用類型
text、password、hidden、radio、checkbox、reset、submit
2、文本框
<input type="text" name="username" placeholder="請輸入用戶名" size="10" maxlength="15">
3、密文框
<input type="password" name="pwd" placeholder="請輸入密碼" maxlength="12">
4、單選框
<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女
5、多選框
<input type="checkbox" name="hobby" value="basketball"> 籃球 <input type="checkbox" name="hobby" value="football"> 足球 <input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 <input type="checkbox" name="hobby" value="baseball"> 棒球
6、下拉選項框
<!--單選--> <select name="major"> <option value="computer">計算機</option> <option value="archaeology">考古學</option> <option value="medicine" selected>醫學</option> <option value="Architecture">建築學</option> <option value="Biology">生物學</option> </select> <!--多選--> <select name="major" multiple> <option value="computer">計算機</option> <option value="archaeology">考古學</option> <option value="medicine">醫學</option> <option value="Architecture">建築學</option> <option value="Biology">生物學</option> </select>
7、多行文本輸入
<textarea name="content"></textarea> <textarea name="content" cols="30" rows="10"></textarea>
8、幾種常用的按鈕
<!--提交按鈕--> <input type="submit" value="提交"> <button>提交</button> <button type="submit">提交</button> <!--重置按鈕--> <input type="reset" value="重置"> <button type="reset">重置</button> <!--普通按鈕--> <input type="button" value="按鈕"> <button type="button">按鈕</button>
9、全局屬性
<!-- 全局屬性設置 --> <!-- required:value不能為空 -->
<!-----pattern:正則-----------> <input type="text" name="usr" required /> <input type="text" name="name" pattern="\d" />
10、偽類
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類</title> <style type="text/css"> /*獲取焦點*/ .box { width: 200px; height: 0; background-color: red; /*display: none;*/ transition: .5s; } .usr:focus + .box { /*display: block;*/ height: 200px; } </style> </head> <body> <form action="" > <div class="box"></div> </form> </body> </html>
三、布局所需的方式
一、音頻與視頻的插入
1、音頻
- 應用
```html
<audio id="ad" src="media/juhua.mp3" autoplay controls loop>如果瀏覽器不支持H5新標簽audio，此段話將被顯示出來</audio>
```
- 屬性
| 屬性 | 值 | 描述 |
| -------- | ------------------ | -------- |
| autoplay | autoplay | 自動播放 |
| controls | controls | 音頻控件 |
| loop | loop | 循環播放 |
| muted | muted | 靜音 |
| preload | auto metadata none | 預加載 |
| src | URL | 音頻源 |
2、視頻
- 應用
```html
<video width="672" height="378" controls poster="img/poster.png">
<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
當前瀏覽器不支持video直接播放
</video>
```
- 屬性
| 屬性 | 值 | 描述 |
| -------- | ------------------ | -------- |
| width | pixels | 寬度 |
| height | pixels | 高度 |
| controls | controls | 視頻控件 |
| autoplay | autoplay | 自動播放 |
| loop | loop | 循環播放 |
| muted | muted | 靜音 |
| poster | URL | 圖像占位 |
| src | URL | 視頻源 |
| preload | auto metadata none | 預加載 |
| 屬性 | 值 | 描述 |
| ---- | --------- | -------- |
| src | URL | 視頻源 |
| type | MIME_type | MIME類型 |
二、形變
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>形變</title> <style type="text/css"> div { width: 150px; height: 150px; background-color: red; margin: 10px auto; transition: 3s; } /*旋轉形變:旋轉的是角度 deg*/ .d1:hover { /*transform: rotateX(3600deg);*/ /*transform: rotateY(3600deg);*/ /*transform: rotateZ(3600deg);*/ transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg); } /*偏移形變:偏移的是距離 px*/ .d2:hover { /*transform: translateX(200px);*/ /*transform: translateY(200px);*/ transform: translateX(200px) translateY(200px); } /*縮放形變:縮放的是比例*/ .d3:hover { transform: scale(2, 0.5); } .d4:hover { /*transform: translateX(200px) rotateZ(3600deg);*/ transform: rotateZ(3600deg) translateX(200px); } </style> </head> <body> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> </body> </html>
三、簡單的瀏覽器適配
瀏覽器適配了解如下：
- -o-：Opera瀏覽器
- -ms-：IE瀏覽器
- -moz-：Firefox瀏覽器
- -webkit-：Chrome、Safari、Android瀏覽器
```css
徑向漸變
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: -webkit-radial-gradient(red, yellow);
}
倒影
-webkit-box-reflect: below | above | left | right;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀏覽器適配</title> <style type="text/css"> .box { width: 200px; height: 200px; border-radius: 50%; font: 900 80px/200px 'STSong'; text-align: center; /*徑向漸變*/ /*background-image: radial-gradient(red, yellow, green);*/ background-image: -webkit-radial-gradient(left, red, yellow, green); /*倒影*/ /*below | above | left | right*/ -webkit-box-reflect: below 2px; } </style> </head> <body> <!-- -o- Opera --> <!-- -ms- IE --> <!-- -moz- FireFox --> <!-- -webkit- Safari Chrome 國內主流瀏覽器 Android內置瀏覽器 --> <div class="box">123</div> </body> </html>
四、字體圖標與盒子陰影
字體圖標
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字體圖標</title> <!-- 使用第三方庫 --> <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> --> <!-- <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> --> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> <style type="text/css"> .i1 { /*font-size: 30px;*/ color: orange; } </style> </head> <body> <i class="i1 fa fa-spinner fa-4x fa-spin"></i> </body> </html>
盒子陰影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子陰影</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; margin: 350px auto; /*盒子陰影*/ /*x軸偏移 y軸偏移 虛化長度 陰影寬度 陰影顏色*/ /*多個值之間用,隔開*/ box-shadow: -310px 0 30px 0px yellow, 310px 0 30px -10px green, 0 -310px 30px -10px orange, 0 310px 30px -10px blue; } </style> </head> <body> <div class="box"></div> </body> </html>