兩招教會(huì)你制作屬于自己的靜態(tài)網(wǎng)頁
時(shí)間：2022-08-30 14:27:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2022-08-30 14:27:01 來源：網(wǎng)站運(yùn)營
制作網(wǎng)頁不需要安裝任何程序語言編輯器， 所以不用擔(dān)心因?yàn)樘觳粫r(shí)、地不利、網(wǎng)不速，編輯器安裝半天還沒安裝成功，你就已經(jīng)沒熱情學(xué)習(xí)了。
制作網(wǎng)頁只需要打開電腦系統(tǒng)自帶的記事本，對的你沒聽錯(cuò)，就是那個(gè)生成TXT 純文本文檔的小小記事本。
在記事本中寫入網(wǎng)頁的標(biāo)簽代碼，然后將這個(gè) TXT 文檔另存為后綴名為.html 的文件。
噔！ 噔！ 噔！雙擊打開下面這個(gè) HTML 文件，你就可以在瀏覽器看見自己親手制作的網(wǎng)頁啦。（要注意的是，文件圖標(biāo)會(huì)隨著電腦默認(rèn)瀏覽器的不同而改變）
學(xué)習(xí)制作一個(gè)靜態(tài)網(wǎng)頁需要掌握 HTML、CSS 語言。下面我們就來了解一下這兩個(gè)語言是分別用來實(shí)現(xiàn)什么的。
1. HTML 是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓別人瀏覽的信息，
包含文字、圖片、鏈接等。
2. CSS 是樣式表現(xiàn)，就像是網(wǎng)頁的外衣。比如，字體的選擇、大小和顏色變化，或插入圖片、邊框等，這些用來改變網(wǎng)頁外觀的東西稱之為表現(xiàn)。
如果將靜態(tài)網(wǎng)頁比做一個(gè)人的話，HTML 就是人的四肢、眼睛和骨頭這種實(shí)質(zhì)性的東西，CSS 就是衣服、配飾和妝容等把人打扮得漂漂亮亮的表現(xiàn)。
HTML 是 HyperText Markup Language（超文本標(biāo)記語言）的縮寫，是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言，使用標(biāo)記標(biāo)簽描述網(wǎng)頁中的文字、圖片、鏈接等，標(biāo)記標(biāo)簽由開始標(biāo)簽< >和結(jié)束標(biāo)簽</ >組成，兩者中間填入內(nèi)容。
很官方？看不懂？沒關(guān)系，我舉一個(gè)例子你就可以 get 到了。下面是本站的一個(gè)登錄頁面。
我們可以看到，這個(gè)登錄頁面主要包括主標(biāo)題“本站”、副標(biāo)題“與世界分享你的知識、經(jīng)驗(yàn)和見解”、兩個(gè)輸入框和“登錄”按鈕。HTML 是表示內(nèi)容和語義的，它不僅確定網(wǎng)頁有哪些文本內(nèi)容，而且還用標(biāo)記標(biāo)簽告訴瀏覽器哪些文本是標(biāo)題，哪些文本是按鈕，哪里放置輸入框，甚至哪里需要放置圖片。比如，“本站”這兩個(gè)字的語義是主標(biāo)題，所以它在頁面中字體最大。HTML中主標(biāo)題（一級標(biāo)題）的標(biāo)記標(biāo)簽是<h1> </h1>，所以要將“本站”兩個(gè)字賦予主標(biāo)題的語義，可以在記事本中這樣寫：<h1>本站</h1>。
打開你電腦的記事本，把下面這段代碼復(fù)制到記事本中吧，我們開始一步一步來制作網(wǎng)頁。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>自我介紹</title></head><body><h1>名字：</h1><h2>性別：</h2><h2>生日：</h2><h2>班級：</h2><p>興趣愛好：</p></body></html>我先介紹一下HTML 的基本結(jié)構(gòu)：
<!DOCTYPE html>定義這個(gè)網(wǎng)頁是用 HTML 語言制作的。
<html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都要嵌套在<html></html>中，標(biāo)記著HTML 的開始和結(jié)束。
<head></head>表示 HTML 的頭部，描述 HTML 文檔的各種屬性和信息，包括網(wǎng)頁的標(biāo)題、CSS 樣式通過<style>標(biāo)簽嵌套在頭部等。絕大多數(shù) HTML 文檔頭部放置的內(nèi)容都不會(huì)顯示出來給網(wǎng)頁瀏覽者看到。
<body></body>表示 HTML 的主體，展示給網(wǎng)頁瀏覽者看的文字、圖片和鏈接等都要放在<body>標(biāo)簽里面。
<meta charset="utf-8">定義網(wǎng)頁的字符集，不用太糾結(jié)是什么意思，它的作用就是使網(wǎng)頁不會(huì)亂碼。但要注意的是，你在將記事本文檔另存為.html文件時(shí)，也要把文件的字符集設(shè)為utf-8。
<title>自我介紹</title>標(biāo)記整個(gè)網(wǎng)頁的標(biāo)題，出現(xiàn)在瀏覽器窗口頂部的標(biāo)題欄。
<h1> </h1>和<h2> </h2>分別標(biāo)記網(wǎng)頁的一級標(biāo)題、二級標(biāo)題，HTML一共有<h1>、<h2>、<h3>、<h4>、<h5>和<h6>六級標(biāo)題，h后面的數(shù)字?jǐn)?shù)字越大，標(biāo)題字號越小。
標(biāo)簽代碼：
在瀏覽器中顯示：
<p> </p>標(biāo)記一個(gè)段落，如果想在網(wǎng)頁上顯示文章，就需要<p>標(biāo)簽了，把文章的段落放到<p>標(biāo)簽中。
標(biāo)簽代碼：
在瀏覽器中顯示：
還記得你剛剛復(fù)制粘貼在記事本的代碼嗎？現(xiàn)在輪到你來動(dòng)手啦。在代碼的相應(yīng)標(biāo)簽中寫入自己的信息，然后另存為.html文件，用瀏覽器打開看一下你的自我介紹網(wǎng)頁吧。
一個(gè)網(wǎng)頁不可能只有文字，還應(yīng)該會(huì)包含一些圖片和超鏈接等。
定義圖片的標(biāo)簽是<img src="圖片地址">。<img>是一個(gè)空標(biāo)簽，空標(biāo)簽的意思就是只有開始標(biāo)簽，沒有結(jié)束標(biāo)簽。src 指向圖片的地址，地址要放在雙引號內(nèi)，圖片地址可以是電腦的本地文件也可以是網(wǎng)上的在線圖片，我推薦使用在線圖片的地址。
在一張圖片上右擊，選擇“復(fù)制圖片地址”。
現(xiàn)在來嘗試一下吧，在你的自我介紹網(wǎng)頁放一張你自己的照片。此時(shí)要再次編輯.html文件的話，右擊文件選擇“打開方式”為“記事本”，就可以再次編輯標(biāo)簽代碼了。
我想在網(wǎng)頁中添加一張編玩邊學(xué)的圖片，看一下我怎么做的吧。
標(biāo)簽代碼：
在瀏覽器中顯示：
我們在瀏覽網(wǎng)頁時(shí)，點(diǎn)擊藍(lán)色帶下劃線的字體時(shí)可以鏈接到另一個(gè)網(wǎng)頁，這是用<a>標(biāo)簽實(shí)現(xiàn)的：
<a href="目標(biāo)網(wǎng)址"target="_blank" >文本</a>，target=”_blank”表示在新的空白頁打開鏈接的網(wǎng)頁。
我們來嘗試一下，在網(wǎng)頁中添加一個(gè)“點(diǎn)擊這里了解更多”的文本鏈接到編玩邊學(xué)的官網(wǎng)主頁，你也可以選擇鏈接到自己喜歡的網(wǎng)頁。
標(biāo)簽代碼：
在瀏覽器中顯示：
點(diǎn)擊之后：
快試一下在你自己的自我介紹網(wǎng)頁中加入鏈接到喜歡的網(wǎng)頁入口吧，比如你自己的QQ空間主頁或者部落主頁。
學(xué)到這里，相信你已經(jīng)可以用HTML語言制作一個(gè)簡單的靜態(tài)網(wǎng)頁了。
但，當(dāng)你打開用HTML制作的網(wǎng)頁時(shí)，你會(huì)忍不住內(nèi)心ｏｓ：emmmmmm，這頁面也太原始了吧，不符合現(xiàn)代人的審美啊。
前面提到的本站登錄頁面，如果只用ＨＴＭＬ語言編寫，沒有ＣＳＳ樣式，它是長這樣的。
這是因?yàn)镠TML只表示網(wǎng)頁的內(nèi)容和語義，并不會(huì)幫你把網(wǎng)頁打扮得漂漂亮亮的。所以我們還需要學(xué)習(xí)用CSS裝飾網(wǎng)頁的內(nèi)容。
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、對齊方式、字體加粗等。
CSS樣式通過<style></style>標(biāo)簽嵌套在ＨＴＭＬ的頭部控制網(wǎng)頁內(nèi)容的樣式。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>自我介紹</title><style type="text/css"> </style></head>CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成。
選擇符又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的標(biāo)簽，如上圖的例子就是把網(wǎng)頁中所有段落（p）的文字顏色變成藍(lán)色，而其他標(biāo)簽不會(huì)受到影響。
在英文大括號“｛｝”中的就是聲明，屬性是指字體大小、顏色、對齊方式等，值是指字體具體有多大。顏色具體是哪個(gè)等。屬性和值之間用英文冒號“：”分隔，當(dāng)有多條聲明時(shí)，中間可以英文分號“;”分隔。
在這里我們主要講幾種ＣＳＳ常用的屬性。
網(wǎng)頁的字體屬性是font-family，常用的值有ＳｉｍＳｕｎ（宋體）?。樱椋恚龋澹椋ê隗w） Microsoft Yahei（微軟雅黑）?。耍幔椋裕椋w）
我們來嘗試一下，將前面做的自我介紹網(wǎng)頁的字體設(shè)置為常用的微軟雅黑字體。整個(gè)網(wǎng)頁的字體包含在<body>標(biāo)簽中，所以選擇符為body.
標(biāo)簽代碼：
在瀏覽器中顯示：
字體大小的屬性是font-size，它的值常用的單位是px（像素），px的值越大字號越大；
字體顏色的屬性是color，你可以將它的值設(shè)置為你喜歡的顏色。
用代碼將自我介紹網(wǎng)頁中段落<p>的字號放大一點(diǎn)，并將整個(gè)網(wǎng)頁<body>的字體顏色設(shè)置為與編玩邊學(xué)圖片相似的藍(lán)色。段落的選擇符為p,整個(gè)網(wǎng)頁的選擇符為body。
標(biāo)簽代碼：
在瀏覽器中顯示：
我們還可以給網(wǎng)頁中的某部分增加一個(gè)邊框。
邊框樣式的屬性是border-style，常用的值有solid（實(shí)線）和
dotted（虛線）
邊框?qū)挾鹊膶傩允莃order-width，它的值常用單位也是px（像素）
邊框顏色屬性是border-color，你可以設(shè)置成自己喜歡的顏色。
我想給名字的部分加一個(gè)紅色的實(shí)線邊框，所以選擇符是h1。
標(biāo)簽代碼：
在瀏覽器中顯示：
美化網(wǎng)頁的CSS屬性有很多種類，而且方法也不只一種，在這里無法一一詳述?？齑蜷_記事本為你剛剛制作的自我介紹網(wǎng)頁添加一些好看的CSS樣式吧。
雙擊打開html文件你會(huì)發(fā)現(xiàn)之前不忍直視的網(wǎng)頁變得好看了哦。給自己點(diǎn)個(gè)贊吧！
以上內(nèi)容轉(zhuǎn)自編程少年青少年編程愛好者學(xué)習(xí)交流社區(qū) - 編程少年
在線咨詢
