html網(wǎng)頁制作PPTchapter1基本標簽

1、第一章Html基本標簽基本標簽 學完本門課程后，你能夠：制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站課程目標 制作圖文并茂的“廣告”頁面 本章任務(wù) 本章目標： 了解 Internet 和萬維網(wǎng)（www） 掌握 html 文檔的基本結(jié)構(gòu) 會使用html的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁 會使用文本相關(guān)標簽實現(xiàn)文字修飾和布局 會使用圖像相關(guān)標簽實現(xiàn)圖文并茂的頁面 會使用超鏈接相關(guān)標簽實現(xiàn)頁面間的跳轉(zhuǎn) 本章重點：html 結(jié)構(gòu)控制標簽的運用 本章難點：掌握文字內(nèi)容與修飾相關(guān)標簽的運用本章目標Internet 和萬維網(wǎng) 全球范圍內(nèi)網(wǎng)絡(luò)的網(wǎng)絡(luò)全球范圍內(nèi)網(wǎng)絡(luò)的網(wǎng)絡(luò) Internet 的一部分的一部分 由包含各種信息的文檔

2、組成由包含各種信息的文檔組成6萬維網(wǎng) 2-1Web 服務(wù)器服務(wù)器客戶端客戶端hTTP協(xié)議協(xié)議協(xié)議 用于訪問用于訪問 Web 上資源的一組上資源的一組規(guī)則規(guī)則 HTTP 是是 Web 協(xié)議協(xié)議 7萬維網(wǎng) 2-2Web 服務(wù)器服務(wù)器客戶端客戶端向服務(wù)器發(fā)送頁面請求向服務(wù)器發(fā)送頁面請求Web 服務(wù)器處理請求并返回服務(wù)器處理請求并返回請求的頁面請求的頁面HTTP 負責請求和響應(yīng)負責請求和響應(yīng)8n協(xié)議：是一組標準規(guī)則，訪問Web資源都要 遵守相應(yīng)的協(xié)議(HTTP)n地址：是一組命名方案，又稱之為URL:Uniform Resource Locator，用于標識web上的頁面和資源WWW資源WWW資源 常

3、用的網(wǎng)址 http:/ http:/ http:/協(xié)議協(xié)議主機主機10WWW資源 URL的組成n 用于通信的協(xié)議，例如http,ftpn 與之通信的主機（服務(wù)器）n 服務(wù)器上資源的路徑例如：http:/ 網(wǎng)站：萬維網(wǎng)上相關(guān)網(wǎng)頁的集合 網(wǎng)頁：文件后綴名通常為*.html 或* .htm的頁面 html：用于制作網(wǎng)頁的超文本標記語言(hyper Text Mark-up Language) 瀏覽器: 是安裝在客戶端計算機上的應(yīng)用軟件,如 IE, 用來讀取html源代碼并按指令顯示頁面 html編輯器：用于開發(fā)網(wǎng)頁的工具軟件Web相關(guān)術(shù)語13html是一種超文本標記語言。使用html編輯的文檔可以可

4、以通過萬維網(wǎng)瀏覽器查看。文檔中可以包括文本、圖象、聲音、動畫等。用IE、Firefox等瀏覽器。讀取html文本來顯示頁面 標記語言是由特定字符分隔的基本元素，指定基本元素中所包含的文本如何顯示html 簡介 html 文件是一個包含標記的文本文件 這些標記指導(dǎo)瀏覽器怎樣顯示這個頁面 html 文件必須有 htm 或者 html 擴展名 html 文件可以用一個簡單的文本編輯器創(chuàng)建 html 文件 html文件的編輯工具n通過文本編輯器創(chuàng)建n使用Dreamwerver編輯器創(chuàng)建 html 文件html 示例頁面標題頁面標題這是我的第一個頁面這是我的第一個頁面這里的文字要加粗這里的文字要加粗運行

