柚子快報(bào)邀請碼778899分享：前端 HTML常見標(biāo)簽

http://yzkb.51969.com/

HTML定義

HTML超文本標(biāo)記語言——HyperTextMarkupLanguage ①超文本是什么？ 鏈接 ②標(biāo)記是什么？? ? ?標(biāo)記也叫標(biāo)簽，帶尖括號的文本

標(biāo)簽

標(biāo)簽語法

1. 標(biāo)簽一般成對出現(xiàn)，中間包裹內(nèi)容

2. <>里面放英文字母（標(biāo)簽名）

3. 結(jié)束標(biāo)簽比開始標(biāo)簽多一個(gè)字符 /

4. 標(biāo)簽內(nèi)可以嵌套標(biāo)簽，例：

請打開該 鏈接

5. 拓展： ①雙標(biāo)簽：成對出現(xiàn)的標(biāo)簽 ②單標(biāo)簽：只有開始標(biāo)簽，沒有結(jié)束標(biāo)簽，如
換行，

基本骨架

HTML基本股骨架是 網(wǎng)頁模板。

html：整個(gè)頁面 head：網(wǎng)頁頭部，存放給瀏覽器看的代碼，例如CSS body：頁面主題，存放給用戶看的代碼，例如 圖片、文字 title：網(wǎng)頁標(biāo)題

標(biāo)簽的關(guān)系

1. 作用：明確代碼的書寫位置

2. 關(guān)系： ①父子關(guān)系（嵌套關(guān)系） ②兄弟關(guān)系（并列關(guān)系）

注釋

1. 注釋就是對代碼的解釋和說明，提高程序代碼的可讀性。

2.

屬性

1.?標(biāo)簽屬性（以下簡稱屬性）是對標(biāo)簽的一種描述方式

2. 標(biāo)簽屬性的分類： ①通用屬性：每個(gè)標(biāo)簽都有的屬性 ②自有屬性：只有特定的標(biāo)簽才有的屬性 ③自定義屬性：不是內(nèi)置的屬性，而是我們根據(jù)需要自定義的屬性

3. 注意事項(xiàng)： ①屬性總是以名/值對的形式出現(xiàn)，比如：charset="UTF-8" ②屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。③屬性和屬性值對大小寫不敏感，但通常使用小寫屬性④屬性值應(yīng)該始終被包括在引號內(nèi)，通常使用雙引號⑤屬性與標(biāo)簽名間用空格隔開⑥一個(gè)標(biāo)簽可以有多個(gè)屬性，屬性間也用空格隔開

常用標(biāo)簽

標(biāo)題標(biāo)簽

一般用在新聞標(biāo)題、文章標(biāo)題、網(wǎng)頁區(qū)域名稱、產(chǎn)品名稱等等

標(biāo)簽名：h1 ~ h6（雙標(biāo)簽，有6個(gè)級別）

內(nèi)容?

不同級別標(biāo)題標(biāo)簽的顯示效果特點(diǎn) ①文字加粗 ②文字字號逐漸減小 ③獨(dú)占一行

注意： ① h1標(biāo)簽在一個(gè)網(wǎng)頁中只能用一次，用來放新聞標(biāo)題或網(wǎng)頁的logo ② h2 ~ h6 無使用次數(shù)限制

段落標(biāo)簽

一般用在新聞段落、文章段落、產(chǎn)品描述信息等等

標(biāo)簽名：p（雙標(biāo)簽）

標(biāo)題內(nèi)容

段落標(biāo)簽顯示效果特點(diǎn)

換行標(biāo)簽

1. 標(biāo)簽名：
（單標(biāo)簽）

2. 作用：用于內(nèi)容的換行，注意要區(qū)別于段落標(biāo)簽，瀏覽器是不會識別代碼中換行的

水平線標(biāo)簽

1. 標(biāo)簽名：

2. 作用：添加一個(gè)水平線

文本格式化標(biāo)簽

為文本添加特殊格式，以突出重點(diǎn)。常見的格式有：加粗（strong或b）、傾斜（em或 i）、下劃線（ins或u）、刪除線（del或s ）等。（括號內(nèi)的為標(biāo)簽名）（均為雙標(biāo)簽）

