『前端三劍客』：HTML常用標(biāo)簽

這篇具有很好參考價(jià)值的文章主要介紹了『前端三劍客』：HTML常用標(biāo)簽。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

HTML中常用標(biāo)簽

一 . 認(rèn)識(shí)HTML標(biāo)簽

在HTML中標(biāo)簽是以成對(duì)的結(jié)構(gòu)出現(xiàn)的,在HTML當(dāng)中代碼是通過標(biāo)簽來組織的 , 下面通過見得的Hello World的展現(xiàn)來顯示歘HTML 標(biāo)簽的結(jié)構(gòu)

<html>
    <head></head>
    <body>
        Hello  World!
    </body>
</html>

如上述代碼塊所示,形如用尖括號(hào)進(jìn)行組織的,成對(duì)出現(xiàn)的這個(gè)東西就叫做標(biāo)簽 (tag) , 也可以叫做元素(element);

通常情況下一個(gè)標(biāo)簽是成對(duì)出現(xiàn)的, 開始標(biāo)簽, 結(jié)束標(biāo)簽 , 這兩個(gè)標(biāo)簽之間是標(biāo)簽的內(nèi)容.(少數(shù)標(biāo)簽是以一個(gè)標(biāo)簽出現(xiàn)的,這些標(biāo)簽也叫做單標(biāo)簽)
標(biāo)簽之間一般是可以進(jìn)行嵌套的,一個(gè)標(biāo)簽之間的內(nèi)容,可以使一個(gè)或者多個(gè)標(biāo)簽,此時(shí),這些標(biāo)簽之間就構(gòu)成了一個(gè)樹形結(jié)構(gòu).
可以在開始標(biāo)簽中,給標(biāo)簽賦予屬性 , 屬性相當(dāng)于是鍵值對(duì),可以有一個(gè)或者多個(gè).

上述代碼段中html是這個(gè)文件當(dāng)中的最頂層標(biāo)簽, 即樹根節(jié)點(diǎn) , head當(dāng)中存放的是這個(gè)頁面的一些屬性, body中存放的是這個(gè)頁面當(dāng)中包含哪些內(nèi)容.

下面我們需要對(duì)HTML中都支持哪些標(biāo)簽,每個(gè)標(biāo)簽的作用什么,每個(gè)標(biāo)簽都有哪些關(guān)鍵屬性進(jìn)行介紹.

二 . HTML標(biāo)簽介紹

在VS Code 和 IDEA 中編寫 html代碼時(shí) , 可以使用快捷鍵來快速生成代碼框架 , 在VS中輸入 ! ( 英文) , 按下 tab 鍵 , 就可以生成一個(gè)基本的代碼框架 , 此時(shí)只需要對(duì)body的內(nèi)容進(jìn)行編寫即可 .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
</body>
</html>

在這個(gè)生成的代碼框架中 , 大致介紹了這個(gè)頁面的一些基本屬性

『前端三劍客』：HTML常用標(biāo)簽

下面對(duì)html中的常用標(biāo)簽進(jìn)行介紹:

注釋標(biāo)簽

html中代碼的注釋通常與其他語言中的注釋差別較大 , 在 html 中 // 和 / **/ 和 # 都并非合法注釋 , 注釋的內(nèi)容不會(huì)在頁面中顯示,但是如果查看頁面的源代碼通?？梢圆榭吹阶⑨?.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 這是一個(gè)html中的注釋標(biāo)簽 -->
    Hello World!
</body>
</html>

在頁面中F12可以查看源代碼 , 查看注釋

『前端三劍客』：HTML常用標(biāo)簽

在VS Code 當(dāng)中, 通過 ctrl + / 可以是實(shí)現(xiàn)對(duì)代碼的快速注釋 .

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

在html中通過 h1 - h6 來表示一級(jí)標(biāo)題 - 六級(jí)標(biāo)題 ,數(shù)字越大則 ,字體越小 .

</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>
</body>
</html>

顯示的效果如下所示 :

在 html 中標(biāo)簽是否換行 ,和代碼的編寫無關(guān) ,而與標(biāo)簽自身的性質(zhì)有關(guān) , 標(biāo)題標(biāo)簽當(dāng)中, 每個(gè)標(biāo)簽都是獨(dú)占一行的.

段落標(biāo)簽

html中使用

來表示段落標(biāo)簽 , 使用方法為將段落內(nèi)容寫到

和

之間 , 為了清楚地顯示每個(gè)段落之間的效果 ,使用 Lorem來生成一段隨機(jī)的文本 .

