當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2023/12/2 HTML 28 豆豆

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

閱讀目錄

一、head內常用標簽
二、 HTML語義化
三、字符實體
四、 h系列標簽
五、 p標簽
六、 img標簽
七、 a標簽
八、列表標簽
九、 table標簽
十、 form標簽

一、 head內常用標簽

1、meta相關

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

2、非meta標簽

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

二、 HTML語義化

body中的標簽是會顯示到瀏覽器窗口中的，body內的標簽只有一個作用就是用來標記語義的，語義指的是從字面意思就可以理解被標記的內容是用來做什么的

雖然不同的標簽會有不同的顯示樣式，但我們一定要強制自己忘記所有標簽的顯示樣式，只記它的語義。因為每個標簽的樣式各不相同，記憶不同標簽的樣式來控制顯示樣式，對前端開發來說將會是一種災難，更何況添加樣式并不是HTML擅長的事情

對于那些只用來修改樣式的標簽將會被淘汰掉，比如以下標簽都是沒有語義的，都是用來修改樣式的

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

html5中推出了一些新的標簽

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

三、字符實體

#1、在HTML中對空格／回車／tab不敏感，會把多個空格／回車／tab當作一個空格來處理#2、字符實體指的是在HTML中有的字符是被HTML保留的比如大于號小于號有的HTML字符，在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來的，那么這些東西想顯示出來就必須通過字符實體，如下

注釋：實體名稱對大小寫敏感！

內容代碼 #一定要以';'結束空格   > > < < & & ￥ ¥ 版權 © 注冊 ® 舉例

HTML特殊符號對照表

四、 h系列標簽

語義：標記內容為一個標題，全稱headline

h系列標簽從h1-h6共6個，沒有h7標簽，標記內容為1~6級標題

雖然h1-h6標簽的顯示樣式是從大到小，但再次強調：記憶HTML標簽的顯示樣式是沒有意義的

<!DOCTYPE HTML> <html><head lang='en'><meta charset="utf-8"><title>多多才華無敵</title></head><body><h1>一級標題</h1>
<h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6><h7>沒有七級標題</h7></body> </html>?

注意：在企業開發中一定要慎用h系列標簽，特別是h1標簽，在企業開發中一般一個界面中只能出現一個h1標簽（出于SEO考慮）,比如www.163.com。

五、 p標簽

語義：標記內容為一個段落，全稱paragraph

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

六、 img標簽

語義：標記一個圖片，全稱image

#1、用法 <img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "鼠標懸停到圖片上時顯示的內容" />#2、注意 2.1 src指定的圖片地址可以是網絡地址，也可以是一個本地地址，本地地址可以用絕對或相對路徑，
但通常用相對路徑，相對路徑是以html文件當前所在路徑為基準進行的2.2 圖片的格式可以是png、jpg和gif2.3 alt="圖片加載失敗時顯示的內容"2.4 title = "鼠標懸停到圖片上時顯示的內容"2.5 如果沒有指定圖片的width和height則按照圖片默認的寬高顯示，如果指定圖片的width和height則可能讓圖片變形那如果又想指定寬度和高度，又不想讓圖片變形，我們可以只指定寬度和高度的一個值即可只要指定了一個值，系統會根據該值計算另外一個值，并且都是等比拉伸的，圖片將不會變形

七、 a標簽

語義：標記一個內容為超鏈接，全稱anchor，錨

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

假鏈接

#1、什么是假鏈接？就是點擊之后不會跳轉的鏈接，我們稱之為假鏈接#2、假鏈接存在的意義：在企業開發前期，其他界面都還沒有寫出來，那么我們就不知道應該跳轉到什么地方，所以就只能使用假鏈接來代替#3、假鏈接的定義格式1、href="#" :會自動回到網頁的頂部2、href="javascript:" ：不會返回頂部

頁面內錨點

#1、要想通過a標簽跳轉到指定的位置，那么必須告訴a標簽一個獨一無二的身份證號碼，這樣a標簽才能在當前界面中找到需要跳轉到的目標位置#2、如何為html中的標簽綁定一個獨一無二的身份證號碼呢？在html中，每一個標簽都有一個名稱叫做id的屬性這個屬性就是用來給標簽指定一個獨一無二的身份證號碼的#3、所以要想實現通過a標簽跳轉到指定的位置，分為兩步 3.1、給目標位置的標簽添加一個id屬性，然后指定一個獨一無二的值 3.2、告訴a標簽你需要跳轉到的目標標簽對應的獨一無二的身份證號碼是多少#4、a標簽除了可以跳轉當前頁面，還可以跳轉到其他頁面的指定位置?

跳到首頁

