用 Notepad 或 TextEdit 來(lái)編寫(xiě) HTML
可以使用專業(yè)的 HTML 編輯器來(lái)編輯 HTML:
不過(guò),我們同時(shí)推薦使用文本編輯器來(lái)學(xué)習(xí) HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我們相信,使用一款簡(jiǎn)單的文本編輯器是學(xué)習(xí) HTML 的好方法。
通過(guò)記事本,依照以下四步來(lái)創(chuàng)建您的第一張網(wǎng)頁(yè)。
步驟一:?jiǎn)?dòng)記事本
如何啟動(dòng)記事本:
開(kāi)始
所有程序
附件
記事本
步驟二:用記事本來(lái)編輯 HTML
在記事本中鍵入 HTML 代碼:
步驟三:保存 HTML
在記事本的文件菜單選擇“另存為”。
當(dāng)您保存 HTML 文件時(shí),既可以使用 .htm 也可以使用 .html 擴(kuò)展名。兩者沒(méi)有區(qū)別,完全根據(jù)您的喜好。
在一個(gè)容易記憶的文件夾中保存這個(gè)文件,比如 w3school。
步驟四:在瀏覽器中運(yùn)行這個(gè) HTML 文件
啟動(dòng)您的瀏覽器,然后選擇“文件”菜單的“打開(kāi)文件”命令,或者直接在文件夾中雙擊您的 HTML 文件。
結(jié)果應(yīng)該類似這樣:
用 Notepad 或 TextEdit 來(lái)編寫(xiě) HTML
可以使用專業(yè)的 HTML 編輯器來(lái)編輯 HTML:
不過(guò),我們同時(shí)推薦使用文本編輯器來(lái)學(xué)習(xí) HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我們相信,使用一款簡(jiǎn)單的文本編輯器是學(xué)習(xí) HTML 的好方法。
通過(guò)記事本,依照以下四步來(lái)創(chuàng)建您的第一張網(wǎng)頁(yè)。
步驟一:?jiǎn)?dòng)記事本
如何啟動(dòng)記事本:
開(kāi)始
所有程序
附件
記事本
步驟二:用記事本來(lái)編輯 HTML
在記事本中鍵入 HTML 代碼:
步驟三:保存 HTML
在記事本的文件菜單選擇“另存為”。
當(dāng)您保存 HTML 文件時(shí),既可以使用 .htm 也可以使用 .html 擴(kuò)展名。兩者沒(méi)有區(qū)別,完全根據(jù)您的喜好。
在一個(gè)容易記憶的文件夾中保存這個(gè)文件
步驟四:在瀏覽器中運(yùn)行這個(gè) HTML 文件
啟動(dòng)您的瀏覽器,然后選擇“文件”菜單的“打開(kāi)文件”命令,或者直接在文件夾中雙擊您的 HTML 文件。
結(jié)果應(yīng)該類似這樣:
什么是 HTML?
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)
HTML 不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言 (markup language)
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
HTML 文檔描述網(wǎng)頁(yè)
HTML 文檔包含 HTML 標(biāo)簽和純文本
HTML 文檔也被稱為網(wǎng)頁(yè)
HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞,比如 <html>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如 <b> 和 </b>
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽
HTML 文檔 = 網(wǎng)頁(yè)
我們可以使用專業(yè)的 HTML 編輯器來(lái)編輯 HTML:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
下面我們用記事本來(lái)制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè):
第一步,打開(kāi)記事本
如何啟動(dòng)記事本:
開(kāi)始
所有程序
附件
記事本
第二步,在記事本中編輯HTML語(yǔ)言,如圖:
第三步,保存 HTML
在記事本的文件菜單選擇“另存為”。
當(dāng)您保存 HTML 文件時(shí),既可以使用 .htm 也可以使用 .html 擴(kuò)展名。
第四步,在瀏覽器中運(yùn)行這個(gè) HTML 文件
啟動(dòng)您的瀏覽器,然后選擇“文件”菜單的“打開(kāi)文件”命令,或者直接在文件夾中雙擊您的 HTML 文件。
結(jié)果應(yīng)該類似這樣:
這樣,一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)就成了。
網(wǎng)頁(yè)制作時(shí)用什么來(lái)表示標(biāo)題呢?下面我們來(lái)看看:
HTML 標(biāo)題
標(biāo)題(Heading)是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。
<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
注釋:瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。
注釋:默認(rèn)情況下,HTML 會(huì)自動(dòng)地在塊級(jí)元素前后添加一個(gè)額外的空行,比如段落、標(biāo)題元素前后。
HTML 水平線
<hr /> 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容。
提示:使用水平線 (<hr> 標(biāo)簽) 來(lái)分隔文章中的小節(jié)是一個(gè)辦法(但并不是唯一的辦法)。
HTML 注釋
可以將注釋插入 HTML 代碼中,這樣可以提高其可讀性,使代碼更易被人理解。瀏覽器會(huì)忽略注釋,也不會(huì)顯示它們。
注釋是這樣寫(xiě)的:
注釋:開(kāi)始括號(hào)之后(左邊的括號(hào))需要緊跟一個(gè)嘆號(hào),結(jié)束括號(hào)之前(右邊的括號(hào))不需要。
提示:合理地使用注釋可以對(duì)未來(lái)的代碼編輯工作產(chǎn)生幫助。
HTML 段落
段落是通過(guò) <p> 標(biāo)簽定義的。
注釋:瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。(<p> 是塊級(jí)元素)
提示:使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣。用 <br /> 標(biāo)簽代替它!(但是不要用 <br /> 標(biāo)簽去創(chuàng)建列表。不要著急,您將在稍后的篇幅學(xué)習(xí)到 HTML 列表。)
折行有什么用呢?
當(dāng)然折行的主要目的是調(diào)整網(wǎng)頁(yè)布局,讓它看起來(lái)更美觀大方。
如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行(新行),請(qǐng)使用 <br /> 標(biāo)簽:
<br /> 元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒(méi)有任何意義,因此它沒(méi)有結(jié)束標(biāo)簽。
background-color 屬性為元素定義了背景顏色:
<html><body style="background-color:yellow"><h2 style="background-color:red">This is a heading</h2><p style="background-color:green">This is a paragraph.</p></body></html>
font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸:
<html><body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body></html>
text-align 屬性規(guī)定了元素中文本的水平對(duì)齊方式。
下面我們看看中,右,左的三種對(duì)齊方式演示:
1.HTML <q> 元素定義短的引用。
瀏覽器通常會(huì)為 <q> 元素包圍引號(hào)。
2.用于長(zhǎng)引用的 HTML <blockquote>
HTML <blockquote> 元素定義被引用的節(jié)。
瀏覽器通常會(huì)對(duì) <blockquote> 元素進(jìn)行縮進(jìn)處理。
什么是超鏈接?超鏈接就是從一個(gè)頁(yè)面到另一個(gè)頁(yè)面之間跳轉(zhuǎn)的方式。
超鏈接可以是一個(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)橐恢恍∈帧?/p>
我們通過(guò)使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。
有兩種使用 <a> 標(biāo)簽的方式:
<a >Visit Baidu</a>
上面這行代碼顯示為:Visit Baidu
點(diǎn)擊這個(gè)超鏈接會(huì)把用戶帶到 Baidu 的首頁(yè)。
提示:"鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
鏈接屬性
使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。