今日html筆記

原手寫筆記?

-------------------------------------------------------------------------------------------------------
關于超鏈接的使用
<a href="https://www.luogu.com.cn/" target="_blank">//href屬性指定了超鏈接的目標地址,即當用戶點擊超鏈接時,瀏覽器會跳轉到這個地址。<p>測試圖片超鏈接轉向目標網站洛谷</p><img src="../image/5082.png" alt="測試圖片" width="500" height="500">//兩個a標簽之間的內容都可以被設置成超鏈接形式,包括圖片和文字,或者混合。
</a>
//上述內容的效果是<p>和img標簽都被設置成了超鏈接,當用戶點擊時,瀏覽器會跳轉到href屬性指定的地址。//關于<img src="../image/5082.png" alt="測試圖片" width="500" height="500">的使用src屬性指定了圖片的路徑,alt屬性指定了圖片的替代文本,當圖片無法加載時,會顯示這個文本。width和height屬性指定了圖片的寬度和高度。之所以能指定寬度和高度,是因為img標簽是一個自閉合標簽,不需要結束標簽。或者說 img是個行內元素,可以設置寬度和高度。target="_blank"屬性指定了超鏈接的打開方式,即當用戶點擊超鏈接時,瀏覽器會打開一個新的窗口來顯示目標地址的內容。如果沒有這個blank屬性,則會在當前窗口打開目標地址的內容。
-------------------------------------------------------------------------------------------------------網頁元素的分類1.塊級元素:上下擺放塊級元素會獨占一行,可以設置寬度和高度。常見的塊級元素有:div,p,h1-h6,ul,ol,li,table,form等。其中div是最常用的塊級元素。
<div></div>
<p></p>
<h1></h1>
<table></table>
<form action=""></form>
2.行內元素（內聯元素）:左右擺放
行內元素不會獨占一行 a,b,em,i,span,strong等。設置寬高屬性也不會生效。
<a href=""></a> <b></b> <em> </em> <i></i> <span> </span> <strong> </strong>
3.行內塊元素:
行內塊元素不會獨占一行,可以設置寬度和高度,如果不設置寬度,則寬度會根據內容的寬度來決定。
常見的行內塊元素有:img,input,button等。
<img src="" alt=""> <input type="text"> <button> </button>
-------------------------------------------------------------------------------------------------------
關于列表的話，最常用的是無序列表和有序列表。
其中li是塊級元素,ul是無序列表,ol是有序列表。
1.有序列表:
有序列表使用ol標簽來定義,每個列表項使用li標簽來定義。
有序列表的列表項前面會有一個數字。
有序列表的列表項可以嵌套,即一個列表項里面可以再嵌套一個列表。
<ol><li>第一行</li><li>第二行</li>
</ol>
1.無序列表:
無序列表使用ul標簽來定義,每個列表項使用li標簽來定義。
無序列表的列表項前面會有一個小圓點。
無序列表的列表項可以嵌套,即一個列表項里面可以再嵌套一個列表。
<ul><li>第一行</li><li>第二行</li>
</ul>
-------------------------------------------------------------------------------------------------------
關于表格的話,最常用的是表格標簽table。
表格標簽table使用tr標簽來定義行,使用td標簽來定義單元格。
表格標簽table的屬性有:border,cellpadding,cellspacing,width,height等。
border屬性指定了表格的邊框,cellpadding屬性指定了單元格的內邊距,
cellspacing屬性指定了單元格之間的間距,width和height屬性指定了表格的寬度和高度。
border的參數有:
1.0-10:指定邊框的寬度,單位為像素。
cellspacing的參數有:
1.0-10:指定單元格之間的間距,單位為像素。
width和height的參數有:
1.0-100%:指定表格的寬度和高度,單位為像素或百分比。寬的百分比指的是占比當前頁面的比例。
1.auto:指定表格的寬度和高度,單位為像素或百分比。
<table border="5" cellspacing="5" width="100%" height="50"><tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
</table>
關于表格的特定行或特定列合并
1.合并行:
合并行使用rowspan屬性來指定,rowspan屬性的值指定了要合并的行數。
<table border="5" cellspacing="5" width="100%" height="50"><tr><td rowspan="2">第一行第一列</td>//切記該屬性要放在第一個td標簽中,否則會無效。即需要指定合并的是哪一列的多少行。<td>第一行第二列</td><td>第一行第三列</td></tr><tr><td>第二行第二列</td><td>第二行第三列</td></tr>//th標簽是表格的表頭標簽,可以用來定義表格的表頭。//th標簽是塊級元素,可以設置寬度和高度。<tr><th width = "500" height = "500">第三行第一列</th>//寬會影響整個表格的寬度,高只會影響該行的高度。<td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
2.合并列:
合并列使用colspan屬性來指定,colspan屬性的值指定了要合并的列數。
<table border="5" cellspacing="5" width="100%" height="50"><tr><td>第一行第一列</td><td colspan="2">第一行第二列</td>//同樣該屬性也要放在td標簽中,否則會無效。即需要指定合并需要從是該行的多那一列開始向后合并。</tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
</table>
//無論是合并行還是合并列,都需要注意合并的初始位置,以及合并的行數或列數。最重要的是記得刪除多余的td標簽。
//比如上述例子中,第一行的第一列,向后合并2列,那么第一行的第二列就不需要了。
因為位置已經被合并了。如果不及時刪除,會導致表格顯示錯誤，多余的會被擠出。
-------------------------------------------------------------------------------------------------------
關于表單的話,最常用的是表單標簽form。
表單標簽form使用action屬性來指定表單提交的地址,使用method屬性來指定表單提交的方式。
表單的內容包括:輸入框,下拉框,復選框,單選框,按鈕等。
<form action="" method="">文本輸入框測試 <input type="text" value = "請輸入你想輸入的文本">  //type屬性指定了輸入框的類型,text是文本輸入框,如果想初始化輸入框的內容,可以使用value屬性來指定。text也可以改成time 或者 number等,前者只能填入時間，后者只能填入數字，并且有個小按鈕可以增減數值。當然還有其他類型的輸入框,比如:date 日期輸入框,month 月份輸入框,week 周輸入框,datetime 日期時間輸入框,datetime-local 本地日期時間輸入框,range 范圍輸入框,color 顏色輸入框。<input type="password">//password是密碼輸入框,輸入的內容會被隱藏,也可以使用value屬性來指定初始密碼,但沒啥必要。密碼輸入測試<input type="submit" value="這是一個按鈕">//submit是提交按鈕,點擊后會提交表單的數據。value屬性指定了按鈕的文本。默認是“提交”。重置按鈕測試<input type="reset"  value="點擊它，所填的信息會被重置">//reset是重置按鈕,點擊后會重置表單的數據。value屬性指定了按鈕的文本。默認是“重置”。<input type="button">//button是按鈕,需要用js來鏈接指定作用。value屬性指定了按鈕的文本。默認是“按鈕”。選擇一<input type="checkbox" name = "選擇一">選擇二<input type="checkbox" name = "選擇二">選擇三<input type="checkbox" name = "選擇三">選擇四<input type="checkbox" name = "選擇四">默認勾選測試<input type="checkbox" name = "選擇五" checked>//checkbox是復選框,可以選擇多個選項。復選框的name屬性指定了復選框的名稱,可以使用name屬性來獲取復選框的值。也可以指定默認選中的復選框,可以使用checked屬性來指定。例如:單選一<input type="radio" name = "1">單選二<input type="radio" name = "1">單選三<input type="radio" name = "1">單選四<input type="radio" name = "1" checked>//radio是單選框,只能選擇一個選項。單選框的name屬性指定了單選框的名稱,可以使用name屬性來獲取單選框的值。也可以指定默認選中的單選框,可以使用checked屬性來指定。如果name屬性相同,則只能在屬性相同的選項中選擇一個選項，實現單選的效果。<select><option>選項1</option><option>選項2</option><option>選項3</option></select>//select是下拉框,可以選擇一個選項。option是下拉框的選項,可以使用value屬性來指定選項的值。也可以使用selected屬性來指定默認選中的選項,默認是第一個選項。<textarea></textarea>//textarea是文本域,可以輸入多行文本。這是一個按鈕<button>我是個按鈕</button>//button是按鈕,需要用js來鏈接指定作用。
</form>
按鈕的長度一般都會根據文本長度會自動調整,不會超出按鈕的寬度。
-------------------------------------------------------------------------------------------------------