</head>
<body>
    <!--這是段落標(biāo)簽-->
    <p> 這是一個(gè)段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 這是一個(gè)段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 這是一個(gè)段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 這是一個(gè)段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p> 
</body>
</html>

『前端三劍客』：HTML常用標(biāo)簽

每個(gè)段落之間 , 要進(jìn)行換行和明顯的段間距 ,可以通過 CSS 來進(jìn)行段間距的調(diào)整 .

換行標(biāo)簽 : br

html 中使用 br 標(biāo)簽來對(duì)文本進(jìn)行換行 , 對(duì)上述的段落中添加 br 標(biāo)簽 , 實(shí)現(xiàn)換行的效果 .

br 標(biāo)簽也是一個(gè)單標(biāo)簽 , 不需要結(jié)束標(biāo)簽

『前端三劍客』：HTML常用標(biāo)簽

格式化標(biāo)簽

html 中可以對(duì)文本進(jìn)行格式化 , 格式化的相關(guān)操作包含 : 變粗 ,傾斜 , 刪除線和下劃線 .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 這是格式化標(biāo)簽,不獨(dú)占一行, 加上<br>換行 -->
    <strong>加粗</strong>
    <b>加粗</b>
    <br>
    <em>傾斜</em>
    <i>傾斜</i>
    <br>
    <del>刪除線</del>
    <s>刪除線</s>
    <br>
    <ins>下劃線</ins>
    <u>下劃線</u>
</body>
</html>

展示的效果如下 :

『前端三劍客』：HTML常用標(biāo)簽

上述的格式化標(biāo)簽都是不獨(dú)占一行的 , 需要添加換行標(biāo)簽 , 實(shí)際的開發(fā)過程當(dāng)中通常使用 CSS實(shí)現(xiàn)上述的效果

圖片標(biāo)簽

使用 img 標(biāo)簽來實(shí)現(xiàn) 圖片的顯示效果 , 其中 img 標(biāo)簽當(dāng)中必須要包含src屬性 , 來表述圖片的路徑 , 其中包括相對(duì)路徑和絕對(duì)路徑 .

相對(duì)路徑 : 以 html 文件所在的位置為基準(zhǔn) , 找到圖片的位置
- 同級(jí)路徑: 直接寫文件名即可 (或者 ./)
- 下一級(jí)路徑: image/1.jpg
- 上一級(jí)路徑: …/image/1.jpg
絕對(duì)路徑 : 一個(gè)完整的磁盤路徑, 或者網(wǎng)絡(luò)路徑. 例如 :
- 磁盤路徑 : E:\test.jpg
- 網(wǎng)絡(luò)路徑 : https://tse1-mm.cn.bing.net/th/id/OIP-C.xq6cOv82ubIhJY9qkFd5AgHaEK?pid=ImgDet&rs=1
img 標(biāo)簽中的其他屬性 :

alt 標(biāo)簽 : 當(dāng)圖片不能正確顯示時(shí) , 就會(huì)顯示出一個(gè)替換的文字

『前端三劍客』：HTML常用標(biāo)簽

title標(biāo)簽 : 鼠標(biāo)懸停在圖片上時(shí) , 就會(huì)顯示出一段替換文本

『前端三劍客』：HTML常用標(biāo)簽

width / height 描述圖片的尺寸 ,控制寬度和高度 .

 <img src="./test.jpg width="500px" height="800px">

超鏈接標(biāo)簽

html中的超鏈接標(biāo)簽使用是a標(biāo)簽 , a 標(biāo)簽中的兩個(gè)屬性 : href 和 target 屬性
- href : 必須具備, 表示點(diǎn)擊后會(huì)跳轉(zhuǎn)到哪個(gè)頁面, 覆蓋原來的頁面 .
- target : 一般寫作 targrt = “_blank” , 作用是跳轉(zhuǎn)至新的頁面 , 不會(huì)覆蓋原來的頁面 .

<!-- 這是一個(gè)超鏈接標(biāo)簽 其中的鏈接也可以替換為ip地址-->
<body>
    <a href="https://www.baidu.com">百度</a>
    <!-- target 使用, 不會(huì)覆蓋原來的頁面,打開了一個(gè)新的頁面-->
    <a href="https://www.baidu.com" target="_blank">百度</a>
</body>

『前端三劍客』：HTML常用標(biāo)簽

表格標(biāo)簽

html中使用table 作為表格標(biāo)簽 , 其中 tr 標(biāo)簽表示一行 , td 標(biāo)簽表示一個(gè)單元格 , th 標(biāo)簽表示表頭的單元格 .

table標(biāo)簽當(dāng)中可以添加以下屬性 :

