模塊一網頁設計基礎知識目錄任務一任務二任務三

HBuilderX的安裝網站的建立網頁的基本知識1.1HBuilderX的新增功能1．全新的代碼編輯器2．開發人員工作區3．CSS預處理器支持4．實時瀏覽器預覽5．HTML文檔中的快速CSS編輯任務1

HBuilderX的安裝1.1HBuilderX的新增功能6．無鼠標操作7．用于重復任務的多個光標8．新式UI（UserInterface，用戶界面）9．UI顏色主題任務1HBuilderX的安裝任務實現（1）進入官網：https://dcloud.io/，單擊“HBuilderX極客開發工具”圖標，進入下載界面。根據自己的計算機系統選擇合適的版本，單擊“Download”下載，如圖所示。（2）HBuilderX安裝好后，解壓安裝包，雙擊HBuilderX.exe文件，如圖所示。任務1HBuilderX的安裝任務實現（3）HBuilderX啟動成功，如圖所示。任務1HBuilderX的安裝任務實現任務1HBuilderX的安裝（4）雙擊打開HBuilderX.exe文件或者桌面上HBuilderX快捷方式，從菜單欄中選擇“文件”|“新建”|“項目”|選項，出現“新建項目”對話框，輸入項目名稱chapter01，項目存放位置為“D:/Web前端源碼”，如圖所示。在“選擇模板”中選擇“基本HTML項目”，單擊“創建”按鈕。任務實現任務1HBuilderX的安裝（5）此時，在選擇的路徑中創建了一個項目名稱命名的文件夾chapter01,并在該文件夾中自動創建了css、img、js文件夾和index.html文件。這就建立了一個完整的靜態網站所必需的文件結構。在HBuilderX左側的項目管理器中，單擊chapter01項目，可以看到該項目中的所有文件，如圖所示。css文件夾用于存放網站中的樣式文件；img文件夾用于存放網站中的圖片文件等；js文件夾用于存放網站中的腳本文件；index.html文件為網站的首頁文件。引入知識點任務2網站的建立1.2網頁、網站、首頁1.3靜態網頁和動態網頁1.4IP地址、域名和URL任務2網站的建立1.2網頁、網站、首頁1．網頁網頁（WebPage）是一種網絡信息傳遞的載體，是構成網站的基本元素，同時是承載各種網站應用的平臺，可以簡單地認為：網站就是由網頁組成的。用戶需要通過瀏覽器來瀏覽網頁，從網頁中獲得相關信息。網頁本身就是一個文件，網頁中可以有文字、圖像、音頻及視頻等信息，它存放在世界某個角落的某臺計算機中，如果想訪問或者瀏覽它，這臺計算機必須與互聯網相連。任務2網站的建立1.2網頁、網站、首頁2．網站網站（WebSite）由網頁組成，因此，網站就是一個存放網絡服務器上的完整信息的集合體。它是由單個或者多個網頁組成的集合，如Google、新浪，以及一些政府機關、企事業單位和個人網站等。任務2網站的建立1.2網頁、網站、首頁3．首頁首頁（HomePage）是一個特殊的網頁，它作為一個單獨的網頁時，和一般網頁一樣，可以存放一些相關信息，同時，它也可以作為整個網站的起始點和匯總點。首頁和主頁的區別在于：在建立網站時，通常會將信息分類并建立一個網頁，放置網站相關信息的目錄，也就是主頁。但是，不是所有的網站都會將主頁設置為首頁，一些網站還會將動畫放在首頁上，并將主頁鏈接放在首頁上，用戶需要單擊鏈接進而進入主頁。任務2網站的建立1.3靜態網頁和動態網頁1．靜態網頁靜態網頁也稱平面頁，其文件名通常以.htm、.html、.shtml、.xml（可擴展標記語言）等為后綴。用戶只能被動地瀏覽網頁設計者提供的網頁內容，網頁內容不會發生變化（除非網頁設計者修改了網頁的內容）。靜態網頁不能實現和瀏覽網頁的用戶之間的交互，其信息流向是單向的。任務2網站的建立1.3靜態網頁和動態網頁靜態網頁的特點如下：（1）靜態網頁的每個頁面都有一個固定的URL（UniformResourceLocator，統一資源定位符），且網頁的URL以.htm、.html、.shtml等常見的形式為后綴；（2）靜態網頁內容一經發布到網站服務器上，無論是否有用戶訪問，都是保存在網站服務器上的，也就是說，靜態網頁是保存在服務器上的文件，每個靜態網頁都是一個獨立的文件；（3）靜態網頁的內容相對穩定，因此容易被搜索引擎檢索；任務2網站的建立1.3靜態網頁和動態網頁（4）靜態網頁沒有數據庫的支持，在網站維護方面比較麻煩，因此當網站信息量很大時，完全依靠靜態網頁的網站制作方式比較困難；（5）靜態網頁的交互性較差，在功能方面有很大的限制；（6）靜態網頁頁面瀏覽速度很快，整個過程無須鏈接數據庫，開啟頁面的速度快于動態頁面；（7）靜態網頁減輕了服務器的負擔，工作量較少，降低了數據庫的成本。任務2網站的建立1.3靜態網頁和動態網頁2．動態網頁動態網頁，是指與靜態網頁相對應的一種網頁編程技術。動態網頁顯示的內容是可以隨著時間、環境或者數據庫操作的結果而發生改變的。從某種意義上來講，凡是結合了HTML以外的高級程序設計語言和數據庫技術進行的網頁編程生成的網頁都是動態網頁。動態網頁能與后臺數據庫進行交互和數據傳遞，動態網頁的URL的后綴不是.htm、.html、.shtml、.xml等靜態網頁的常見格式，而是.aspx、.asp、.jsp、.php、.perl、.cgi等形式。在動態網頁網址中有一個標志性的符號——“?”。動態網頁一般由服務器端和客戶端實現交互。任務2網站的建立1.3靜態網頁和動態網頁服務器端是一個在Web服務器上運行的程序（服務器端腳本），用來改變不同網頁上的網頁內容，或調節序列，或重新加載網頁。服務器端的響應用來確定各種情況，例如，超文本標記語言表單里面的數據，URL中的參數，所使用的瀏覽器類型，數據庫、服務器的狀態等。客戶端就是瀏覽器端，客戶端腳本完全在瀏覽器中運行，并控制著用戶與瀏覽器之間的交互，同時，客戶端的源代碼一般都可以看到，其對最終訪問用戶相對公開。任務2網站的建立1.3靜態網頁和動態網頁動態網頁的特點如下：（1）動態網頁一般以數據庫技術為基礎，可以大大降低維護網站的工作量；（2）采用動態網頁技術的網站可以實現更多的功能，如用戶注冊、用戶登錄、在線調查、用戶管理等；（3）動態網頁實際上并不是獨立存在于服務器的網頁文件，只有當用戶請求時，服務器才返回一個完整的網頁；（4）動態網頁中的“?”，在搜索引擎檢索時存在一定問題。搜索引擎一般不可能從一個網站的數據庫中訪問全部網頁，出于技術方面的考慮，搜索時其不會抓取網址中“?”后面的內容，因此采用動態網頁的網站在進行搜索引擎推廣時，需要進行一定的技術處理才能適應搜索引擎的要求。任務2網站的建立1.4IP地址、域名和URL1．IP地址每個連接到互聯網上的主機都會被分配一個IP地址，IP地址是用來唯一標識互聯網上計算機的邏輯地址，機器之間的訪問就是通過IP地址來進行的。目前IPv4版本的IP地址采用32位二進制數的形式表示。為了便于使用，IP地址經常被寫成十進制數的形式，每8位二進制數用“.”分開，稱為“點分十進制表示法”，如。任務2網站的建立1.4IP地址、域名和URL2．域名IP地址畢竟是數字標識，使用時不好記憶和書寫，因此在IP地址的基礎上又發展出一種符號化的地址方案，來代替數字型的IP地址。域名是由一串用點分隔的名字組成的互聯網上某一臺計算機或計算機組的名稱，用于在數據傳輸時標識計算機的電子方位（有時也指地理位置）。網域名稱系統（DomainNameSystem，DNS）簡稱域名系統，是互聯網中的一項核心服務，它作為可以將域名和IP地址相互映射的一個分布式數據庫，能夠使用戶更方便地訪問互聯網，而不用去記住能夠被機器直接讀取的IP地址數串，如。任務2網站的建立1.4IP地址、域名和URL3．URL統一資源定位符（URL），俗稱網址。網址格式為：<協議>://<域名或IP>:<端口>/<路徑>。其中，<協議>://<域名或IP>是必需的，<端口>/<路徑>有時可省略。如/。任務2網站的建立1.5HTTP和FTP1．HTTPHTTP（HyperTextTransferProtocol）即超文本傳輸協議，它是Web的核心。HTTP是一種為了將位于全球各個地方的Web服務器中的內容發送給不特定的多數用戶而制定的協議。HTTP用于從服務器端讀取Web頁面內容，從Web瀏覽器下載Web服務器中的HTML文檔及圖像文件等，并臨時保存在個人計算機硬盤及內存中以供顯示。2．FTPFTP（FileTransferProtocol）即文件傳輸協議，它是互聯網上使用非常廣泛的一種通信協議，是為了互聯網上的用戶進行文件傳輸（包括文件的上傳和下載）而制定的。任務實現任務2網站的建立（1）打開HBuilderX，執行“文件”>“新建”>“項目”命令，如圖所示。任務實現任務2網站的建立（2）在彈出的“新建項目”對話框中，根據個人喜好設置項目名稱和本項目的路徑，然后單擊“新建”按鈕，新建項目文件夾，如圖所示。任務實現任務2網站的建立（3）新建站點后，若沒有顯示項目，可以執行“視圖”→“顯示項目管理器等左側視圖”命令，如圖所示。任務實現任務2網站的建立（4）成功創建一個站點，效果如圖所示。1.6網頁的基本結構任務3網頁的基本知識1．導航欄導航欄是構成網頁的重要元素之一，是網站頻道入口的集合區域，相當于網站的菜單。導航欄設計的目的是將站點內的信息分類處理，然后放在網頁中以幫助用戶快速查找站內信息。同時，導航欄的形式多種多樣，包括文本導航欄、圖像導航欄及動畫導航欄等。2．欄目欄目是指網頁中存放相同性質內容的區域。在對網頁內容進行布局時，把性質相同的內容安排在網頁的相同區域，可以幫助用戶快速獲取所需信息，對網站內容起到非常好的導航作用。3．正文內容正文內容是指網頁中的主體內容。例如，對于文章類的網頁，正文內容就是文章本身；而對于展示產品的網頁，正文內容就是產品信息。1.7網頁的基本內容任務3網頁的基本知識1．網站logo2．Banner3．內容模塊4．版尾或版權模塊5．文本6．圖片7．超鏈接8．動畫9．聲音10．表格11．表單1.8網頁的表現任務3網頁的基本知識網頁的表現是指網頁對信息在顯示上的控制，如版式、顏色、大小等樣式上的控制。好的表現會使用戶在瀏覽頁面時更加舒適。1.9網頁的行為任務3網頁的基本知識網頁的行為也就是網頁的交互操作，既可以從網頁上獲得所需的信息，也可以把自己的一些觀念信息、見解和意見傳遞出去與其他人交流。1.10網頁的Web標準任務3網頁的基本知識網頁的Web標準不是某一個標準，而是一系列標準的集合。Web標準由萬維網聯盟（W3C）制定，分為結構標準、表現標準、行為標準和代碼標準。1.10網頁的Web標準任務3網頁的基本知識1．結構標準（1）可擴展標記語言（ExtensibleMarkupLanguage，XML）和HTML一樣，XML同樣來源于標準通用標記語言，可擴展標記語言和標準通用標記語言都是能定義其他語言的語言。XML設計的最初目的是彌補HTML的不足，以強大的擴展性滿足網絡信息發布的需要，后來逐漸用于網絡數據的轉換和描述。（2）可擴展超文本標記語言（ExtensibleHyperTextMarkupLanguage，XHTML）雖然XML的數據轉換能力強大，大多數情況下完全可以替代HTML，但面對成千上萬已有的站點，直接采用XML還為時過早。因此，在HTML4.0的基礎上，用XML的規則對其進行擴展，得到了XHTML。簡單地說，建立XHTML的目的就是實現HTML向XML的過渡。1.10網頁的Web標準任務3網頁的基本知識2．表現標準層疊樣式表（CSS）：W3C創建CSS標準的目的是以CSS取代HTML表格式布局、幀和其他表現語言。純CSS布局與結構式XHTML相結合能幫助網頁設計者分離外觀與結構，使站點的訪問及維護更加容易。1.10網頁的Web標準任務3網頁的基本知識3．行為標準文檔對象模型（DocumentObjectModel，DOM）：根據W3C的DOM規范（http:///DOM/），DOM是一種與瀏覽器、平臺、語言的接口，使用戶可以訪問頁面上其他的標準組件。簡單地說，DOM解決了Netscape的JavaScript和Microsoft的JScript之間的沖突，給予Web設計師和開發者一個標準的方法，讓他們能訪問他們站點中的數據、腳本和表現層對象。4．代碼標準代碼標準包括結束標記、大小寫元素、嵌套、屬性、特殊符號、屬性賦值以及注釋等。謝謝模塊二HTML5開發基礎目錄任務一任務二任務三寫一個簡單的HTML5頁面設置“在線學習網”的首頁文件頭部信息引入知識點2.1HTML簡介2.2HTML文件的基本結構任務1編寫一個簡單的HTML5頁面2.1HTML簡介HTML是一切網頁實現的基礎，在網絡中瀏覽的網頁都是一個個由HTML標記構成的文件。瀏覽器只要看到HTML源代碼，就能解析成網頁。HTML文件本身是一種純文本文件，我們可以使用任意一種文本編輯工具進行編寫。比如，使用最簡單的記事本工具，或Editplus、HBuilder、Sublime、InterlliJIDEA等文本編輯工具，或Dreamweaver可視化編輯工具編寫。目前，最新的HTML文件是HTML5。任務1編寫一個簡單的HTML5頁面2.1HTML簡介2.1.1HTML的定義HTML（HyperTextMarkupLanguage，超文本標記語言）是由W3C（WorldWideWebConsortium，萬維網聯盟）所提出的，是用于描述網頁文檔的一種標記語言，其主要用途是制作網頁。用HTML編寫的超文本文檔稱為HTML文檔，也叫網頁。它能獨立于各種操作系統平臺。任務1編寫一個簡單的HTML5頁面2.1HTML簡介2.1.2HTML的發展歷史HTML（第一版）：在1993年6月作為互聯網工程工作小組（IETF）工作草案發布，并非標準。

