當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

前端基础-HTML的的标签详解

發(fā)布時(shí)間：2023/12/2 HTML 42 豆豆

生活随笔收集整理的這篇文章主要介紹了前端基础-HTML的的标签详解小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

閱讀目錄

一、head內(nèi)常用標(biāo)簽
二、 HTML語(yǔ)義化
三、字符實(shí)體
四、 h系列標(biāo)簽
五、 p標(biāo)簽
六、 img標(biāo)簽
七、 a標(biāo)簽
八、列表標(biāo)簽
九、 table標(biāo)簽
十、 form標(biāo)簽

一、 head內(nèi)常用標(biāo)簽

1、meta相關(guān)

#1、指定字符集 <meta charset="gbk">#2、頁(yè)面描述 <meta name="Description" content="具體描述。。。">#3、關(guān)鍵字：有助于搜索引擎SEC優(yōu)化，再怎么優(yōu)化也抵不過(guò)競(jìng)價(jià)排名 <meta name="Keywords" content="網(wǎng)易，郵箱，游戲，新聞">#4、3秒后跳轉(zhuǎn) <meta http-equiv="refresh" content="3,http://www.baidu.com"> #5、三秒刷新 <meta http-equiv="refresh" content="3">

2、非meta標(biāo)簽

#1、標(biāo)題 <title>百度一下，你就知道</title>#2、網(wǎng)站的圖標(biāo) <link rel="icon" href="https://www.baidu.com/favicon.ico">#3、定義內(nèi)部樣式 <style></style>#4、引入外部樣式文件 <link rel="stylesheet" href="mystyle.css">#5、定義JavaScript代碼或引入JavaScript文件 <script src="hello.js"></script>　

二、 HTML語(yǔ)義化

body中的標(biāo)簽是會(huì)顯示到瀏覽器窗口中的，body內(nèi)的標(biāo)簽只有一個(gè)作用就是用來(lái)標(biāo)記語(yǔ)義的，語(yǔ)義指的是從字面意思就可以理解被標(biāo)記的內(nèi)容是用來(lái)做什么的

雖然不同的標(biāo)簽會(huì)有不同的顯示樣式，但我們一定要強(qiáng)制自己忘記所有標(biāo)簽的顯示樣式，只記它的語(yǔ)義。因?yàn)槊總€(gè)標(biāo)簽的樣式各不相同，記憶不同標(biāo)簽的樣式來(lái)控制顯示樣式，對(duì)前端開(kāi)發(fā)來(lái)說(shuō)將會(huì)是一種災(zāi)難，更何況添加樣式并不是HTML擅長(zhǎng)的事情

對(duì)于那些只用來(lái)修改樣式的標(biāo)簽將會(huì)被淘汰掉，比如以下標(biāo)簽都是沒(méi)有語(yǔ)義的，都是用來(lái)修改樣式的

#1、<br> 換行#2、<hr> 分割線#3、<font> 修改文字大小，顏色<font color="red" size="10px">我是哈哈哈</font> #4、<b> 加粗<b>論顏值，我秒殺宇宙</b> #5、<u> 下劃線#6、<i> 傾斜#7、<s> 刪除線

html5中推出了一些新的標(biāo)簽

strong == bins == uem == idel == s新的標(biāo)簽是有語(yǔ)義的，而老的只是單純的添加樣式（這是CSS干的事）strong的語(yǔ)義：定義重要性強(qiáng)調(diào)的文字ins的語(yǔ)義（inserted）：定義插入的文字em的語(yǔ)義（emphasized）：定義強(qiáng)調(diào)的文字del的語(yǔ)義（deleted）：定義被刪除的文字?

三、字符實(shí)體

#1、在HTML中對(duì)空格／回車(chē)／tab不敏感，會(huì)把多個(gè)空格／回車(chē)／tab當(dāng)作一個(gè)空格來(lái)處理#2、字符實(shí)體指的是在HTML中有的字符是被HTML保留的比如大于號(hào)小于號(hào) 有的HTML字符，在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來(lái)的，那么這些東西想顯示出來(lái)就必須通過(guò)字符實(shí)體，如下