知識點分離

一、超鏈接的使用

超鏈接在網頁中用于實現頁面跳轉等功能，通過?<a>?標簽來創建。

解析：
href?屬性指定了超鏈接的目標地址，當用戶點擊超鏈接時，瀏覽器會跳轉到這個地址。target="_blank"?屬性指定了超鏈接的打開方式，即當用戶點擊超鏈接時，瀏覽器會打開一個新的窗口來顯示目標地址的內容；若沒有該屬性，則會在當前窗口打開目標地址的內容。<a>?標簽之間的內容都可以被設置成超鏈接形式，包括圖片和文字，或者混合。對于?<img>?標簽，src?屬性指定了圖片的路徑，alt?屬性指定了圖片的替代文本，當圖片無法加載時，會顯示這個文本，width?和?height?屬性指定了圖片的寬度和高度，img?標簽是自閉合標簽（行內元素）。

代碼示例：

<a href="https://www.luogu.com.cn/" target="_blank"><p>測試圖片超鏈接轉向目標網站洛谷</p><img src="../image/5082.png" alt="測試圖片" width="500" height="500">
</a>

二、網頁元素的分類

網頁元素主要分為塊級元素、行內元素和行內塊元素。

塊級元素：上下擺放，會獨占一行，可以設置寬度和高度。常見的塊級元素有?div、p、h1-h6、ul、ol、li、table、form?等，其中?div?是最常用的塊級元素。
行內元素（內聯元素）：左右擺放，不會獨占一行，如?a、b、em、i、span、strong?等，設置寬高屬性也不會生效。
行內塊元素：不會獨占一行，可以設置寬度和高度，如果不設置寬度，則寬度會根據內容的寬度來決定。常見的行內塊元素有?img、input、button?等。