HTML2.0：1995年11月作為RFC1866發布，在RFC2854于2000年6月發布之后被宣布已經過時。

HTML3.2：1996年1月14日，W3C推薦標準。

HTML4.0：1997年12月18日，W3C推薦標準。

HTML4.01（微小改進）：1999年12月24日，W3C推薦標準。HTML5：2014年10月29日，W3C宣布，經過接近8年的艱苦努力，HTML5標準規范終于制定完成。任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構HTML文檔包含標記和純文本，它被Web瀏覽器讀取并解析后以網頁的形式顯示出來。每個網頁都有其基本的結構，包括HTML文檔的結構，標記的語法格式，語法規范等。2.2.1HTML的語法格式HTML的語法結構主要有標記、屬性和元素組成，其基本語法格式如下：<標記名屬性1=“屬性值1”屬性2=“屬性值2”…>內容</標記名>任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構1.標記HTML標記組成HTML文檔的元素，每一個標記描述了一個功能。標記分為單標記，雙標記兩種。（1）單標記：只需單獨使用就能完整地表達意思，這類標記的基本語法格式如下：<標記名>（2）雙標記：這類標記的基本語法格式如下：<標記名>內容</標記名>任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構2.標記的屬性使用HTML制作網頁時，如果想讓HTML標記提供更多的信息，可以使用HTML標記的屬性來實現，許多單標記和雙標記的始標記內可以包含一些屬性。在HTML中，屬性要在開始標記中指定，用來表示該標記的性質和特性。基本語法格式如下：<標記名屬性1=“屬性值1”屬性2=“屬性值2”…>任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構3.元素HTML（element）元素是由“標記（tag）”和“屬性（attribute）”所組成，指的是從開始標記到結束標記的所有代碼。沒有內容的HTML元素被稱為空元素，空元素是在開始標記中關閉的。例如，以下代碼片段所示：<p>歡迎來到廣東創新科技職業學院信息工程學院</p><!--該p元素為有內容的元素-->任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構2.2.2HTML的文檔結構HTML5文件的基本結構如下：<!doctypehtml><!--文檔類型的聲明--><html><!--文檔的開始--><head><!--文檔頭部的開始--><title>此處是網頁標題</title><!--文檔標題信息的開始和結束--></head><!--文檔頭部的結束--><body><!--文檔主體的開始-->此處是網頁文件內容</body><!--文檔主體的結束--></html><!--文檔的結束-->任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構2.2.3HTML的常用標記HTML5文檔核心是HTML5標記，標記是用來實現網頁元素的最小單位。學習HTML語言時，除要知道HTML語言結構外，更多是學習掌握這些標記的使用方法。HTML語言的常用標記包含文件結構標記、文本段落標記、鏈接標記、表格標記、列表標記等等任務1編寫一個簡單的HTML5頁面任務1編寫一個簡單的HTML5頁面任務實現（1）創建一個HTML5頁面。（3）該網頁頁面顯示的內容為“讓我們開始HTML語言的新旅程！”。（2）該網頁頁面標題為“第一個HTML頁面”。引入知識點任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3頁面的頭部摘要信息在網頁的頭部<head>和</head>標記所包含的部分中，通常存放一些介紹頁面內容的信息，例如頁面標題、關鍵字、描述、頁面大小，更新日期和網頁快照等。其中，網頁標題及頁面描述稱為網頁的摘要信息。如果希望自己發布的網頁能被百度、谷歌等搜索引擎搜索到，在制作網頁時就需要注意編寫網頁的摘要信息。接下來就介紹一下網頁的摘要信息，<meta>標記如何去使用。任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.1<meta>標記元數據（metadata）是關于數據的信息。<meta>標記是頁面頭部部分中的一個輔助性標記，提供關于HTML文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。meta元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.2<meta>標記屬性<meta>設置的內容包括字符集、網頁關鍵字、網頁描述信息、頁面的刷新及跳轉等，這些內容都是通過設置meta標記的相應屬性來實現。任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.3使用<meta>設置頁面字符集在HTML5中，有一個新的charset屬性，它使字符集的設置更加簡化。基本語法格式如下：<metacharset="字符集">例如，下列代碼告訴瀏覽器，網頁使用字符集為utf-8，代碼如下：<metacharset="utf-8">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.4使用<meta>設置作者信息基本語法格式如下：<metaname="author"content="作者的姓名">例如，將作者的姓名“李小茗”添加到網頁的源代碼中，代碼如下：<metaname="author"content="李小茗">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.5使用<meta>設置網頁搜索關鍵字基本語法格式如下：<metaname="keywords"content="關鍵字1,關鍵字2,關鍵字3,…">例如，定義針對搜索引擎的關鍵字，代碼如下：<metaname="keywords"content="網頁制作,HTML,Dreamweaver">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.6使用<meta>設置網頁描述信息基本語法格式如下：<metaname="discription"content="描述內容">例如，在網頁中設置為網站設計者提供網頁制作的說明信息，代碼如下：<metaname="discription"content="這是一個網頁制作等在線學習平臺，擁有系統的前端和移動開發等課程。">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.7使用<meta>設置網頁刷新時間基本語法格式如下：<metahttp-equiv="refresh"content="刷新間隔時間">例如，將網頁設置為每隔10秒自動刷新，代碼如下：<metahttp-equiv="refresh"content="10">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.8使用<meta>設置網頁自動跳轉基本語法格式如下：<metahttp-equiv="refresh"content="刷新間隔時間";url="頁面地址">例如，將網頁設置10秒之后，網頁自動跳轉到中國大學慕課網站首頁，代碼如下：<metahttp-equiv="refresh"content="10";url="">任務2設置“在線學習網”的首頁文件頭部信息任務實現（1）設置制作的study.html頁面的頭部內容，該網頁文檔的標題為“在線學習網”。（3）添加頁面作者信息，作者為“李小茗”。（2）設定網頁字符集為“utf-8”。（4）設定頁面關鍵字“IT在線學習，IT在線教育，IT在線培訓，IT精品課，移動端學習，HTML學習，PHP學習，Web前端學習，Python學習，數字媒體軟件學習，多媒體軟件培訓”。任務2設置“在線學習網”的首頁文件頭部信息謝謝模塊三文本與段落目錄任務一任務二任務三文字的基本排版對文字進行加強描述使用塊級元素和行內元素制作專業信息頁面任務四任務五特殊符號的使用添加注釋引入知識點任務1文字的基本排版3.2換行3.3預格式化3.4水平線3.5各級標題3.1段落3.1段落在將頁面中的文字標記為段落時，通常會使用<p>…</p>對文字進行標記，瀏覽器會自動地在段落的前后添加空行。并且這個標記必須要成對出現，在段落開始處添加<p>，結束處添加</p>。例如：任務1文字的基本排版<p>這是一個段落</p>3.2換行任務1文字的基本排版在對HTML文檔進行編輯時，回車鍵是不能實現換行功能的，若要實現換行，則需要使用<br/>標記，在需要換行的位置添加<br/>即可。一個<br/>標記表示換一行，要實現換多行需要使用多個<br/>。雖然兩個<br/>標記效果上和<p>標記類似，但是從文檔結構上分析還是有所不同的，換行標記不能視為描述文檔結構的行為，若要實現段落，還應使用<p>標記。例如，對一段文字強制換行的代碼如下：<p>截止到2023年12月，圖書館館藏圖書總量達155.28萬冊，其中紙質圖書120.38萬冊，電子圖書34.90萬冊；中外文報刊4433種，其中紙質報刊111種，電子報刊4322種。<br/>隨著學院規模的發展，根據《普通高等學校基本辦學條件指標(試行)》中規定的生均圖書冊數的相關指標要求，我們將繼續逐步分階段地進行館藏資源建設。同時圖書館正著手建設各種數據庫資源，并探求館際合作，為學院教學以及科研提供良好的信息資源保障。</p>3.3預格式化任務1文字的基本排版在對HTML文檔進行編輯時，有時會希望一些文本在瀏覽器中顯示的效果就是在HTML文檔中編輯的格式，這個時候我們可以使用<pre>來進行標記，這個標記也是成對出現的<pre></pre>，被這對標簽括起來的文本通常會保留其空格及一些換行等格式。我們以一段文字為例，具體使用方法如下：<pre>9月7日—8日，廣東創新科技職業學院迎來了近7000名2023級高職新生，錄取報到人數再創新高（因受天氣影響，報到將延續至9月11日）。同學們從五湖四海如約而至，在青春洋溢的創新學院開啟嶄新的人生篇章和探索之旅。為了順利保障2023級新生平安入學、有序報到，做到讓學生滿意，家長放心，學校專門成立迎新工作專項領導小組，多次召開專項工作會議，制定《2023年新生工作方案》，針對迎新工作統籌規劃、統一部署，各職能部門和二級學院迅速響應、分工協作，用實際行動做好各項準備工作和應急預案迎接新生入校。</pre>3.4水平線任務1文字的基本排版在瀏覽網頁時會經常看到用水平線來分割文字類別或內容，在編輯HTML文檔時我們可以使用<hr>來標記出一條橫線，它和<br>一樣是一個空標記。我們以信工學院簡介的樣式為例來看一下橫線標記的用法：<pre>信息工程學院簡介</pre><hr/><pre>廣東創新科技職業學院信息工程學院經過十二年的發展，現有在校學生近4050名，已開設計算機應用技術（省級重點專業）、通信技術、計算機網絡技術(華為信息與網絡技術學院)、軟件技術、電子信息工程技術、動漫制作技術、物聯網應用技術、大數據技術、云計算技術應用、人工智能技術應用、應急救援技術、安全智能監測技術、信息安全技術應用（籌）等13個專業。2021年由計算機應用技術牽頭，聯合計算機網絡技術、軟件技術、物聯網應用技術、大數據技術等專業，申報省高職院校高水平專業群，獲教育廳立項。</pre>3.5各級標題任務1文字的基本排版在使用Word軟件編輯文檔時，經常會使用標題樣式直接創建不同樣式的標題。在一段文字中，最基本的文本結構通常會分為不同等級的標題和正文，利用不同等級的標題使文字的結構更加清晰。HTML文檔中包含6級標題，分別用<h1>~<h6>來標記，數字越大，字號越小，即<h1>標記字號最大的標題，<h6>標記字號最小的標題。設置這幾個級別的標題的代碼如下：<h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6>具體任務任務1文字的基本排版（1）創建一個HTML5頁面，為文檔各個標題添加不同級別的標題標記；（2）添加水平線分隔題目和主體內容；（3）使內容保留文檔原有格式。任務實現任務1文字的基本排版（1）在HBuilderX中創建一個空白HTML5頁面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結構。代碼如下：<!doctypehtml><html><head><metacharset="utf-8"/><title>文字基本樣式設計</title></head><body></body></html>任務實現任務1文字的基本排版（2）在<body>標記中，使用標題標記<h1>將標題名設置為一級標題，并利用<h3>將作者名等信息設置為三級標題：<h1align="center">報刊資源建設</h1><h3align="center"><b>時間：2023-12-12來源：作者：點擊量：</b></h3>任務實現任務1文字的基本排版（3）添加一條水平線，使用<pre>標記添加原有格式的內（4）運行代碼，得到如圖所示的效果。<hr/><pre>目前我館征訂有中外文報刊達520種，其中紙質報刊170余種，電子報刊350余種，免費報刊1307種。 配置有觸摸屏閱報機，同時開通試用博看期刊數據庫，該數據庫收錄有3600多種40000多本人文類暢銷報刊,每天更新期刊80-200種,可以較大程度地滿足我院師生的相關信息需求。</pre>3.6強調文本任務2對文字進行加強描述在對文本信息進行強調時，可以使用<b>、<strong>、<i>和<em>標記，其中<b>和<strong>對文本進行加粗處理，<i>和<em>對文本進行傾斜處理。1．<b>標記<b>標記能對文字進行加粗處理，用來突出文字。此標記也是成對出現的，中間的文本即為要加粗處理的文本，其語法格式如下：<b>加粗突出文本</b>2．<strong>標記<strong>標記在HTML4.0中為加強強調文本（strongemphasizedtext），在HTML5中變為重要文本（importanttext）。其語法格式如下：<strong>重要文本</strong>3.6強調文本任務2對文字進行加強描述3．<i>標記<i>標記原本用于使文本傾斜，現在主要用其來表示一些與文本不同的部分內容。例如，外文及一些專業術語等，其語法格式如下：<i>斜體文本</i>4．<em>標記<em>標記在HTML5中表示強調文本（emphasizedtext），其語法格式如下<em>強調文本</em>這4個突出文檔內容的標記，從視覺上看，<b>和<strong>呈現出了文字加粗的效果，<em>和<i>呈現出了文字傾斜的效果，但從定義上看，四者存在著一定的區別。3.7作品標題任務2對文字進行加強描述在一段文字中有時會涉及一些作品名、書籍名、歌曲名及電視節目名等標題，這時可以使用<cite>標記來處理。其語法格式如下：<p><cite>《高等數學》</cite>是大學生的必修課。</p>3.8小型文本任務2對文字進行加強描述在瀏覽網頁時，會發現在有的網頁下方有一些注解或者版權等信息用小型文本進行呈現，一般使用<small>來標記小型文本，小型文本不會忽略文本的強調也不會降低重要性。其語法格式如下：<small>舉報電話：010-XXXXXXX</small>3.9標記文本的更改任務2對文字進行加強描述在編輯HTML文檔時，可以使用<ins>和<del>標記來描述文檔的更新和修正。通常情況下兩者會一起使用，<del>表示刪除的文本，呈現出刪除線，<ins>表示更改的文本，呈現出下畫線。其語法格式如下：<del>刪除的文本</del><ins>插入的更改文本</ins>3.10文本的上下標任務2對文字進行加強描述在對HTML文本編輯時，會遇到設置文本上下標的情況。當然，上下標的設置在數學相關公式的編輯上比較常用，一般使用<sub>來標記文本下標，<sup>來標記文本上標。其語法格式如下：_文本下標^文本上標3.11時間和日期任務2對文字進行加強描述日期標記是HTML5的新增標記，網頁中會經常出現關于日期的信息，但是一直沒有標準的方式去標記，<time>標記就是用來解決這個問題的，這個標記可以使其他搜索引擎較快、較便捷地獲取到相關的時間信息。其語法格式如下：<timedatetime=""pubdate="">元素內容</time>其中，datetime屬性用來定義元素的日期和時間，如果沒有定義此屬性，那么就要在元素內容中給出時間信息。pubdate屬性是一個邏輯值，表示<time>元素中的日期和時間是否就是文檔的發布時間。此標記不會使不同的日期和時間元素有不同的顯示形式，僅是方便其他搜索引擎獲取相關的日期和時間信息。3.12其他相關元素任務2對文字進行加強描述除了上面提到的相關強調文本標記，還有一些標記可以使文本信息產生一定的效果，如表所示。標記功能描述<dfn>定義一個定義項目<code>定義計算機代碼文本<samp>定義樣本文本<kbd>定義鍵盤文本<var>定義變量<blockquote>定義另一個源的塊引用<q>定義一個短引用<address>定義文檔作者或者作者的聯系信息<abbr>定義縮寫形式<mark>定義帶記號文本<m>定義突出顯示文本具體任務任務2對文字進行加強描述（1）創建一個HTML頁面，添加特定文章中的相關文本內容；（2）對簡介中的不同內容添加不同的強調標記以達到突出的效果。任務實現任務2對文字進行加強描述（1）在HBuilderX中創建一個空白的HTML5頁面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結構，并添加相關文本內容。<!doctypehtml><html><head><metacharset="utf-8"/><title>文本強調</title></head><body><palign="center">在大學有個明確的目標很重要</p><palign="center">期次：第1期</p><p>大學是一個能鍛煉自己、培養自己、證明自己的地方。但并非每個人都能得償所愿，在大學里，我們會遇到來自五湖四海的老師和同學。大學里也充滿了許多誘惑，一不小心就會墮落和迷失自己，在大學里，有個明確的目標很重要！在平時看《時代》雜志時會希望自己也可以有個美麗的未來。</p></body></html>任務實現任務2對文字進行加強描述（2）對正文段落中的文本信息進行不同形式的突出，具體實現如下：<body><palign="center"><b>在大學有個明確的目標很重要</b></p><palign="center"><em>期次：第1期</em></p><small><strong>大學</strong><i>是一個能鍛煉自己、培養自己、證明自己的地方。</i>但并非每個人都能得償所愿，在大學里，我們會遇到來自五湖四海的老師和同學。大學里也充滿了許多誘惑，一不小心就會墮落和迷失自己，在大學里，有個明確的目標很重要！在平時看<cite>《時代》</cite>雜志時會希望自己也可以有個美麗的未來。</small></body>其中，<b>和<strong>為文本加粗突出，<i>和<em>為文本傾斜突出，<cite>表示作品名稱，<small>表示小型文本。任務實現任務2對文字進行加強描述（3）運行代碼，最終得到如圖所示的效果。3.13塊級元素任務3使用塊級元素和行內元素制作專業信息頁面塊級（block）元素在瀏覽器中的顯示就像在其首尾部都有一個換行符一樣，常見的塊級元素如表所示。文檔節div段落p圍繞元素邊框fieldset表格行tr視頻video文檔節section無序列表ul邊框上標題legend表格單元格th媒介源source導航nav有序列表ol選擇列表select表格單元td文本軌道track頁眉header項目li組合選擇列表optgroup表格列屬性col聲音內容audio文章article列表dl選擇列表選項option表格格式化列組colgroup換行br文章側欄aside列表項目dt下拉列表datalist內聯框架iframe水平分割線hr頁腳footer項目描述dd表格table媒介內容分組figure格式文本pre元素的細節details命令菜單menu表格標題captionfigure標題figcaption塊引用blockquotedetails元素可見標題summary菜單項目menuitem組合表內容thead圖像映射map文檔聯系信息address對話窗口dialog命令按鈕command組合主題內容tbody圖像區域area居中文本center標題h1~h6表單form組合表注內容tfoot圖形容器canvas水平垂直方向插入空間spacer3.13塊級元素任務3使用塊級元素和行內元素制作專業信息頁面塊級元素的特點如下：（1）總是在新行上開始；（2）高度、行高及外邊距和內邊距都可控制；（3）寬度默認是其容器的全部（除非設定一個寬度）；（4）可以容納行內元素和其他塊元素。HTML5新增的塊級元素包括：header、section、footer、aside、nav、article、figure。3.14行內元素任務3使用塊級元素和行內元素制作專業信息頁面行內元素（inline，又稱內聯元素）可以出現在某一行句子中，并且不用新起一行，常見的行內元素如表所示。內聯容器span大字體big禁止換行nobr錨點a注音rt縮寫abbr小字體small單詞換行時機wbr圖片img進度條progress強調em上標sup打字機文本tt內嵌embed度量meter粗體強調strong下標sub鍵盤文本kbdinput標記label定義變量var突出顯示的文本mark刪除文本del時間日期time輸入框input計算機代碼文本code加粗b刪除線strike引用cite按鈕button計算機代碼樣本samp斜體i刪除線s短引用q生成密鑰keygen字段dfn文本方向bdi插入更改的文本ins字體設置font多行文本輸入框textarea輸出結果output文字方向bdo下劃線u