注釋：實(shí)體名稱對(duì)大小寫(xiě)敏感！

內(nèi)容代碼 #一定要以';'結(jié)束空格   > > < < & & ￥ ¥ 版權(quán) © 注冊(cè) ® 舉例

HTML特殊符號(hào)對(duì)照表

四、 h系列標(biāo)簽

語(yǔ)義：標(biāo)記內(nèi)容為一個(gè)標(biāo)題，全稱headline

h系列標(biāo)簽從h1-h6共6個(gè)，沒(méi)有h7標(biāo)簽，標(biāo)記內(nèi)容為1~6級(jí)標(biāo)題

雖然h1-h6標(biāo)簽的顯示樣式是從大到小，但再次強(qiáng)調(diào)：記憶HTML標(biāo)簽的顯示樣式是沒(méi)有意義的

<!DOCTYPE HTML> <html><head lang='en'><meta charset="utf-8"><title>多多才華無(wú)敵</title></head><body><h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3><h4>四級(jí)標(biāo)題</h4><h5>五級(jí)標(biāo)題</h5><h6>六級(jí)標(biāo)題</h6><h7>沒(méi)有七級(jí)標(biāo)題</h7></body> </html>?

注意：在企業(yè)開(kāi)發(fā)中一定要慎用h系列標(biāo)簽，特別是h1標(biāo)簽，在企業(yè)開(kāi)發(fā)中一般一個(gè)界面中只能出現(xiàn)一個(gè)h1標(biāo)簽（出于SEO考慮）,比如www.163.com。

五、 p標(biāo)簽

語(yǔ)義：標(biāo)記內(nèi)容為一個(gè)段落，全稱paragraph

<!DOCTYPE HTML> <html><head lang='en'><meta charset="utf-8"><title>多多無(wú)敵</title></head><body><h1>Egon</h1><p>論顏值，鶴立雞群</p><p>論才華，天下無(wú)敵</p></body> </html>

六、 img標(biāo)簽

語(yǔ)義：標(biāo)記一個(gè)圖片，全稱image

#1、用法 <img src="圖片地址" alt="圖片加載失敗時(shí)顯示的內(nèi)容" title = "鼠標(biāo)懸停到圖片上時(shí)顯示的內(nèi)容" />#2、注意 2.1 src指定的圖片地址可以是網(wǎng)絡(luò)地址，也可以是一個(gè)本地地址，本地地址可以用絕對(duì)或相對(duì)路徑，
但通常用相對(duì)路徑，相對(duì)路徑是以html文件當(dāng)前所在路徑為基準(zhǔn)進(jìn)行的2.2 圖片的格式可以是png、jpg和gif2.3 alt="圖片加載失敗時(shí)顯示的內(nèi)容"2.4 title = "鼠標(biāo)懸停到圖片上時(shí)顯示的內(nèi)容"2.5 如果沒(méi)有指定圖片的width和height則按照?qǐng)D片默認(rèn)的寬高顯示，如果指定圖片的width和height則可能讓圖片變形那如果又想指定寬度和高度，又不想讓圖片變形，我們可以只指定寬度和高度的一個(gè)值即可只要指定了一個(gè)值，系統(tǒng)會(huì)根據(jù)該值計(jì)算另外一個(gè)值，并且都是等比拉伸的，圖片將不會(huì)變形

七、 a標(biāo)簽

語(yǔ)義：標(biāo)記一個(gè)內(nèi)容為超鏈接，全稱anchor，錨