#1、跳到首頁 <a href="">刷新頁面，回到頂部，人類感覺不出來區別</a> <a href="#">回到頂部</a>#2、注意點：通過我們的a標簽跳轉到指定的位置，是沒有過度動畫的是直接一下子就跳轉到了指定位置,比如京東主頁如果跳到首頁需要過渡動畫，則不用a標簽做，比如天貓主頁

八、列表標簽

語義：標記一堆數據是一個整體/列表

html中列表標簽分為三種

1、無序列表（列表標簽中使用最多的一種，非常重要）：unordered list

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

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

3、自定義列表（也會經常使用）

#1、作用分析選擇用什么標簽的唯一標準，是看文本的實際語義，而不是看長什么樣子無序列表：內容是并列的,沒有先后順序有序列表：內容是有先后順序的自定義列表：對一個題目進行解釋說明的時候，用自定義列表,可以做網站尾部相關信息，網易注冊界面的輸入框#2、自定義列表也是一個組合標簽：dl>dt dd dl:defination list，自定義列表 dt：defination title，自定義標題 dd：defination description，自定義描述 <dl>
<dt>自定義標題1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>

<dt>自定義標題2<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>

<dt>自定義標題3<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
</dl> #3、注意:
3.1 dl>dt dd應該組合出現，dl中只應該存放dt和dd，而可以在dt和dd中添加任意其他標簽
3.2 一個dt可以可以沒有對應的dd，也可以有多個，但建議一個dt對應一個dd

九、 table標簽

語義：標記一段數據為表格

#1、作用表格標簽是一種數據的展現形式，當數據量非常大的時候，使用表格的形式來展示被認為是最清晰的#2、格式 <table><tr><td></td></tr> </table>tr代表表格的一行數據 td表一行中的一個單元格#3、注意點：表格標簽有一個邊框屬性，這個屬性決定了邊框的寬度。默認情況下這個屬性的值為0，所以看不到邊框?

表格屬性

#1、寬度和高度可以給table和td設置width和height屬性1.1 默認情況下表格的寬高是按照內容的尺寸來調整的，也可以通過給table標簽設置widht和height來手動指定表格的寬高1.2 如果給td標簽設置width和height屬性，會修改當前單元格的寬度和高度，只要不超過table的寬高，則不會影響整個表格的寬度和高度#2、水平對齊和垂直對齊水平對齊align可以給table、tr、td標簽設置垂直對齊valign只能給tr、td標簽設置========水平對齊===========取值align=“left”align=“center”align=“right”2.1 給table標簽設置水平對齊，可以讓表格在水平方向上對齊強調：table只能設置水平方向2.2 給tr設置水平對齊，可以控制當前行所有單元格內容都水平對齊2.3 給td設置水平對齊，可以控制當前單元格內容水平對齊，tr與td沖突的情況下，以td為準========垂直對齊===========取值valign=“top”valign=“center”valign=“bottom”2.4 給tr設置垂直對齊可以讓當前行所有單元格內容都垂直對齊2.5 給td設置垂直對齊可以讓當前單元格內容垂直對齊#3、外邊距和內邊距只能給table設置3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認值為2px3.2 內邊距：單元格邊框與文字之間的距離:cellpadding="200px" 表格屬性細線表格的制作方式：1、給table標簽設置bgcolor2、給tr標簽設置bgcolor3、給table標簽設置cellspacing="1px"注意：table、tr、td標簽都支持bgcolor屬性 <table width="200px" height="200px" bgcolor="black" cellspacing="1px"><caption>學員信息統計</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> 細線表格的制作方式

表格的結構?

為了方便管理維護以及提升語義，我們將表格中存儲的數據分為四類： #1、表格的標題:caption 特點:相對于表格寬度自動居中對齊注意:1.1 該標簽一定要寫在table標簽里，否則無效1.2 caption一定要緊跟在table標簽內的第一個#2、表格的表頭信息:thead特點：專門用來存儲每一列的標題，只要將當前列的標題存儲在這個標簽中就會自動居中加粗文字#3、表格的主體信息:tbody 注意：3.1 如果沒有添加tbody，瀏覽器會自動添加3.2 如果指定了thread和tfoot，那么在修改整個表格的高度時，thead和tfoot有自己默認的高度，不會隨著表格的高度變化而變化#4、表尾信息:tfoot 表結構詳解

單元格合并?

#1、水平向上的單元格colspan可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待<td colspan="2"></td>#2、垂直向上的單元格rowspan可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待#注意注意注意: 1、由于把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格 2、一定要記住，單元格合并永遠是向后或者向下合并，而不能向前或向上合并

十、 form標簽

語義：標記表單

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

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

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

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hiccchaa&title=前端基礎-HTML的的標簽詳解

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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