html網(wǎng)頁制作chapter1基本標(biāo)簽_第1頁
html網(wǎng)頁制作chapter1基本標(biāo)簽_第2頁
html網(wǎng)頁制作chapter1基本標(biāo)簽_第3頁
html網(wǎng)頁制作chapter1基本標(biāo)簽_第4頁
html網(wǎng)頁制作chapter1基本標(biāo)簽_第5頁
已閱讀5頁，還剩42頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第一章Html基本標(biāo)簽學(xué)完本門課程后，你能夠：制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站課程目標(biāo)制作圖文并茂的“廣告”頁面本章任務(wù)本章目標(biāo)：了解Internet和萬維網(wǎng)（www）掌握html文檔的基本結(jié)構(gòu)會使用html的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁會使用文本相關(guān)標(biāo)簽實現(xiàn)文字修飾和布局會使用圖像相關(guān)標(biāo)簽實現(xiàn)圖文并茂的頁面會使用超鏈接相關(guān)標(biāo)簽實現(xiàn)頁面間的跳轉(zhuǎn)本章重點：html結(jié)構(gòu)控制標(biāo)簽的運用本章難點：掌握文字內(nèi)容與修飾相關(guān)標(biāo)簽的運用本章目標(biāo)Internet和萬維網(wǎng)全球范圍內(nèi)網(wǎng)絡(luò)的網(wǎng)絡(luò)Internet的一部分由包含各種信息的文檔組成萬維網(wǎng)2-1Web服務(wù)器客戶端hTTP協(xié)議協(xié)議用于訪問Web上資源的一組規(guī)則HTTP是Web協(xié)議6萬維網(wǎng)2-2Web服務(wù)器客戶端向服務(wù)器發(fā)送頁面請求Web服務(wù)器處理請求并返回請求的頁面HTTP負(fù)責(zé)請求和響應(yīng)7協(xié)議：是一組標(biāo)準(zhǔn)規(guī)則，訪問Web資源都要遵守相應(yīng)的協(xié)議(HTTP)地址：是一組命名方案，又稱之為URL:UniformResourceLocator，用于標(biāo)識web上的頁面和資源WWW資源8WWW資源常用的網(wǎng)址

協(xié)議主機WWW資源URL的組成用于通信的協(xié)議，例如http,ftp與之通信的主機（服務(wù)器）服務(wù)器上資源的路徑例如：/index.htm10用戶從瀏覽器獲得資源輸入地址請求11網(wǎng)站：萬維網(wǎng)上相關(guān)網(wǎng)頁的集合網(wǎng)頁：文件后綴名通常為*.html或*.htm的頁面html：用于制作網(wǎng)頁的超文本標(biāo)記語言(hyperTextMark-upLanguage)瀏覽器:是安裝在客戶端計算機上的應(yīng)用軟件,如IE,用來讀取html源代碼并按指令顯示頁面

html編輯器：用于開發(fā)網(wǎng)頁的工具軟件Web相關(guān)術(shù)語html是一種超文本標(biāo)記語言。使用html編輯的文檔可以可以通過萬維網(wǎng)瀏覽器查看。文檔中可以包括文本、圖象、聲音、動畫等。用IE、Firefox等瀏覽器。讀取html文本來顯示頁面

標(biāo)記語言是由特定字符分隔的基本元素，指定基本元素中所包含的文本如何顯示html簡介13html文件是一個包含標(biāo)記的文本文件這些標(biāo)記指導(dǎo)瀏覽器怎樣顯示這個頁面html文件必須有htm或者h(yuǎn)tml擴展名html文件可以用一個簡單的文本編輯器創(chuàng)建

html文件html文件的編輯工具通過文本編輯器創(chuàng)建使用Dreamwerver編輯器創(chuàng)建

html文件html示例<html> <head> <title>頁面標(biāo)題</title> </head> <body>

這是我的第一個頁面

<b>這里的文字要加粗</b> </body></html>運行結(jié)果使用記事本創(chuàng)建網(wǎng)頁的步驟：1、打開記事本2、輸入html代碼3、保存為*.html或*.htm文件，注意格式問題4、打開網(wǎng)頁預(yù)覽效果使用記事本創(chuàng)建網(wǎng)頁演示示例2：如何在記事本里創(chuàng)建網(wǎng)頁使用記事本創(chuàng)建網(wǎng)頁html編輯器-Dreamweaverhtml文檔的結(jié)構(gòu)html文件的基本結(jié)構(gòu)<html><head><title>我的第一個網(wǎng)頁