圖像標(biāo)簽

1. 作用： 在網(wǎng)頁中插入圖片

2. 標(biāo)簽名：（單標(biāo)簽）

SRC用于指定圖像的位置和名稱，是的必須屬性。

3. 屬性

超鏈接標(biāo)簽

1. 作用：點(diǎn)擊跳轉(zhuǎn)到其他頁面

2. 標(biāo)簽名： 顯示的內(nèi)容

3. 屬性

小tip：開發(fā)初期，不確定跳轉(zhuǎn)地址時(shí)，可以使用井號#代替URL，表示空鏈接

音頻標(biāo)簽

1. 作用：在頁面中插入音頻

2. 標(biāo)簽名：

3. 屬性

小tip：當(dāng)屬性名和屬性值相同時(shí)，只寫屬性名即可。?

視頻標(biāo)簽

1. 作用：在頁面中插入視頻

2. 標(biāo)簽名：

3. 屬性

列表

、
、

無序列表

1. 作用：布局排列整齊的不需要規(guī)定順序的區(qū)域

2. 標(biāo)簽名：

嵌套
• ，ul是無序列表，li是列表?xiàng)l目

  3. 注意： ① li 標(biāo)簽的顯示特點(diǎn)是獨(dú)占一行 ② ul 標(biāo)簽里面只能嵌套有 li 標(biāo)簽，但是 li 標(biāo)簽里面可以嵌套其他標(biāo)簽

  有序列表

  1. 作用：布局排列整齊的不需要規(guī)定順序的區(qū)域

  2. 標(biāo)簽名：

  嵌套
  1. ，ul是無序列表，li是列表?xiàng)l目

     3. 注意： ① li?標(biāo)簽的顯示特點(diǎn)也是獨(dú)占一行 ② ol 標(biāo)簽里面只能嵌套有 li 標(biāo)簽，但是 li 標(biāo)簽里面可以嵌套其他標(biāo)簽

     定義列表

     1. 作用：一個(gè)標(biāo)題對應(yīng)多個(gè)內(nèi)容的列表

     2. 標(biāo)簽名：

     嵌套

     和

     ，dl 是定義列表，dt 是定義列表的標(biāo)題，dd 是定義列表的描述/詳情

     3. 注意： ①dl 里面只能包含dt 和 dd ②dt 和 dd 里面可以包含任何內(nèi)容

     表格

     1. 作用：在頁面中插入表格

     2. 標(biāo)簽名：

     嵌套 ， 嵌套

     <pre id="c0lht"></pre>

     /	3. 屬性 ① table標(biāo)簽的屬性 ② tr標(biāo)簽的屬性 ③ th 和 td 標(biāo)簽的屬性 4. 注意： ①?在網(wǎng)頁中，表格默認(rèn)沒有邊框線，使用 border 屬性可以為表格添加邊框線 ②插入表格時(shí)，可以在代碼也插入表格結(jié)構(gòu)標(biāo)簽，該標(biāo)簽可以增強(qiáng)表格的結(jié)構(gòu)性，但是顯示效果幾乎沒有區(qū)別 內(nèi)容補(bǔ)充：合并單元格 1. 作用：將多個(gè)單元格合并成一個(gè)單元格，以合并同類信息 2. 分類 ① 跨行合并：保留最上單元格，添加屬性 rowspan ② 跨列合并：保留最左單元格，添加屬性 colspan ③ rowspan/colspan的屬性值為需要合并的單元格個(gè)數(shù)，該個(gè)數(shù)包含首個(gè)單元格 3. 步驟 ① 明確合并的目標(biāo) ② 保留最上（跨行）/最左（跨列）的單元格，添加相關(guān)屬性rowspan（跨行）/colspan（跨列）屬性 表單 1. 作用：收集用戶信息 2. 標(biāo)簽名： 3. input 標(biāo)簽中 type 屬性值不同，則功能不同， ，具體功能如下 ?4. input 標(biāo)簽屬性 5. 不同type屬性值的顯示效果 ①??文本框的設(shè)置 ② 密碼框的設(shè)置 ③ 單選框的設(shè)置 ?④ 多選框的設(shè)置 ⑤?重置與提交按鈕的設(shè)置 ⑥ 上傳文件的設(shè)置 上傳文件： 效果如下： ?下拉菜單 標(biāo)簽名： 嵌套 ，select 是下拉菜單整體，option 是下拉菜單的每一項(xiàng)? 文本域</p><p>1. 作用：多行輸入文本的表單空件</p><p>2. 標(biāo)簽名：<textarea></p><p>3. 屬性</p><p>label標(biāo)簽?</p><p>1. 作用：網(wǎng)頁中，某個(gè)標(biāo)簽的說明文本</p><p>2. 可以 通過label標(biāo)簽增大點(diǎn)擊范圍</p><p>寫法一： ① label 標(biāo)簽只包裹內(nèi)容，不包裹表單控件 ② 設(shè)置 label 標(biāo)簽的 for 屬性值 和表單控件的 id 屬性值 相同</p><p><input type="radio" id="man"></p><p><label for="man">男</label></p><p>寫法二： ①?使用 label 標(biāo)簽包裹文字和表單控件，不需要屬性</p><p><label><input type="radio">男</label></p><p>3. 屬性</p><p>按鈕<button>?</p><p>1. 作用：定義可點(diǎn)擊的按鈕</p><p>2. 標(biāo)簽名：<button></p><p>3. 和 input 標(biāo)簽一樣，button 標(biāo)簽中 type 屬性值不同，則功能不同，<button type="……"> ，具體功能如下</p><p>表單區(qū)域標(biāo)簽<from></p><p>1. 作用：用于創(chuàng)建表，實(shí)現(xiàn)用戶信息的收集和傳遞</p><p>2. 標(biāo)簽名：<from></p><p>3. 屬性</p><p>無語義的布局標(biāo)簽</p><p>1. 作用：布局網(wǎng)頁（劃分網(wǎng)頁區(qū)域，擺放內(nèi)容）?</p><p>2. 標(biāo)簽名 ① <div>標(biāo)簽：獨(dú)占一行 ② <span>標(biāo)簽：不換行</p><p>3.基本格式</p><p>字符實(shí)體</p><p>1. 作用：在網(wǎng)頁中顯示預(yù)留字符</p><p>2. 常見的字符實(shí)體</p><p>通用行內(nèi)容器標(biāo)簽<span></p><p>1. 作用：沒有任何特殊語義，通常用來編組元素以達(dá)到某種樣式意圖</p><p>2.?標(biāo)簽名：<span></p><p>3. 基本格式：<span>文字內(nèi)容或者其他標(biāo)簽</span></p><p>柚子快報(bào)邀請碼778899分享：前端 HTML常見標(biāo)簽</p><p><a target="_blank">http://yzkb.51969.com/</a></p><p>相關(guān)文章</p><div id="3ih7pjjnjzpn" class="ly_isview_code_1 ly_isview_codes"><div id="3ih7pjjnjzpn" class="ly_isview_codea" data-id="19240803" data-url=""><div id="3ih7pjjnjzpn" class="ly_isview_span">評論可見，查看隱藏內(nèi)容</div></div></div></div><div id="3ih7pjjnjzpn" class="umLike"></div><div id="3ih7pjjnjzpn" class="umCopyright"><div id="3ih7pjjnjzpn" class="text"><p>本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。</p><p>轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。</p><p>本文鏈接：<a href="http://m.gantiao.com.cn/post/19240803.html" target="_blank" title="柚子快報(bào)邀請碼778899分享：前端 HTML常見標(biāo)簽">http://m.gantiao.com.cn/post/19240803.html</a></p></div></div><div id="3ih7pjjnjzpn" class="umSigle mob"><div id="3ih7pjjnjzpn" class="share"><span id="3ih7pjjnjzpn" class="avatar"><img class="img" src="http://m.gantiao.com.cn/zb_users/avatar/0.png" alt="Jollychic外貿(mào)時(shí)尚集"><em>Jollychic外貿(mào)時(shí)尚集</em></span><a class="wxShare wxBtn" href="javascript:void(0)" rel="nofollow"><i class="ri-wechat-fill"></i></a><a class="qq" rel="nofollow" target="_blank"><i class="ri-qq-fill"></i></a><a class="weibo" href="http://service.weibo.com/share/share.php?url=http://m.gantiao.com.cn/post/19240803.html&title=柚子快報(bào)邀請碼778899分享：前端 HTML常見標(biāo)簽&appkey=&pic=http://m.gantiao.com.cn/zb_users/theme/umCms/style/images/img/kasdwelzd23lasdasdfkalf13.png&searchPic=true" rel="nofollow" target="_blank"><i class="ri-weibo-fill"></i></a></div></div><div id="3ih7pjjnjzpn" class="umComm"><div id="3ih7pjjnjzpn" class="cmBox title">發(fā)布評論</div><label id="AjaxCommentBegin"></label><label id="AjaxCommentEnd"></label><div id="3ih7pjjnjzpn" class="post-Comment" id="divCommentPost"><p class="postTop"> <a rel="nofollow" id="cancel-reply" href="javascript:void(0)" style="display:none;"><small>取消回復(fù)</small></a> <a href="javascript:;"></a> </p><form id="frmSumbit" target="_self" method="post" action="http://m.gantiao.com.cn/zb_system/cmd.php?act=cmt&postid=19240803&key=e3bcf576751b40d3ed32269fad654ef3" ><div id="3ih7pjjnjzpn" class="postText isVerify"><ul><li><div id="3ih7pjjnjzpn" class="inputBox"><input type="text" name="inpName" id="inpName" class="text" value="游客" placeholder="您的昵稱" size="28" tabindex="1" /></div></li><li><div id="3ih7pjjnjzpn" class="inputBox"><input type="text" name="inpEmail" id="inpEmail" class="text" value="" placeholder="您的郵箱" size="28" tabindex="2" /></div></li> <li id="3ih7pjjnjzpn" class="hide"><div id="3ih7pjjnjzpn" class="inputBox"><input type="hidden" name="inpHomePage" id="inpHomePage" class="text" value="" placeholder="您的網(wǎng)站" onfocus="this.value='http://';" size="28" tabindex="3" /></div></li><li id="3ih7pjjnjzpn" class="verify"><input type="text" name="inpVerify" id="inpVerify" class="text" value="" placeholder="驗(yàn)證碼(*)" size="28" tabindex="4"><img style="width:90px;height:30px;cursor:pointer;" src="http://m.gantiao.com.cn/zb_system/script/c_validcode.php?id=cmt" alt="" title="" onclick="javascript:this.src='http://m.gantiao.com.cn/zb_system/script/c_validcode.php?id=cmt&tm='+Math.random();"/> </li></ul></div><div id="3ih7pjjnjzpn" class="pinglun"><p class="textarea-wrapper rounded-top"><textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5"> 隨便看看 換一換 亞馬遜收款第三方平臺是什么類型 3.亞馬遜第三方收款平臺有哪些? 北美亞馬遜美國賣家?guī)ぬ柺鞘裁丛趺床?亞馬遜北美賣家登錄 拼多多無貨源怎么開網(wǎng)店賺錢 拼多多無貨源如何開網(wǎng)店 蝦皮跨境電商是什么模式 海外跨境電商調(diào)研方案有哪些 跨境電商市場調(diào)研的內(nèi)容和方法是什么? 亞馬遜廣告價(jià)格區(qū)間 亞馬遜產(chǎn)品廣告費(fèi)用怎么算 海外id賬號分享最新破解版 在進(jìn)出口貿(mào)易實(shí)務(wù)中，信用證具有哪些特點(diǎn)？ 進(jìn)出口貿(mào)易信用證支付的漏洞 特朗普要求美國最高法院暫停執(zhí)行TikTok強(qiáng)制出售令 央視記者當(dāng)?shù)貢r(shí)間12月27日獲悉，美國當(dāng)選總統(tǒng)特朗普向美國最高法院提出請求，要求暫停執(zhí)行TikTok強(qiáng)制出售令。特朗普表示，希望法院在他... 亞馬遜新廣告數(shù)據(jù)分析工具上線 Shopee平臺店鋪裝修 亞馬遜ASIN矩陣模型分類法：精準(zhǔn)廣告策略助力銷售提升 中國賣家如何入駐eMAG平臺？開店條件及詳細(xì)要求！ wish新手賣家該怎么開店？ wish平臺數(shù)碼產(chǎn)品銷售潛力分析 Temu入駐條件與資質(zhì) 最新留言 二次元空間08-31 19:47:50 推廣費(fèi)用的計(jì)算和預(yù)算分配通常需要考慮哪些關(guān)鍵因素？ 烏龜慢慢爬08-31 19:46:51 全托幼兒園的推薦可能會因時(shí)間而變化，并且可能受到政策、經(jīng)濟(jì)和地理位置等因素的影響，以下是一些在業(yè)界有良好聲譽(yù)的全托幼兒園：北京市海淀區(qū)實(shí)驗(yàn)幼兒園 - 該園位于中關(guān)村附近，提供全日托管服務(wù)，注重幼兒全面發(fā)展。北京市朝陽區(qū)太陽宮中心幼兒園 - 位于朝陽區(qū)，提供全日托管服務(wù)，環(huán)境優(yōu)美，設(shè)施齊全。北京市西城區(qū)復(fù)興門內(nèi)大街第一幼兒園 - 位于西城區(qū)，提供全日托管服務(wù)，注重幼兒身心健康。北京市東城區(qū)史家小學(xué)附屬幼兒園 - 位于東城區(qū)，提供全日托管服務(wù)，師資力量雄厚。北京市順義區(qū)龍湖鎮(zhèn)中心幼兒園 - 位于順義區(qū)，提供全日托管服務(wù)，注重幼兒綜合素質(zhì)培養(yǎng)。 靈活蛇08-31 19:46:31 開店成本的計(jì)算通常包括哪些方面？ 晨風(fēng)輕拂面08-31 19:45:48 好運(yùn)物流貨運(yùn)查詢可以通過電話、官網(wǎng)、短信、第三方平臺和快遞單號等多種方式進(jìn)行，請問，在查詢時(shí)需要注意哪些事項(xiàng)？ 豬豬的世界08-31 19:45:15 貿(mào)易政策、經(jīng)濟(jì)狀況、政治因素、技術(shù)發(fā)展、自然資源、市場需求、文化差異、環(huán)境因素、國際組織和機(jī)構(gòu)以及全球經(jīng)濟(jì)形勢等，這些因素如何影響國際貿(mào)易？ 雪碧泡08-31 19:44:46 DCC運(yùn)營經(jīng)理負(fù)責(zé)制定和執(zhí)行數(shù)字內(nèi)容運(yùn)營策略，管理內(nèi)容、用戶互動、數(shù)據(jù)分析，并與其他部門協(xié)作。 落葉歸家路08-31 19:43:46 注冊公司在香港的優(yōu)勢包括稅收優(yōu)惠、國際化環(huán)境、市場潛力、資本運(yùn)作靈活以及人才資源豐富，需要遵守香港的法律法規(guī)，面臨語言障礙和文化差異，競爭激烈且政治風(fēng)險(xiǎn)存在。 淺淺笑08-31 19:43:18 在海運(yùn)報(bào)價(jià)中，通常使用的單位包括噸、立方米、英里、公里和包，請問這些單位是如何轉(zhuǎn)換的？ 美麗說08-31 19:42:45 中國外貿(mào)護(hù)衛(wèi)艦自主研發(fā)，具備多功能性，采用現(xiàn)代化設(shè)計(jì)，參與國際合作，出口潛力大。 愛美食08-31 19:41:43 購買海外id時(shí)，如何確保來源可靠且合法？ 您暫未設(shè)置收款碼 請?jiān)谥黝}配置——文章設(shè)置里上傳 金鑰匙跨境 掃描二維碼手機(jī)訪問 文章目錄