《Web前端開發(fā)項(xiàng)目教程》認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)-制作第一個(gè)網(wǎng)頁(yè)_第1頁(yè)
《Web前端開發(fā)項(xiàng)目教程》認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)-制作第一個(gè)網(wǎng)頁(yè)_第2頁(yè)
《Web前端開發(fā)項(xiàng)目教程》認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)-制作第一個(gè)網(wǎng)頁(yè)_第3頁(yè)
《Web前端開發(fā)項(xiàng)目教程》認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)-制作第一個(gè)網(wǎng)頁(yè)_第4頁(yè)
《Web前端開發(fā)項(xiàng)目教程》認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)-制作第一個(gè)網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩14頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

任務(wù)01-2制作第一個(gè)網(wǎng)頁(yè)項(xiàng)目01認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)任務(wù)01-2：制作第一個(gè)網(wǎng)頁(yè)

知識(shí)點(diǎn)掌握HTML5文檔的基本格式理解Web標(biāo)準(zhǔn)

技能點(diǎn)學(xué)會(huì)使用HbuilderX創(chuàng)建簡(jiǎn)單網(wǎng)頁(yè)一、常用HTML編輯器1.記事本初學(xué)者學(xué)習(xí)寫HTML文件時(shí)經(jīng)常會(huì)用到的一個(gè)工具，因?yàn)榫W(wǎng)頁(yè)本身就是超鏈接文本文件，在記事本中鍵入HTML代碼后，在“文件”菜單選擇“另存為”命令，將文檔保存為.htm或者.html擴(kuò)展名的文件，使用瀏覽器打開就可以瀏覽網(wǎng)頁(yè)了。3一、常用HTML編輯器2.HbuilderXHBuilder是DCloud推出的一款支持HTML5的Web開發(fā)集成開發(fā)環(huán)境，主體由Java編寫，速度快，通過完整的語(yǔ)法提示和代碼輸入法、代碼塊等能大幅提升HTML、JS、CSS的開發(fā)效率。HBuilderX是HBuilder的下一代版本，官方自述為“輕如編輯器、強(qiáng)如IDE的合體版本”，體積小、靈活，而且由我國(guó)的前端開發(fā)人員編寫，使用方便。4一、常用HTML編輯器AdobeDreamweaverCSSublimeText3漢化版等5二、在Hbuilder中新建網(wǎng)頁(yè)三、HTML5的文檔結(jié)構(gòu)7頭部部分主體部分<html>…</html>標(biāo)簽標(biāo)記HTML文檔的開始和結(jié)束這部分包括標(biāo)題和其他說明信息。包括在<head>…</head>標(biāo)簽內(nèi)，一般來說，位于頭部的內(nèi)容都不會(huì)在網(wǎng)頁(yè)內(nèi)直接顯示這部分包含文本、圖像和鏈接。它包括在<body>…</body>標(biāo)簽內(nèi)文檔類型聲明<!DOCTYPEhtml><html><head>

<metacharset="utf-8"> <title></title>

</head> <body> <!--文檔主體，定義頁(yè)面顯示的內(nèi)容--></body></html>標(biāo)簽HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如<html>，也叫標(biāo)記雙標(biāo)簽：成對(duì)出現(xiàn),比如<body></body>,標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽單標(biāo)簽：<hr/><br/>單標(biāo)簽要添加斜杠，例如<br/>（空行）來關(guān)閉，不加在一些瀏覽器中也可以。HTML標(biāo)簽對(duì)大小寫不敏感，HTML5.0版本中，W3C明確規(guī)定，標(biāo)簽必須用小寫格式。<!DOCTYPE>聲明DOCTYPE是DocumentType（文檔類型）的簡(jiǎn)寫，在頁(yè)面中，用來指定頁(yè)面所使用的XHTML（或者HTML）的版本。只有確定了一個(gè)正確的DOCTYPE，XHTML里的標(biāo)識(shí)和CSS才能正常生效。<!DOCTYPEhtml>------聲明HTML5，大多網(wǎng)站都為html5<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN“-----聲明HTML4.01，有3種DTD（文檔類型定義）聲明可以選擇：過渡的（Transitional）、嚴(yán)格的（Strict）和框架的（Frameset）。過渡型標(biāo)準(zhǔn)下，瀏覽器對(duì)文檔的解析比較寬松。一些老版本的網(wǎng)站依然延用。HTML文檔頭部標(biāo)記<head></head><head>與</head>之間的標(biāo)記只控制頁(yè)面的性能而不會(huì)顯示在網(wǎng)頁(yè)上。一個(gè)文檔只能有一對(duì)head標(biāo)記。通常<title></title>、<meta/>、<link/>等標(biāo)記可以放在head部分。1.<title></title>設(shè)置頁(yè)面標(biāo)題2.<meta/>用于定義頁(yè)面中的信息，例如文檔的關(guān)鍵字、作者及描述等，在頭部可以包含任意數(shù)量的<meta/>標(biāo)記3.<link/>引用外部文件<title></title> <head> <metacharset="utf-8"> <title>網(wǎng)上商城</title> </head><meta/><meta/>用于定義頁(yè)面中的信息，基本語(yǔ)法如下：<metacharset=“UTF-8”/>代表世界通用的語(yǔ)言編碼；<metaname=“”

