html中常见标签及其用法归纳大全
html零基礎必看——htmlHTML常見標簽大全
第二章：html常見標簽
- 前言
- 一、常見標簽（一）
- 1、body標簽
- 2、div盒子標簽
- 3、p文本段落標簽
- 4、h1~h6 標題標簽
- 5、b標簽和strong標簽（文字加粗標簽）
- 6、span文字包裹標簽
- 7、br換行標簽和hr分隔符標簽
- 8、i標簽和em標簽（文字斜體標簽）
- 9、del刪除標簽
- 10、center居中標簽
- 11、sup上標和sub下標
- 12、pre預格式化標簽
- 二、常用標簽（二）
- 2.1.a標簽（鏈接、超鏈接、錨點標簽）
- 2.1.1.超鏈接標簽
- 2.1.2 錨點鏈接
- 2.1.3 空連接
- 2.2 圖片標簽
- 三、列表標簽
- 3.1 無序列表標簽`
- `
- 3.2 有序列表標簽`
- `
- 3.1 無序列表標簽`
- 3.3 描述列表標簽（也叫自定義列表標簽）``
前言
在上一章中，了解了html頁面結構，以及認識了標簽。那么都有哪些標簽呢？各種標簽的作用又是什么呢？本篇文章將帶你走進常見標簽系列！
一、常見標簽（一）
1、body標簽
網頁身體標簽，所有網頁內容都在里面，存放各種標簽
2、div盒子標簽
一般劃分一個個區域，構建骨架思路會用到。用于存放：文字、圖片、內容等
3、p文本段落標簽
為文本段落標簽，可存放大段落文字
4、h1~h6 標題標簽
- h1到h6級別逐漸減小
- 書寫規范，一個頁面只允許出現一個h1（一級標題標簽），若重復出現網頁會分不清主次內容，就像一篇作文只能有一個作文題目一樣。
5、b標簽和strong標簽（文字加粗標簽）
都是用于加粗文字的。二者區別是：strong標簽是為了突出重點
6、span文字包裹標簽
- 包裹文字的標簽。
- p標簽和span標簽的區別是：p標簽會自動換行，而span標簽不會自動換行。一般短的語句可以用span標簽包裹，長點的用p標簽包裹。
7、br換行標簽和hr分隔符標簽
- br標簽和hr標簽都是但標簽
- br標簽是換行標簽
- hr標簽是分隔符標簽
8、i標簽和em標簽（文字斜體標簽）
- 二者都是斜體標簽，使文字呈現傾斜效果
- 二者區別：em標簽更容易被瀏覽器識別到
9、del刪除標簽
一般用于價格刪除線
10、center居中標簽
使文本居中
11、sup上標和sub下標
標簽的內容將會在當前字符高度的一半為基準線的下/上方,字體大小會小一點。
12、pre預格式化標簽
被包圍在pre標簽中的文本通常會保留空格和換行符， 而文本也會呈現出等寬字體。
上述標簽使用方法及代碼展示：
<body><!-- 這是身體標簽 --><div class="div1"><!--這是一個盒子標簽--><p>我是段落文本p標簽</p><h1>我是一級標題標簽</h1><h2>我是二級標題標簽</h2><h3>我是三級標題標簽</h3><h4>我是四級標題標簽</h4><h5>我是五級標題標簽</h5><h6>我是六級標題標簽</h6></div><hr><div class="div2"><!--這也是一個盒子標簽--><!-- 區別是p會自動換行，而span不會自動換行，共用一行 --><p>你好</p><p>我愛前端</p><p>好好學習</p><hr><!--分隔符--><span>你好</span><span>我愛前端</span><span>好好學習</span><br><span>我被br強制換行了</span></div><hr><div class="div3"><!--這還是一個盒子標簽--><p>我是正常的p</p><p><i>我是被斜體i定義后的p</i></p><p><em>我是被斜體em定義后的p，我更容易被瀏覽器識別</em></p></div><hr><div class="div4"><span>現價：￥99<del>原價：￥399</del><!--這是刪除符--><center>我是居中對齊</center>H<sub>2</sub>OCO<sup>2</sup></span></div><hr><div class="5"><p>你好 我是前端小白我愛學前端我的空格和換行沒有被p保留</p><pre>你好 我是前端小白我愛學前端我是被pre保留了空格和換行</pre></div> </body>呈現效果：
二、常用標簽（二）
2.1.a標簽（鏈接、超鏈接、錨點標簽）
2.1.1.超鏈接標簽
<a href="https://www.baidu.com/" name="baidu" target="_blank" title="百度首頁" accesskey="s">百度一下</a>
-
a:a標簽（超鏈接標簽）
-
href屬性:超鏈接需要跳轉的地址路徑
-
name屬性：鏈接名稱（一般用于錨點鏈接捆綁跳轉的鏈接）
-
title屬性：鏈接的提示文字（鼠標懸停時的提示）
-
target屬性：鏈接目標窗口，鏈接在什么地方打開，網頁位置
- _self屬性值:連接在當前頁面打開（這是默認值，在沒有指定屬性值的情況下，默認是_self在當前頁面打開）
- _blank屬性值：在新窗口打開（點幾下打開幾個新窗口）
- _new屬性值：在新窗口打開（無論點幾下只打開一個，除特殊商品網站如某東頁面強制要求，點幾下會開幾個頁面，為了增加訪問量）
-
accesskey屬性：鏈接熱鍵（accesskey屬性的值設置為哪個字母，就用Alt+這個值的字母可以自動跳轉鏈接）
2.1.2 錨點鏈接
- 創建錨點鏈接，基本格式：
<a name="錨點名稱">鏈接對象名稱</a> - 建立鏈接，基本格式：
<a href="#跳轉的錨點名稱" name="錨點名稱">鏈接對象名稱</a> - 錨點鏈接不僅可以在同一個頁面中互跳，也可跨頁面互跳
創建一個頁面命名為index01.html
<body><!-- <a href="#跳轉的錨點名稱" name="錨點名稱">鏈接對象名稱</a> --><a name="top" href="#bottom">我是頂部，點我可以跳到底部</a><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><a name="bottom" href="#top">我是底部，點我可以跳到頂部</a><!-- 錨點不但可以在同一個頁面中互跳，也可在不同頁面中互跳 --><hr><hr><a href="index02.html#top">點我跳到index02.html頁面中的top錨點鏈接</a> </body>再創建一個頁面命名為index02.html
<body><!-- 空連接：href屬性值就只寫個#，空連接不跳轉--><a href="#">我是空連接</a><hr><a ></a><a href="index01.html">點我回到index01.html網頁，實現跨頁面互跳</a><hr><a name="top" href="index01.html#bottom">點我回到index01.html的底部,實現跨頁面互跳錨點鏈接</a> </body>2.1.3 空連接
空連接就是目標鏈接為空，用“#”表示，點擊空連接后，頁面仍然會停留在當前頁面。
格式：<a href="#">我是空連接</a>
2.2 圖片標簽
格式：<img src="./img/1.jpg" alt="圖片加載失敗" title="這是漂亮的小姐姐" width="200px" height="200px">
- img 圖片標簽
- src圖片地址屬性：用于放圖片地址
- alt：當圖片路徑出錯時，alt文字提示就會顯現出來
- title：圖片的描述，鼠標放在圖片上描述圖片的文字就會顯現出來
width、height寬度和高度屬性，屬性值是數字，單位一般用px像素。（可在img圖片標簽中控制圖片大小）
關于路徑問題補充：
- ./相同文件夾下的目錄文件（常用)
- …/上一級文件夾里的目錄文件
引入圖片方式：
1.相對路徑：【./在相同文件夾下找目錄文件。】【…/上一級文件夾里找目錄文件】。
2.絕對路徑：從電腦里C/D/F盤開始的路徑。不怎么常用，因為圖片在自己電腦里，這樣不利于別人使用
3.網絡地址：直接找一個網上的圖片鏈接地址。局限性是在有網，以及圖片在網上未刪除的時候查看
演示：
<!-- 相對路徑引入圖片 --><img src="./img/1.jpg" alt="圖片加載失敗" title="這是漂亮的小姐姐" ><!-- 這個是圖片實際大小 --><hr><!-- 這個是通過img標簽行內設置寬高之后的 --><img src="./img/1.jpg" alt="圖片加載失敗" title="這是漂亮的小姐姐" width="200px" height="200px"><!-- 故意放錯圖片，alt里的文字就會顯現出來 --><img src="1.jpg" alt="圖片加載失敗"><!-- 網路地址引入圖片 --><img src="http://www.jj20.com/tx/qita/213161.html" alt="">三、列表標簽
3.1 無序列表標簽<ul>
1.無序列表標簽用<ul>標記，子元素是<li>標簽列表項
2.可用快捷方式生成多個<li>子元素列表標簽。如：ul>li*3；li*6。等就會生成幾個li子列表項。
3.在<ul>標簽里面，可用type屬性修改子列表項<li>前面的黑點類型
-默認值：disc（實心圓）
- 空心點：circle
- 實心方塊 ：square
- 不顯示符號none
代碼演示
<body><!-- 快捷生成多個子列表項：ul>li*3或li*5或ul.li{$}*5 --><ul><!-- 列表項的默認樣式是實心圓 --><li>我是列表項一</li><li>我是列表項二</li><li>我是列表項三</li></ul><ul type="circle"><!-- 指定列表項的樣式是空心點 --><li>我是列表項一</li><li>我是列表項二</li><li>我是列表項三</li></ul><ul type="square"><!-- 指定列表項的樣式是實心方塊 --><li>我是列表項一</li><li>我是列表項二</li><li>我是列表項三</li></ul><ul type="none"><!-- 指定列表項不顯示符號 --><li>我是列表項一</li><li>我是列表項二</li><li>我是列表項三</li></ul></body>效果展示：
3.2 有序列表標簽<ol>
1.有序列表標簽用<ol>標記，子元素是<li>標簽列表項
2.通過type屬性修改排序類型：默認是阿拉伯數字1開始排序
- type屬性值可為：列舉幾種
- a用小寫字母開始排序
- A用大寫字母開始排序
- i/I 用羅馬字母開始排序
代碼演示：
<!-- 默認是阿拉伯數字123排序 --><ol><li>張三</li><li>李四</li><li>王五</li></ol><ol type="a"><!-- 指定用小寫字母a開始排序 --><li>張三</li><li>李四</li><li>王五</li></ol><ol type="A"><!-- 指定用大寫字母A開始排序 --><li>張三</li><li>李四</li><li>王五</li></ol><ol type="i"><!-- 指定用小寫羅馬字母i開始排序 --><li>張三</li><li>李四</li><li>王五</li></ol><ol type="I"><!-- 指定用大寫羅馬字母I開始排序 --><li>張三</li><li>李四</li><li>王五</li></ol>效果展示：
3.使有序列表前面無符號顯示
注意，有序列表顧名思義就是要有順序，如果非要有序列表沒有順序的話，它是不支持type屬性的值為none的。那么如果硬要讓有序列表前面不顯示符號，可以給它加一個list-style的樣式，屬性值為noe。加上樣式就要涉及到下節所講的css樣式了的知識了。
方法一：直接在內部樣式添加list-style：none
方法二：通過引入外部樣式里，有默認清除
這兩種方法在下一章節里會有講到的
效果圖：
3.3 描述列表標簽（也叫自定義列表標簽）<dl>
1.描述列表標簽用<dl>標記，子元素有兩個是<dt>和<dd>標簽列表項
2.描述列表一般用于一列項目及項目的組合，格式為：
效果展示：
總結
上述是小編為大家整理的一些HTML中常見標簽的用法及代碼展示，當然還有很多標簽還沒有整理進來，后續小編會加一些進來的。參考多方資料加上自己的理解整理出來的，或有不確之處和疏漏的地方，還望各位大佬能夠不吝賜教，加以斧正，小編在此先行謝過了。
總結
以上是生活随笔為你收集整理的html中常见标签及其用法归纳大全的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 瀑布流布局 js定位
- 下一篇： 电脑进程说明,常见,作用,说明,是否,查