非網(wǎng)站開發(fā)人員都應(yīng)該了解的21個HTML基礎(chǔ)知識

2022-10-14    分類: 網(wǎng)站建設(shè)

1.標(biāo)題

標(biāo)題可能是很容易學(xué)習(xí)的代碼之一,并考慮到它們對您的SEO至關(guān)重要,這是一件好事。共有六種不同類型,如下所示。要創(chuàng)建標(biāo)題,只需將文本包裝在所選的標(biāo)題標(biāo)簽中:

2.段落

沒有一段要詳細(xì)說明該消息的標(biāo)題會是什么?要獲得類似于您現(xiàn)在正在閱讀的段落,只需將文本包裝在<p>標(biāo)記中,如下例所示,并且別忘了用</ p>標(biāo)記將其關(guān)閉!

<p>嘿,我是一個段落!</ p>

嘿,我是一段!

3.鏈接

如果不將您本已豐富的內(nèi)容鏈接到其他相關(guān)文章和網(wǎng)站文章,則入站營銷就算什么。嘗試使用以下<a>代碼在段落中鏈接單詞或短語:

<a href="http://www.bm7419.com/">讓我們訪問成都創(chuàng)新的真棒網(wǎng)站!</a>

奇跡般地變成:讓我們訪問成都創(chuàng)新的真棒網(wǎng)站!

代碼語句的href部分指定了您要鏈接訪問的目標(biāo)網(wǎng)站地址。

4.圖片

這很有趣。圖像使一切變得更好,它們使您的內(nèi)容對讀者更具吸引力。插入這樣的圖像:

<img class =“ lazy” data-src =“ src="/upload/pic19/Cute-Puppy.jpg” alt =“ Cute-Puppy” style =“ width:500px; height:333px; “>

image標(biāo)簽為空,因?yàn)樗鼉H包含屬性,因此不需要關(guān)閉。上面列出的屬性包括“ class =“ lazy” data-src“或圖像URL。我還包括了圖像替代文本(對于SEO而言很重要),以及一些樣式屬性(寬度和高度)。

您可以根據(jù)需要自定義圖像。哦,對于你們那里所有的小狗愛好者-像我一樣-這是我上面編碼的實(shí)際圖像:

5.換行

換行符也是一個空元素,因此不需要將其關(guān)閉。換行符基本上是用<br>創(chuàng)建的兩行文本之間的有意空格。

<p>在此句子下放置換行符。
<br>

在此句子上方放置換行符。</ p>

在此句子下放置換行符

在此句子上方放置換行符。

轉(zhuǎn)換完上述HTML后,與使用<p>標(biāo)記分隔兩個段落相比,您可以說*行和第二行之間的空間較小。添加換行符有助于使句子位于同一段落的不同行中。

6.大膽而堅強(qiáng)

為了使內(nèi)容醒目,有兩個有效的代碼元素。但是,我的開發(fā)人員告訴我<strong>的使用量遠(yuǎn)超過<b>。不要忘記關(guān)閉<strong>標(biāo)簽!</ strong>

<strong>將整個句子加粗!</ strong>

或僅<strong>加粗</ strong>一個字!

大膽的整句話!或只加粗

一個字!

7.斜體和強(qiáng)調(diào)

斜體和強(qiáng)調(diào)文本與粗體和強(qiáng)文本相似。有兩個代碼元素,但一個元素比另一個元素使用更多。在這種情況下,<i>將起作用,但是<em>更常用。

<em>這句話很漂亮</ em>

這句話很漂亮。

8.下劃線

粗體,斜體,并加下劃線。這一個和其他兩個一樣容易。只需將要加下劃線的文本包裝在<u>標(biāo)記中,例如。

<u>看,我們可以加下劃線!</ u>

看,我們可以強(qiáng)調(diào)!

9.有序列表

有序列表和無序列表之間有區(qū)別。有序列表包含數(shù)字,而無序列表包含項(xiàng)目符號。它們都遵循相同的結(jié)構(gòu),但是一個字母會發(fā)生變化。

這是有序列表的代碼語句。<ol>是整個“有序列表”,而<li>是一個“列表項(xiàng)”。您可以根據(jù)需要包括任意數(shù)量的列表項(xiàng)。

10.無序列表

從一個有序列表切換到一個無序列表,只需要更改一個字母即可。

11.上標(biāo)

要在文本中插入上標(biāo)格式,請將要顯示為上標(biāo)的文本包裝在<sup>標(biāo)記中。</ sup>您將得到類似這樣的結(jié)果。

商標(biāo)應(yīng)使用上標(biāo)<sup> TM </ sup>書寫。

商標(biāo)應(yīng)使用上標(biāo)TM書寫。

12.下標(biāo)

如果您知道如何上標(biāo),那么您應(yīng)該知道如何下標(biāo)。只需使用<sub>標(biāo)記</ sub>即可獲得這樣的文本。