content=“”

/>

name屬性值可以是搜索內(nèi)容名，如author、keywords、description等，而content屬性對(duì)應(yīng)搜索內(nèi)容值。便于搜索引擎查找信息和分類信息<meta/><metahttp-equiv=“”

content=“”

/>meta的屬性還可以是http-equiv，使用http-equiv/content參數(shù)可設(shè)置服務(wù)器發(fā)送給瀏覽器的http頭部信息，為瀏覽器顯示該頁(yè)面提供相關(guān)參數(shù).<meta

http-equiv="refresh"content=“2">

表示每隔2秒，自動(dòng)刷新網(wǎng)頁(yè)<metahttp-equiv="refresh"content=“5;url=”>

間隔5秒后，自動(dòng)刷新到163郵箱登錄頁(yè)面<link/>一個(gè)頁(yè)面允許使用多個(gè)<link/>標(biāo)記引用多個(gè)外部文件。例如：<linkrel="stylesheet"href="public/css/liMarquee.css"><linkhref="/Templets/mode3/images/style.css"rel="stylesheet"type="text/css"><linkhref="/Templets/mode3/images/slideshow.css"rel="stylesheet"/>

HTML文檔主體標(biāo)記<body></body>HTML文檔主體標(biāo)記<body></body>用于定義頁(yè)面所要顯示的內(nèi)容，除使用腳本添加的特效之外，瀏覽器頁(yè)面所顯示的所有文本、圖像、音頻和視頻等元素都必須位于<body></body>標(biāo)記之間。一個(gè)HTML文檔最多使用一對(duì)<body></body>標(biāo)記，這對(duì)標(biāo)記必須在<head></head>標(biāo)記之后。在body中常用的標(biāo)記有<h1>~<h6>、<p>、<hr>、<br>、<img>、<div>等。<h1>~<h6>標(biāo)題標(biāo)記HTML提供了6個(gè)等級(jí)的標(biāo)題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>依次遞減，為雙標(biāo)記。<body> <h1>1級(jí)標(biāo)題</h1> <h2>2級(jí)標(biāo)題</h2> <h3>3級(jí)標(biāo)題</h3> <h4>4級(jí)標(biāo)題</h4> <h5>5級(jí)標(biāo)題</h5> <h6>6級(jí)標(biāo)題</h6></body>默認(rèn)情況下標(biāo)題文字是加粗左對(duì)齊的，并且從<h1>到<h6>字號(hào)遞減<p></p>段落標(biāo)記<p>是HTML文檔中最常見的標(biāo)記，為雙標(biāo)記用法：<p>段落內(nèi)容</p><hr/>水平線標(biāo)記<br/>換行標(biāo)記<hr>是創(chuàng)建橫跨網(wǎng)頁(yè)水平線的標(biāo)記，單標(biāo)記用法：<hr/><br>將某段文本強(qiáng)制換行顯示，單標(biāo)記用法：<br/>HTML的樹形文檔結(jié)構(gòu)實(shí)訓(xùn)任務(wù)<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>第一個(gè)HTML頁(yè)面</title> </head> <body> <h2style="text

溫馨提示

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

評(píng)論

0/150

提交評(píng)論