編程教程

　　 編程問答　 ACM與藍(lán)橋杯競賽入門　 C語言教程　 C++教程　 數(shù)據(jù)結(jié)構(gòu)教程　 Python教程　 JAVA教程　 編譯器教程　 C語言函數(shù)庫　 更多教程

HTML常用標(biāo)簽

68189 閱讀 0 評論 0 點(diǎn)贊

HTML 中的標(biāo)簽就像關(guān)鍵字一樣，每個(gè)標(biāo)簽都有自己的語義（含義），例如<p>標(biāo)簽代表段落，<b>標(biāo)簽代表加粗。根據(jù)標(biāo)簽的不同，瀏覽器會使用不同的方式展示標(biāo)簽中的內(nèi)容。

在實(shí)際開發(fā)中，有時(shí)我們也將 HTML 標(biāo)簽稱為 HTML 元素。

屬性

↓

↑ ↑ ↑

開始標(biāo)簽內(nèi)容結(jié)束標(biāo)簽

除了class屬性外，開始標(biāo)簽中還可以包含其它屬性信息，比如 id、title 等，這些我們會在后面進(jìn)行講解。

注意：雖然 HTML 標(biāo)簽在語法上不區(qū)分大小寫，但是為了規(guī)范和專業(yè)，強(qiáng)烈建議在定義標(biāo)簽時(shí)一律采用小寫

（一）標(biāo)簽語義

學(xué)習(xí)標(biāo)簽是有技巧的，重點(diǎn)是記住每個(gè)標(biāo)簽的語義。簡單理解就是指標(biāo)簽的含義，即這個(gè)標(biāo)簽是用來干嘛的。根據(jù)標(biāo)簽的語義。在合適的地方給一個(gè)最為合理的標(biāo)簽,可以讓頁面結(jié)構(gòu)更清晰。

（二）標(biāo)題標(biāo)簽h1-h6

為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)簽。HTML提供了6個(gè)等級的網(wǎng)頁標(biāo)題，即<h1> - <h6>

<h1> 我是一級標(biāo)簽 </h1>

h是單詞head的縮寫，意為頭部標(biāo)題。

標(biāo)簽語義：作為標(biāo)題使用，并且依據(jù)重要性遞減。

● 特點(diǎn)：

1. 加了標(biāo)題的文字會變的加粗，字號也會依次變大。

2. 一個(gè)標(biāo)題獨(dú)占一行。

（三）段落標(biāo)簽和換行標(biāo)簽

網(wǎng)頁中想讓文字分段顯示. <p>標(biāo)簽用于定義段落樣式

<p> 我是一個(gè)段落標(biāo)簽 </p>

p就是paragraph，段落的意思；可以將html分割為若干段落, 根據(jù)瀏覽器窗口大小自動(dòng)換行, 段落與段落之間保有空隙.

在HIML中, 一個(gè)段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后才自動(dòng)換行。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽<br/>.

break 強(qiáng)制換行單標(biāo)簽行間距不大。

新聞案例：

<!DOCTYPE html>
<html>
<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>國際新聞</title>
</head>
<body>
    <h1>國際新聞</h1>
    <h4>烏克蘭當(dāng)天早上派出無人機(jī)攻擊了位于俄羅斯梁贊州和薩拉托夫州的軍用機(jī)場</h4>
    <p>當(dāng)?shù)貢r(shí)間12月5日，俄羅斯國防部發(fā)表聲明說，烏克蘭當(dāng)天早上派出無人機(jī)攻擊了位于俄羅斯梁贊州和薩拉托夫州的軍用機(jī)場，但是被俄軍防空系統(tǒng)攔截。攻擊中有3名俄軍士兵死亡，另有4人受傷。</p>
    <p>此外，由于烏克蘭無人機(jī)在軍用機(jī)場上方的墜落，導(dǎo)致俄軍兩架戰(zhàn)機(jī)的機(jī)體受損。數(shù)小時(shí)后，烏克蘭方面報(bào)告俄方發(fā)動(dòng)了新一輪導(dǎo)彈襲擊。</p>
    <h4>俄方不可能交出扎波羅熱核電站控制權(quán)</h4>
    <p>俄羅斯外交部發(fā)言人扎哈羅娃向衛(wèi)星通訊社表示，俄方不可能交出扎波羅熱核電站控制權(quán)。</p>
    <h4>拜登不會考慮使用俄羅斯石油來補(bǔ)充戰(zhàn)略石油儲備</h4>
    <p>美國白宮稱，對俄羅斯對價(jià)格上限的反應(yīng)并不感到驚訝。拜登不會考慮使用俄羅斯石油來補(bǔ)充戰(zhàn)略石油儲備。美國能源安全特使Hochstein表示，美國仍然有足夠的戰(zhàn)略石油儲備（SPR）來應(yīng)對緊急情況。拜登政府將于12月8日與美國石油業(yè)高管召開線上會議，討論如何支持烏克蘭的能源基礎(chǔ)設(shè)施。美國能源部長將于14日會見眾多石油公司高管。</p>
    <p>C語言網(wǎng)<br/>        2022-12-6</p>