width 和 height 屬性 , 對(duì)表格的長(zhǎng)寬進(jìn)行設(shè)置
align 屬性 : 表示的是表格相對(duì)于周圍元素的對(duì)齊方式 center/ left / right
border 屬性對(duì)表格添加邊框線 , 1 表示有邊框 (數(shù)字越大邊框越粗) , “” 表示沒有邊框.
cellspacing 屬性表示對(duì)單元格之間的距離進(jìn)行設(shè)置 , 一般默認(rèn)為 2px , 通常情況下為了將表格的邊框設(shè)置為完全填充 , 一般將此屬性設(shè)置為 0 px
cellpadding 屬性: 表示單元格中的內(nèi)容距離邊框的距離 , 一般默認(rèn)為2 px

為了使表格看起來更加的美觀 ,通常設(shè)置 css 類來使表格當(dāng)中的文字居中 .

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css使表格中的文字居中 -->
    <style>
        td{
            text-align: center;
        }
    </style>
</head>
<!-- 這是一個(gè)表格標(biāo)簽 -->
<body>
<!-- 設(shè)置table標(biāo)簽的相關(guān)屬性 -->
    <table width="500px" height="300px" border="1px" cellspacing="0" cellpadding = "5">
        <tr>
            <th>姓名</th>
            <th>電話</th>
        </tr>
        <tr>
            <td>張三</td>
            <td>1233</td>
        </tr>
        <tr>
            <td>宋六</td>
            <td>1156</td>
        </tr>
    </table>
</body>
</html>

『前端三劍客』：HTML常用標(biāo)簽

當(dāng)對(duì) table 標(biāo)簽中的 align 屬性進(jìn)行設(shè)置時(shí) ，使表格相對(duì)于頁面周圍元素位于居中 / 左側(cè) / 右側(cè)

<!-- 將表格設(shè)置為水平居中 -->
<table border="1px" cellspacing="0" cellpadding = "5" align="center">

『前端三劍客』：HTML常用標(biāo)簽

列表標(biāo)簽

列表標(biāo)簽的作用通常是為了對(duì)元素進(jìn)行布局，包括有序列表和無序列表兩種，一般在表示一個(gè)并列的項(xiàng)時(shí)，就會(huì)使用無序列表

有序列表： ol li 無序列表：ul li

<body>
    <h3>我的列表如下</h3>
<!-- 有序列表 -->
    <ol>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ol>
<!-- 無序列表 -->
    <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ul>
</body>

顯示效果如下所示：

『前端三劍客』：HTML常用標(biāo)簽

表單標(biāo)簽

表單標(biāo)簽是讓用戶輸入的重要途徑 ,其中包括表單域和表單控件,最常用的表單控件是input標(biāo)簽.

input標(biāo)簽

使用input 標(biāo)簽可以實(shí)現(xiàn)各種輸入控件, 包括單行文本框,密碼框,按鈕,單選框和復(fù)選框等;

input 標(biāo)簽屬性
- type : 取值種類有很多(必須有) , 包括text , password , button , checkbox,image ,radio等
- name : 給input標(biāo)簽起了個(gè)名字 , 對(duì)于單選框,名字相同的按鈕才能夠多選一.
- value : input標(biāo)簽中的默認(rèn)值
- checked : 用來設(shè)置單選框和復(fù)選框中默認(rèn)被選中的 .
- maxlength : 設(shè)置最大長(zhǎng)度 .

input標(biāo)簽使用

文本框

 <input type="text">

『前端三劍客』：HTML常用標(biāo)簽

密碼框

 <input type="password">

『前端三劍客』：HTML常用標(biāo)簽

單選框

選擇男女中的一個(gè) , 默認(rèn)選擇為男

<input type="radio" name ="sex" checked = "checked">男
<input type="radio" name = "sex">女

『前端三劍客』：HTML常用標(biāo)簽

復(fù)選框

<h4>今天干什么</h4>
<input type="checkbox">寫博客
<input type="checkbox">刷力扣
<input type="checkbox">學(xué)html

『前端三劍客』：HTML常用標(biāo)簽

普通按鈕

 <input type="button" value="我是個(gè)按鈕">

此處點(diǎn)擊按鈕之后沒有反應(yīng), 后邊搭配 js 使用可以顯示點(diǎn)擊效果

『前端三劍客』：HTML常用標(biāo)簽

提交按鈕(搭配form使用)

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

提交按鈕的外觀和button一差不多 , 會(huì)觸發(fā)form和服務(wù)器之間的交互.

文件選擇框

