老男孩CSS培訓課程
阿新 • • 發佈：2020-09-19
1-我的第一個html網頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title_python學習網頁</title> </head> <body> <!-- align：文字的水平對齊方式：left左,center中,right右 --> <h1 align="left"title="提示文字">h1標題:常用於網站的logo，網站標題</h1> <h2 align="center"title="用於提示而已">h2標題:常用於網站的板塊標題</h2> <h3 align="right">h3標題:常用於網站的板塊標題</h3> <h4>h4標題:常用於網站的附加內容標題，或者文章的標題</h4> <h5>h5標題:基本用不到</h5> <h6>h6標題:基本用不到</h6> <hr> <p align="left"title="用於提示而已">p->段落：<br>Hyper<br> Text Markup Language</p> <a href="http://www.baidu.com">跳轉到百度</a> <a href="./assets/html.chm">點選下載手冊</a> <a href="./assets/logo.png">點選下載圖片[滑鼠右鍵,另存為]</a> <a href="https://www.oldboyedu.com"> <img src="./assets/logo.png"> </a> </body> </html>
2-列表標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 無序列表, unordered list，簡寫: ul 列表的單項 list item 簡寫：li --> <ul type="circle"> <li>列表的第一項</li> <li>列表的第二項</li> <li>列表的第三項</li> </ul> <!-- 有序列表, ordered list，簡寫：ol 列表的單項 list item li --> <ol> <li>列表的第一項</li> <li>列表的第二項</li> <li>列表的第三項</li> </ol> <!-- 和任何一個雙標籤一樣，標籤內部可以巢狀的標籤來使用。 --> <ul> <li> <p>第一章：開端</p> <ul> <li>第一節：下山</li> <li>第二節：命案</li> <li>第三節：奇遇</li> <li></li> <li></li> </ul> </li> </ul> <dl> <dt>趙本山</dt> <dd>春晚常駐選手，國內一線大品牌</dd> <dd>鄉村愛情故事，二人轉，小品</dd> <dt>小明</dt> <dd>國內所有小朋友的同學，每次都從教室裡面滾出去的哪一個。</dd> </dl> <menu> <li>首頁</li> <li>商品分類</li> <li>購物狂歡節</li> <li>會員中心</li> </menu> </body> </html>
3-表單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單</title> </head> <body> <!-- 表單/ <form> 表單標籤，告訴瀏覽器，form內部的所有輸入標籤都是表單的內容，後面一併提交。 action 表單資料提交的伺服器地址 <input> 輸入標籤/輸入框/輸入按鈕 type 設定輸入框的型別 text 告訴瀏覽器，當前input屬於單行文字框 password 告訴瀏覽器，當前input屬於密碼框 submit 告訴瀏覽器，當前input輸入提交表單的提交按鈕 radio 告訴瀏覽器，當前input屬於單選框 checkbox 告訴瀏覽器，當前input屬於多選框 reset 告訴瀏覽器，重置當前表單的資料 <select> 下拉列表 option 告訴瀏覽器，這是下拉列表中的其中一個選項 textarea 多行文字框 cols 設定框的列數[寬度] rows 設定框的行數[高度] --> <h2>登入表單</h2> <form action=""> 登入帳號：<input type="text"><br><br> 登入密碼：<input type="password"><br><br> <input type="submit" value="登入"> </form> <h2>百度搜索</h2> <form action="http://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="百度一下"> </form> <h2>登錄檔單</h2> <form action=""> 賬戶：<input type="text" name="username"><br><br> 密碼：<input type="password" name="password"><br><br> 郵箱：<input type="emai" name="email"><br><br> 姓別：<label><input type="radio" name="sex" value="1">男</label> <label><input type="radio" name="sex" value="0">女</label> <br><br> 愛好： <label><input type="checkbox" name="lve" value="swimming">游泳</label> <label><input type="checkbox" name="lve" value="pc_game">電腦遊戲</label> <label><input type="checkbox" name="lve" value="card">卡牌遊戲</label> <label><input type="checkbox" name="lve" value="wark">爬山</label> <br><br> 所在城市： <select name="province"> <option value="">廣東</option> <option value="">廣西</option> <option value="">湖南</option> <option value="">湖北</option> <option value="">河南</option> <option value="">河北</option> <option value="">北京</option> <option value="">天津</option> <option value="">重慶</option> <option value="">上海</option> </select> <select name="city"> <option value="">廣州</option> <option value="">佛山</option> <option value="">深圳</option> </select> <br><br> 備註：<br> <textarea name="remark" cols="60" rows="10"></textarea><br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
4-表格相關標籤的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--基礎單元格--> <table border="1"> <tr> <td>1行1列</td> </tr> </table> <!-- 第二個：多行的表格 --> <table border=""> <tr> <td>1行1列</td> <td>1行2列</td> </tr> <tr> <td>2行1列</td> <td>2行2列</td> </tr> </table> <!-- 第三個：有表頭的表格 --> <table border="0" align="center" width="300px;"> <tr> <th>ID</th> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>001</td> <td>小龜龜</td> <td rowspan="2">13</td> <td>男</td> </tr> <tr> <td>002</td> <td>小紅紅</td> <td>女</td> </tr> <tr> <td>003</td> <td colspan="3">17的小男孩</td> </tr> </table> </body> </html>
5-實體字元
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 假設y=10,x=20,那麼z<x並且z>y，z的取值範圍？ <p>♠</p> <p>©</p> <p>一個段落 另一個段落</p> </body> </html>
6-css的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./index.css"> </head> <body> 故人西辭黃鶴樓，<br> 煙花三月下揚州。<br> </body> </html>
body { background-color: pink; color: deepskyblue; }
7-元素選擇符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 通配選擇符 */ * { padding: 0; margin: 0; } /* 型別選擇符 */ p{ background-color: #d2594f; color: gray; border: 3px solid #fff; } div{ background-color: black; color: gray; } /* ID選擇符 */ #p1{ color: orange; } /* 類選擇符 */ .p2{ color: lightblue; } </style> </head> <body> <p>一個段落</p> <p id="p1">一個段落</p> <div class="p2">另一個段落</div> <p class="p2">一個段落</p> </body> </html>
8-關係選擇符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 使用了選擇符給html元素設定外觀效果，但是因為選擇符使用不當，出現其他html元素也被設定樣式了，這種情況，我們稱之為樣式汙染 */ /* 包含選擇符 */ div .ul_first li{ color: red; } /* 父子選擇符 */ .div1>.p1{ color: red; } /* 相鄰選擇符 */ .li_2+li{ background-color: orange; } /* 兄弟選擇符 */ .li_2~li{ color: blue; } </style> </head> <body> <div> <ul class="ul_first"> <li class="li_2">第1個li</li> <li>第2個li</li> <li>第3個li</li> <li>第4個li</li> </ul> <ul> <li>第1個li</li> <li>第2個li</li> </ul> </div> <ul class="ul_first"> <li class="li_2">第1個li</li> <li>第2個li</li> <li>第3個li</li> </ul> <div class="div1"> <div> <p class="p1">第一段文字內容</p> </div> <p class="p1">第二段文字內容</p> </div> </body> </html>
9-屬性選擇符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 屬性選擇符，根據html元素查詢是否具有當前指定屬性的元素，新增樣式 */ p[title]{ color: red; } p[title="abc"]{ background-color: orange; } p[data-type='a']{ background-color: blue; } </style> </head> <body> <p title="abc" data-type="a">第1個段落</p> <p>第2個段落</p> <p title="">第3個段落</p> <p data-type="b">第4個段落</p> </body> </html>
10-偽類選擇符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box2:hover{ color: red; } div:first-child{ color: blue; } a:hover{ color: red; } a:active{ color: yellowgreen; } a:link{ text-decoration: none; } a:visited{ color: blue; } </style> </head> <body> <div>第3個box</div> <div class="box2">第2個box</div> <div>第1個box</div> <div>第4個box</div> <a href="http://www.133313232.com">游標懸放狀態</a> <a href="http://www.baidu.com">游標點選狀態</a> <a href="">游標平常狀態</a> </body> </html>
11-偽物件選擇符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter{ font-size: 2rem; } p:first-line{ color: red; } p::selection{ background-color: pink; color: blue; } P:after{ content: "...."; } p:before{ content: "[新華日報：小小米]"; } </style> </head> <body> <p>今天上午，在全國政協委員專題視察團視察情況交流座談會上，全國政協委員、軍事科學院軍事醫學研究院生物工程研究所所長、中國工程院院士陳薇說，今年1月2</p> </body> </html>
12-樣式屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ /* 屬性名稱:屬性值; */ /* 顏色，字型，文字，內容 */ background-color: gray; color: #f00; /* web開發中，顏色的表示一共有3種方式： 單詞表達法， red,orange,.... 16進位制數值表達法， 螢幕裡面所有的顏色都是通過光的三原色來組合產生的，一共有1677萬種。 16進位制數值表達法採用了螢幕的三種光的光暗程度來表達顏色. 每種顏色的發光程度值從00-FF之間，轉換成數值就是0-255 格式： #紅色綠色藍色 例如： 白色：#ffffff #fff 黑色：#000000 #000 紅色：#ff0000 #f00 綠色：#00ff00 #0f0 藍色：#0000ff #00f 紫紅：#ff00ff #f0f 黃色：#ffff00 #ff0 灰色：#666666 #666 只要三種光發光程度一樣，都是灰色。 16進位制數值如果滿足 aabbcc 或者 aaaaaa 格式，則可以進行簡寫： aabbcc ===> abc aaaaaa ===> aaa rgb顏色通道表達法 這裡的書寫原理和上面的16進製表達法一樣，只是書寫方式不同。 格式：rgb(紅色,綠色,藍色) 例如： 白色: rgb(255,255,255) 黑色: rgb(0,0,0) 紅色: rgb(255,0,0) .... */ /* 透明度 */ opacity: 0.3; } </style> </head> <body> <div class="box1 box2">一個段落</div> </body> </html>
網頁的巢狀
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 當前網頁 <iframe src="http://www.baidu.com"> </body> </html>