#1、超鏈接標(biāo)簽是超文本文件的精髓，可以控制頁(yè)面與頁(yè)面之間的跳轉(zhuǎn)，語(yǔ)法如下 <a href="跳轉(zhuǎn)到的目標(biāo)頁(yè)面地址" target="是否在新頁(yè)面中打開(kāi)" title="鼠標(biāo)懸浮顯示的內(nèi)容">需要展現(xiàn)給用戶查看的內(nèi)容
/也可以是圖片</a>#2、注意： 2.1 a標(biāo)簽不僅可以標(biāo)記文字，也可以標(biāo)記圖片<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>2.2 a標(biāo)簽必須有href屬性，href的值必須是http://或https://開(kāi)頭2.3 a標(biāo)簽還可以跳轉(zhuǎn)到自己的頁(yè)面<a href="template/aaa.html">錘你胸口</a>2.4 target="_blank"代表在新頁(yè)面中打開(kāi)，其余的值均無(wú)需記憶，如果頁(yè)面中大量的a標(biāo)簽都需要設(shè)置target="_blank",那么我們可以在head標(biāo)簽內(nèi)新增一個(gè)base標(biāo)簽進(jìn)行統(tǒng)一設(shè)置<base target="_blank">如果a標(biāo)簽自己設(shè)置了target，那么就以自己的為準(zhǔn)，否則就會(huì)參照base的設(shè)置2.5 title="鼠標(biāo)懸浮顯示的內(nèi)容"

假鏈接

#1、什么是假鏈接？就是點(diǎn)擊之后不會(huì)跳轉(zhuǎn)的鏈接，我們稱之為假鏈接#2、假鏈接存在的意義：在企業(yè)開(kāi)發(fā)前期，其他界面都還沒(méi)有寫(xiě)出來(lái)，那么我們就不知道應(yīng)該跳轉(zhuǎn)到什么地方，所以就只能使用假鏈接來(lái)代替#3、假鏈接的定義格式1、href="#" :會(huì)自動(dòng)回到網(wǎng)頁(yè)的頂部2、href="javascript:" ：不會(huì)返回頂部

頁(yè)面內(nèi)錨點(diǎn)

#1、要想通過(guò)a標(biāo)簽跳轉(zhuǎn)到指定的位置，那么必須告訴a標(biāo)簽一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼，這樣a標(biāo)簽才能在當(dāng)前界面中找到需要跳轉(zhuǎn)到的目標(biāo)位置#2、如何為html中的標(biāo)簽綁定一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼呢？在html中，每一個(gè)標(biāo)簽都有一個(gè)名稱叫做id的屬性這個(gè)屬性就是用來(lái)給標(biāo)簽指定一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼的#3、所以要想實(shí)現(xiàn)通過(guò)a標(biāo)簽跳轉(zhuǎn)到指定的位置，分為兩步 3.1、給目標(biāo)位置的標(biāo)簽添加一個(gè)id屬性，然后指定一個(gè)獨(dú)一無(wú)二的值 3.2、告訴a標(biāo)簽?zāi)阈枰D(zhuǎn)到的目標(biāo)標(biāo)簽對(duì)應(yīng)的獨(dú)一無(wú)二的身份證號(hào)碼是多少#4、a標(biāo)簽除了可以跳轉(zhuǎn)當(dāng)前頁(yè)面，還可以跳轉(zhuǎn)到其他頁(yè)面的指定位置?

跳到首頁(yè)

#1、跳到首頁(yè) <a href="">刷新頁(yè)面，回到頂部，人類感覺(jué)不出來(lái)區(qū)別</a> <a href="#">回到頂部</a>#2、注意點(diǎn)：通過(guò)我們的a標(biāo)簽跳轉(zhuǎn)到指定的位置，是沒(méi)有過(guò)度動(dòng)畫(huà)的是直接一下子就跳轉(zhuǎn)到了指定位置,比如京東主頁(yè)如果跳到首頁(yè)需要過(guò)渡動(dòng)畫(huà)，則不用a標(biāo)簽做，比如天貓主頁(yè)

八、列表標(biāo)簽

語(yǔ)義：標(biāo)記一堆數(shù)據(jù)是一個(gè)整體/列表

html中列表標(biāo)簽分為三種

1、無(wú)序列表（列表標(biāo)簽中使用最多的一種，非常重要）：unordered list