3.14行內元素任務3使用塊級元素和行內元素制作專業信息頁面行內元素的特點如下：（1）和其他元素都在一行上；（2）高、行高及外邊距和內邊距不可改變；（3）寬度就是其文字或圖片的寬度，不可改變；（4）只能容納文本或者其他行內元素。3.15<span>標記任務3使用塊級元素和行內元素制作專業信息頁面一般使用<span>標記來組合文檔中的行內元素，如果不對<span>應用樣式，那么span元素中的文本與其他文本不會有任何視覺上的差異。盡管如此，span元素仍然可為p元素增加額外的結構。其語法格式如下：<p><span>文本1</span>文本2</p>具體任務任務3使用塊級元素和行內元素制作專業信息頁面（1）創建一個HTML5頁面，添加關于計算機應用專業的信息文本；（2）利用塊級元素和行內元素對這些文本信息進行修飾。任務實現任務3使用塊級元素和行內元素制作專業信息頁面（1）在HBuilderX中創建一個空白的HTML5頁面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結構，添加專業信息文本，代碼如下：任務實現任務3使用塊級元素和行內元素制作專業信息頁面<!doctypehtml><html><head><metacharset="utf-8"/><title>招聘信息</title></head><body><h1>計算機應用技術</h1> <pre>專業名稱：計算機應用技術專業代碼：610201招生對象：高中畢業或3+證書（文理科） </pre><pre>專業培養目標本專業以服務廣東和珠三角地區經濟社會發展為宗旨，面向各類企事業單位，培養德、智、體、美全面發展，具有良好的綜合素質，系統地掌握計算機專業領域必備的基本理論知識和基本技能，能夠完成職業典型工作任務，具備團隊合作能力、溝通能力和社會責任感，能夠直接進入相應工作崗位，熟練運用一到兩種程序設計語言，掌握網絡技術和計算機系統維護技術；能從事程序設計、數據庫應用、計算機系統維護、網頁制作與網站設計、技術支持與IT產品銷售等工作，具有創新精神、實踐精神和良好職業道德的的高等應用型技術人才。</pre><pre>專業核心能力1．具備編程開發能力，掌握PHP+MySQL或Jsp網絡編程技術。2．具有使用Photoshop、Flash進行網頁美工UI設計開發能力。3．具有使用HTML、Javascript、AJAX、jQuery等技術進行特效網頁設計能力。4．具備移動互聯網HTML5、CSS3響應式移動互聯網開發能力。5．具備精通使用PHP+MySQL或Jsp編程技術進行編碼能力。6．具有基于B/S架構的系統開發能力。7．具有Windows和Linux操作系統下軟件布署和優化能力。</pre><small>學校地址</small><small>廣東省東莞市厚街鎮教育園區學府路</small></body></html>任務實現任務3使用塊級元素和行內元素制作專業信息頁面（2）利用塊級元素和行內元素對文本信息進行修飾，使其更有助于用戶獲取信息，具體實現如下：其中，<b>為文本加粗突出，<address>表示地址，<br/>表示換行，<h1>表示一級標題。<body><h1>計算機應用技術</h1> <pre>專業名稱：計算機應用技術專業代碼：610201招生對象：高中畢業或3+證書（文理科） </pre><pre><b>專業培養目標</b><br/>本專業以服務<b>廣東</b>和<b>珠三角地區</b>經濟社會發展為宗旨，面向各類企事業單位，培養德、智、體、美全面發展，具有良好的綜合素質，系統地掌握計算機專業領域必備的基本理論知識和基本技能，能夠完成職業典型工作任務，具備團隊合作能力、溝通能力和社會責任感，能夠直接進入相應工作崗位，熟練運用一到兩種程序設計語言，掌握網絡技術和計算機系統維護技術；能從事程序設計、數據庫應用、計算機系統維護、網頁制作與網站設計、技術支持與IT產品銷售等工作，具有創新精神、實踐精神和良好職業道德的的高等應用型技術人才。<br/></pre><pre><b>專業核心能力</b><br/>1．具備編程開發能力，掌握PHP+MySQL或Jsp網絡編程技術。<br/>2．具有使用Photoshop、Flash進行網頁美工UI設計開發能力。<br/>3．具有使用HTML、Javascript、AJAX、jQuery等技術進行特效網頁設計能力。<br/>4．具備移動互聯網HTML5、CSS3響應式移動互聯網開發能力。<br/>5．具備精通使用PHP+MySQL或Jsp編程技術進行編碼能力。<br/>6．具有基于B/S架構的系統開發能力。<br/>7．具有Windows和Linux操作系統下軟件布署和優化能力。<br/></pre><small>學校地址</small><small><address>廣東省東莞市厚街鎮教育園區學府路</address></small></body>任務實現任務3使用塊級元素和行內元素制作專業信息頁面（3）運行代碼，最終得到如圖所示的效果。3.16字符實體任務4特殊符號的使用如果要正確地插入一些特殊符號，或者在插入多個空格時能夠正確顯示，那么就一定要插入字符實體（characterentities）。字符實體的語法格式一般如下:&實體名或者&#實體號常用的字符實體如表所示。3.16字符實體任務4特殊符號的使用顯示結果描述實體名稱實體編號

