如何快速入門HTML

這篇文章主要講解了“如何快速入門HTML”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何快速入門HTML”吧！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供棗陽企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都做網(wǎng)站、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為棗陽眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

html網(wǎng)頁語法結(jié)構(gòu)如下：

<html>

<head>

</head>

</html>

1、標(biāo)題字體：一對(duì)<H#>標(biāo)記表明正文中的第一層標(biāo)題。標(biāo)題一共有六層（H1—H6），隨著數(shù)字的增加，標(biāo)題字體依次減小且自動(dòng)顯示為黑體字。

1）一級(jí)標(biāo)題<H1>是HTML文檔中最重要的標(biāo)題，一般將其作用整個(gè)HTML文檔的標(biāo)題。

2）二級(jí)標(biāo)題<H2>通常用來標(biāo)注文檔中的章。

3）三級(jí)標(biāo)題<H3>通常用來標(biāo)注每一章內(nèi)部的節(jié)。

4）四級(jí)標(biāo)題<H4>通常用來標(biāo)注文檔的小節(jié)。

5）五級(jí)標(biāo)題<H5>和六級(jí)標(biāo)題<H6>可以分別用來在<H4>內(nèi)部劃分更小的節(jié)。因?yàn)?lt;H5>和<H6>通常使用很小的字體顯示，因此這兩個(gè)標(biāo)記并不常用。

標(biāo)題字體用到的屬性是“ALIGN”，用來控制標(biāo)題文字的水平對(duì)齊方式：

Left（居左對(duì)齊）、Right（居右對(duì)齊）、 Center（居中對(duì)齊）。

語法為：

說明：（1）其中“*”表示數(shù)字1—6

（2）“”之中為L(zhǎng)eft、Right或者Center三者之一。

默認(rèn)為 align=left

2、文章字體：<FONT></FONT>標(biāo)記用于在HTML文檔中設(shè)置文本大小與顏色。

文章字體用到的屬性為SIZE與COLOR：

1） SIZE 取值從1到7，代表字體尺寸從最小到最大，其中SIZE屬性的缺省值為3，也可在所取數(shù)值前加控制符：“+”代表加大字體，“—”則反之。

2） COLOR有兩種表示方法：

A. 英文字母：black（黑色）、white（白色）、red（紅色）、green（綠色）、blue（藍(lán)色）、yellow（黃色）、aqua（淺綠色）、fuchsia（紫紅色）、gray（灰色）、lime（橙色）、maroon（栗色）、purple（紫色）、olive（橄欖）、 silver（銀色）

B. 用6個(gè)16進(jìn)制的字母表示，也就是0—F之間取值，稱為RGB值：0代表的顏色最暗，F(xiàn)代表的顏色最亮，如“000000”是黑色，“ffffff”是白色。

文章字體語法：

說明：其中SIZE屬性可以選擇1—7；COLOR屬性值可以選擇RGB值或者預(yù)定義顏色名稱（即英文字母）。

標(biāo)記<br>不空一行

<p>段落標(biāo)記空一行相當(dāng)于<br><br>

3、物理字體：用來給文本賦以某種顯示屬性，而不必考慮文本的邏輯含義。

1） <B></B>或者<STRONG></STRONG>：用來指示以粗體字顯示文本。（大多數(shù)WEB瀏覽器都認(rèn)為是黑體）。

2） <I></I>或者<EM></EM>：用來指示以斜體字顯示文本。

3） <U></U>：用來指示為文本加下劃線。沒有顏色屬性，文本顏色就是它的顏色

4） <SUP></SUP>：指示以上標(biāo)方式顯示文本。

5） <SUB></SUB>：指示以下標(biāo)方式顯示文本。

6） <STRIKE></STRIKE>：用來指示在文本的正中央畫一條刪去線。沒有顏色屬性，文本顏色就是它的顏色

4、邏輯字體：是命令各種瀏覽器對(duì)控制符容器中的字符進(jìn)行相對(duì)的修飾。

1） <EM></EM>：一般強(qiáng)調(diào)文字，字體是意大利斜體。

2） <STRONG></STRONG>：著重強(qiáng)調(diào)文字，以黑體（加粗）字顯示。

3） <CODE></CODE>：代表一個(gè)HTML元素示例的文字。

4） <SAMP></SAMP>：輸出示例中的文字。當(dāng)瀏覽器遇到<SAMP>標(biāo)記時(shí)，就根據(jù)系統(tǒng)默認(rèn)設(shè)置格式化標(biāo) 記<SAMP></SAMP>之間的文本。一般它以比標(biāo)準(zhǔn)字體較小的字體樣式顯示文字，而且文字寬度固定。

