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