5、結(jié)果運行結(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 編輯器-Dreamweaver html文檔的結(jié)構(gòu)html文件的基本結(jié)構(gòu)我的第一個網(wǎng)頁 hello world!html 網(wǎng)頁頭部部分主體部分標簽標記 html 文檔的開始和結(jié)束網(wǎng)頁標題網(wǎng)頁內(nèi)容，可以是文本、圖像等這部分包含文本、圖像和鏈接。它包括在 標簽內(nèi)查看源代碼查看源代碼這部分包括標題和其他說明信息。包括在 標簽內(nèi) html 標簽用來組成 html 元素 html

6、 標簽兩端有兩個包括字符：“” ，這兩個包括字符被稱為尖括號 html 標簽通常成對出現(xiàn)，比如 和 ，一對標簽的前面一個是開始標簽，第二個是結(jié)束標簽,在開始和結(jié)束標簽之間的文本是元素內(nèi)容 html 標簽是大小寫無關(guān)的，跟表示的意思是一樣的html 標簽 注釋 !- !- 被注釋掉的行將不顯示被注釋掉的行將不顯示 - - 正常顯示行正常顯示行11 正常顯示行正常顯示行22注釋 !- -用于增加代碼的可讀用于增加代碼的可讀性，不顯示性，不顯示22 標簽可以擁有屬性。屬性能夠為頁面上的 html 元素提供附加信息 例如：標簽 定義了 html 頁面的主體元素，使用一個附加的 bgcolor 屬性，你

7、可以告訴瀏覽器：你頁面的背景色是紅色的，就像這樣： 屬性通常由屬性名和值成對出現(xiàn)，就像這樣：name=value。屬性通常是附加給html元素的開始標簽的標簽屬性頁面背景色或背景圖像 hello world！為了使頁面美麗大方，網(wǎng)頁背景要盡量地淺hello world!查看源代碼查看源代碼網(wǎng)頁背景色彩 網(wǎng)頁背景圖像 字體、字號標題標簽標簽特殊符號文本相關(guān)標簽使用了換段了設(shè)置了字體的大小和顏色換行了特殊符號標題標簽 . #=1, 2, 3, 4, 5, 6 說明：到字體大小依次遞減字體、字號相關(guān)標簽 一級標題 二級標題 三級標題 四級標題 五級標題 六級標題 h1 到 h6 標簽用于指定不同級別

8、的標題查看源代碼查看源代碼字體、字號相關(guān)標簽 標簽 . 字體的大小值字體的顏色字體的類型 特殊符號1 1、因為、因為 等符號在等符號在HTMLHTML中中已使用，所以必須用其他符已使用，所以必須用其他符號來代替號來代替2 2、都以分號結(jié)束（；）、都以分號結(jié)束（；）字體、字號相關(guān)標簽查看源代碼查看源代碼. 手機充值、ip卡/電話卡 移動 |  100 |  聯(lián)通 |  50 copyright © 2007 "淘寶網(wǎng)" all rights.空格效果. 淘寶集市歡迎您！

9、淘寶網(wǎng)首屆翠友會！ 段落標簽段(paragraph) (可以看作是空行) 換行標簽換行 行的控制相關(guān)標簽查看源代碼查看源代碼換段了換行了和和的區(qū)別：的區(qū)別：前后不換行前后不換行 如何使用內(nèi)容分隔標簽線的厚度值線的寬度查看源代碼查看源代碼 標簽用于在頁面上繪制水平線 線的顏色圖像標簽 img src=images/drink.jpg alt= /為了不同瀏覽器之間的兼容，推薦使用為了不同瀏覽器之間的兼容，推薦使用titletitle屬性屬性 ，確保能顯示提示文字，確保能顯示提示文字img src= /31 圖像與文本的對齊方式 圖像標簽圖像與文本居中對齊,還可以取top, bottom 值. 請

10、點擊廣告進入明星專區(qū)查看源代碼查看源代碼圖像和文本居中對齊編寫如下圖所示效果對應(yīng)的html代碼小結(jié)1 1字號大小為3練習答案練習答案練習代碼練習代碼 項目列表和編號 有序列表 無序列表文字布局水平分隔線有序列表無序列表用了預(yù)先定義好的格式如何使用列表 無序列表語法 列表項內(nèi)容 有序列表語法 列表項內(nèi)容 查看源代碼查看源代碼 注冊步驟： 填寫信息 收電子郵件 注冊成功 新人上路指南 如何激活會員名？ 如何注冊淘寶會員？ 注冊時密碼設(shè)置有什么要求？ 支付寶認證 定義描述標簽 咖啡咖啡 一種黑色的熱飲料，原料據(jù)說是咖啡豆，非洲盛產(chǎn)這類原料。一種黑色的熱飲料，原料據(jù)說是咖啡豆，非洲盛產(chǎn)這類原料。 可以

11、提神，刺激神經(jīng)?？梢蕴嵘?，刺激神經(jīng)。這種效果可以和無序列表互相這種效果可以和無序列表互相替代，因替代，因dtdt是塊狀元素，所以是塊狀元素，所以常用于圖文混編的布局場合常用于圖文混編的布局場合 標題標題 描述描述1 1 36 圖片的圖片的HTMLHTML代碼（后續(xù)講解）代碼（后續(xù)講解） 商品名稱：燦坤蒸氣電熨斗商品名稱：燦坤蒸氣電熨斗 商品價格：商品價格：388388元元 商品簡介：金鋼低血超硬超順滑商品簡介：金鋼低血超硬超順滑,140ml,140ml透明大水箱設(shè)計透明大水箱設(shè)計 用定義描述標簽實現(xiàn)圖文混編的效果文字有一定的縮進文字有一定的縮進37小結(jié)2 2有序列表OL無序列表UL練習答案練習

12、答案練習代碼練習代碼編寫如下圖所示效果對應(yīng)的html代碼超鏈接 超鏈接-實現(xiàn)頁面間的導(dǎo)航鏈接文本或圖像鏈接文本或圖像鏈接地址（目標）鏈接地址（目標）39 燦坤蒸氣電熨斗燦坤蒸氣電熨斗基本語法鏈接在新鏈接在新窗口中打窗口中打開開a href= 鏈接熱點文本或圖鏈接熱點文本或圖像像40上級目錄上級目錄上上級目錄上上級目錄鏈接路徑 相對地址：相對于當前目錄的地址，常用 絕對地址：指向目標地址的完整描述 ，少用 上級目上級目錄：錄：././上上級目上上級目錄：錄：././././登錄登錄搜狐搜狐登錄登錄41 免費注免費注冊冊 登錄登錄 超鏈接的三類應(yīng)用場合4-1 頁面間鏈接 錨鏈接 功能性鏈接 常用于

13、網(wǎng)站常用于網(wǎng)站導(dǎo)航導(dǎo)航相對路徑相對路徑42 實現(xiàn)錨鏈接 1、定義標記（錨）： 目標位置2、設(shè)置鏈接到標記位置：當前位置 明星專區(qū)明星專區(qū) 明顯專區(qū)內(nèi)容明顯專區(qū)內(nèi)容超鏈接的三類應(yīng)用場合4-2 定義標記定義標記設(shè)置鏈接到設(shè)置鏈接到標記位置標記位置A.A.頁面內(nèi)的錨鏈接頁面內(nèi)的錨鏈接適用于頁面適用于頁面內(nèi)容較多，內(nèi)容較多，超過一屏的超過一屏的場合場合43超鏈接的三類應(yīng)用場合4-3 實現(xiàn)錨鏈接標記所在頁標記所在頁.明星專區(qū)明星專區(qū)B.B.頁面間的錨鏈接頁面間的錨鏈接鏈接頁鏈接頁.明星體驗：明星體驗：a明星專區(qū)明星專區(qū) 44 功能性鏈接 郵箱、QQ鏈接等 a href=站長信箱站長信箱超鏈接的三類應(yīng)用場合4-4 45 滾動文字或圖像滾動標簽滾動延遲時間滾動對象的方向q說明：q scrolldelay：表示滾動延遲時間，默認值為90。q direction：表示滾動的方向，默認為從右向左。q behavior:表示滾動的方式,值可以是scroll(連續(xù)的)、slide(滑動一次)、alternate(來回滾動)q bgcolo