5） <KBD></KBD>：代表一個(gè)鍵盤按鍵的文字。

6） <VAR></VAR>：定義變量或者值的文字。斜體顯示。

7） <DFN></DFN>：定義文字。斜體顯示。

8） <CITE></CITE>：引用文字，意大利斜體顯示。

9） <SMALL></SMALL>：小號(hào)字體。

10） <BIG></BIG>：大號(hào)字體。

說明：<BIG><SMALL>標(biāo)記與<FONT SIZE>標(biāo)記可產(chǎn)生同樣的效果，但后者對(duì)字形的控制更加精確。<BIG><SMALL>版本可用于早期的瀏覽器版本，但早期版本不支持<FONT>標(biāo)記。

5、字符實(shí)體：

在往HTML文檔中寫入特殊字符，要使用特殊的代碼，瀏覽器會(huì)用HTML命令對(duì)這些特殊代碼進(jìn)行翻譯。

下面就是以字母或數(shù)字表示的特殊符號(hào)的常用舉例：

；：空格

?。唬?！

&#quot；：”

#；：#

$；：$

%；：%

&#amp；&；：&

'；：’

（；：（

）；：）

*；：*

+；：+

，；：，

-；：—

。；：。

/；：/

0；-9；：數(shù)字從0到9

：；：：

;；：；

<；<；：<

=；：=

>；>；： >

？；：？

@；：@

A；-Z：大寫字母從A到Z

[；：[

\；：\

]；：]

^；：^

_；：_

——；：——

a；-z：小寫字母從a到z

；；：不換行空格

6、文字對(duì)齊：

<DIV>可以設(shè)置文字與頁面的左邊，中間，右邊對(duì)齊。

<CENTER></CENTER>可以設(shè)置文本在頁面的中間對(duì)齊。

<P>也可以設(shè)置段落對(duì)齊。用法與<DIV>大致相同。

1） <DIV>語法：<DIV ALIGN=” “>文字</DIV>

說明：ALIGN屬性可以用“LEFT”、“CENTER”、“RIGHT”，分別對(duì)應(yīng)于將標(biāo)記中間的字符塊按照左、中、右對(duì)齊。

2） <CENTER>語法：<CENTER>文本</CENTER>

說明：這個(gè)標(biāo)記沒有屬性，它的作用是將標(biāo)記中間的字符居中對(duì)齊，它的作用和<DIV ALIGN=”CENTER”><DIV>一樣。

3） <P ALIGN=” ? “>段落</P>

說明：<P>和<DIV>中的ALIGN屬性的屬性值一樣，也是取“LEFT”、“CENTER”、“RIGHT”三個(gè)值，分別對(duì)應(yīng)將中間的字體左、中、右對(duì)齊。只能對(duì)一行文字起作用

7、文字移動(dòng)：用文字編排各種WEB頁面時(shí)，難免會(huì)有一些需要強(qiáng)調(diào)的部分，設(shè)置動(dòng)態(tài)效果會(huì)起到強(qiáng)調(diào)突出文本的作用。頁面的移動(dòng)，必須在瀏覽器中才能看到。

文字移動(dòng)所包含的主要內(nèi)容有：

A. 文字移動(dòng)方向的設(shè)置

B. 文字移動(dòng)方式的設(shè)置

C. 文字移動(dòng)循環(huán)的設(shè)置（次數(shù)）

D. 文字移動(dòng)速度與延時(shí)的設(shè)置

E. 文字移動(dòng)底色的設(shè)置

F. 文字移動(dòng)面積的設(shè)置

1）語法：<MARQUEE DIRECTION=” ? “>文字</MARQUEE>

說明：DIRECTION屬性的屬性值是取“LEFT”、“RIGHT”兩個(gè)值，分別對(duì)應(yīng)將中間的字體向左、右移動(dòng)。

2）語法：<MARQUEE BEHAVIOR=” “>文字</MARQUEE>

說明：BEHAVIOR屬性的屬性值是取“SCROLL”、“SLIDE”、“ALTERNATE”三個(gè)值，分別對(duì)應(yīng)將中間的字體循環(huán)移動(dòng)、只移動(dòng)一次、在屏幕中間左右移動(dòng)。

3）語法：<MARQUEE LOOP=” ? “>文字</MARQUEE>

