HTML編程快速入門教程

一、什么是HTML

HTML是英文Hyper Text Mark-up Language(超文本標(biāo)記語言)的縮寫，它規(guī)定了HTML的語法規(guī)則，用來表示比“文本”更豐富的意義，比如圖片，表格，鏈接等。瀏覽器（IE，火狐等）軟件知道HTML語言的語法，可以用來查看HTML文檔。目前為止互聯(lián)網(wǎng)上的絕大多數(shù)網(wǎng)頁都是使用HTML語言來編寫的。
開始學(xué)習(xí)什么是HTML

二、HTML是什么樣的

簡而言之，HTML的語法就是給文本加上描述標(biāo)簽(Tag)，讓用戶（人或程序）能更好的理解該文本。
下面來看一個最簡單的HTML文檔：

<html>
  <head>
    <title>第一個Html文檔</title>
  </head>
  <body>
  歡迎訪問<a >W3Cschool官網(wǎng)</a>! 
  </body>
</html>

在W3Cschool html編程實例中運行上列代碼

效果截圖

所有的HTML文檔都會有一個<html>標(biāo)簽，<html>標(biāo)簽可以包含兩個部分:<head>和<body>。

<head> 元素包含了所有的頭部標(biāo)簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標(biāo)簽有: <title>, <style>, <meta>, <link>, <script>, <noscript>, 和<base>。
HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。
當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/p>

在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址。

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

  • 一個未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線
  • 訪問過的鏈接顯示為紫色并帶上下劃線
  • 點擊鏈接時，鏈接顯示為紅色并帶上下劃線

開始學(xué)習(xí)HTML!

三、HTML 鏈接語法

鏈接的 HTML 代碼很簡單。它類似這樣：

<a href="*http://www.w3cschool.cn*">*Link text*</a>

在W3Cschool html編程實例中運行上列代碼
href 屬性描述了鏈接的目標(biāo)。.
上面的<a >中，href屬性的值就是http://www.w3cschool.cn 。
開始學(xué)習(xí)HTML 鏈接語法

四、HTML文檔可以包含的內(nèi)容

通過不同的標(biāo)簽，HTML文檔可以包含不同的內(nèi)容，比如文本，鏈接，圖片，列表，表格，表單，框架等。

  • 文本：HTML對文本的支持是最豐富的，你可以設(shè)置不同級別的標(biāo)題，分段和換行，可以指定文本的語義和外觀，可以說明文本是引用自其它的地方，等等等等。
  • 鏈接：鏈接用來指出內(nèi)容與另一個頁面或當(dāng)前頁面某個地方有關(guān)。
  • 圖片：圖片用于使頁面更加美觀，或提供更多的信息。
  • 列表：列表用于說明一系列條目是彼此相關(guān)的。
  • 表格：表格是按行與列將數(shù)據(jù)組織在一起的形式。也有不少人使用表格進(jìn)行頁面布局。
  • 表單：表單通常由文本輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁面更有交互性。
  • 框架：框架使頁面里能包含其它的頁面。

開始HTML基礎(chǔ)學(xué)習(xí)

五、HTML文檔格式詳細(xì)說明

前面介紹了HTML文檔的基本格式，下面再做一個詳細(xì)說明。
HTML文檔可以用任何文本編輯器（比如記事本，UltraEdit等）創(chuàng)建，編輯，因為它的內(nèi)容在本質(zhì)也只是一些文本。

在HTML文本中，用尖括號括起來的部分稱為標(biāo)簽。如果想在正文里使用尖括號（或者大與號小與號，總之是同一個東西），必須使用字符轉(zhuǎn)義，也就是說轉(zhuǎn)換字符的原有意義。<應(yīng)該使用<代替，>則使用>，至于&符號本身,則應(yīng)該使用&替代（不得不說的是有很多HTML文檔沒有遵循這個規(guī)則，常用的瀏覽器也都能夠分析出&到底是一個轉(zhuǎn)義的開始，還是一個符號，但是這樣做是不推薦的）。

標(biāo)簽本質(zhì)上是對它所包含的內(nèi)容的說明，可能會有屬性，來給出更多的信息。比如<img>（圖片）標(biāo)簽有src屬性（用于指明圖片的地址），width和height屬性（用于說明圖片的寬度和高度）。HTML里能使用哪些標(biāo)簽，這些標(biāo)簽分別可以擁有哪些屬性，這些都是有規(guī)定的，知道了這里說的基本知識之后，學(xué)習(xí)HTML其實也就是學(xué)習(xí)這些標(biāo)簽了。本文后面會對常用的HTML標(biāo)簽做出簡短的介紹。

