資源描述:
《《講Web開發(fā)基礎》PPT課件》由會員上傳分享,免費在線閱讀,更多相關內(nèi)容在教育資源-天天文庫。
1、Web開發(fā)基礎授課教師:董曉慧email:ise_dongxh@ujn.edu.cn本講內(nèi)容第四章HTML概述對(X)HTML標記如何工作有基本的感覺,包括理解元素和特性觀看瀏覽器如何解釋(X)HTML文檔學習(X)HTML文檔的基本結構初看樣式表使用第五章標記文本重要術語:(X)HTML(X)HTML是HTML和它的最新版本XHTML的合并簡寫。創(chuàng)建(X)HTML文檔的步驟第一步:從內(nèi)容開始。添加純文本內(nèi)容,觀察瀏覽器如何處理。第二步,文檔結構化。學習(X)HTML元素,以及創(chuàng)建文檔結構的元素。第三步,確定文本元素。用適當?shù)奈谋?/p>
2、元素來描述內(nèi)容,并學習(X)HTML的正確使用方法。第四步,添加圖像。向網(wǎng)頁中添加圖像,學習特性和空元素第五步,使用樣式表改變外觀。使用層疊樣式表來格式化內(nèi)容。啟動文本編輯器Windows操作系統(tǒng)下,啟動記事本創(chuàng)建新文檔(演示)也可以用其他編輯器,只要能用于文本編輯,能保存為.html擴展名的純文本文件。如果文件類型的擴展名隱藏了,可以設置擴展名為可見。第一步,從內(nèi)容開始打開新文檔,輸入內(nèi)容(演示)保存直接保存或另存為創(chuàng)建一個新文件夾,存放這個網(wǎng)站的所有文件保存文件時,文件的擴展名為.html,保存類型為“所有文件”(注:文件命名
3、規(guī)則)在瀏覽器中瀏覽文件文件命名習慣文件使用正確的后綴(X)HTML文件必須以.html(.htm)結束web圖像根據(jù)文件類型來命名,如;.gif,.jpg(.jpeg)不要在文件名內(nèi)使用字符空格可用短下劃線和短橫來在視覺上隔開文件名中的單詞,如robbins_bio.html、robbins-bio.html避免諸如?、%、#、/、:、;、.等字符文件名只限使用字母、數(shù)字、下劃線、連字符和句號根據(jù)服務器配置,文件名可能大小寫敏感沒有特殊要求,文件名堅持用小寫字母保持文件名簡短短文件名可以保持字符數(shù)和你的(X)HTML文件尺寸在控
4、制之中;若真要定義長的、多單詞的文件名,可用大寫字母或下劃線隔開,如ALongDocumentTitle.html、a_long_document_title.html自定習慣網(wǎng)站要有統(tǒng)一的命名方案從第一步學到了什么?顯示在瀏覽器上的文件,源碼中的一些信息會被忽略掉,包括換行(回車)在文本流中,文本和元素連續(xù)排列,直至遇到塊元素,如標題(h1)和段(p),或換行(br)元素制表符和多個空格當瀏覽器遇到制表符和多個空格時,它只會顯示1個空格不可識別的標記注釋中的文本標簽之間的文本用于表示注釋,瀏覽器不會顯示簡單的輸入
5、一些內(nèi)容并命名文檔遠遠不夠我們將使用標記來添加結構先給文檔本身添加(第二步)在給網(wǎng)頁內(nèi)容添加(第三步)第二步文檔結構化HTML元素通用的HTML元素的結構contenthere結束標簽內(nèi)容可以是文本,也可以是其他HTML元素開始標簽元素元素通過文本源碼中的標簽識別出來;添加到內(nèi)容周圍的標簽稱為標記(markup);元素是由內(nèi)容和標記(開始標簽和結束標簽)組成。不是所有的元素都有內(nèi)容,有些被定義為空元素。標簽由尖括號<>內(nèi)的元素名組成,瀏覽器知道,尖括號中的任何內(nèi)容都被隱藏,不會
6、顯示在瀏覽器中元素名出現(xiàn)在打開標簽(開始標簽)中,又置一個斜線(/)出現(xiàn)在關閉(結束)標簽所有的元素都是小寫的基本的文檔結構(X)HTML文檔有head(頭)和body(主體)
Titleherewebpagecontenthere????整個文檔都包含在一個html元素(根元素)中;標識文檔是HTML還是XHTML包含關于文檔本身的描述性信息,如title、它用的樣式表、腳本和其他類型的“meta“信息,head元素包含ti
7、tle元素包括顯示在瀏覽器窗口上的真正內(nèi)容根據(jù)(X)HTML規(guī)范,每個文檔都必須包含描述性的title文檔結構元素并不影響內(nèi)容在瀏覽器中的外觀,但是它們需要使文檔有效,即與(X)HTML標準完全兼容演示:為index.html文檔添加基本結構別忘記好標題title元素不僅是每篇文檔必須的,更是有用的標題將顯示在用戶的書簽或收藏夾列表中描述性的標題可加強易用性使用屏幕閱讀器時,標題將會被人首先看到搜索引擎很大程度上依賴于文檔標題應為文檔提供有思想性、描述性的標題,避免含糊的標題第三步確定文本元素語義標記語義標記(semanticma
8、rkup):選擇合適的(X)HTML元素,為當前的內(nèi)容作最有意義的描述。標記內(nèi)容時,即為內(nèi)容選擇元素時,重要的是要根據(jù)什么能使內(nèi)容更有意義來選擇。標記除了增添內(nèi)容的內(nèi)涵,還可以使文檔結構化。演示:為index.html文檔定義文本元素塊元素和內(nèi)聯(lián)元