<!-- 塊級元素示例 -->
<div></div>
<p></p>
<h1></h1>
<table></table>
<form action=""></form><!-- 行內元素示例 -->
<a href=""></a> 
<b></b> 
<em> </em> 
<i></i> 
<span> </span> 
<strong> </strong><!-- 行內塊元素示例 -->
<img src="" alt=""> 
<input type="text"> 
<button> </button>

三、列表的使用

列表常用的有無序列表和有序列表，li?是塊級元素，ul?是無序列表，ol?是有序列表。

有序列表：使用?ol?標簽來定義，每個列表項使用?li?標簽來定義，列表項前面會有一個數字，且列表項可以嵌套。
無序列表：使用?ul?標簽來定義，每個列表項使用?li?標簽來定義，列表項前面會有一個小圓點，列表項也可以嵌套。

<!-- 有序列表示例 -->
<ol><li>第一行</li><li>第二行</li>
</ol><!-- 無序列表示例 -->
<ul><li>第一行</li><li>第二行</li>
</ul>

四、表格的使用

最常用的表格標簽是?table，使用?tr?標簽來定義行，使用?td?標簽來定義單元格。
table?標簽的屬性有?border（指定表格的邊框，參數為?0-10，單位為像素）、cellpadding（指定單元格的內邊距）、cellspacing（指定單元格之間的間距，參數為?0-10，單位為像素）、width?和?height（指定表格的寬度和高度，單位為像素或百分比，也可取值?auto）。合并行使用?rowspan?屬性指定，值為要合并的行數，且該屬性要放在第一個?td?標簽中；合并列使用?colspan?屬性指定，值為要合并的列數，該屬性也要放在?td?標簽中。th?標簽是表格的表頭標簽，是塊級元素，可以設置寬度和高度。

<!-- 基礎表格示例 -->
<table border="5" cellspacing="5" width="100%" height="50"><tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
</table><!-- 合并行示例 -->
<table border="5" cellspacing="5" width="100%" height="50"><tr><td rowspan="2">第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr><tr><td>第二行第二列</td><td>第二行第三列</td></tr><tr><th width = "500" height = "500">第三行第一列</th><td>第三行第二列</td><td>第三行第三列</td></tr>
</table><!-- 合并列示例 -->
<table border="5" cellspacing="5" width="100%" height="50"><tr><td>第一行第一列</td><td colspan="2">第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
</table>

五、表單的使用

最常用的表單標簽是?form，form?標簽使用?action?屬性來指定表單提交的地址，使用?method?屬性來指定表單提交的方式。
表單的內容包括輸入框、下拉框、復選框、單選框、按鈕等。輸入框的?type?屬性指定了輸入框的類型，如?text（文本輸入框，可通過?value?屬性初始化內容）、password（密碼輸入框，輸入內容會被隱藏）、submit（提交按鈕，點擊提交表單數據）、reset（重置按鈕，點擊重置表單數據）、button（普通按鈕，需用?js?鏈接指定作用）等。checkbox?是復選框，name?屬性指定名稱，可通過?checked?屬性指定默認選中；radio?是單選框，name?屬性相同的選項只能選一個，也可通過?checked?屬性指定默認選中。select?是下拉框，option?是選項，可通過?value?屬性指定選項值，selected?屬性指定默認選中。textarea?是文本域，可輸入多行文本。

<form action="" method="">文本輸入框測試 <input type="text" value = "請輸入你想輸入的文本">  <input type="password">密碼輸入測試<input type="submit" value="這是一個按鈕">重置按鈕測試<input type="reset"  value="點擊它，所填的信息會被重置"><input type="button">選擇一<input type="checkbox" name = "選擇一">選擇二<input type="checkbox" name = "選擇二">選擇三<input type="checkbox" name = "選擇三">選擇四<input type="checkbox" name = "選擇四">默認勾選測試<input type="checkbox" name = "選擇五" checked>單選一<input type="radio" name = "1">單選二<input type="radio" name = "1">單選三<input type="radio" name = "1">單選四<input type="radio" name = "1" checked><select><option>選項1</option><option>選項2</option><option>選項3</option></select><textarea></textarea>這是一個按鈕<button>我是個按鈕</button>
</form>