標(biāo)簽通常有開始部分和結(jié)束部分（也被稱為開始標(biāo)簽和結(jié)束標(biāo)簽），它們一起限定了這個標(biāo)簽所包含的內(nèi)容。屬性只能在開始標(biāo)簽中指定，屬性值可以用單引號或雙引號括起來。結(jié)束標(biāo)簽都以/加上標(biāo)簽名來表示。有時候，有些標(biāo)簽并不包含其它內(nèi)容（只包括自己的屬性，甚至連屬性都沒有），這種情況下，可以寫成類似這樣：

![](http://upload-images.jianshu.io/upload_images/2642238-33fdee04310ced6f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

注意最后的一個空格和一個反斜杠，它說明這個標(biāo)簽已經(jīng)結(jié)束，不需要單獨的結(jié)束標(biāo)簽了。

某些標(biāo)簽包含的內(nèi)容中還可以有新的標(biāo)簽，新的標(biāo)簽名甚至可能還可以與包含它的標(biāo)簽的名稱相同（哪些標(biāo)簽可以包含標(biāo)簽，可以包含哪些標(biāo)簽也是有規(guī)定的）。比如：

<div>
  <div>`分類目錄...</div> 
  <div>當(dāng)前分類內(nèi)容列表...</div>
</div>

在這種情況下，最后出現(xiàn)的標(biāo)簽應(yīng)該最先結(jié)束。
HTML文檔里所有的空白符（空格，Tab，換行，回車）會被瀏覽器忽略，唯一的例外是空格，對空格的處理方式是所有連續(xù)的空格被當(dāng)成一個空格，不管有一個，還是兩個，還是100個。之所以有這樣的規(guī)則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內(nèi)容，比如可以在每個標(biāo)簽開始后增加縮進(jìn)，標(biāo)簽結(jié)束后減少縮進(jìn)。由于英語文本中空格用得很普遍（用于分隔單詞），所以對空格做了這樣的特殊處理。如果要顯示連續(xù)的空格（比如為了縮進(jìn)），應(yīng)該用 來代表空格。
HTML速查列表

六、常用標(biāo)簽介紹

文本
最常用的標(biāo)簽可能是<font>了，它用于改變字體，字號，文字顏色。

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">紅色的5</font>
<font face="黑體">黑體的字</font>

加粗，下劃線，斜體字也是常用的文字效果，它們分別用<b>,<u>,<i>表示：

<b>Bold</b>
<i>italic</i>
<u>underline</u>

還有一些標(biāo)簽，用來指出包含的文本有特殊的意義，比如<abbr>（表示縮寫），<em>（表示強調(diào)），<strong>（表示更強地強調(diào)）,<cite>（表示引用），<address>（表示地址）等等。這些標(biāo)簽不是為了定義顯示效果而存在的，所以從瀏覽器里看它們可能沒有任何效果，也可能不同的瀏覽器對這些標(biāo)簽的顯示效果完全不同。
一篇很長的文章，如果有合適的小標(biāo)題的話，就可以快速地對它的內(nèi)容進(jìn)行大致的了解。在HTML里，用來表示標(biāo)題的標(biāo)簽有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它們分別表示一級標(biāo)題，二級標(biāo)題，三級標(biāo)題...

<h1>HTML 編程入門 -W3Cschool.cn</h1>
<h2>什么是HTML</h2>
...
<h3>HTML是什么樣的</h3>
...

效果截圖

標(biāo)題效果截圖演示.png

圖片
<hr>標(biāo)簽用于在頁面上添加橫線?？梢酝ㄟ^指定width和color屬性來控制橫線的長度和顏色。

<hr width="90%" color="red" />

<img>標(biāo)簽用于在頁面上添加圖片，src屬性指定圖片的地址，如果無法打開src指定的圖片，瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文本。

Paste_Image.png

鏈接
超級鏈接用<a>標(biāo)簽表示，href屬性指定了鏈接到的地址。<a>標(biāo)簽可以包含文本，也可以包含圖片。

Paste_Image.png

分段與換行
由于HTML文檔會忽略空白符，所以要想保證正常的分段換行的話，必須指出哪些文字是屬于同一段落的，這就用到了標(biāo)簽<p>。

<p>這是第一段。</p>
<p>這是第二段。</p>

也有人不用<p>，而用<br>。<br>只表示換行，不表示段落的開始或結(jié)束，所以通常沒有結(jié)束標(biāo)簽。

這是第一段。<br>
這是第二段。<br />
這是第三段。

有時，要把文檔看作不同的部分組合起來的，比如一個典型的頁面可能包括三個部分：頁頭，主體，頁腳。<div>標(biāo)簽專門用于標(biāo)明不同的部分：

<div>頁頭內(nèi)容</div>
<div>主體內(nèi)容</div>
<div>頁腳內(nèi)容</div>

表格
HTML文檔在瀏覽器里通常是從左到右，從上到下地顯示的，到了窗口右邊就自動換行。為了實現(xiàn)分欄的效果，很多人使用表格（<table>）進(jìn)行頁面排版（雖然HTML里提供表格的本意不是為了排版）。
<table>標(biāo)簽里通常會包含幾個<tr>標(biāo)簽，<tr>代表表格里的一行。<tr>標(biāo)簽又會包含<td>標(biāo)簽，每個<td>代表一個單元格。

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

<tr>標(biāo)簽還可以被<table>里的<thead>或<tbody>或<tfoot>包含。它們分別代表表頭，表正文，表腳。在打印網(wǎng)頁的時候，如果表格很大，一頁打印不完，<thead>和<tfoot>將在每一頁出現(xiàn)。
<th>和<td>非常相似，也用在<tr>里邊，不同的是<th>代表這個單元格是它所在的行或列的標(biāo)題。

<table>
  <thead>
    <tr><th>時間</th><th>地點</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2008</td><td>北京</td></tr>
  </tbody>
</table>

列表
表格用于表示二維數(shù)據(jù)（行，列），一維數(shù)據(jù)則用列表表示。列表可以分為無序列表（<ul>），有序列表（<ol>）和定義列表（<dl>）。前兩種列表更常見一些，都用<li>標(biāo)簽包含列表項目。
無序列表表示一系列類似的項目，它們之間沒有先后順序。

<ul>
  <li>牛奶</li>
  <li>開啡</li>
  <li>綠茶</li>
</ul>

有序列表中各個項目間的順序是很重要的，瀏覽器通常會自動給它們產(chǎn)生編號。

<ol>
  <li>打開瀏覽器</li>
  <li>輸入www.w3cschool.cn</li>
  <li>敲下回車</li>
</ol>

框架
最后談一下框架，曾經(jīng)非常流行的技術(shù)，框架使一個窗口里能同時顯示多個文檔。主框架頁里面沒有<body>標(biāo)簽，取代它的是<frameset>。
<frameset>標(biāo)簽的屬性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（寬度）。
<frameset>標(biāo)簽可以包含<frame>標(biāo)簽，每個<frame>標(biāo)簽代表一個文檔（src屬性指定文檔的地址）。
如果覺得這樣的頁面還不夠復(fù)雜的話，還可以在<frameset>標(biāo)簽里包含<frameset>標(biāo)簽。

<frameset rows="15%,*">
  <frame src="top.html" name=title scrolling=no>
    <frameset cols="20%,*">
    <frame src="left.html" name=sidebar>
    <frame src="right.html" name=recipes>
  </frameset>
</frameset>

查看所有HTML標(biāo)簽

八、編程實戰(zhàn)訓(xùn)練

W3Cschool還為各位初學(xué)者提供了像玩游戲一樣學(xué)習(xí)編程的編程實戰(zhàn)訓(xùn)練工具。


開始像玩游戲?qū)W習(xí)HTML

九、入門以后該學(xué)什么

這篇文章只是讓從沒有接觸過HTML的人對HTML有個初步的印象，還有很多東西需要學(xué)習(xí)。本文并沒有列出HTML中所有的標(biāo)簽，對于列出的標(biāo)簽也沒有介紹它們的全部屬性。另外，沒有提到的東西里還包括我覺得非常重要的CSS, JavaScript, XHTML, XML, Web Standards，以及它們與HTML的關(guān)系。不過這些也不太可能在一篇文章內(nèi)學(xué)會，好在只要入了門，就能利用W3Cschool上很多資源和工具繼續(xù)學(xué)習(xí)。

十、最后

學(xué)習(xí)中如果遇到什么問題可以W3Cschool問答模塊HTML問答中向各位大牛求教哦~
推薦閱讀

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,520評論 1贊 41
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實現(xiàn)集...
    liusong007閱讀 1,144評論 0贊 1
  • HTML5 標(biāo)簽comment 注釋標(biāo)簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,227評論 1贊 25
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,095評論 1贊 92
  • 1 今天早晨晨間跑步3.5公里，看到了美麗的風(fēng)景！ 2 參加周檢視的晨間的分享會，分類統(tǒng)計出個人日記、每天的1分鐘...
    LiHongxi閱讀 156評論 0贊 0

友情鏈接更多精彩內(nèi)容