深入解讀-如何用HTML創(chuàng)建一個(gè)簡單網(wǎng)頁_第1頁
深入解讀-如何用HTML創(chuàng)建一個(gè)簡單網(wǎng)頁_第2頁
深入解讀-如何用HTML創(chuàng)建一個(gè)簡單網(wǎng)頁_第3頁
深入解讀-如何用HTML創(chuàng)建一個(gè)簡單網(wǎng)頁_第4頁
深入解讀-如何用HTML創(chuàng)建一個(gè)簡單網(wǎng)頁_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

深入解讀-如何用HTML創(chuàng)建一個(gè)簡單網(wǎng)頁

本文會教你用HTML（超文本標(biāo)記語言）創(chuàng)建一個(gè)簡單的網(wǎng)頁。HTML是萬維網(wǎng)的核心組成之一，用來建立網(wǎng)頁的結(jié)構(gòu)。建好網(wǎng)頁后，可以將它保存為HTML文檔，在網(wǎng)頁瀏覽器中查看。只要用Windows和Mac電腦自帶的基礎(chǔ)文本編輯器，就能創(chuàng)建出HTML頁面。步驟部分1添加頭部元素1打開一個(gè)文本編輯器。Windows用戶通常可以使用Notepad（記事本）或Notepad++，而macOS用戶則可以使用TextEdit：Windows—打開開始菜單，輸入notepad或notepad++，然后點(diǎn)擊窗口頂端的Notepad或“Notepad++或sublime”。macOS—點(diǎn)擊聚焦，輸入textedit，然后點(diǎn)擊搜索結(jié)果頂端的TextEdit。ChromeOS—打開啟動器，然后點(diǎn)擊文本。（寫著“源代碼查看器”字樣的圖標(biāo)）。2輸入<!DOCTYPEhtml>，然后按?Enter鍵。它會告訴瀏覽器這是一個(gè)HTML文檔。3輸入<html>，然后按?Enter鍵。這是HTML代碼的開始標(biāo)簽。4輸入<head>，然后按?Enter鍵。這是HTML頭部元素的開始標(biāo)簽。HTML的頭部元素包括標(biāo)題、元數(shù)據(jù)、CSS樣式表和其它腳本語言，通常都不會在網(wǎng)頁中顯示。[1]5輸入<title>。這個(gè)標(biāo)簽定義網(wǎng)頁的標(biāo)題。6輸入網(wǎng)頁標(biāo)題。任何標(biāo)題都行。7輸入</title>，然后按?Enter鍵。這是標(biāo)題的結(jié)束標(biāo)簽。8輸入</head>，然后按?Enter鍵。這是頭部元素的結(jié)束標(biāo)簽。你的HTML代碼現(xiàn)在應(yīng)該看起來像這樣：<!DOCTYPEhtml><html><head><title>我的網(wǎng)頁</title></head>部分2添加主體元素1在“Head”結(jié)束標(biāo)簽底下輸入<body>。這是HTML文檔主體的開始標(biāo)簽，里面的所有內(nèi)容都會在網(wǎng)頁中顯示。2輸入<h1>標(biāo)簽，給HTML文檔添加標(biāo)題。標(biāo)題是加粗顯示的大號文本，通常位于HTML文檔頂端。3輸入網(wǎng)頁標(biāo)題，可以是頁面標(biāo)題或一句問候。4輸入</h1>，然后按?Enter鍵。這是標(biāo)題的結(jié)束標(biāo)簽。根據(jù)網(wǎng)頁內(nèi)容添加更多標(biāo)題。你可以用<h1></h1>到<h6></h6>標(biāo)簽，總共添加6種不同的標(biāo)題。每個(gè)標(biāo)題的尺寸都不一樣。比如說，要連續(xù)添加3個(gè)尺寸不同的標(biāo)題，可以這樣寫：<h1>歡迎來到我的網(wǎng)頁！</h1><h2>我是小麗。</h2><h3>希望你喜歡這里。</h3>標(biāo)題顯示了文本的優(yōu)先等級或重要程度。但是，不一定要從最高等級的標(biāo)題開始，你隨時(shí)可以使用低等級的標(biāo)題。即使文本里面沒有H1，也可以直接使用H3。5輸入<p>標(biāo)簽來打開一個(gè)段落。段落中的文本會以標(biāo)準(zhǔn)字號顯示。6輸入一些文本，可以是網(wǎng)頁描述或你想分享的其它信息。7在文本結(jié)尾輸入</p>來結(jié)束段落，然后按?Enter鍵。下面是HTML中的段落示例：<p>這是一個(gè)段落。</p>你可以連續(xù)添加多行段落，在一個(gè)標(biāo)題下創(chuàng)建多段內(nèi)容。在文本前后分別添加<fontcolor="color">和</font>標(biāo)簽，就能更改文本顏色。在“color”部分輸入你想使用的顏色，保留引號。你可以用這組標(biāo)簽改變?nèi)魏挝谋镜念伾?，包括?biāo)題。比如說，如果要將某段文本改成藍(lán)色，代碼應(yīng)該這樣寫：<p><fontcolor="blue">鯨魚是雄偉的生物。</font></p>你也可以用HTML語言添加粗體、斜體和其它文本格式。下面是一些示例：[2]<b>粗體</b><i>斜體</i><u>下劃線</u><sub>下標(biāo)</sub><sup>上標(biāo)</sup>如果使用粗體和斜體并不是為了設(shè)計(jì)文本樣式，而是要重點(diǎn)突出某個(gè)內(nèi)容，可以用<strong>和<em>元素，代替<b>和<i>。這樣屏幕閱讀器[3]或某些瀏覽器的閱讀模式會更容易讀出網(wǎng)頁內(nèi)容。[4].部分3添加更多元素1添加圖片到網(wǎng)頁。你可以按照下面的步驟添加圖片到HTML文檔：輸入<imgsrc=打開圖片標(biāo)簽。復(fù)制圖片網(wǎng)址，將它粘貼到“=”后面，并用引號包圍。在圖片網(wǎng)址后面輸入>來關(guān)閉圖片標(biāo)簽。舉個(gè)例子，如果圖片網(wǎng)址是"/lake"，你應(yīng)該這樣寫：<imgsrc="/lake.jpg">2鏈接到其它網(wǎng)頁。你可以按下面的步驟在HTML文檔中添加鏈接：輸入<ahref=來打開鏈接標(biāo)簽。復(fù)制網(wǎng)址，將它粘貼在“=”符號后面，并用引號包圍。在網(wǎng)址后面輸入>來關(guān)閉鏈接。在關(guān)閉括號后面輸入鏈接的名稱。在鏈接名稱后面，輸入</a>來關(guān)閉鏈接標(biāo)簽。[5]下面是添加Facebook鏈接的示例：<ahref="">Facebook</a>.3添加換行符。輸入<br>到HTML文檔，就能插入換行符，加一條水平分割線來間隔頁面的不同部分。部分4自定義顏色1查看官方HTML顏色名稱和代碼列表。萬維網(wǎng)聯(lián)盟（W3C）制定了一份官方的顏色列表，你可以在/wiki/CSS/Properties/color/keywords上找到這份列表。每種顏色都有一個(gè)官方名稱、6位的十六進(jìn)制代碼以及一個(gè)十進(jìn)制值。你可以用任意這些值來為網(wǎng)頁元素添加顏色。在本例中，我們將使用官方的顏色名稱。2在<body>標(biāo)簽中設(shè)置背景顏色。你可以通過在標(biāo)簽中添加style屬性來實(shí)現(xiàn)。比如說，你要讓整個(gè)頁面的背景顏色變成lavender：<bodystyle="background-color:lavender;">3為任何標(biāo)簽設(shè)定文本顏色。你也可以使用style屬性來指定某個(gè)特定標(biāo)簽中所有文本的顏色。比如，假設(shè)你要把<p>標(biāo)記中的文本設(shè)成midnightblue：<pstyle="color:midnightblue;">顏色變化只會影響<p>標(biāo)簽內(nèi)的文字。如果你稍后又開始了一個(gè)<p>標(biāo)簽并且也要設(shè)成midnightblue，那就也得在相應(yīng)位置設(shè)定樣式屬性。4為頁眉或段落設(shè)置背景顏色。和設(shè)置正文標(biāo)簽的背景顏色的方法類似，你也可以為其他標(biāo)簽設(shè)置背景顏色。比方說，要把<p>的背景顏色設(shè)為lightgrey，并且把H1風(fēng)格頁眉的背景顏色設(shè)為lightskyblue，則可以使用：<pstyle="background-color:lightgrey;"><h1style="background-color:lightskyblue;">部分5結(jié)束HTML文檔1輸入</body>關(guān)閉主體元素。添加了所有文本、圖片和其它元素后，在HTML文檔的低端插入這個(gè)標(biāo)簽，關(guān)閉HTML文檔的主體元素。2輸入</html>來關(guān)閉HTML文檔。在主體元素的結(jié)束標(biāo)簽底下插入這個(gè)標(biāo)簽，告訴網(wǎng)頁瀏覽器HTML代碼到此結(jié)束。整個(gè)HTML文檔應(yīng)該看起來像這樣：<!DOCTYPEhtml><html><head><title>wikiHow粉絲頁</title></head><body><h1>歡迎來到我的網(wǎng)頁！</h1><p>這是wikiHow的粉絲頁，歡迎你隨便逛逛，把這里當(dāng)作自己的家！</p><h2>重要日期</h2><p><i>2019年1月15日</i>—wikiHow的生日</p><h2>鏈接</h2><p>wikiHow網(wǎng)站鏈接:<ahref="">wikiHow</a></p></body></html>部分6保存和打開網(wǎng)頁1將文檔轉(zhuǎn)換成純文本（僅Mac用戶）。點(diǎn)擊屏幕頂端的格式菜單項(xiàng)，從出現(xiàn)的下拉菜單中，點(diǎn)擊轉(zhuǎn)換為純文本。Windows電腦不需要進(jìn)行這一步。2點(diǎn)擊文件。它就在屏幕頂端的菜單欄里面。3點(diǎn)擊另存為。它就在“文件”底下的下拉菜單中。你也可以同時(shí)按Ctrl+S（Windows），或?Command+S（Mac）進(jìn)行這項(xiàng)操作。4給HTML文檔命名。在“文件名”（Windows）或“名稱”（Mac）文本框中，輸入你想給文檔取的名稱。5更改文檔的文件類型。你需要將文檔從文本文件更改為HTML文件。按照下面的步驟更改文件類型：Windows—點(diǎn)擊“保存類型”下拉框，點(diǎn)擊所有文件，然后在文件名后面輸入.html。Mac—將文件名后面的.txt更改為.html。6點(diǎn)擊窗口底部的保存。這就成功創(chuàng)建了HTML文件。HTML文件通常會用默認(rèn)的網(wǎng)頁瀏覽器打開。7關(guān)閉文本編輯器。這時(shí)候，你就可以用瀏覽器打開HTML文件，查看自己的網(wǎng)頁了。8用瀏覽器打開HTML文檔。大多數(shù)時(shí)候，雙擊HTML文檔就能自動打開它。如果雙擊文檔后彈出錯(cuò)誤信息，按下面的指示操作：Windows—右擊文檔，點(diǎn)擊打開方式，然后點(diǎn)擊你首選的網(wǎng)頁瀏覽器。Mac—單擊文檔，點(diǎn)擊文件，選擇打開方式，然后點(diǎn)擊你首選的網(wǎng)頁瀏覽器。9必要時(shí)編輯HTML文檔。你可能發(fā)現(xiàn)HTML網(wǎng)頁有錯(cuò)誤。按下面的方式編輯文檔，修改錯(cuò)誤：在Windows電腦，右擊文檔，從出現(xiàn)的下拉菜單中，點(diǎn)擊編輯。如果你安裝了Notepad++，點(diǎn)擊使用Notepad++進(jìn)行編輯。在Mac電腦，單擊文檔來選中它，點(diǎn)擊文件，選擇打開方式，然后點(diǎn)擊TextEdit。你也可以直接將文檔拖放到TextEdit。小提示每個(gè)開始標(biāo)簽都必須按鏡像順序匹配一個(gè)結(jié)束標(biāo)簽。比如，用了<tag1><tag2>標(biāo)簽后，必須以</tag2></tag1>結(jié)束。你可以用<marquee></marq

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論