HTML（Hypertext Markup Language），即超文本標(biāo)記(jì)語言，是一種用於(yú)描述(shù)網(wǎng)頁文檔的(dí)標記(jì)語言(yán)。
HTML是學習(xí)網(wǎng)頁製(zhì)作的(dí)基(jī)礎，製(zhì)作簡單，但(dàn)是功能強(qiáng)大(dà)。這(zhè)篇文章(zhāng)是針對(duì)初(chū)學者學(xué)習網(wǎng)頁製作(zuò)的，簡(jiǎn)明(míng)扼要(yào)，通(tōng)俗易懂(dǒng)。
一，使用 html的(dí)基(jī)本規則，隻(zhī)做第(dì)一(yī)個(gè)頁麵。
<html>
<head>
<title>我的第一(yī)個(gè)網頁(yè)</title>
………………………..
</head>
<body>
………………….
</body>
</html>
html語(yǔ)言以< >開始，以(yǐ)</ >結束，我(wǒ)們稱之為(wéi)一對標簽。每(měi)個網頁都是(shì)由無數對標簽(qiān)組(zǔ)成的(dí)，多(duō)數(shù)網(wǎng)頁(yè)都(dū)是按照(zhào)上麵的(dí)這(zhè)個格式來編(biān)程的，在省略(lüè)號(hào)的地(dì)方我(wǒ)們可以(yǐ)添加(jiā)一(yī)些其他的(dí)樣(yàng)式，豐(fēng)富我們(mén)的(dí)網頁內容(róng)。
首先(xiān)，復(fù)製(zhì)上(shàng)麵的代碼到一(yī)個(gè)記事本，然(rán)後(hòu)另(lìng)存為text.html文件，就成了(liǎo)一(yī)個網頁文檔。
然後，以(yǐ)記事本方式打開(kāi)，在(zài)<body>之間加上“歡(huān)迎進入(rù)我的第(dì)一個(gè)頁麵(miàn)”，保(bǎo)存。
最(zuì)後，用(yòng)瀏覽器(qì)打開這(zhè)個文件，你會(huì)看(kàn)到(dào)這(zhè)樣(yàng)的(dí)效果圖：
二，在頁麵中添加(jiā)鏈(liàn)接
記(jì)事本(běn)格(gé)式打開剛(gāng)才的(dí)文件，將“歡迎(yíng)進(jìn)入我(wǒ)的第(dì)一個頁(yè)麵”改(gǎi)為(wéi)“進(jìn)入(rù)淘寶(bǎo)”，然後(hòu)在(zài)的“進(jìn)入淘寶(bǎo)”前(qián)後加上(shàng)標(biāo)記(jì)<a> ，變(biàn)為 <a href=”http://www.taobao.com/”>進入淘寶</a>,保(bǎo)存(cún)。
這(zhè)就是(shì)我(wǒ)們平(píng)時(shí)上網(wǎng)看(kàn)到的(dí)超鏈接了，隨意變換網址就可(kě)以到不同(tóng)的(dí)鏈接(jiē)。
三(sān)， 網(wǎng)頁(yè)結構
如果你上網時注(zhù)意(yì)的(dí)話，其(qí)實(shí)網頁(yè)都(dū)是分塊的，如圖所示：
當(dāng)然這隻是一(yī)個大(dà)致的(dí)結構(gòu)，你(nǐ)還可以(yǐ)根據需要分成(chéng)很多塊，分塊主(zhǔ)要(yào)是(shì)為了(liǎo)修(xiū)改(gǎi)方麵及確(què)定各(gè)自(zì)的(dí)表現樣式(shì)。
這主要通過(guò)<div></div>標記(jì)來實(shí)現(xiàn)，下麵我(wǒ)在 “首頁”加上(shàng)<div>標(biāo)記(jì)試(shì)試：
<div>
<a href=”b.html”>首(shǒu)頁</a>
</div>
保存(cún)，在打(dǎ)開試(shì)試，什麼(mó)效果(guǒ)呢(ní)？
是不是還是(shì)和修改之(zhī)前(qián)一樣(yàng)呢，下(xià)麵(miàn)我們為(wéi)其(qí)加(jiā)上一(yī)些(xiē)修飾(shì)：
<div style=”width:200px;height:100px;border-style:solid;” >
在運(yùn)行(háng)，我們(mén)標記的這一(yī)塊(kuài)就以藍色(sè)背景表(biǎo)示出來啦(lā)！
在加入很多的(dí)<div></div>塊(kuài)就可(kě)以將網(wǎng)頁大卸八塊了(liǎo)，呵(hē)呵(hē)，然後(hòu)在(zài)你每(měi)個(gè)塊裏放(fàng)上你(nǐ)想放的(dí)東西(xī)即可。
當然，很多個(gè)<div>都加上style=””,如果(guǒ)這(zhè)些style設(shè)置(zhì)都差不多的話(huà)，我(wǒ)們每一個設(shè)置(zhì)就太麻煩(fán)了，我們一(yī)般將style這些(xiē)放(fàng)在另(lìng)外的.css文(wén)件(jiàn)（控製網(wǎng)頁(yè)中各(gè)標(biāo)記的顯示樣式(shì)）中，然(rán)後進行需(xū)要調用的(dí)地(dì)方(fāng)進行調用(yòng)，下麵來(lái)試試(shì)
新建一(yī)個記(jì)事(shì)本(běn)，重(zhòng)命名(míng)為c.css然後(hòu)打(dǎ)開(kāi)，寫(xiě)入：
#header{width:200px;height:100px;border-style:solid;}
並(bìng)將其在a.html裏刪掉(diào)
然(rán)後(hòu)再</head>前加(jiā)入(rù) <link rel="stylesheet" type="text/css" href="c.css" />
也(yě)就是將c.css這(zhè)個(gè)文件引(yǐn)入(rù)進來。將css放入單獨的(dí)文件(jiàn)好(hǎo)處(chǔ)是(shì)：如果(guǒ)很(hěn)多地(dì)方(fāng)都(dū)引(yǐn)用了(liǎo)這(zhè)個(gè)樣(yàng)式，我們隻(zhī)要(yào)修改這一個(gè)地方，就(jiù)全(quán)部都(dū)變(biàn)化(huà)了，不然我(wǒ)們得手動修改每一(yī)處，不(bù)利於(yú)後期維護。
最(zuì)後(hòu)將a.html的<div> 改為(wéi)<div id=header>
效果(guǒ)是(shì)不是(shì)和之前(qián)一(yī)樣(yàng)呢？
差(chà)不多，到(dào)這(zhè)裏(lǐ)，應該“不會作詩也(yě)會(huì)吟”了吧，這篇文章主要是為了讓大家從總體(tǐ)上對html有(yǒu)個了解(jiě)，知(zhī)道(dào)大(dà)概(gài)是怎麼回事(shì)，還有很(hěn)多(duō)標(biāo)記(jì)都沒(méi)涉(shè)及(jí)到(dào)，這個(gè)就(jiù)需(xū)要(yào)你找本網頁設計的書來看(kàn)一(yī)看，背(bèi)一(yī)背了。
轉載(zǎi)請(qǐng)保(bǎo)留原文(wén)地(dì)址(zhǐ): https://antelcom.cn/show-309.html