怎樣做_網(wǎng)站做seo百度網(wǎng)站的域名地址
今天我們繼續(xù)結(jié)合發(fā)布的Html5基礎(chǔ)知識點文檔進行復(fù)習(xí)，希望對大家有所幫助。
目錄
列表
無需列表
有序列表
自定義列表
樣例
表格
基本屬性
?編輯
相關(guān)屬性
Border
Width
Height
?編輯
表格標(biāo)題
?編輯
表格單元頭
合并單元格
垂直單元格合并
水平單元格合并
一般遵守的步驟
表單標(biāo)簽
各類基礎(chǔ)標(biāo)簽
text?本框
password密碼框
radio單選框
checkbox多選框
file?件選擇
submit提交按鈕
reset重置按鈕
placeholder提示
email類型
number范圍
?期檢查器
search類型
color類型
autocomplete類型允許輸入框提供自動完成建議，這些建議來自于元素中的。
最終效果展示
其他補充標(biāo)簽
form標(biāo)簽
下拉菜單
?編輯
文本域
Label標(biāo)簽
使用方法
法一
法二
語義化標(biāo)簽
?編輯
字符實體
結(jié)語
列表
無需列表
無需列表的主要對象是ul和li標(biāo)簽，是一個雙標(biāo)簽。ul嵌套li，其中ul表示列表整體，li表示其中每?項的內(nèi)容。其中ul只能包含li，li可以包含任何標(biāo)簽。?須列表每?項前默認(rèn)顯示圓點標(biāo)識，圓點表示可以?CSS改變。
有序列表
有序列表主要由ol和li表示，ol嵌套li，其中ol表示列表整體，li表示每?項的內(nèi)容。有序列表每?項前都默認(rèn)顯示序號標(biāo)識序號標(biāo)識可以?CSS改變。
自定義列表
自定義列表通常在??底部導(dǎo)航中使?，包含dl，dt，dd三種。
- dl表示?定義列表的整體，包裹dt、dd標(biāo)簽
- dt表示?動移列表的主題
- dd表示?定義列表主題的每?項內(nèi)容
dd前會默認(rèn)縮進，縮進可以?CSS消除，dl中只允許包含dt或dd標(biāo)簽，dt和dd當(dāng)中隨便放。
樣例
下面是一段代碼展示和具體效果：
<h1>無序列表ul</h1>
<ul><li>點贊</li><li>關(guān)注</li><li>收藏</li>
</ul>
<hr> <h1>有序列表ol</h1>
<ol><li>CSDN博主</li><li>PLEASURE</li><li>樂事</li>
</ol>
<hr> <h1>自定義列表dl</h1>
<dl><dt>HTML</dt><dd>超文本標(biāo)記語言，用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)。</dd><dt>CSS</dt><dd>層疊樣式表，用于網(wǎng)頁的表現(xiàn)形式。</dd><dt>JavaScript</dt><dd>一種腳本語言，用于網(wǎng)頁的交互功能。</dd>
</dl>
PS：這些列表標(biāo)簽都是雙標(biāo)簽
表格
基本屬性
在表格當(dāng)中，table表示表格整體，可以包裹多個tr，tr表示表格每?，可?于包裹td，td表示表格單元格，可?于包裹內(nèi)容。
<table border="1"><tr><th>姓名</th><th>年齡</th><th>職業(yè)</th></tr><tr><td>張三</td><td>30</td><td>程序員</td></tr><tr><td>李四</td><td>25</td><td>設(shè)計師</td></tr><tr><td>王五</td><td>35</td><td>產(chǎn)品經(jīng)理</td></tr>
</table>
這里的border是我們看到的分割一個一個單元格的邊框線，如果刪除，那么各個單元格子間就不會有線條，效果如下：
反之，如果我們把數(shù)字變大，那么相應(yīng)的邊線也會變大。
相關(guān)屬性
Border
border屬性值為數(shù)字，效果是邊框的寬度，具體效果在基本屬性當(dāng)中已經(jīng)跟大家闡述。
Width
width屬性值為數(shù)字，效果是表格寬度。
Height
height屬性值為數(shù)字，效果是表格?度。
PS：
實際當(dāng)中更推薦CSS。這三個屬性的使??法是直接跟在table后?，即<table border=" " width=" " height=" ">引號當(dāng)中寫數(shù)字即可。具體使用方法如下：
<table border="1" width="600"><tr height="50"><th width="200">姓名</th><th width="100">年齡</th><th width="300">職業(yè)</th></tr><tr height="50"><td width="200">張三</td><td width="100">30</td><td width="300">程序員</td></tr><tr height="50"><td width="200">李四</td><td width="100">25</td><td width="300">設(shè)計師</td></tr><tr height="50"><td width="200">王五</td><td width="100">35</td><td width="300">產(chǎn)品經(jīng)理</td></tr>
</table>
表格標(biāo)題
<caption>表示表格?標(biāo)題，默認(rèn)在表格頂部居中位置，是雙標(biāo)簽。
table border="1" width="600"><caption>這是標(biāo)題</caption><tr height="50"><th width="200">姓名</th><th width="100">年齡</th><th width="300">職業(yè)</th></tr><tr height="50"><td width="200">張三</td><td width="100">30</td><td width="300">程序員</td></tr><tr height="50"><td width="200">李四</td><td width="100">25</td><td width="300">設(shè)計師</td></tr><tr height="50"><td width="200">王五</td><td width="100">35</td><td width="300">產(chǎn)品經(jīng)理</td></tr>
</table>
表格單元頭
<th>表示表頭單元格，表示?列?標(biāo)題并通常?于表格最上?的第??，默認(rèn)內(nèi)部?字加粗居中，是雙標(biāo)簽?？梢越Y(jié)合基本屬性中的標(biāo)簽使?。
合并單元格
垂直單元格合并
垂直?向的單元格合并，跨?合并使用rowspan，例：<td rowspan="要合并的單元格數(shù)量">想要的內(nèi)容</td>
<table border="1"><caption>跨行</caption><tr><th>姓名</th><th>部門</th><th colspan="2">聯(lián)系方式</th></tr><tr><td rowspan="3">張三</td><td>技術(shù)部</td><td>電話：1234567890</td><td>郵箱：zhangsan@example.com</td></tr><tr><td>職位：高級工程師</td><td></td><td></td></tr><tr><td>入職日期：2020-01-01</td><td></td><td></td></tr>
</table>水平單元格合并
?平?向的單元格合并，跨列合并使用colspan，例：<td colspan="要合并的單元格數(shù)量">想要的內(nèi)容</td>
<table border="1"><caption>跨列</caption><tr><th colspan="3">公司年度報告</th></tr><tr><th>季度</th><th>收入</th><th>支出</th></tr><tr><td>第一季度</td><td>200</td><td>150</td></tr><tr><td>第二季度</td><td>250</td><td>180</td></tr><tr><th colspan="2">總計</th><td>880</td></tr>
</table>
一般遵守的步驟
進行合并的三個步驟：
- 明確要合并的單元格
- 從左上到右下確認(rèn)需要保留哪?個單元格的內(nèi)容
- 跨?合并rowspan、跨列合并colspan
注意：不能跨結(jié)構(gòu)標(biāo)簽合并（如th、td、tf等）
表單標(biāo)簽
各類基礎(chǔ)標(biāo)簽
這些標(biāo)簽一般都是單標(biāo)簽，用于收集用戶輸入，它有多種類型，每種類型適用于不同的輸入場景。他有如下三個需要注意的事項：
- 根據(jù)type屬性的不同展示不同效果<input type="需要的功能">
- ?般不換?，需要???br換?
- 可以在input標(biāo)簽前使?漢字作為提示字在前?，在后?寫就是提示詞在后?
下面是幾種常用的基礎(chǔ)標(biāo)簽
text?本框
用于接受單行的文本輸入，是最基本的輸入字段。
<input type="text" id="txtName" name="name" placeholder="請輸入您的名字">password密碼框
類似于文本框，但輸入的字符會被遮掩，用于保護用戶的隱私。
<input type="password" id="pwdPassword" name="password" placeholder="請輸入密碼">radio單選框
一組單選按鈕中只能選中一個。同一組的單選按鈕需要相同的name屬性。
<input type="radio" id="optMale" name="gender" value="male">
<label for="optMale">男</label>
<input type="radio" id="optFemale" name="gender" value="female">
<label for="optFemale">女</label>checkbox多選框
允許多個選項被選中，適合用戶需要勾選多個項目的情況。
<input type="checkbox" id="chkApple" name="fruit" value="apple"><label for="chkApple">蘋果</label><input type="checkbox" id="chkBanana" name="fruit" value="banana"><label for="chkBanana">香蕉</label><input type="checkbox" id="chkWatermelon" name="fruit" value="apple"><label for="chkApple">西瓜</label><input type="checkbox" id="chkOrange" name="fruit" value="banana"><label for="chkBanana">橘子</label>file?件選擇
讓用戶從本地文件系統(tǒng)選擇一個或多個文件。
<input type="file" id="fileUpload" name="upload" multiple>hidden隱藏域
在表單中存儲數(shù)據(jù)，但用戶不可見，常用于安全令牌或會話ID。
<input type="hidden" id="hidToken" name="token" value="secret-token">submit提交按鈕
當(dāng)用戶點擊時，會觸發(fā)表單的提交事件，將表單數(shù)據(jù)發(fā)送給服務(wù)器。
<input type="submit" id="btnSubmit" value="提交">reset重置按鈕
當(dāng)用戶點擊時，會清除表單中的所有輸入，將表單恢復(fù)到初始狀態(tài)。
<input type="reset" id="btnReset" value="重置">button普通按鈕
與提交按鈕類似，但不會提交表單，常用于觸發(fā)JavaScript函數(shù)。
<input type="button" id="btnAction" value="行動">placeholder提示
為輸入框提供一個提示性的文本，當(dāng)輸入框為空時顯示。
<input type="text" id="txtEmail" name="email" placeholder="請輸入您的電子郵箱">email類型
專門用于收集電子郵件地址，瀏覽器會自動驗證格式是否正確。
<input type="email" id="txtEmailValid" name="valid_email" placeholder="請輸入有效的電子郵箱">number范圍
用于收集數(shù)值，可以通過min和max屬性限制范圍。
<input type="number" id="numAge" name="age" min="18" max="100" value="25">?期檢查器
提供一個日期選擇器，用戶可以選取日期。
<input type="date" id="dob" name="birthdate">search類型
類似于文本輸入，但瀏覽器可能會提供一個搜索圖標(biāo)和自動完成建議。
<input type="search" id="txtSearch" name="search_query" placeholder="搜索...">color類型
提供一個顏色選擇器，用戶可以選取顏色。
<input type="color" id="colorPicker" name="favorite_color" value="#ff0000">autocomplete類型
允許輸入框提供自動完成建議，這些建議來自于<datalist>元素中的<option>。
<input type="text" id="txtCity" name="city" list="cities">
<datalist id="cities"><option value="北京"><option value="上海"><option value="廣州"><option value="深圳">
</datalist>最終效果展示
其他補充標(biāo)簽
form標(biāo)簽
action當(dāng)點擊置頂?shù)奶峤坏劝粹o時把數(shù)據(jù)發(fā)送的地址。
name表單的唯?名稱。
method制定提交表單時的類型請求：GET請求和POST請求。
datalist為輸?框提供?個下拉列表以供選擇，?持模糊搜索。
下拉菜單
標(biāo)簽組成：select表示菜單整體，option表示菜單的每一項，可以用selected設(shè)置默認(rèn)選中 默認(rèn)選中selcet一般跟在option的<>內(nèi)部。
<form><label for="fruits">請選擇你喜歡的水果:</label><select id="fruits" name="fruit"><option value="apple">蘋果</option><option value="banana">香蕉</option><option value="cherry">櫻桃</option><option value="orange">橙子</option><option value="grape">葡萄</option></select>
</form>
文本域
textarea為網(wǎng)頁提供可輸入多行文本的表單控件，是雙標(biāo)簽。常見屬性cols規(guī)定了文本域的可見寬度，rows規(guī)定了文本域的可見行數(shù)。右下角可以拖動改變大小，實際開發(fā)中推薦CSS。
Label標(biāo)簽
常用于綁定內(nèi)容余表單標(biāo)簽的關(guān)系，是雙標(biāo)簽。
使用方法
法一
把內(nèi)容（如文本）包裹起來 在表單標(biāo)簽上天界ID屬性 用label標(biāo)簽的for屬性設(shè)置對應(yīng)的ID屬性 例：<input type="radio"> name="sex" id=""><label for="">內(nèi)容</label>
法二
直接使用label把內(nèi)容和表單標(biāo)簽包裹 把label標(biāo)簽的for屬性刪除 <label><input type="radio" name="sex">內(nèi)容</label>
語義化標(biāo)簽
div標(biāo)簽-一行顯示一個，獨占一行顯示，是雙標(biāo)簽，div后面可以連接font-size、color等使用。
span標(biāo)簽-一行顯示多個，是雙標(biāo)簽。
其余可能會常用的標(biāo)簽有header網(wǎng)頁頭部、nav網(wǎng)頁導(dǎo)航、footer網(wǎng)頁底部、aside網(wǎng)頁側(cè)邊欄、section網(wǎng)頁區(qū)塊、article網(wǎng)頁文章。
<div class="container"><h2>產(chǎn)品列表</h2><div class="item"><span>產(chǎn)品編號: 001</span><br><span>產(chǎn)品名稱: 高級筆記本</span><br><span>價格: $100</span></div><div class="item"><span>產(chǎn)品編號: 002</span><br><span>產(chǎn)品名稱: 設(shè)計師鼠標(biāo)</span><br><span>價格: $50</span></div><div class="item"><span>產(chǎn)品編號: 003</span><br><span>產(chǎn)品名稱: 藍牙耳機</span><br><span>價格: $75</span></div>
</div>
在本案例中，為了各個div和span更加明顯，我添加了一些CSS來讓他們的得以區(qū)分，后續(xù)博主也會補充更多CSS的知識點，博主是否能更加勤快的更新，就看大家的點贊收藏了（求求🥺）
字符實體
網(wǎng)頁只“認(rèn)識”一個空格，多個空格“不認(rèn)識”，所以需要使用字符實體，格式為&對應(yīng)英文;。常用的有空格
<p>這里沒有空格</p>
<p>這里有只按下一次 空格鍵的空格和很多按下 空格鍵的空格效果</p>
<p>這里是使用了一次和多次 字符實體 后的空格效果</p>
結(jié)語
今天溫故了一些比較常見的標(biāo)簽、表格和列表，希望對大家有所幫助，也希望大家喜歡的話可以留下點贊、關(guān)注和收藏，這對我真的很重要，謝謝！