#1、作用：制作導(dǎo)航條、商品列表、新聞列表等 #2、組合使用ul>li<ul><li>秒殺</li><li>優(yōu)惠券</li><li>PLUS會(huì)員</li><li>閃購(gòu)</li><li>拍賣(mài)</li><li>京東服飾</li><li>京東超市</li><li>生鮮</li><li>全球購(gòu)</li><li>京東金融</li></ul>#3、ul標(biāo)簽的屬性type（這屬于列表的樣式，所以了解即可） type：列表標(biāo)識(shí)的類型disc：實(shí)心圓(默認(rèn)值)circle：空心圓square：實(shí)心矩形none：不顯示標(biāo)識(shí) 可以通過(guò)css直接去掉小圓點(diǎn) <style type="text/css">ul {list-style: none;} </style> #4、注意 ul與li是組合標(biāo)簽應(yīng)該一起出現(xiàn)，并且ul的子標(biāo)簽只應(yīng)該是li，而li的子標(biāo)簽則可以是任意其他標(biāo)簽

2、有序列表（極少使用）

3、自定義列表（也會(huì)經(jīng)常使用）

#1、作用分析選擇用什么標(biāo)簽的唯一標(biāo)準(zhǔn)，是看文本的實(shí)際語(yǔ)義，而不是看長(zhǎng)什么樣子無(wú)序列表：內(nèi)容是并列的,沒(méi)有先后順序有序列表：內(nèi)容是有先后順序的自定義列表：對(duì)一個(gè)題目進(jìn)行解釋說(shuō)明的時(shí)候，用自定義列表,可以做網(wǎng)站尾部相關(guān)信息，網(wǎng)易注冊(cè)界面的輸入框#2、自定義列表也是一個(gè)組合標(biāo)簽：dl>dt dd dl:defination list，自定義列表 dt：defination title，自定義標(biāo)題 dd：defination description，自定義描述 <dl>
<dt>自定義標(biāo)題1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>

<dt>自定義標(biāo)題2<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>

<dt>自定義標(biāo)題3<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
</dl> #3、注意:
3.1 dl>dt dd應(yīng)該組合出現(xiàn)，dl中只應(yīng)該存放dt和dd，而可以在dt和dd中添加任意其他標(biāo)簽
3.2 一個(gè)dt可以可以沒(méi)有對(duì)應(yīng)的dd，也可以有多個(gè)，但建議一個(gè)dt對(duì)應(yīng)一個(gè)dd

九、 table標(biāo)簽

語(yǔ)義：標(biāo)記一段數(shù)據(jù)為表格

#1、作用表格標(biāo)簽是一種數(shù)據(jù)的展現(xiàn)形式，當(dāng)數(shù)據(jù)量非常大的時(shí)候，使用表格的形式來(lái)展示被認(rèn)為是最清晰的#2、格式 <table><tr><td></td></tr> </table>tr代表表格的一行數(shù)據(jù) td表一行中的一個(gè)單元格#3、注意點(diǎn)：表格標(biāo)簽有一個(gè)邊框?qū)傩?#xff0c;這個(gè)屬性決定了邊框的寬度。默認(rèn)情況下這個(gè)屬性的值為0，所以看不到邊框?

表格屬性

