html網頁制作chapter1基本標簽_第1頁
html網頁制作chapter1基本標簽_第2頁
html網頁制作chapter1基本標簽_第3頁
html網頁制作chapter1基本標簽_第4頁
html網頁制作chapter1基本標簽_第5頁
已閱讀5頁，還剩42頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

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

html文件html文件的編輯工具通過文本編輯器創建使用Dreamwerver編輯器創建

html文件html示例<html> <head> <title>頁面標題</title> </head> <body>

這是我的第一個頁面

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

</title></head><body>helloworld!</body></html>html網頁<head>頭部部分<body>主體部分<html>…</html>標簽標記html文檔的開始和結束網頁標題網頁內容，可以是文本、圖像等這部分包含文本、圖像和鏈接。它包括在<body>…</body>

標簽內查看源代碼這部分包括標題和其他說明信息。包括在<head>…</head>

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

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

網頁背景圖像

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

color=“red”face=“隸書”

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

手機充值、ip卡/電話卡

</font><br/>

移動 | 100| 聯通

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

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

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

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

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

<ul> <li>列表項內容</li> ……</ul>有序列表語法

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

新人上路指南

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

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

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

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

相對地址：相對于當前目錄的地址，常用

絕對地址：指向目標地址的完整描述，少用

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

頁面間鏈接

錨鏈接功能性鏈接

常用于網站導航相對路徑41實現錨鏈接

1、定義標記（錨）：<aname="標記名">目標位置</a>2、設置鏈接到標記位置：<ahref="#標記名">當前位置</a>

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

<aname=“star”>明顯專區內容</a>……超鏈接的三類應用場合4-2

定義標記設置鏈接到標記位置A.頁面內的錨鏈接適用于頁面內容較多，超過一屏的場合42超鏈接的三類應用場合4-3

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

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

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

溫馨提示

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

評論

0/150

提交評論