</title></head><body>helloworld!</body></html>html網(wǎng)頁<head>頭部部分<body>主體部分<html>…</html>標(biāo)簽標(biāo)記html文檔的開始和結(jié)束網(wǎng)頁標(biāo)題網(wǎng)頁內(nèi)容，可以是文本、圖像等這部分包含文本、圖像和鏈接。它包括在<body>…</body>

標(biāo)簽內(nèi)查看源代碼這部分包括標(biāo)題和其他說明信息。包括在<head>…</head>

標(biāo)簽內(nèi)html標(biāo)簽用來組成html元素html標(biāo)簽兩端有兩個包括字符：“<”和“>”，這兩個包括字符被稱為尖括號html標(biāo)簽通常成對出現(xiàn)，比如<b>和</b>，一對標(biāo)簽的前面一個是開始標(biāo)簽，第二個是結(jié)束標(biāo)簽,在開始和結(jié)束標(biāo)簽之間的文本是元素內(nèi)容html標(biāo)簽是大小寫無關(guān)的，<b>跟<B>表示的意思是一樣的html標(biāo)簽注釋……<!--<li>被注釋掉的行將不顯示</li>--><li>正常顯示行1</li><li>正常顯示行2</li>……注釋

<!--注釋內(nèi)容-->用于增加代碼的可讀性，不顯示標(biāo)簽可以擁有屬性。屬性能夠為頁面上的html元素提供附加信息例如：標(biāo)簽<body>定義了html頁面的主體元素，使用一個附加的bgcolor屬性，你可以告訴瀏覽器：你頁面的背景色是紅色的，就像這樣：<bodybgcolor="red">屬性通常由屬性名和值成對出現(xiàn)，就像這樣：name="value"。屬性通常是附加給html元素的開始標(biāo)簽的標(biāo)簽屬性22頁面背景色或背景圖像<bodybgcolor="#ffccff“background="back_image.gif">helloworld！</body>為了使頁面美麗大方，網(wǎng)頁背景要盡量地淺……<bodybgcolor="#ffccff“> helloworld!</body>……查看源代碼網(wǎng)頁背景色彩

網(wǎng)頁背景圖像

字體、字號標(biāo)題標(biāo)簽<h1>－<h6><font>標(biāo)簽特殊符號文本相關(guān)標(biāo)簽使用了<h2>…換段了設(shè)置了字體的大小和顏色換行了特殊符號標(biāo)題標(biāo)簽<h#>...</h#>#=1,2,3,4,5,6說明：<h1>到<h6>字體大小依次遞減字體、字號相關(guān)標(biāo)簽……<body><h1>一級標(biāo)題</h1><h2>二級標(biāo)題</h2><h3>三級標(biāo)題</h3><h4>四級標(biāo)題</h4><h5>五級標(biāo)題</h5><h6>六級標(biāo)題</h6></body>……h(huán)1到h6標(biāo)簽用于指定不同級別的標(biāo)題查看源代碼字體、字號相關(guān)標(biāo)簽<font>標(biāo)簽<fontsize=“+2”

color=“red”face=“隸書”

> ...</font>字體的大小值字體的顏色字體的類型特殊符號1、因為<、>等符號在HTML中已使用，所以必須用其他符號來代替2、都以分號結(jié)束（；）字體、字號相關(guān)標(biāo)簽查看源代碼......<body><p><fontsize="+2"color="red">

手機充值、ip卡/電話卡

</font><br/>

移動 | 100| 聯(lián)通

| 50</p>copyright©2007"淘寶網(wǎng)"allrights.</body>……空格效果…….

<palign="center">淘寶集市歡迎您！</p><palign="left">淘寶網(wǎng)首屆翠友會！<br>……</p>……段落標(biāo)簽<p>段(paragraph)(可以看作是空行)<p>換行標(biāo)簽<br>換行<br>

行的控制相關(guān)標(biāo)簽查看源代碼換段了換行了和<p>的區(qū)別：前后不換行<hrsize="5"color="red"width="300“/>如何使用內(nèi)容分隔<hr>標(biāo)簽……<body><hrsize="5"color="red"width="300"><hrsize="10"color="black"width="200"><hrsize="5"color="#0000ff"width="50%"></body>……線的厚度值線的寬度查看源代碼<hr>標(biāo)簽用于在頁面上繪制水平線線的顏色圖像標(biāo)簽

……<imgsrc="images/drink.jpg"alt="精品熱賣：高清晰，30寸等離子電視"title="精品熱賣：高清晰，30寸等離子電視"/>……為了不同瀏覽器之間的兼容，推薦使用title屬性