#1、寬度和高度可以給table和td設(shè)置width和height屬性1.1 默認(rèn)情況下表格的寬高是按照內(nèi)容的尺寸來(lái)調(diào)整的，也可以通過(guò)給table標(biāo)簽設(shè)置widht和height來(lái)手動(dòng)指定表格的寬高1.2 如果給td標(biāo)簽設(shè)置width和height屬性，會(huì)修改當(dāng)前單元格的寬度和高度，只要不超過(guò)table的寬高，則不會(huì)影響整個(gè)表格的寬度和高度#2、水平對(duì)齊和垂直對(duì)齊水平對(duì)齊align可以給table、tr、td標(biāo)簽設(shè)置垂直對(duì)齊valign只能給tr、td標(biāo)簽設(shè)置========水平對(duì)齊===========取值align=“l(fā)eft”align=“center”align=“right”2.1 給table標(biāo)簽設(shè)置水平對(duì)齊，可以讓表格在水平方向上對(duì)齊強(qiáng)調(diào)：table只能設(shè)置水平方向2.2 給tr設(shè)置水平對(duì)齊，可以控制當(dāng)前行所有單元格內(nèi)容都水平對(duì)齊2.3 給td設(shè)置水平對(duì)齊，可以控制當(dāng)前單元格內(nèi)容水平對(duì)齊，tr與td沖突的情況下，以td為準(zhǔn)========垂直對(duì)齊===========取值valign=“top”valign=“center”valign=“bottom”2.4 給tr設(shè)置垂直對(duì)齊可以讓當(dāng)前行所有單元格內(nèi)容都垂直對(duì)齊2.5 給td設(shè)置垂直對(duì)齊可以讓當(dāng)前單元格內(nèi)容垂直對(duì)齊#3、外邊距和內(nèi)邊距只能給table設(shè)置3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認(rèn)值為2px3.2 內(nèi)邊距：單元格邊框與文字之間的距離:cellpadding="200px" 表格屬性細(xì)線表格的制作方式：1、給table標(biāo)簽設(shè)置bgcolor2、給tr標(biāo)簽設(shè)置bgcolor3、給table標(biāo)簽設(shè)置cellspacing="1px"注意：table、tr、td標(biāo)簽都支持bgcolor屬性 <table width="200px" height="200px" bgcolor="black" cellspacing="1px"><caption>學(xué)員信息統(tǒng)計(jì)</caption><thead><tr bgcolor="white"><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tbody><tr bgcolor="white"><td>多多</td><td>male</td><td>18</td></tr><tr bgcolor="white"><td>多多2</td><td>male</td><td>18</td></tr><tr bgcolor="white"><td>多多3</td><td>male</td><td>18</td></tr></tbody><tfoot><tr bgcolor="white"><td>3</td><td>3</td><td>3</td></tr></tfoot></table> 細(xì)線表格的制作方式

表格的結(jié)構(gòu)?

為了方便管理維護(hù)以及提升語(yǔ)義，我們將表格中存儲(chǔ)的數(shù)據(jù)分為四類： #1、表格的標(biāo)題:caption 特點(diǎn):相對(duì)于表格寬度自動(dòng)居中對(duì)齊注意:1.1 該標(biāo)簽一定要寫(xiě)在table標(biāo)簽里，否則無(wú)效1.2 caption一定要緊跟在table標(biāo)簽內(nèi)的第一個(gè)#2、表格的表頭信息:thead特點(diǎn)：專門(mén)用來(lái)存儲(chǔ)每一列的標(biāo)題，只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中加粗文字#3、表格的主體信息:tbody 注意：3.1 如果沒(méi)有添加tbody，瀏覽器會(huì)自動(dòng)添加3.2 如果指定了thread和tfoot，那么在修改整個(gè)表格的高度時(shí)，thead和tfoot有自己默認(rèn)的高度，不會(huì)隨著表格的高度變化而變化#4、表尾信息:tfoot 表結(jié)構(gòu)詳解

單元格合并?

#1、水平向上的單元格colspan可以給td標(biāo)簽添加一個(gè)colspan屬性，來(lái)把水平方向的單元格當(dāng)做多個(gè)單元格來(lái)看待<td colspan="2"></td>#2、垂直向上的單元格rowspan可以給td標(biāo)簽設(shè)置一個(gè)rowspan屬性，來(lái)把垂直方向的的單元格當(dāng)成多個(gè)去看待#注意注意注意: 1、由于把某一個(gè)單元格當(dāng)作了多個(gè)單元格來(lái)看待，所以就會(huì)多出一些單元格，所以需要?jiǎng)h掉一些單元格 2、一定要記住，單元格合并永遠(yuǎn)是向后或者向下合并，而不能向前或向上合并

十、 form標(biāo)簽

語(yǔ)義：標(biāo)記表單

#1、什么是表單？表單就是專門(mén)用來(lái)接收用戶輸入或采集用戶信息的#2、表單的格式<form><表單元素></form>

鏈接：https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911?

圖片:https://pan.baidu.com/s/1db6o--q557aKmtYJSBsyqA

本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hiccchaa&title=前端基礎(chǔ)-HTML的的標(biāo)簽詳解

總結(jié)

以上是生活随笔為你收集整理的前端基础-HTML的的标签详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： input点击链接另一个页面，各种操作。
下一篇： HTML小记