空格

<小于號<<>大于號>>&和號&&"引號""'撇號'(IE不支持)'￠分（cent）￠￠￡鎊（pound）￡￡￥元（yen）￥￥€歐元（euro）€€§小節§§?版權（copyright）???注冊商標???商標??×乘號××÷除號÷÷具體任務任務4特殊符號的使用（1）創建一個HTML5頁面，添加反比例函數單調區間文本；（2）對特殊符號進行修飾。任務實現任務4特殊符號的使用（1）在HBuilderX中創建一個空白HTML5頁面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結構，添加文本信息，并對其中特殊符號的書寫進行修改：<html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>特殊符號添加</title><!--TemplateEndEditable--><!--TemplateBeginEditablename="head"--><!--TemplateEndEditable--></head><body><p><strong>反比例函數單調性</strong><br/>當k>0時，圖象分別位于第一、三象限，每一個象限內，從左往右，y隨x的增大而減小；<br/>當k<0時，圖象分別位于第二、四象限，每一個象限內，從左往右，y隨x的增大而增大。<br/>k>0時，函數在x<0上同為減函數、在x>0上同為減函數；k<0時，函數在x<0上為增函數、在x>0上同為增函數。</p></body></html>任務實現任務4特殊符號的使用（2）運行代碼，最終得到如圖所示的效果。3.17旁注任務5添加注釋HTML5新增了<ruby>、<rt>和<rp>標記，<ruby>用來標記需要被旁注的文本，如拼音或解釋。<rt>標記定義文本的拼音或解釋，還包括可選的<rp>元素，定義當瀏覽器不支持<ruby>元素時顯示的內容。其語法格式如下：<ruby>文本<rt>文本的拼音或解釋</rt></ruby>或者<ruby>文本<rt><rp>(</rp>文本的拼音或解釋<rp>)</rp></rt></ruby>3.18注釋任務5添加注釋為了提升代碼的可讀性，方便他人理解代碼和對代碼進行維護，通常對代碼添加注釋說明。添加注釋的語法格式如下：<!--注釋內容-->具體任務任務5添加注釋（1）創建一個HTML5頁面，給漢字添加拼音旁注；（2）在網頁源代碼中添加注釋。任務實現任務5添加注釋（1）在HBuilderX中創建一個空白的HTML5頁面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結構，添加漢字以及旁注。<!doctypehtml><html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>旁注</title><!--TemplateEndEditable--><!--TemplateBeginEditablename="head"--><!--TemplateEndEditable--></head><body><ruby>燚<rt>yì</rt></ruby><br/><ruby>燚<rt><rp>(</rp>yì<rp>)</rp></rt></ruby></body></html>任務實現任務5添加注釋（2）為代碼添加注釋。（3）運行代碼，最終得到如圖所示的效果。<!doctypehtml><html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>旁注</title><!--TemplateEndEditable--><!--TemplateBeginEditablename="head"--><!--TemplateEndEditable--></head>

