web前端實(shí)戰(zhàn)入門(mén)訓(xùn)練之HTML基本元素

時(shí)間：2023-09-01 01:42:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-01 01:42:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web前端實(shí)戰(zhàn)入門(mén)訓(xùn)練之HTML基本元素：

【前言】

在我們開(kāi)始學(xué)習(xí)前端開(kāi)發(fā)的時(shí)候，經(jīng)常會(huì)用到HTML，它到底在web前端開(kāi)發(fā)中有什么作用，HTML是什么呢？

HTML（Hypertext Markup Language）：即超文本標(biāo)記語(yǔ)言，是一種用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的標(biāo)記語(yǔ)言，用該語(yǔ)言編寫(xiě)的文件，以.html或.htm為后綴，并且由瀏覽器解釋執(zhí)行，生成相應(yīng)的界面。網(wǎng)頁(yè)文件本身只是一種文本文件，我們通過(guò)在文本文件中添加標(biāo)記符號(hào)，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫(huà)面如何安排，圖片如何顯示等），這些標(biāo)記符號(hào)就是html，我們學(xué)習(xí)html就是學(xué)習(xí)這些標(biāo)記符號(hào)，html標(biāo)記符號(hào)也稱(chēng)為html元素。

一、標(biāo)題

標(biāo)題（Heading）是通過(guò) <h1> - <h6> 標(biāo)簽進(jìn)行定義的。

<h1> 定義最大的標(biāo)題。 <h6> 定義最小的標(biāo)題。

標(biāo)題很重要

請(qǐng)確保將 HTML 標(biāo)題 標(biāo)簽只用于標(biāo)題。不要僅僅是為了生成粗體或大號(hào)的文本而使用標(biāo)題。

搜索引擎使用標(biāo)題為您的網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引。

因?yàn)橛脩?hù)可以通過(guò)標(biāo)題來(lái)快速瀏覽您的網(wǎng)頁(yè)，所以用標(biāo)題來(lái)呈現(xiàn)文檔結(jié)構(gòu)是很重要的。

應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類(lèi)推。

二、段落

段落是通過(guò) <p> 標(biāo)簽定義的。

三、換行

如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），請(qǐng)使用 <br> 標(biāo)簽：

<br /> 元素是一個(gè)空的 HTML 元素。

四、水平線(xiàn)

<hr> 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建水平線(xiàn)。
hr 元素可用于分隔內(nèi)容。

屬性：

color：設(shè)置水平線(xiàn)的顏色
width：設(shè)置水平線(xiàn)的長(zhǎng)度
size：設(shè)置水平線(xiàn)的高度
align：設(shè)置水平線(xiàn)的對(duì)齊方式（默認(rèn)居中），可取值left|right

五、圖片

<img> 標(biāo)簽定義 HTML 頁(yè)面中的圖像。

屬性：

Src：路徑
Alt：規(guī)定圖像的替代文本。
Width：規(guī)定圖像的寬度。
Height：規(guī)定圖像的高度
Title：鼠標(biāo)懸停在圖片上給予提示

六、超鏈接

HTML使用標(biāo)簽 <a>來(lái)設(shè)置超文本鏈接。

超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。

當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?br>
在標(biāo)簽<a> 中使用了href屬性來(lái)描述鏈接的地址。

默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

（1）一個(gè)未訪(fǎng)問(wèn)過(guò)的鏈接顯示為藍(lán)色字體并帶有下劃線(xiàn)。

（2）訪(fǎng)問(wèn)過(guò)的鏈接顯示為紫色并帶有下劃線(xiàn)。

（3）點(diǎn)擊鏈接時(shí)，鏈接顯示為紅色并帶有下劃線(xiàn)。

注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會(huì)根據(jù) CSS 的設(shè)定而顯示。

<a href="url">鏈接文本</a>

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

效果如下：

八、列表

8.1無(wú)序列表

無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。

無(wú)序列表使用 <ul> 標(biāo)簽

瀏覽器顯示如下：

<ul><li>的屬性type 擁有的選項(xiàng)
disc 默認(rèn)實(shí)心圓
circle 空心圓
square 小方塊
none 不顯示

8.2有序列表

同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。

列表項(xiàng)使用數(shù)字來(lái)標(biāo)記。

瀏覽器中顯示如下：

<ol><li>的屬性type 擁有的選項(xiàng)
1 表示列表項(xiàng)目用數(shù)字標(biāo)號(hào)（1,2,3...）
a 表示列表項(xiàng)目用小寫(xiě)字母標(biāo)號(hào)（a,b,c...）
A 表示列表項(xiàng)目用大寫(xiě)字母標(biāo)號(hào)（A,B,C...）
i 表示列表項(xiàng)目用小寫(xiě)羅馬數(shù)字標(biāo)號(hào)（i,ii,iii...）
I 表示列表項(xiàng)目用大寫(xiě)羅馬數(shù)字標(biāo)號(hào)（I,II,III...）

8.3自定義列表

自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。

自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt> 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。

瀏覽器顯示如下：

最后：初學(xué)者可以參考尚學(xué)堂【HTML基本元素】視頻教程：

全套視頻基礎(chǔ)入門(mén)詳細(xì)講解：