說明：LOOP屬性的屬性值是取一個(gè)數(shù)值，表示將中間的字體循環(huán)移動(dòng)的次數(shù)。

4）語法：<MARQUEE SCROLLAMOUNT=” ? ”>文字</MARQUEE>

說明：SCROLLAMOUNT屬性的屬性值是取數(shù)字值，對(duì)應(yīng)將中間的字體循環(huán)移動(dòng)的速度。數(shù)值越大，表示速度越快。

5）語法：<MARQUEE SCROLLDELAY=” ? ”>文字</MARQUEE>

說明：SCROLLDELAY屬性的屬性值是取數(shù)字值，對(duì)應(yīng)將中間的字體循環(huán)移動(dòng)的延時(shí)。設(shè)置這個(gè)參數(shù)也會(huì)影響到文字移動(dòng)的速度。

6）語法：

說明：

A. HEIGHT屬性的屬性值是取數(shù)字值，這個(gè)屬性控制了文字移動(dòng)面積的高度。

B. WIDTH屬性的屬性值是取數(shù)字值，這個(gè)屬性控制了文字移動(dòng)面積的寬度。

C. BGCOLOR屬性的屬性值可以取RGB值，或者用預(yù)定義值，它控制了移動(dòng)文字的背景顏色。

8、文字中行的控制：

主要包括兩個(gè)內(nèi)容：

A. 分段：在文本中另起一段。<p>

B. 換行：在文本中另起一行。<br>

1） <P>的語法：<P ALIGN=” “></P>

說明：ALIGN屬性是可選的。它的屬性的屬性值可以取“LEFT”、“CENTER”、“RIGHT”三個(gè)值中的值，這個(gè)屬性控制了段落中的文字在WEB頁面中的對(duì)齊方式。注意：有些瀏覽器不支持右對(duì)齊方式。

當(dāng)我們單獨(dú)定義一個(gè)空行時(shí)，我們習(xí)慣使用<p>的雙標(biāo)記形式，所以

<p>是HTML中唯一一個(gè)不能明確定義是雙標(biāo)記還是單標(biāo)記的一個(gè)標(biāo)記。

2）語法：<BR>

說明：這個(gè)標(biāo)記是單標(biāo)記。

9、列表：常用的有三種類型的列表，分別是無序列表、有序列表、定義列表。列表單

元允許嵌套。<UL> <OL> <DL>

結(jié)構(gòu)：

A. 起始標(biāo)記：定義了整個(gè)列表的開始，同時(shí)定義這個(gè)列表的屬性。

B. 定義每一個(gè)選項(xiàng)。

C. 列表的結(jié)束。

1）無序列表：

A. 語法：<UL TYPE=” ? “COMPACT></UL>

說明：

l <UL>用于定義無序列表，無序列表的起始標(biāo)記<UL>和結(jié)束標(biāo)記</UL>都是必須的。顯示為一個(gè)實(shí)心黑色圓點(diǎn)。

l TYPE屬性可以分別取三個(gè)值“DISC”、“SQUARE”、“CIRCLE，它們是用來控制強(qiáng)調(diào)符風(fēng)格的屬性，三個(gè)值分別對(duì)應(yīng)實(shí)心圓點(diǎn)，實(shí)心方塊，空心圓圈。在FRONTPAGE里，除DISC外的其它兩個(gè)屬性必須使用小寫時(shí)瀏覽器才可識(shí)別。

l COMPACT屬性是個(gè)無值屬性（名稱標(biāo)記），用來使列表的表項(xiàng)用緊湊格式緊湊表示。

B. 語法：<LI TYPE=” “></LI>

說明：

l TYPE屬性是可選的，一般情況下是不需要的，因?yàn)樵谡w列表定義時(shí)應(yīng)該已經(jīng)定義完畢，只有在極少數(shù)情況下，需要使不同表項(xiàng)的強(qiáng)調(diào)符不同，才有必要在這里定義這個(gè)屬性。屬性值的選擇和前面列表的屬性選項(xiàng)一致。（在FRONTPAGE里，除DISC外的其它兩個(gè)屬性必須使用小寫時(shí)瀏覽器才可識(shí)別。）

2）有序列表：

語法：<OL TYPE=” ? “ START=” ? “ COMPACT></OL>

說明：

l <OL>標(biāo)記用于定義有序列表，有序列表的起始標(biāo)記<OL>和結(jié)束標(biāo)記</OL>都是必須的。有序列表的列表項(xiàng)之前有序號(hào)，有序列表和無序列表的區(qū)別只在于用序號(hào)代替了強(qiáng)調(diào)符。

