目錄
一、圖片標簽?
① 絕對路徑
1.絕對磁盤路徑
2.絕對網絡路徑
② 相對路徑 （推薦）
二、標題標簽?
三、水平線標簽?
四、標題樣式
1、CSS引入樣式
① 行內樣式
② 內嵌樣式
③ 外嵌樣式
2、CSS選擇器
① 元素選擇器
② id選擇器
③ 類選擇器
五、超鏈接?
六、視頻標簽?
七、音頻標簽?
八、換行、段落、文本加粗
九、頁面布局?
1、div
2、span
3、盒子模型
十、表格標簽?
十一、表單標簽?
1、主體?
2、表單項
（1）input
（2）select
（3）textarea
十二、代碼展示
一、圖片標簽? <img>
- src：指定圖片的url（絕對路徑 / 相對路徑）
- width：寬度 （px：像素，%：相對于父元素的百分比）
- height：高度 （px：像素，%：相對于父元素的百分比）
① 絕對路徑
1.絕對磁盤路徑
- 右鍵圖片屬性 —— 安全 —— 復制對象名
<img src="C:\Users\24453\Desktop\容寶網站\img\sina.jpg">
2.絕對網絡路徑
- 右鍵網頁圖片—— 在新標簽頁中打開圖片 —— 復制路徑
- <img src="https://img-home.csdnimg.cn/images/20201124032511.png">
② 相對路徑 （推薦）
- ./? ? 當前目錄，可省略
- ../? ?上一級目錄
二、標題標簽? <h1> - <h6>?
三、水平線標簽? <hr>
四、標題樣式
1、CSS引入樣式
① 行內樣式
寫在標簽style屬性中（不推薦）
<h1 style="屬性名:屬性值;屬性名:屬性值;"中國新聞網</h1>② 內嵌樣式
寫在style標簽中（可以寫在頁面任何位置，通常寫在head標簽中）
<style>h1{屬性名:屬性值;屬性名:屬性值;} </style>③ 外嵌樣式
寫在一個單獨的.css文件中（需要通過link標簽在網頁中引入）
<link rel="stylesheet" href="css/news.css">實例：
<!DOCTYPE html> <!-- 文檔類型為html --> <html lang="en"> <head><meta charset="UTF-8"> <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 設置瀏覽器兼容性 --><title>頁面標題</title><!-- 方式二：內嵌樣式 --><style>h1{color: brown;}</style> <!-- 方式三：外嵌樣式 --><link rel="stylesheet" href="./news.css"></head> <body><img src="img/sina.jpg" width="7%"> <div style="font-size: 6px;">日常 > 分享</div><!-- 方式一：行內樣式 --><h1 style="color: firebrick;">標題樣式</h1> <h1>標題樣式</h1><hr>2023年8月11日 13:14 容寶網<hr></body> </html>
2、CSS選擇器
優先級：id選擇器 > 類選擇器 > 元素選擇器
① 元素選擇器
元素名稱{color:red; }h1{color:red; }<h1> 新聞聯播網 </h1>② id選擇器
#id屬性值{color:red; }#hid{color:red; }<h1 id="hid"> 新聞聯播網</h1>③ 類選擇器
.class屬性值{color:red; }.cls{color:red; }<h1 class="cls"> 新聞聯播網 </h1>實例：
<!DOCTYPE html> <!-- 文檔類型為html --> <html lang="en"> <head><meta charset="UTF-8"> <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 設置瀏覽器兼容性 --><title>震驚！！</title><!-- 方式二：內嵌樣式 --><style>h1{color: #4d4f53;}/*元素選擇器*/span{font-size: 9px;}/*類選擇器*/.cls{font-size: 13px;}/*id選擇器*/#time{font-size: 13px;color: #888888;}</style> </head> <body><img src="img/sina.jpg" width="7%"> <span>戀愛日常 > 分享</span><h1>震驚！！</h1><hr><span id="time">2023年8月11日 13:14</span> <span class="cls">容寶網</span><hr></body> </html>
五、超鏈接?
<a href="https://baidu.com">容寶網</a>
- href：指定資源訪問的url
- target：指定在何處打開鏈接
- -self：默認值，在當前頁面打開
- -blank：在空白頁面打開
實例：
<!DOCTYPE html> <!-- 文檔類型為html --> <html lang="en"> <head><meta charset="UTF-8"> <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 設置瀏覽器兼容性 --><title>震驚！！</title><!-- 方式二：內嵌樣式 --><style>h1{color: #4d4f53;}/*元素選擇器*/span{font-size: 9px;}a{color: black;font-size: 9px;text-decoration: none; /*設置文本為一個標準文本*/}/*類選擇器*/.cls{font-size: 13px;}/*id選擇器*/#time{font-size: 13px;color: #888888;}</style> </head> <body><img src="img/sina.jpg" width="7%"> <a href="http://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/m&ek=1&kp=1&pt=0&bo=AAYFBgAGBQYWECA!&tl=3&vuin=2445374256&tm=1691762400&dis_t=1691762594&dis_k=df10ce7ce1b689b7c90b15bc539e7536&sce=60-4-3&rf=viewer_311" target="_blank">戀愛日常</a><span> > 分享</span><h1>震驚！！</h1><hr><span id="time">2023年8月11日 13:14</span> <a href="https://blog.csdn.net/weixin_61639349?type=blog"><span class="cls">容寶網</span></a><hr></body> </html>
六、視頻標簽? <video>
<video src="./video/VID_20230808_173135.mp4" controls width="200px"></video> <!--controls是允許播放-->七、音頻標簽? <audio>
<audio src="audio/1.mp3" controls></audio>八、換行、段落、文本加粗
<br> 換行<p> 段落<b> <strong> 文本加粗line-height 設置行高text-indent 首行縮進text-align 文本水平對其方式 生成一個空格九、頁面布局? <div> <span>
1、div
- 一行只顯示一個(獨占一行)
- 寬度默認是父元素的寬度，高度默認由內容撐開
- 可以設置寬高（width、height)
2、span
- 一行可以顯示多個
- 寬度和高度默認由內容撐開
- 不可以設置寬高( width、height)
3、盒子模型
<style>div{width:200px;height:200px;box-sizing:border-box; /*指定width height為盒子的高寬*/background-color:red; /*背景色*/padding:20px 20px 20px 20px; /*內邊距 上 右 下 左 （順時針）*/border:10px solid red; /*邊框寬度 線條類型 顏色*/margin:30px 30px 30px 30px; /*外邊距 上 右 下 左 （順時針）*/} </style>
十、表格標簽? <table>
標簽 描述 備注 <table> 定義表格整體
可以包裹多個<tr>
border：規定表格邊框寬度 width：規定表格寬度 cellspacing：規定單元格間的空間 <tr> 表格的行，可以包裹多個<td> <td> 單元格 如果是表頭單元格，可以替換為<th>，有加粗和居中效果
十一、表單標簽? <form>
1、主體?
- action：表單提交的url，往何處提交數據，如果不指定，默認提交到當前頁面
- method：表單提交方式
- get：在url后面拼接表單數據，比如?用戶名=容也同學&年齡=20，url長度有限制，默認值
<form action="" method="get">用戶名：<input type="text" name="用戶名">年齡：<input type="text" name="年齡"><input type="submit" value="提交"> </form>
- post：在消息體中傳遞，參數大小無限制
<form action="" method="post">用戶名：<input type="text" name="用戶名">年齡：<input type="text" name="年齡"><input type="submit" value="提交"> </form>
2、表單項
（1）input
- 表單項，通過type屬性控制輸入形式
?
（2）select
- 定義下拉列表，<option>定義列表項
（3）textarea
- 定義文本域
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注冊頁面</title> </head><body><form action="" method="post">用戶名：<input type="text" name="用戶名"><br><br>密碼：<input type="password" name="密碼"><br><br>性別：<label><input type="radio" name="性別" value="1">男</label><label><input type="radio" name="性別" value="2">女</label><br><br>用餐偏好：<label><input type="checkbox" name="中餐">中餐</label><label><input type="checkbox" name="西餐">西餐</label><label><input type="checkbox" name="日料">日料</label><label><input type="checkbox" name="韓餐">韓餐</label><label><input type="checkbox" name="東南亞風味">東南亞風味</label><br><br>生日：<input type="date" name="生日"><br><br>時間：<input type="time" name="時間"><br><br>郵箱：<input type="email" name="郵箱"><br><br>年齡：<input type="number" name="年齡"><br><br>學歷：<select name="學歷"><option value="">--------請選擇---------</option><option value="1">本科</option><option value="2">大專</option><option value="3">碩士</option><option value="4">博士</option></select><br><br>頭像：<input type="file" name="image" ><br><br>個人簡介：<textarea name="個人簡介" cols="30" rows="10"></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" name="按鈕"><br></form> </body> </html>
十二、代碼展示
<!DOCTYPE html> <!-- 文檔類型為html -->
<html lang="en">
<head><meta charset="UTF-8"> <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 設置瀏覽器兼容性 --><title>震驚！西安居然發生了這種事！</title><!-- 方式二：內嵌樣式 --><style>h1{color: #4d4f53;}/*元素選擇器*/span{font-size: 9px;}a{color: black;font-size: 9px;text-decoration: none; /*設置文本為一個標準文本*/}p{text-indent: 35px; /*首行縮進*/line-height: 30px; /*設置行間距*/}video{display: block;margin: 0 auto;}table{text-align: center;}/*類選擇器*/.cls{font-size: 13px;}/*id選擇器*/#time{font-size: 13px;color: #888888;}#plast{text-align: right; /*設置對其方式*/}#center{width:65%;/*margin:0% 17.5% 0% 17.5%; 設置外邊距：上 右 下 左 */margin:0 auto;}#mid{display: block;margin: 0 auto;}</style> </head>
<body><div id="center"><!-- —————————————————————— 標題部分 ———————————————————————— --><img src="img/sina.jpg" width="12%"> <a href="http://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/m&ek=1&kp=1&pt=0&bo=AAYFBgAGBQYWECA!&tl=3&vuin=2374256&tm=1691762400&dis_t=1691762594&dis_k=df10ce7ce1b689b7c90b15bc539e7536&sce=60-4-3&rf=viewer_311" target="_blank">戀愛日常</a><span> > 分享</span><h1>震驚！西安居然發生了這種事！</h1><hr><span id="time"> 2023年8月11日 13:14</span> <a href="https://blog.csdn.net/weixin_61639349?type=blog"><span class="cls">容寶網</span></a><hr><!-- —————————————————————— 正文部分 ———————————————————————— --><p><b>容寶網消息</b>（聚焦西安）：據了解，xx。</p><img id="mid" src="./img/htmlMTXX_MH20230807_214202042.jpg" width="300px"><p>xxxxxxx購置了西瓜和葡萄。</p><img id="mid" src="./img/htmlMX_MH20230807_204455741.jpg" width="300px"><p>由于許xxxx</p><table border="0" cellspacing="5"><tr><td><img src="./img/htmlMTXX_MH20230807_211045065.jpg" width="300px"></td><td><img src="./img/htmlMTXX_MH2230807_204911532.jpg" width="300px"></td><td><img src="./img/htmlMTXX_MH2023080_220415058.jpg" width="300px"></td></tr></table><p>第二天，xxx</p><video src="./video/VID_20230808_173135.mp4" controls width="200px"></video> <!--controls是允許播放--><p id="plast">責任編輯：小白 SN242</p></div>
</body>
</html>