，確保能顯示提示文字<imgsrc="圖片地址"alt="提示文字"title="提示文字"/>圖像與文本的對齊方式<imgalign="middle">圖像標(biāo)簽圖像與文本居中對齊,還可以取top,bottom值….<body><ahref="star.html"><imgalign="middle"src="images/adv_2.jpg"width="180"height="95"border="0"/></a>請點擊廣告進入明星專區(qū)</body>……查看源代碼圖像和文本居中對齊31編寫如下圖所示效果對應(yīng)的html代碼小結(jié)1字號大小為3練習(xí)答案練習(xí)代碼項目列表和編號有序列表<ol>無序列表<ul>文字布局水平分隔線<hr>有序列表無序列表用了預(yù)先定義好的格式如何使用列表無序列表語法

<ul> <li>列表項內(nèi)容</li> ……</ul>有序列表語法

<ol><li>列表項內(nèi)容</li> ……</ol>查看源代碼<h4>注冊步驟：</h4><oltype="1"><li>填寫信息</li><li>收電子郵件</li><li>注冊成功</li></ol>

新人上路指南

<ultype="circle"><li>如何激活會員名？</li><li>如何注冊淘寶會員？</li><li>注冊時密碼設(shè)置有什么要求？</li><li>支付寶認(rèn)證</li></ul>定義描述標(biāo)簽

……<body><dl><dt>咖啡</dt><dd>一種黑色的熱飲料，原料據(jù)說是咖啡豆，非洲盛產(chǎn)這類原料。</dd><dd>可以提神，刺激神經(jīng)。</dd></dl></body>……這種效果可以和無序列表互相替代，因dt是塊狀元素，所以常用于圖文混編的布局場合<dl><dt>標(biāo)題</dt><dd>描述1</dd>……</dl>……<body><dl>

<dt>圖片的HTML代碼（后續(xù)講解）……<dt><dd>商品名稱：燦坤蒸氣電熨斗</dd><dd>商品價格：388元</dd><dd>商品簡介：金鋼低血超硬超順滑,140ml透明大水箱設(shè)計</dd></dl></body>……用定義描述標(biāo)簽實現(xiàn)圖文混編的效果文字有一定的縮進36小結(jié)2有序列表OL無序列表UL練習(xí)答案練習(xí)代碼編寫如下圖所示效果對應(yīng)的html代碼37超鏈接超鏈接---實現(xiàn)頁面間的導(dǎo)航鏈接文本或圖像鏈接地址（目標(biāo)）

……<ahref="span.html"target="_blank">燦坤蒸氣電熨斗</a>……基本語法鏈接在新窗口中打開<ahref="鏈接地址"target="目標(biāo)窗口位置">鏈接熱點文本或圖像</a>39……<ahref="../web1.htm">上級目錄</a><ahref="../../web2.htm">上上級目錄</a>……鏈接路徑

相對地址：相對于當(dāng)前目錄的地址，常用

絕對地址：指向目標(biāo)地址的完整描述，少用

上級目錄：../上上級目錄：../../<ahref=“/memAdmin/login/login.htm”>登錄</a><ahref="">搜狐</a><ahref="login/login.htm">登錄</a>40……<ahref="register/register.html">[免費注冊]</a><ahref="login/login.htm">[登錄]</a>……超鏈接的三類應(yīng)用場合4-1

頁面間鏈接

錨鏈接功能性鏈接

常用于網(wǎng)站導(dǎo)航相對路徑41實現(xiàn)錨鏈接

1、定義標(biāo)記（錨）：<aname="標(biāo)記名">目標(biāo)位置</a>2、設(shè)置鏈接到標(biāo)記位置：<ahref="#標(biāo)記名">當(dāng)前位置</a>

……<ahref="#star">[明星專區(qū)]</a>……

<aname=“star”>明顯專區(qū)內(nèi)容</a>……超鏈接的三類應(yīng)用場合4-2

定義標(biāo)記設(shè)置鏈接到標(biāo)記位置A.頁面內(nèi)的錨鏈接適用于頁面內(nèi)容較多，超過一屏的場合42超鏈接的三類應(yīng)用場合4-3

實現(xiàn)錨鏈接……標(biāo)記所在頁….<ahref="#star">[明星專區(qū)]</a>……B.頁面間的錨鏈接……鏈接頁….明星體驗：<ahref="anchor.html#star">明星專區(qū)</a>……43功能性鏈接郵箱、QQ鏈接等……<ahref="mailto:guimeiWebMater@">站長信箱</a>……超鏈接的三類應(yīng)用場合4-4

44<marqueescrolldelay=“100”direction=“up"

behavior=“alternate”>滾動文字或圖像</marquee>滾動<marquee>標(biāo)簽滾動延遲時間滾動對象的方向說明：scrolldelay：表示滾動延遲時間，默認(rèn)值為90。direction：表示滾動的方向，默認(rèn)為從右向左。behavior:表示滾動的方式,值可以是scroll(

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論