l TYPE屬性可以分別取五個(gè)值“1”、“a”、“A”、“i”、“I”，它是用來控制強(qiáng)調(diào)符風(fēng)格的屬性，五個(gè)值分別對(duì)應(yīng)數(shù)字、小寫字母、大寫字母、小寫羅馬數(shù)字、大寫羅馬數(shù)字。

l START屬性是一個(gè)數(shù)字，表示從第幾個(gè)數(shù)字（字母）開始計(jì)數(shù)值為數(shù)值。例：4

l COMPACT屬性是個(gè)無值屬性（名稱標(biāo)記），用來使列表的表項(xiàng)用緊湊格式緊湊顯示。

3）定義列表：一般用來定義術(shù)語，有時(shí)也將定義列表稱為詞匯列表。定義列表的列表項(xiàng)分成兩部分，一部分是需要定義的術(shù)語，另一部分是該術(shù)語的定義。

A. 語法：<DL COMPACT></DL>

說明：

l <DL>標(biāo)記用于標(biāo)注定義列表，起始標(biāo)記<DL>和結(jié)束標(biāo)記</DL>都是必須的。

l COMPACT屬性是個(gè)無值屬性（名稱標(biāo)記），用來使列表的表項(xiàng)用緊湊格式緊湊顯示。

l <DL>標(biāo)記內(nèi)不允許含有除<DD>和<DT>其他任何單元或普通文本。

B. 語法：<DT></DT>

說明：

l <DT>標(biāo)記用于標(biāo)注需要定義的術(shù)語。

C. 語法：<DD></DD>

說明：

l <DD>單元也只允許出現(xiàn)在<DL>單元的內(nèi)部，其結(jié)束標(biāo)記</DD>通常可以省略。

l <DD>單元可以含有一些字塊級(jí)單元，特別是可以嵌入其他列表。

預(yù)格式化：<PRE>單元用來包含一段預(yù)先編排好格式的文本，WEB瀏覽器將把起始標(biāo)記<PRE>與結(jié)束標(biāo) 記</PRE>之間的文本按照原代碼中的格式原封不動(dòng)的再現(xiàn)出來，<PRE>單元的結(jié)束標(biāo)記</PRE>是必需的，不能省略（實(shí)踐證明可以省略，不會(huì)影響什么？）。與一般段落有所不同，對(duì)于預(yù)格式文本來說，自動(dòng)換行是被禁止的，以便保證預(yù)先編排的格式不被破壞。<PRE>單元有一個(gè)可選屬性“WIDTH”，它用來設(shè)置文本的寬度，單位是字符數(shù)?！癢IDTH”屬性可以使瀏覽器選擇適當(dāng)?shù)淖煮w，以使整個(gè)PRE單元的文本適應(yīng)當(dāng)前窗口的寬度。

<PRE>單元還應(yīng)該注意下述幾個(gè)問題：

l 語法規(guī)則中列舉的文本級(jí)標(biāo)記，例如<FONT>等允許出現(xiàn)在<PRE>單元，但是他們并沒有全部得到所有瀏覽器的支持。

l 段落標(biāo)記<P>不允許出現(xiàn)在<PRE>單元內(nèi)部，但如果強(qiáng)制如此，瀏覽器一般會(huì)將其看作兩個(gè)換行。

l 因?yàn)?lt;PRE>單元內(nèi)部允許有其他HTML標(biāo)記出現(xiàn)，故一般不可以不加改變地將一段ASCII文本添加上<PRE></PRE>后直接插入到HTML文檔之中。若文本中存在“>”“<”“&”等特殊字符，應(yīng)事先將其轉(zhuǎn)換為相應(yīng)的字符實(shí)體。

鏈接：是WWW的基礎(chǔ)，也是核心。單擊這些鏈接，讀者就能從當(dāng)前WEB頁的當(dāng)前位置跳轉(zhuǎn)到Internet的任何一個(gè)部分。Anchor:錨簡(jiǎn)寫：A

語法：<A HREF=”URL#NAME” TARGET=” _blank ”></A>

說明：

l “HREF”是超文本引用的意思它是標(biāo)記<A>的屬性，可以將需要鏈接頁面的地址放在“HREF”之后的引號(hào)中進(jìn)行鏈接。

l URL（Uniform Resource Locator）：統(tǒng)一資源定位符，是WEB頁的地址。

l URL后面跟的“#NAME”部分是指定頁面的指定部分的標(biāo)識(shí)，它是通過在目的頁面的<A NAME=“”>定義的名稱。