</body>
</html>

顯示如下：

段落標(biāo)簽和換行標(biāo)簽

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

在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線等效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)簽。使文字以特殊的方式顯示。

標(biāo)簽語義：突出重要性比普通文字更重要。

    <strong>加粗</strong>
    <b>加粗</b>
    <em>傾斜</em>
    <i>傾斜</i>
    <del>刪除線</del>
    <s>刪除線</s>
    <ins>下劃線</ins>
    <u>下劃線</u>

展示如下：

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

（五）div和span標(biāo)簽

<div>和<span>是沒有語義的,他們就是一個(gè)盒子,用來裝內(nèi)容的。

division 分割分區(qū) span 跨度跨距

● 特點(diǎn)：

<div>標(biāo)簽用來布局,但是現(xiàn)在一行只能放一個(gè)<div>. 大盒子獨(dú)占一行。

<span>標(biāo)簽用來布局，一行上可以多個(gè)<span>. 小盒子一行可以多個(gè)。

（六）圖像標(biāo)簽和路徑

1. 圖像標(biāo)簽

在HTML標(biāo)簽中，<img>標(biāo)簽用于定義HTML頁面中的圖像。

單詞image的縮寫。意為圖像。

src是<img>標(biāo)簽的必須屬性.它用于指定圖像文件的路徑和文件名。

所謂屬性:簡單理解就是屬于這個(gè)圖像標(biāo)簽的特性。

<img src="bg.png" alt=""/>

圖像標(biāo)簽的其他屬性

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文本	替換文本，圖像不能顯示的文字。
title	文本	提示文本，鼠標(biāo)放到圖像上，顯示的文字。
width	像素	設(shè)置圖像的寬度
height	像素	設(shè)置圖像的高度
border	像素	設(shè)置圖像的邊框粗細(xì)

圖像標(biāo)簽使用注意點(diǎn)

（1）圖像標(biāo)簽可以擁有多個(gè)屬性,必須寫在標(biāo)簽名的后面。

（2）屬性之間不分先后順序,標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。

（3）屬性采取鍵值對的格式,即key= “value” 的格式，屬性= "屬性值”

2. 路徑

實(shí)際工作中，我們的文件不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個(gè)文件夾來管理他們。

目錄文件夾：就是普通文件夾，里面只不過存放了我們做頁面所需要的相關(guān)素材，比如html文件、圖片等。

根目錄：打開目錄文件夾的第一層就是根目錄。

(2) VSCode打開目錄文件夾

文件——打開文件夾.選擇目錄文件夾后期非常方便管理文件. 或者直接拖進(jìn)來

頁面中的圖片會非常多，通常我們會新建一個(gè)文件夾來存放這些圖像文件 ( images) , 這時(shí)再查找圖像,就需要采用“路徑”的方式來指定圖像文件的位置。

路徑可以分為：

（1）相對路徑，以引用文件所在位置為參考基礎(chǔ),而建立出的目錄路徑。

（2）絕對路徑，是指目錄下的絕對位置,直接到達(dá)目標(biāo)位置,通常是從盤符開始的路徑。

（七）超鏈接標(biāo)簽

1. 鏈接的語法格式

<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>

單詞anchor的縮寫：錨

兩個(gè)屬性作用如下

屬性	作用
href	用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。
target	用于指定鏈接頁面的打開方式，其中_self為默認(rèn)值，_blank為在新窗口中打開方式。

2. 鏈接分類

（1）外部鏈接，例如<a href="http://www.baidu.com">baidu<a>。

（2）內(nèi)部鏈接，網(wǎng)站內(nèi)部頁面之間的相互鏈接，直接鏈接內(nèi)部頁面名稱即可，例如<a href="index.html">首頁<a>。

（3）空鏈接，當(dāng)沒有確定鏈接目標(biāo)時(shí)，<a href="#">首頁<a>。

（4）下載鏈接，如果href里面地址是一個(gè)文件或者壓縮包，會下載這個(gè)文件。

（5）網(wǎng)頁元素鏈接在網(wǎng)頁中的各種網(wǎng)頁元素,如文本圖像、表格、音頻、視頻等都可以添加超鏈接。

點(diǎn)贊(0)