點(diǎn)擊之后會(huì)觸發(fā)文件資源管理器 , 選擇文件進(jìn)行上傳 .

 <input type="file">

『前端三劍客』：HTML常用標(biāo)簽

select 標(biāo)簽

select標(biāo)簽主要應(yīng)用于下拉菜單 , 在option標(biāo)簽中定義下拉菜單中的選項(xiàng)

selected=“selected” 表示默認(rèn)選中, 如果不指定默認(rèn)選中, 則默認(rèn)為第一個(gè)

 <select>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
        <option>2015</option>
    </select>

    <select>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>鄭州</option>
        <option>西安</option>
     </select>

『前端三劍客』：HTML常用標(biāo)簽

textarea 標(biāo)簽

多行編輯框 : 文本區(qū)中可容納無限數(shù)量的文本，其中的文本的默認(rèn)字體是等寬字體（通常是 Courier）?？梢酝ㄟ^ cols 和 rows 屬性來規(guī)定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性

<textarea name="" id="" cols="30" rows="10"></textarea>
</body>

『前端三劍客』：HTML常用標(biāo)簽

上述的標(biāo)簽也可以叫做控件 , 是構(gòu)成一個(gè)圖形化界面的基本要素

無語義標(biāo)簽

div 標(biāo)簽和 span 標(biāo)簽常用來進(jìn)行網(wǎng)頁布局 .
- div 是獨(dú)占一行的, 是一個(gè)大盒子. 常用于定義 html文檔中的一個(gè)分割區(qū)塊和一個(gè)區(qū)域部分 ,常用于組合塊級(jí)元素 , 以便于通過 css 來對(duì)這些元素進(jìn)行格式化
- span 不獨(dú)占一行, 是一個(gè)小盒子. 被用來組合文檔中的行內(nèi)元素。
```
<div>
  <span>html</span>
  <span>css</span>
  <span>js</span>
</div>

<div>
   <span>c</span>
   <span>java</span>
   <span>c++</span>
   <span>go</span>
 </div>
```

三 . 案例應(yīng)用

html 頁面標(biāo)簽綜合應(yīng)用 – 簡(jiǎn)歷展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>簡(jiǎn)歷信息頁</title>
</head>
<!-- 簡(jiǎn)歷展示信息 -->
<body>
    <h1>張三</h1>
    <!--基本信息  -->
    <div>
        <h2>基本信息</h2>
        <img width = "500px"src="test.jpg">
        <p>
            <span>求職意向:</span>
            <span>Java開發(fā)工程師</span>
        </p>
        <p>
            <span>聯(lián)系電話:</span>
            <span>XXX-XXXX-XXXX</span>
        </p>
        <p>
            <span>郵箱</span>
            <span>XXX@foxmail.com</span>
        </p>
        <p>
            <a href="https://github.com/echoyter">我的github博客</a>
        </p>
        <p>
            <a href="https://www.csdn.net/">我的CSDN博客</a>
        </p>
    </div>
    <!-- 教育背景 -->
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>1990-1996 幼兒園 </li>
            <li>1996-2002 小學(xué)</li>
            <li>2002-2005 初中</li>
            <li>2005-2008 高中</li>
            <li>2008-2012 本科</li>
        </ol>

        <h2>專業(yè)技能</h2>
        <ul>
            <li>Java基礎(chǔ)語法扎實(shí)</li>
            <li>數(shù)據(jù)結(jié)構(gòu)熟練應(yīng)用</li>
            <li>熟悉計(jì)算機(jī)網(wǎng)絡(luò)理論</li>
            <li>掌握Web開發(fā)功能</li>
        </ul>

        <h2>我的項(xiàng)目</h2>
        <ol>
            <li>留言墻</li>
            <p>
                <span>開發(fā)時(shí)間:<span>
                <span>2008年9月到2008年12月</span>
            </p>
            <p>功能介紹</p>
            <ul>
                <li>支持留言發(fā)布</li>
                <li>支持匿名留言</li>
            </ul>
            <li>學(xué)習(xí)小助手</li>
            <p>
                <span>開發(fā)時(shí)間:</span>
                <span>2008.9-2008.12</span>
            </p>
            <p>功能介紹</p>
            <ul>
             <li>支持錯(cuò)題檢索</li>
             <li>支持同學(xué)探討</li> 
            </ul>
        </ol>
    </div>
    <div>
        <h2>個(gè)人評(píng)價(jià)</h2>
        <p>在校期間學(xué)習(xí)成績(jī)優(yōu)良,多次獲得獎(jiǎng)學(xué)金</p>
    </div>
</body>
</html>