l URL部分可以使用的協(xié)議和目的類型主要有以下幾種：

2 內(nèi)部鏈接

2 外部鏈接

2 文件下載地址

2 電子郵件地址

加入圖片：大多數(shù)瀏覽器都支持兩種圖形格式：GIF（圖形互換格式）和JPEG（聯(lián)合圖像專家組）。

語法：<IMG SRC=” ” ALIGN=” “ BORDER=” “ ALT=” “>

說明：

l “SRC”表示圖片的來源，與<A>標(biāo)記的“HREF”的屬性一樣，可以為<IMG>標(biāo)記的“SRC”屬性指定完整的Internet地址。如果圖像文件與HTML文件在同一個(gè)文件夾內(nèi)，也可以僅指定文件名，即使用相關(guān)地址。

l 屬性“ALIGN”屬性則標(biāo)識(shí)了圖片在頁面中的對(duì)齊方式，分別取值為“LEFT”、“RIGHT”、“TOP”、“MIDDLE”、“BOTTOM”，對(duì)應(yīng)于左、中、右對(duì)齊。（若標(biāo)記<IMG>中不包含ALIGN屬性，圖像將于靠近它的文字底部對(duì)齊。

l “BORDER”屬性標(biāo)識(shí)了圖片的邊框線的寬度，數(shù)值越大，邊框線越寬。

l “ALT”屬性是在圖片顯示后，對(duì)于圖片的一段描述文字，這段文字是在當(dāng)瀏覽者將鼠標(biāo)放置到該圖上，停止一段時(shí)間后，頁面上自動(dòng)會(huì)彈出一個(gè)黃色的文本框，里面的文字，就是我們寫在引號(hào)中的內(nèi)容。

13、水平線：<HR>標(biāo)記用來在WEB頁面上畫出一條水平標(biāo)尺線。使用標(biāo)尺線是為了將HTML文檔在邏輯上分隔成不同主題的分區(qū)，從而使文檔便于閱讀。<HR>單元只有起始標(biāo)記<HR>沒有結(jié)束標(biāo)記。

語法：<HR ALIGN=” ” WIDTH=” ” SIZE=” “ NOSHADE>

說明：

l ALIGN屬性用來設(shè)置水平標(biāo)尺線的對(duì)齊方式，“LEFT”為水平線與頁面的左邊對(duì)齊，“CENTER”為水平線與頁面的中間對(duì)齊，“RIGHT”為水平線與頁面的右邊對(duì)齊，缺省時(shí)標(biāo)尺線居中。ALIGN屬性只有在設(shè)置了比瀏覽器窗口寬度小的“WIDTH”屬性時(shí)才有實(shí)際意義。

l WIDTH屬性用來設(shè)置水平標(biāo)尺線在水平方向上的寬度，即水平標(biāo)尺線的長(zhǎng)度。

l SIZE屬性設(shè)置水平標(biāo)尺的粗細(xì)，單位是像素?cái)?shù)。SIZE屬性只能取整數(shù)值，缺省值為2。

l NOSHADE屬性是一個(gè)名稱記號(hào)，用于取消水平標(biāo)尺線的陰影，即畫出一條簡(jiǎn)單的實(shí)線，沒有三維效果。

表格：是指按照一定順序?qū)⑽谋炯皥D形按照一定方式進(jìn)行排列。是組織數(shù)據(jù)的一種十分有效的方式。與列表相比，表格可以容納更多的內(nèi)容，而從表現(xiàn)效果來看，表格的形式也更加完美。表格中由行和列分隔成的格子稱為表元（cell），是矩形區(qū)域，它可以包含文本，圖像和HTML標(biāo)記?？蓪⑵渌鸋TML元素放入表格單元中，但一個(gè)單元中使用的標(biāo)記不能持續(xù)作用到其他單元。也就是說，如果要在一個(gè)表元中間放一個(gè)雙標(biāo)記，那么一定要在表元結(jié)束之前，結(jié)束這個(gè)雙標(biāo)記。用以分隔表元的行列線則稱為表格的邊框線（border），表元的內(nèi)容分成兩類，一類是表頭，一類是表數(shù)據(jù)。

感謝各位的閱讀，以上就是“如何快速入門HTML”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何快速入門HTML這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁名稱：如何快速入門HTML
路徑分享：http://muchs.cn/article22/jopijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、微信小程序、網(wǎng)站制作、外貿(mào)建站

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

猜你還喜歡下面的內(nèi)容