有時,引文用下標(biāo)寫成。

有時,引文用下標(biāo)寫成。

13.水平線

是否要拆分頁面或文章的各個部分?嘗試一條水平線!只需使用空元素(無需關(guān)閉它)<hr>。

在我和句子2之間插入一條水平線。
<hr>

嗨,我是句子2。

在我和句子2之間插入一條水平線。

嗨,我的句子是2。

14.標(biāo)記或突出顯示的文本

我敢打賭,您不知道可以通過HTML代碼突出顯示文本,是嗎?太酷了,太容易了。將要在<mark>標(biāo)記</ mark>中突出顯示的文本換行,以便獲得酷炫的突出功能。

僅突出顯示<mark>最重要的注釋</ mark>。

僅突出顯示最重要的注意事項(xiàng)。

15.刪除(貫穿)文本

如果您想在文本上顯示穿越效果(也許您創(chuàng)建了一個任務(wù)列表,并希望在執(zhí)行過程中對每個任務(wù)進(jìn)行劃線),則有相應(yīng)的代碼。嘗試使用<del>標(biāo)記刪除完整的句子甚至一個單詞。</ del>

<del>喂狗。</ del>
<del>寫我的博客文章。</ del>

做飯。

喂狗。
寫我的博客文章。

做晚飯。

16.短期和長期報價

到目前為止,您可能想知道我如何將所有示例都放在文本框中。好吧,驚喜!也有一個代碼。它實(shí)際上稱為塊引用或長引號。您可以在下面看到長引號和短引號(普通引號)之間的區(qū)別。

<blockquote>與其余示例一樣,所有這些文本都將以blockquote出現(xiàn)。</ blockquote>

<q>之所以引用這是因?yàn)槲沂谴舐曊f出來。</ q>

與其余示例一樣,所有這些文本都將以大括號顯示。

我引用此內(nèi)容是因?yàn)槲乙舐曊f出來。

17.設(shè)置特定字體

接下來的幾個會變得有些棘手,所以請嘗試和我在一起?,F(xiàn)在,您知道如何創(chuàng)建標(biāo)題,段落和樣式化的文本,這對您知道可以使用元素“字體家族”輕松更改字體很有用。

不要忘記所有小的細(xì)節(jié),例如等號,引號和分號。查看以下示例。

<h4 style =“ font-family:Georgia;”>我想將此標(biāo)題更改為Georgia字體。</ h4>

<p style =“ font-family:Verdana;”>我想將此段落更改為Verdana字體。</ p>

我想將此標(biāo)題更改為Georgia字體。

我想將此段落更改為Verdana字體。

18.設(shè)置特定的文本顏色

該代碼使用與上一個示例相同的代碼類型,但是使用“顏色”代替使用字體家族。您可以嘗試使用實(shí)際的顏色(藍(lán)色,紅色,橙色等),也可以插入十六進(jìn)制顏色以自定義品牌的文字。

<p style =“ color:blue;”>今天的天空真的是藍(lán)色。<
/ p><p style =“ color:#ff471a;”>火是橘紅色的

</ p>

今天的天空真的很藍(lán)。

火是橘紅色的

。

19.設(shè)置特定的文字大小

同樣,此代碼使用相同的基本代碼邏輯,但使用元素“ font-size”。將字體大小設(shè)置為像素或px。

<p style =“ font-size:36px;”>將此段落設(shè)置為36字體。</ p>

<p style =“ font-size:12px;”>將此段落設(shè)置為12字體。</ p>

使此段落大小為36字體。

使此段落大小為12字體。

20.設(shè)置特定的文本對齊方式

左,居中,右或?qū)R。您如何看待您的文字?使用“文本對齊”以任何方式進(jìn)行設(shè)置。

<p style =“ text = align:center;”>此段落應(yīng)居中。</ p>

<p style =“ text-align:right;”>此段落應(yīng)右對齊。</ p>

本段應(yīng)居中。

本段應(yīng)右對齊。

21.桌子

我把好的留在了*!好吧,我不知道這是否是好的,但我認(rèn)為這很酷。用于創(chuàng)建表的HTML代碼可能會變得非常復(fù)雜,但是如果您掌握了基本知識,那么您應(yīng)該不會有太大的問題。

我將在下面顯示如何創(chuàng)建一個簡單表。

為了易于理解,<tr>代表表行,而<td>代表表數(shù)據(jù)。請記住,您可以更改字體,文本大小,文本顏色,文本對齊方式等。

開始編碼!

您剛剛閱讀的21個代碼非常不錯,可以開始練習(xí)來增強(qiáng)HTML技能。

本文題目:非網(wǎng)站開發(fā)人員都應(yīng)該了解的21個HTML基礎(chǔ)知識
URL鏈接:http://www.bm7419.com/news2/205352.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、軟件開發(fā)、定制網(wǎng)站網(wǎng)站導(dǎo)航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)