<body><!--漢字上方添加拼音旁注--><ruby>燚<rt>yì</rt></ruby><br/><!--漢字右側添加拼音旁注--><ruby>燚<rt><rp>(</rp>yì<rp>)</rp></rt></ruby></body></html>謝謝模塊四網頁中的圖像與多媒體技術目錄任務一制作“在線學習網”的平面作品展示頁面任務二任務三制作“在線學習網”的廣告作品展示頁面制作“在線學習網”的多媒體作品展示頁面引入知識點4.1認識網頁中的圖像4.2使用<img>標記插入圖像任務1制作“在線學習網”的平面作品展示頁面4.1認識網頁中的圖像在網絡帶寬的不斷提升以及人們的審美情趣越來越高的今天，圖像已經成為網頁中必不可少的重要元素之一。網頁圖像運用的好壞，決定了網頁設計的成敗。任務1制作“在線學習網”的平面作品展示頁面4.1認識網頁中的圖像4.1.1網頁常用圖像格式了解網頁圖像的類型和格式是在網頁中合理使用圖像的基礎。圖像的文件格式有很多種，但由于受到網絡帶寬和瀏覽器的限制，通常在網頁中使用的有JPEG、GIF和PNG三種。其中JPEG和GIF圖像格式在網頁上使用最廣，能支持大多數瀏覽器。任務1制作“在線學習網”的平面作品展示頁面4.1認識網頁中的圖像4.1.2網頁圖像使用原則目前，雖然寬帶在國內普及，但在制作網頁時也要在速度和美觀之間取得較好地結合點。一般普通的首頁應該限制在100KB以內，其他頁面最好控制在500KB以內。因為，如果一個網頁很大，在瀏覽器里超過30秒還沒有打開，大部分瀏覽者都會選擇放棄。任務1制作“在線學習網”的平面作品展示頁面4.2使用<img>標記插入圖像在網頁中插入圖像可以起到美化頁面的作用。HTML提供了<img>標記來插入圖像。基本語法格式如下：<imgsrc="圖像文件路徑">任務1制作“在線學習網”的平面作品展示頁面4.2使用<img>標記插入圖像4.2.1使用標記屬性設置圖像大小使用<img>標記插入圖像，默認情況下將插入原始大小的圖像，如果想在插入時修改圖像的大小，可以使用height和width屬性來實現。基本語法格式如下：<imgsrc="圖像文件路徑"width="圖像的寬度"height="圖像的高度">任務1制作“在線學習網”的平面作品展示頁面4.2使用<img>標記插入圖像4.2.2使用標記屬性設置圖像描述信息和替換信息設置圖像提示信息使用title屬性，設置圖像的替換信息使用alt屬性。基本語法格式如下：<imgsrc="圖像文件的路徑"title="圖像描述信息"alt="圖像替換信息">任務1制作“在線學習網”的平面作品展示頁面4.2使用<img>標記插入圖像4.2.3使用標記屬性設置圖像的邊框默認情況下，插入圖像是沒有邊框的，有時在我們設計網頁時為了獲得某種效果，需要讓圖像顯示邊框。設置圖像的邊框可以使用圖像的border屬性。基本語法如下：

<imgsrc="圖像文件的路徑"border="邊框寬度">語法說明："邊框寬度"的單位為像素，最小值是1。任務1制作“在線學習網”的平面作品展示頁面4.2使用<img>標記插入圖像4.2.4使用標記屬性設置圖像的對齊方式默認情況下，插入圖像在水平方向放置在對象的左邊，在垂直方向則與baseline（基線）對齊。我們可以使用圖像的align屬性修改它的對齊方式。基本語法如下：<imgsrc="圖像文件的路徑"align="對齊方式">任務1制作“在線學習網”的平面作品展示頁面4.2使用<img>標記插入圖像4.2.5使用標記屬性設置圖像與周圍對象的間距默認情況下，圖像與周圍對象的水平間距和垂直間距都比較緊湊，顯得較為擁擠。這樣的間距，很多時候都不符合我們的設計需要。使用圖像的hspace屬性和vspace屬性可以分別設置圖像與周圍對象的間距。基本語法格式如下：<imgsrc=“圖像文件的路徑”vspace=“垂直間距數值”hspace=“水平間距數值">任務1制作“在線學習網”的平面作品展示頁面任務實現（1）在“在線學習網”平面作品展示頁面中插入文字和5張平面作品的圖像。（2）設置文字和圖像的屬性，讓網頁頁面更加美觀。任務1制作“在線學習網”的平面作品展示頁面引入知識點任務2制作在“在線學習網”的廣告作品展示頁面4.3使用<object>標記在網頁中插入Flash動畫4.4使用<embed>標記在網頁中插入多媒體內容4.3使用<object>標記在網頁中插入Flash動畫<object>標記用于包含音頻、視頻、Javaapplets、ActiveX、PDF以及Flash等對象。<object>標記設計的初衷是取代<img>和<applet>標記。不過由于漏洞以及缺乏瀏覽器支持，這一點并未實現。<object>標記可用于WindowsIE3.0及以后瀏覽器或者其他支持ActiveX控件的瀏覽器。針對不同的瀏覽器，<object>標記的語法也有所不同，下面分別對它們進行介紹。任務2制作在“在線學習網”的廣告作品展示頁面1．針對IE9/IE8/IE7/IE6等低版本，基本語法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…</object>任務2制作在“在線學習網”的廣告作品展示頁面4.3使用<object>標記在網頁中插入Flash動畫2．針對IE10/IE11和非IE瀏覽器，基本語法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--><objecttype="application/x-shockwave-flash"data="media/star.swf"width="value"height="value"><!--<![endif]--><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--></object><!--<![endif]--></object>任務2制作在“在線學習網”的廣告作品展示頁面4.3使用<object>標記在網頁中插入Flash動畫<embed>標記和<object>標記一樣，也可以在網頁中插入Flash動畫、音頻、視頻等多媒體內容。不同于<object>標記的是，<embed>標記用于NetscapeNavigator2.0及以后的瀏覽器或者其它支持Netscape插件的瀏覽器，其中包括IE和Chrome瀏覽器。Firefox瀏覽器目前還不支持<embed>標記。基本語法格式如下：<embedsrc="路徑"屬性1=value1屬性2=value2…></embed>任務2制作在“在線學習網”的廣告作品展示頁面4.4使用<embed>標記在網頁中插入多媒體內容任務實現（1）使用<object>在“在線學習網”廣告作品展示頁面的頂部位置插入Flash動畫片頭。（2）使用<embed>在“在線學習網”廣告作品展示頁面中插入“vivo智能手機廣告”視頻作品。任務2設置“在線學習網”的首頁文件頭部信息引入知識點任務3制作“在線學習網”的多媒體作品展示頁面4.5認識網頁中的多媒體內容4.6使用<video>標記在網頁中插入多媒體內容4.7使用<audio>標記在網頁中插入音頻4.5認識網頁中的多媒體內容HTML5提供的視頻、音頻插入方式簡單易用，主要通過<video>標記和<audio>標記在頁面中插入視頻和音頻文件，這需要正確選擇視頻和音頻格式。任務3制作“在線學習網”的多媒體作品展示頁面4.5.1網頁常用視頻格式隨著網速的大幅提高，越來越多的設計者喜歡在網頁中加入視頻文件。視頻不但使網頁越來越精彩及富有動感，同時也越來越受到瀏覽者的歡迎，像在線影視、視頻教程等。在HTML5中插入的視頻格式常用的包括MPEG4、Ogg、WebM等。任務3制作“在線學習網”的多媒體作品展示頁面4.5認識網頁中的多媒體內容4.5.2網頁常用音頻格式人類獲取信息的方式，除了視覺以外就是聽覺了。為滿足人們聽覺的需求，有時需要在網頁中插入聲音元素，包括插入背景音樂和插入音頻文件等。在HTML5中插入的音頻格式常用的包括MP3、WAV、OggVorbis等，任務3制作“在線學習網”的多媒體作品展示頁面4.5認識網頁中的多媒體內容4.6使用<video>標記在網頁中插入多媒體內容<video>標記用于在網頁中插入視頻和音頻。基本語法格式如下：<videosrc="視頻文件或音頻文件的路徑"controls="controls">替代內容</video>語法說明：src屬性指定多媒體文件，這是一個必設屬性。在<video>與</video>之間插入的內容是提供不支持<video>標記的瀏覽器顯示的。任務3制作“在線學習網”的多媒體作品展示頁面4.7使用<audio>標記在網頁中插入音頻<audio>用于在網頁中插入音頻。基本語法格式如下：<audiosrc="音頻的路徑"controls="controls">替代內容</audio>語法說明：src屬性指定多媒體文件，這是一個必設屬性。在<audio>與</audio>之間插入的內容是提供不支持<audio>標記的瀏覽器顯示的。任務3制作“在線學習網”的多媒體作品展示頁面任務實現（1）使用<video>標記在“在線學習網”多媒體作品展示頁面中插入視頻作品。（3）使用<audio>標記在“在線學習網”多媒體作品展示頁面中插入音頻作品（2）使用<video>標記在“在線學習網”多媒體作品展示頁面中插入音頻作品。任務3制作“在線學習網”的多媒體作品展示頁面謝謝模塊五應用表格布局頁面目錄任務一任務二任務三圖書借閱詳情頁面的制作課程表的制作學院首頁頁面的制作引入知識點任務