HTML5+CSS3+JavaScript網頁設計與制作案例教程項目1網頁設計基礎項目2HTML5基礎項目3CSS格式化網頁項目4盒子模型劃分網頁模塊項目5為網頁添加列表和超鏈接項目6為網頁添加表格和表單項目7全新的網頁視聽技術項目8JavaScript編程全套可編輯PPT課件

本課件是可編輯的正常PPT課件網頁網站設計基礎項目一本課件是可編輯的正常PPT課件前言網絡信息時代，網頁的作用舉足輕重，行業類別不同、功能不同的各種網頁使得新經濟時代行業信息變得系統化、規范化、專業化和規模化，更有利于行業信息交流的便捷化與新經濟、新產業模式的高效運作與規模化發展。本項目重點講解網頁網站設計的基礎知識，思維導圖如下。本課件是可編輯的正常PPT課件1.3

網頁設計規范1.1

網頁和網站概述1.2

網頁設計原則1.4

網站制作流程目錄1.5網頁制作技術入門1.6

創建第一個網頁本課件是可編輯的正常PPT課件1.1

網頁和網站概述本課件是可編輯的正常PPT課件1.1

網頁和網站概述網頁是一種可以在互聯網傳輸、能被瀏覽器識別和翻譯成頁面并顯示出來的文件，是網站的基本構成元素。例如，在瀏覽器地址欄中輸入吉林農業科技學院的網址https：///，并按Enter鍵，這時瀏覽器界面就會轉換為學院官網首頁，如圖1-1所示。本課件是可編輯的正常PPT課件1.1

網頁和網站概述通常網頁的擴展名為htm和html。htm和html二者在本質上并沒有區別，都是靜態網頁文件的擴展名。可以使用記事本更改擴展名的方式創建一個網頁。例如，將記事本的擴展名txt更改為html，即可得到一個網頁文件。利用記事本編輯html網頁本課件是可編輯的正常PPT課件1.1

網頁和網站概述網站由多個網頁組成，各網頁之間并不是雜亂無章的，而是有序鏈接在一起的。例如，當用戶單擊吉林農業科技學院官網首頁導航欄上的“科學研究”超鏈接時，就會跳轉到“吉林農業科技學院科技處”頁面，如圖1-2所示。網站和網頁屬于包含關系，網站包含的網頁分別負責不同的職能與任務。本課件是可編輯的正常PPT課件1.1

網頁和網站概述1.1.1網頁的基本構成要素雖然網頁的表現形式千變萬化，但網頁的基本構成要素是相同的，主要包含以下四大要素。文字圖像超鏈接多媒體本課件是可編輯的正常PPT課件1.1

網頁和網站概述1.文字文字作為信息傳達的重要載體，也是網頁構成的基本要素。網頁中的文字主要包括標題、信息、文字鏈接等幾種形式，如圖1-3所示。文字的字體、字號、顏色和排列對整體版面設計影響極大，網頁制作者應該多花心思編排設計。本課件是可編輯的正常PPT課件1.1

網頁和網站概述2.圖像圖像具有比文字更加直觀、強烈的視覺表現效果，在網頁中主要承擔提供信息、展示作品、裝飾網頁、表現風格和超鏈接的功能。在網頁中，圖像往往是創意的集中體現，需要與傳達的信息含義和理念相符。網頁中使用的圖像主要包括GIF、JPG、PNG等格式。本課件是可編輯的正常PPT課件1.1

網頁和網站概述3.超鏈接一個網站通常由多個頁面構成，進入網站時首先看到的是其首頁，如果想從首頁跳轉到其他頁面，就需要在首頁相應位置設置超鏈接。所謂超鏈接，是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一張圖片、一個電子郵件地址、一個文件，甚至是一個應用程序。本課件是可編輯的正常PPT課件1.1

網頁和網站概述4.多媒體多媒體一般包括文本、聲音和圖像等多種媒體形式。在計算機系統中，多媒體指組合兩種或兩種以上媒體的一種人機交互式信息交流和傳播媒體。使用的媒體包括文字、圖片、照片、聲音、動畫和影片，以及程序所提供的互動功能。本課件是可編輯的正常PPT課件1.1

網頁和網站概述1.1.2網頁的相關名詞URL（統一資源定位符）是Web地址，用于定位互聯網上的資源。Internet就是通常所說的互聯網，互聯網是一個由計算機相互連接而成的網絡，實現了全球信息資源的共享和互動，對人類生活產生了深遠影響。WWW（萬維網）是Internet提供的一種服務，主要用于網頁瀏覽，是Internet上最主要的服務之一。030102DNS（域名系統）負責將域名轉換為IP地址，方便人們記憶和訪問網絡資源。04本課件是可編輯的正常PPT課件1.1

網頁和網站概述W3C（萬維網聯盟）是一個國際標準化組織，負責制定Web技術規范，如HTML和XML，促進了Web技術的兼容和發展。HTTP（超文本傳輸協議）規定了瀏覽器和萬維網服務器之間的通信規則，確保用戶請求的文件準確無誤地到達客戶端。Web是互聯網的使用環境，對于普通用戶是瀏覽內容的地方，對于網站設計者是技術的總稱。070506本課件是可編輯的正常PPT課件1.1

網頁和網站概述1.1.3Web標準web標準12結構（structure）3行為（behavior）表現（presentation）本課件是可編輯的正常PPT課件1.1

網頁和網站概述1.結構標準結構用于對網頁元素進行整理和分類，主要包括XML和XHTML兩個部分。01是一種可擴展的腳本語言。XML最初的目的是彌補HTML的不足，它具有強大的擴展性，可用于數據的轉換和描述。XML（extensiblemarkuplanguage）02中文譯名為可擴展超文本標記語言。XHTML是基于XML的標記語言，是在HTML4.0的基礎上用XML的規則對其進行擴展建立起來的，它實現了HTML向XML的過渡。XHTML（extensiblehypertextmarkuplanguage）本課件是可編輯的正常PPT課件1.1

網頁和網站概述2.表現標準表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是串聯樣式表（cascadingstylesheet，CSS）。CSS標準建立的目的是以CSS為基礎進行網頁布局，控制網頁的表現。CSS布局與XHTML結構語言相結合，可以實現表現與結構的分離，使網站的訪問及維護更加容易。本課件是可編輯的正常PPT課件1.1

網頁和網站概述3.行為標準行為是指網頁模型的定義及交互的編寫，主要包括DOM和ECMAScript兩個部分。（1）DOM

是文檔對象模型。W3C文檔對象模型是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。（2）ECMAScript是ECMA國際以JavaScript為基礎制定的標準腳本語言。JavaScript是一種基于對象和事件驅動，并具有相對安全性的客戶端腳本語言，廣泛用于Web開發，常用來給HTML網頁添加動態功能，如響應用戶的各種操作等。本課件是可編輯的正常PPT課件1.2網頁設計原則本課件是可編輯的正常PPT課件1.2網頁設計原則網頁是傳播信息的載體，也是吸引訪問者的主要入口。網頁設計師在進行網頁設計時，遵循相應的設計原則，能夠明確設計目標，準確、高效地完成設計任務。網頁設計原則包含以下四個原則。主題明確視覺美觀以用戶為中心0302內容與形式統一0104本課件是可編輯的正常PPT課件1.2網頁設計原則以用戶為中心的原則要求設計師站在用戶的角度進行思考，主要體現在以下幾點。1.2.1

以用戶為中心ITEMA1.用戶優先網頁設計的目的是吸引用戶瀏覽使用，無論何時都應該以用戶優先。用戶的需求是什么，設計師就設計什么，即使網頁設計的再具美感，如果不是用戶所需，也是失敗的設計。ITEMA2.考慮用戶帶寬設計網頁時需要考慮用戶帶寬。針對當前網絡高度發達的時代，可以考慮在網頁中添加動畫、音頻、視頻等多媒體元素，打造內容豐富的網頁效果。本課件是可編輯的正常PPT課件1.2網頁設計原則視覺美觀是網頁設計的基本原則。由于網頁內容常常包羅萬象，形式千變萬化，人們在瀏覽時很容易產生視覺疲勞。這時賞心悅目、富有創意的網頁往往更能抓住訪問者的眼球。設計師在設計網站頁面時，應該靈活運用對比與調和、對稱與平衡、節奏與韻律以及留白等技巧，使空間、文字、圖形之間建立聯系，實現網頁的協調美觀。1.2.2視覺美觀本課件是可編輯的正常PPT課件1.3網頁設計規范本課件是可編輯的正常PPT課件1.3網頁設計規范設計規范是針對特定產品制定出來的一整套產品標準，包括流程標準、技術標準、設計規則等。它能減少錯誤發生率并提高設計質量和輸出穩定性，從而助力產品體驗升級。流程標準技術標準設計規則設計規范本課件是可編輯的正常PPT課件1.3網頁設計規范1.3.1不同對象的不同設計規范遵循設計規范能夠降低開發成本、提高效率、減少工作量、縮短周期，并提升產品的性能和品質。1.對開發者而言設計規范的應用能夠提升產品的一致性，提供更好的用戶體驗，降低用戶學習成本，避免使用過程中的困惑。2.對用戶而言設計規范提供了決策參考框架，保證品牌調性和整體風格的一致性，減少出錯率，提升工作效率，確保產品延續性，并促進設計師與開發者之間的協作效率。3.對設計師而言本課件是可編輯的正常PPT課件1.3網頁設計規范1.3.2配色原則網頁安全色01遵循配色方案02本課件是可編輯的正常PPT課件1.3網頁設計規范1.使用網頁安全色網頁安全色是指在不同的硬件環境、操作系統和瀏覽器中都能正常顯示的顏色集合。使用網頁安全色進行配色，可以避免原有的色彩失真。網頁安全色是指顏色十六進制值的組合內部含有cc、99、66、33、00，只有含有這樣值的組合才是網頁安全色。0102需要注意的是，隨著顯示設備精度的提高，許多網站設計已經不再拘泥于選擇安全色，它們利用其他非安全色展現了新穎獨特的設計風格，所以并不需要刻意地追求使用局限在216種網頁安全色范圍內的顏色，而是應該更好地搭配使用安全色和非安全色。本課件是可編輯的正常PPT課件1.3網頁設計規范2.遵循配色方案同類色是指色相一致，但是飽和度和明度不同的顏色。盡管在網頁設計時要避免采用單一的色彩，以免產生單調的感覺，但通過調整色彩的飽和度和明度也可以產生豐富的色彩變化，從而避免單調。使用同類色鄰近色是12色相環上間隔30°左右的顏色，色相彼此近似、冷暖性質一致。鄰近色之間往往是你中有我、我中有你。使用鄰近色對比色是24色相環上間隔120°~180°的顏色。對比色包含色相對比、明度對比、飽和度對比等，使用對比色本課件是可編輯的正常PPT課件1.3網頁設計規范1.3.3設計尺寸規范網頁設計師在設計產品時，需要考慮到各種各樣的計算機和移動設備的屏幕尺寸，如何做到兼顧所有的用戶體驗就顯得尤為重要。01因為網頁尺寸與用戶屏幕相關，而用戶屏幕的種類難以統計，所以設計師只能顧及主流屏幕的分辨率，其他分辨率用適配的方式來解決。02本課件是可編輯的正常PPT課件1.3網頁設計規范常見屏幕分辨率有1366px×768px（常見尺寸）011920px×1080px（大網頁）021024px×768px（最小尺寸）032560px×1600px（MacBookPro13）042880px×1800px（MacBookPro15）052560px×1440px（iMac27）06本課件是可編輯的正常PPT課件1.3網頁設計規范1.標準尺寸（1）800px×600px下，網頁寬度保持在778px以內，就不會出現水平滾動條，高度則視版面和內容決定。（2）1024px×768px下，網頁寬度保持在1002px以內，如果滿框顯示，高度為612~615px，就不會出現水平滾動條和垂直滾動條。（3）在Photoshop（簡稱Ps）中制作網頁可以在800px×600px狀態下顯示全屏，頁面的下方不會出現滾動條，尺寸為740×560px左右。（4）在Ps中制作的圖放到網絡上就不一樣了，因為Web只用到256色，而Ps中的RGB或CMYK，以及LAB或HSB的色域很寬，顏色范圍很廣，所以會出現失色現象。本課件是可編輯的正常PPT課件1.3網頁設計規范2.尺寸規格（2）120×60px，主要用于制作logo。（4）125×125px，適用于表現照片效果的圖像廣告。（6）392×72px，主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。（8）88×31px，主要用于網頁鏈接或網站小型logo。（1）120×120px，適用于產品或新聞照片展示。（3）120×90px，主要用于產品演示或制作大型logo。（5）234×60px，適用于框架或主頁的廣告鏈接。（7）468×60px，應用最為廣泛的廣告條尺寸，用于頁眉或頁腳。0102030405060708本課件是可編輯的正常PPT課件1.3網頁設計規范1.3.4字體規范字體設計的總原則是可辨識性和易讀性。中文建議使用“微軟雅黑”字體，英文則建議使用Arial無襯線字體，常用的字體、字號如圖1-4所示。本課件是可編輯的正常PPT課件1.3網頁設計規范網站的字體大小并沒有硬性規定具體的字號，可以根據實際情況酌情考慮，但是要優先使用偶數字號。字體規格也不需要太多，最好使用三種混搭。如果需要體現更多層次，可以用改變字體顏色或加粗的方式來實現。a（1）12px是應用于網頁的最小字體，適用于非突出性的日期、版權等注釋性內容。（2）14px則適用于非突出性的普通正文內容。（3）16px或18px適用于突出性的標題內容。本課件是可編輯的正常PPT課件1.3網頁設計規范相鄰兩個文字的間距，其實不需要太過介意，除了特殊的需求之外，都可以使用默認數值的間距。行間距（1）行間距，推薦以字體大小的1.5~2倍作為參考。段間距（2）段間距，推薦以字體大小的2~2.5倍作為參考。本課件是可編輯的正常PPT課件1.3網頁設計規范1.3.5命名規范在Web開發中，給網頁命名是一個非常基礎的要點。正確的網頁命名規則能夠提升網站的搜索引擎優化效果，方便維護和管理。本節將向讀者介紹網頁命名規則，幫助讀者正確地命名網頁。本課件是可編輯的正常PPT課件1.3網頁設計規范1.命名規則在Web開發中，有許多命名規則可供選擇。每個規則都有其獨特的優點和缺點。下面列出了一些常用的命名規則。駝峰式命名法：在Web開發中廣泛應用，特點是首個單詞首字母小寫，后續單詞首字母大寫，如page

Content

和headerContainer，有利于提高文件名和變量名的可讀性。下劃線命名法采用單詞間以下劃線分隔的方式，如page_content和header_container，相較于駝峰式命名，可讀性略低，但在某些編程場景下較為常見。連字符命名法以連字符連接各個單詞，如content和header-container，雖然可讀性較好，但不如駝峰式命名法常用，常用于文件名和URL路徑中。Pascal命名法所有單詞首字母均大寫，其余字母小寫，如PageContent和HeaderContainer，在Web開發中不如駝峰式命名法普遍，但在某些編程語言（如Delphi、早期VB等）中廣泛應用。本課件是可編輯的正常PPT課件1.3網頁設計規范2.命名規范的重要性在進行網頁設計時，命名規范是非常重要的。因為一個好的命名規范可以使頁面的結構更加清晰、易于理解，同時也便于后期的維護和調試工作。另外，在進行團隊協作時，命名規范更是必不可少的，因為它可以使團隊成員之間的溝通更加有效。3.命名規范的基本原則在制定命名規范時，應該遵循以下幾個基本原則。（1）簡單性。命名應該簡單易懂，盡量避免使用過于復雜的術語或縮寫。（2）一致性。應該保持命名的一致性，即相同類型的元素應該采用相同的命名方式。（3）可讀性。命名應該具有良好的可讀性，使得其他人能夠輕松地理解這些命名。（4）語義化。命名應該具有一定的語義化，使得代碼更具有可讀性和可維護性。本課件是可編輯的正常PPT課件1.3網頁設計規范4.命名規范的注意事項在制定命名規范時，還應該注意以下一些事項。（1）遵循廣泛接受的命名規范，不要盲目地制定自己的命名規范。（2）盡量避免使用過于具體的名稱，因為這樣會使代碼難以重用。（3）盡量避免使用過于簡短或冗長的名稱。（4）在命名時應該避免使用不合法的字符，如空格、/等。本課件是可編輯的正常PPT課件1.4網站制作流程本課件是可編輯的正常PPT課件1.4網站制作流程制作網站就像一個工程，有一定的工作流程。設計師在制作網站時，只有遵循制作流程才能有條不紊地完成網站制作，讓網站的結構更加規范合理。網站制作流程主要包括以下6個步驟。01確定網站主題03收集素材05搭建網站靜態頁面02網站整體規劃04設計網頁效果圖06網站發布本課件是可編輯的正常PPT課件1.4網站制作流程1.4.1確定網站主題網站主題是網站的核心部分。一個網站只有在確定主題之后，才能有針對性地選取內容。確定網站主題的方法十分簡單，可以通過前期的調查和分析來實現。1.調查調查的目的是了解各類網站的發展狀況，總結出當前主流網站的特點、優勢、競爭力，為網站的定位確定一個方向。在調查時主要考慮以下問題。（1）網站建設的目標。（2）網站面向的人群。（3）企業的產品。（4）企業的服務。本課件是可編輯的正常PPT課件1.4網站制作流程2.分析分析是指根據調查結果對企業自身進行特點、優勢、競爭力的分析，初步確定網站主題。在確定主題時要遵循以下原則。（2）主題要能體現企業自身的特點。（1）主題要小而精，定位不宜過大過高。本課件是可編輯的正常PPT課件1.4網站制作流程1.4.2網站整體規劃對網站進行整體規劃能夠幫助設計師快速厘清網站結構，讓網頁之間的關聯更加緊密。通常規劃一個網站時，可以先用思維導圖（推薦使用XMind軟件）把每個頁面的名稱列出來，以某校園網站首頁為例，如圖1-5所示。本課件是可編輯的正常PPT課件1.4網站制作流程規劃好整體的網站框架思維導圖后，就可以規劃網站的其他內容了，主要包括網站的功能、結構、版面布局等。如果是一些功能需求較多的網站，還需要產品經理設計原型圖。圖1-6所示為某教育網站首頁原型圖。只有在設計網站之前把這些方面都考慮到了，才能夠保證網站制作有條不紊地進行，避免頁面或重要功能模塊的缺失。本課件是可編輯的正常PPT課件1.4網站制作流程1.4.3收集素材設計師可以從書刊、網絡上收集需要的文本，然后將這些文本加工、整理成Word文檔保存。1.文本素材在網頁設計中，往往會加入一些圖片素材，使頁面的內容更加充實，更具有可讀性和可觀賞性。2.圖片素材特殊元素是指網頁中包含的非系統默認字體、動態圖、視頻等。這些元素在制作效果圖時都會以靜態圖片的形式展現。3.網頁中的特殊元素本課件是可編輯的正常PPT課件1.4網站制作流程1.4.4設計網頁效果圖屏幕分辨率是指屏幕顯示的分辨率，通常以水平和垂直像素來衡量。1.適配主流屏幕分辨率01頁面尺寸就是網頁的寬度和高度。版心是指頁面的有效使用面積，是主要元素及內容所在的區域。2.考慮頁面尺寸和版心02本課件是可編輯的正常PPT課件1.4網站制作流程1.4.5搭建網站靜態頁面搭建網站靜態頁面是指將設計的網頁效果圖轉換為能夠在瀏覽器瀏覽的頁面。這就需要對頁面設計規范有一個整體的認識，并掌握一些基本的網頁腳本語言，如HTML、CSS等。需要注意的是，在拿到網頁效果圖后，切忌直接切圖、搭建結構，應該先仔細觀察網頁效果圖，對頁面的配色和布局有一個整體的認識。對網頁效果圖有了基本的分析之后，就能夠切圖了。切圖就是對網頁效果圖進行分割，將無法用代碼實現的部分保存為圖片。當切完圖之后，就可以使用HTML、CSS搭建網站靜態頁面。搭建網站靜態頁面就是將網站效果圖轉換為瀏覽器可識別標簽語言的過程。本課件是可編輯的正常PPT課件1.4網站制作流程1.4.6網站發布利用FTP發布網站的用戶，一般在遠程主機上專門設有目錄來接收上傳的文檔，上傳后遠程服務器管理員將網頁文檔放置到相應的Web網站目錄位置。1.以FTP方式發布12對于擁有專線接入的自己管理的網站，Web服務器相當于本地設備，網站發布可以由網站管理員直接在Web服務器上操作，此時只需將待發布的網頁直接復制或移到服務器相應的目錄中即可。3.以直接目錄方式發布34一般網頁制作工具都有網站發布功能，如DreamweaverCS6等。2.用網頁制作工具發布對于具有直接管理權限的大型網站來說，網頁發布數量較多，為了便于網頁維護和網站管理，往往需要使用專門的網頁發布程序。4.使用專用發布程序發布本課件是可編輯的正常PPT課件1.5網頁制作技術入門本課件是可編輯的正常PPT課件1.5網頁制作技術入門在網頁設計中，設計圖只有轉化為HTML，才能在瀏覽器中顯示。因此，要想學習網站的開發，首先要掌握HTML的基礎知識，在完成網頁結構后還需要由CSS進行網頁樣式的設置，最后使用JavaScript技術實現網頁交互特效。本課件是可編輯的正常PPT課件1.5網頁制作技術入門1.5.1HTMLHTML主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。HTML提供了許多標簽，如段落標簽、標題標簽、超鏈接標簽、圖片標簽等，網頁中需要定義什么內容，用相應的HTML標簽描述即可。01HTML之所以被稱為超文本標記語言，是因為它通過標簽來描述網頁內容，同時網頁文本中包含了所謂的超鏈接點。超鏈接將網站與網頁以及各種網頁元素鏈接起來，構成豐富多彩的Web頁面。02本課件是可編輯的正常PPT課件1.5網頁制作技術入門1.5.2CSSCSS是一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言，主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片外形（寬高、邊框樣式、邊距等）以及版面布局等外觀顯示樣式，CSS文件擴展名為css。通過使用CSS可以大大提升網頁開發的工作效率。1.5.3JavaScriptJavaScript是Web頁面中的一種腳本語言，可以將靜態頁面轉變成支持用戶交互并響應相應事件的動態頁面。JavaScript是一種輕量級的編程語言，是可插入HTML頁面的編程代碼。JavaScript插入HTML頁面后，可由所有的現代瀏覽器執行。本課件是可編輯的正常PPT課件1.5網頁制作技術入門1.5.4常用開發工具1.DreamweaverAdobeDreamweaver簡稱DW，中文名稱為夢想編織者，最初是由美國Macromedia公司開發的，2005年被Adobe公司收購。DW是集網頁制作和網站管理于一身的所見即所得的網頁代碼編輯器。利用其對HTML、CSS、JavaScript等內容的支持，設計師和程序員幾乎可以在任何地方快速制作和建設網站。DW使用所見即所得的接口，亦有HTML編輯功能，借助經過簡化的智能編碼引擎，可以輕松地創建、編碼和管理動態網站；訪問代碼提示，即可快速了解HTML、CSS和其他Web標準；使用視覺輔助功能減少錯誤并提高網站開發速度。本課件是可編輯的正常PPT課件1.5網頁制作技術入門圖1-7和圖1-8所示分別是軟件的窗口界面和操作界面。本課件是可編輯的正常PPT課件1.5網頁制作技術入門2.SublimeTextSublimeText是一個文本編輯器，同時也是一個先進的代碼編輯器，最早由程序員JonSkinner于2008年1月份開發出來。SublimeText具有漂亮的用戶界面和強大的功能，如代碼縮略圖、功能插件等，同時還是一個跨平臺的編輯器，支持Windows、Linux、macOS等操作系統。SublimeText啟動圖標和工作界面如圖1-9所示。本課件是可編輯的正常PPT課件1.5網頁制作技術入門3.HBuilderHBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web集成開發環境。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身的主體是由Java語言編寫的，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。用戶可在HBuilder官網（http：//www.dcloud.io/）下載最新版的HBuilderX。HBuilderX目前有Windows和macOS兩個版本，下載時選擇適合自己的版本即可。像許多其他代碼編輯器一樣，HBuilderX采用通用的用戶界面和左側的資源管理器布局，而右側的編輯器則顯示已打開文件的內容。本課件是可編輯的正常PPT課件1.5網頁制作技術入門HBuilderX用戶界面如圖1-10所示。本課件是可編輯的正常PPT課件1.5網頁制作技術入門（1）用戶界面。①編輯器。編輯器是編輯文件的主要區域。可以在垂直和水平方向上并排打開任意數量的編輯器。②項目管理器。項目管理器包含諸如資源管理器之類的不同視圖，可在用戶處理項目時提供幫助。③工具欄。工具欄提供常用工具的按鈕，方便用戶進行操作。④狀態欄。狀態欄中有關于打開的項目和編輯的文件的信息。⑤控制臺。可以在編輯器區域下方顯示不同的面板，以獲取輸出或調試信息，錯誤和警告或集成終端。面板也可以向右移動以獲得更多垂直空間。每次啟動HBuilderX時，它的打開狀態與上次關閉時的狀態相同。本課件是可編輯的正常PPT課件1.5網頁制作技術入門（2）迷你地圖。迷你地圖可以提供源代碼的高級概述，顯示在編輯器的右側。單擊或拖動陰影區域可以快速跳至文件的不同部分，對于快速導航和理解代碼很有幫助，其效果如圖1-11所示。本課件是可編輯的正常PPT課件1.5網頁制作技術入門（3）文檔結構圖。HBuilderX提供了優雅簡潔的文檔導覽界面，單擊狀態欄左側的“文檔結構圖”按鈕，或按Alt+W（Windows平臺）或Ctrl+W（macOS平臺）快捷鍵即可打開文檔結構圖，如圖1-12所示。本課件是可編輯的正常PPT課件1.6創建第一個網頁本課件是可編輯的正常PPT課件1.6創建第一個網頁前面已經簡單介紹了網頁、HTML、CSS和網頁制作工具的基礎知識，下面通過案例學習如何使用HBuilderX創建一個包含HTML結構和CSS樣式的簡單網頁，具體步驟如下。（1）打開HBuilderX，新建一個默認HTML文檔，快捷鍵為Ctrl+Shift+N。切換到“代碼”視圖，這時在窗口中會出現HBuilderX自帶的代碼，如圖1-13所示。關于這些代碼，在項目2中會詳細介紹。本課件是可編輯的正常PPT課件1.6創建第一個網頁（2）在代碼的第5行<title>與</title>標簽之間輸入HTML文檔的標題，這里將其設置為“歡迎進入課堂”。（3）在<body>與</body>標簽之間添加網頁的主體內容，如下所示：<p>歡迎加入《靜態網站設計》課堂！</p>（4）在菜單欄中選擇“文件”→“保存”選項，快捷鍵為Ctrl+S。在彈出的“另存為”對話框中選擇文件的保存地址并輸入文件名。本課件是可編輯的正常PPT課件1.6創建第一個網頁例如，本例將文件命名為example1-1.html，保存在chapter1文件夾中，如圖1-14所示。本課件是可編輯的正常PPT課件1.6創建第一個網頁（5）在瀏覽器中運行example1-1.html（雙擊example1-1.html文件），效果如圖1-15所示。由于本案例僅僅使用了段落標簽<p>，瀏覽器窗口中只顯示一個段落文本。至此，就使用HTML完成了一個簡單的網頁。本課件是可編輯的正常PPT課件感謝觀看本課件是可編輯的正常PPT課件HTML5基礎項目二本課件是可編輯的正常PPT課件前言HTML5是hypertextmarkuplanguage5的縮寫，結合了HTML4.01的相關標準并進行了革新，符合現代網絡發展要求，在2014年正式發布。HTML5由不同的技術構成，其在互聯網中得到了非常廣泛的應用，提供更多增強網絡應用的標準。本項目重點講解HTML5基礎標簽和圖文混排的應用，思維導圖如下。本課件是可編輯的正常PPT課件2.3

文本標簽2.1

HTML5概述2.2

標簽概述2.4

圖像標簽目錄2.5動手實踐本課件是可編輯的正常PPT課件2.1

HTML5概述本課件是可編輯的正常PPT課件2.1

HTML5概述HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。本課件是可編輯的正常PPT課件2.1

HTML5概述2.1.1HTML5的發展歷程HTML的出現由來已久，1993年，HTML首次以因特網的形式發布。隨著HTML的發展，W3C掌握了對HTML規范的控制權，負責后續版本的制定工作。1993年2004年2014年2015年2019年本課件是可編輯的正常PPT課件2.1

HTML5概述2004年，一些瀏覽器廠商聯合成立了WHATWG工作組，它們建立了HTML5規范，并開始專門針對Web應用開發新功能。2006年，W3C組建了新的HTML工作組，明智地采納了WHATWG的意見，并于2008年發布了HTML5的工作草案。2014年10月29日，W3C宣布HTML5標準規范制定完成，并公開發布。本課件是可編輯的正常PPT課件2.1

HTML5概述2015年1月，YouTube徹底拋棄了Flash，實現向HTML5的全面過渡。隨后，各個網站都開始從Flash轉向HTML5。2019年5月23日，W3C與WHATWG針對共同開發HTML與DOM規范達成協議，W3C重新成立HTML工作組。本課件是可編輯的正常PPT課件2.1

HTML5概述2.1.2HTML5的優勢HTML5將Web帶入一個成熟的應用平臺，在這個平臺上，視頻、音頻、圖像、動畫以及交互都進行了規范。為了更好地處理今天的互聯網應用，HTML5添加了很多新元素及功能。下面具體介紹HTML5的一些優勢。在HTML5之前，各大瀏覽器廠商為了爭奪市場占有率，會在各自的瀏覽器中增加各種各樣的功能，并且不具有統一的標準。使用不同的瀏覽器，常常看到不同的頁面效果。在HTML5中，納入了所有合理的擴展功能，具備良好的跨平臺性能。1.解決了跨瀏覽器問題本課件是可編輯的正常PPT課件HTML從1.0到5.0經歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，許多特性經過多年的完善，發展成了一種非常重要的標簽語言。HTML5新增特性如下。2.1

HTML5概述(2)新的表單控件，如calendar、date、time、email、url、search等表單標簽。(3)用于繪畫的canvas元素。(4)用于媒介回放的video和audio元素。(5)強大的新應用程序接口（applicationprograminterface，API）。2.新增了多個特性(1)新的特殊內容元素，如header、nav、section、article、footer等結構性標簽。本課件是可編輯的正常PPT課件HTML5標準的制定是以用戶優先為原則的，一旦遇到無法解決的沖突，規范會把用戶放在第一位。另外，為了增強HTML5的使用體驗，還增強了以下兩個方面的設計。2.1

HTML5概述3.用戶優先的原則安全機制的設計1）表現和內容分離2）本課件是可編輯的正常PPT課件為了確保HTML5的安全，在設計HTML5時做了很多針對安全的設計。HTML5引入了一種新的基于來源的安全模型，該模型不僅易用，而且針對不同的API都通用。使用這個安全模型，不需要借助任何安全的hack就能跨域進行安全對話。1）2）雖然表現和內容分離已在HTML4.0中就有設計，但分離并不徹底。為了避免可訪問性差、代碼復雜度高、文件過大等問題，HTML5規范中更細致、清晰地分離了表現和內容。但是考慮到HTML5的兼容性問題，一些陳舊的表現和內容的代碼還是可以兼容使用的。2.1HTML5概述本課件是可編輯的正常PPT課件作為當下流行的通用標簽語言，HTML5盡可能地簡化，嚴格遵循了“簡單至上”的原則，主要體現在以下幾個方面。2.1

HTML5概述(2)新的簡化的DOCTYPE文檔類型。(3)簡單而強大的HTML5API。(4)以瀏覽器原生能力替代復雜的JavaScript代碼。4.化繁為簡的優勢(1)簡化的字符集聲明。為了實現這些簡化操作，HTML5規范需要比以前更加細致、精確。為了避免造成誤解，HTML5對每一個細節都有著非常明確的規范說明，不允許有任何歧義和模糊出現。本課件是可編輯的正常PPT課件2.1

HTML5概述2.1.3HTML5的語法HTML5采用寬松的語法格式，標簽可以不區分大小寫，這是HTML5語法變化的重要體現。例如：<p>這里的p標簽大小寫不一致</P>在上面的代碼中，雖然p標簽的開始標簽與結束標簽大小寫并不匹配，但是在HTML5語法中是完全合法的。1.標簽不區分大小寫本課件是可編輯的正常PPT課件2.1

HTML5概述在HTML5語法中，屬性值不使用引號也是正確的。例如：<inputchecked=atype=checkbox/><inputreadonly=readonlytype=text/>2.允許屬性值不使用引號本課件是可編輯的正常PPT課件2.1

HTML5概述以上代碼都是完全符合HTML5規范的，等價于：<inputchecked="a"type="checkbox"/><inputreadonly="readonly"type="text"/>本課件是可編輯的正常PPT課件2.1

HTML5概述在HTML5中，部分標志性屬性的屬性值可以省略。例如：<inputchecked="checked"type="checkbox"/><inputreadonly="readonly"type="text"/>3.允許省略部分屬性的屬性值本課件是可編輯的正常PPT課件2.1

HTML5概述可以省略為<inputcheckedtype="checkbox"/><inputreadonlytype="text"/>從上述代碼可以看出，checked="checked"可以省略為checked，而readonly="readonly"可以省略為readonly。本課件是可編輯的正常PPT課件2.1

HTML5概述在HTML5中，可以省略屬性值的屬性如表2-1所示。本課件是可編輯的正常PPT課件2.1

HTML5概述本課件是可編輯的正常PPT課件2.1

HTML5概述2.1.4HTML5文檔的基本格式學習任何一門語言，首先要掌握它的基本格式。接下來具體講解HTML5文檔的基本格式。HTML5文檔的基本格式主要包括<!DOCTYPE>標簽、<html>標簽、<head>標簽、<body>標簽。<!DOCTYPE>標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML或XHTML標準規范，HTML5文檔中的DOCTYPE聲明非常簡單，代碼如下：1.<!DOCTYPE>標簽本課件是可編輯的正常PPT課件2.1

HTML5概述<!DOCTYPEhtml>只有在開頭處使用<!DOCTYPE>標簽聲明，瀏覽器才能將該網頁作為有效的HTML文檔，并按指定的文檔類型進行解析。使用HTML5的DOCTYPE聲明，會觸發瀏覽器以標準兼容模式來顯示頁面。本課件是可編輯的正常PPT課件2.1

HTML5概述<html>標簽位于<!DOCTYPE>標簽之后，也稱為根標簽，用于告知瀏覽器其自身是一個HTML文檔。<html>標簽標志著HTML文檔的開始，</html>標簽標志著HTML文檔的結束，在它們之間的是文檔的頭部和主體內容。2.<html>標簽<head>標簽用于定義HTML文檔的頭部信息，也稱為頭部標簽，緊跟在<html>標簽之后，主要用來封裝其他位于文檔頭部的標簽，如<title>、<meta>、<link>及<style>等，用來描述文檔的標題、作者以及與其他文檔的關系等。一個HTML文檔只能含有一對<head>標簽，絕大多數文檔頭部包含的數據都不會真正作為內容顯示在頁面中。3.<head>標簽本課件是可編輯的正常PPT課件2.1

HTML5概述<body>標簽用于定義HTML文檔所要顯示的內容，也稱為主體標簽。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標簽內，<body>標簽中的信息才是最終展示給用戶的內容。一個HTML文檔只能含有一對<body>標簽，且<body>標簽必須在<html>標簽內，位于<head>標簽之后，與<head>標簽是并列關系。4.<body>標簽本課件是可編輯的正常PPT課件2.1

HTML5概述2.1.5HTML5文檔的頭部相關標簽設計和制作網頁時，經常需要設置頁面的基本信息，如頁面的標題、作者、與其他文檔的關系等。為此HTML提供了一系列標簽，這些標簽通常都寫在<head>標簽內，因此被稱為頭部相關標簽。下面詳細介紹HTML文檔的頭部相關標簽。本課件是可編輯的正常PPT課件2.1

HTML5概述<title>標簽用于定義HTML頁面的標題，即給網頁取一個名字，必須位于<head>標簽之內。一個HTML文檔只能含有一對<title>標簽，<title>與<title>標簽之間的內容將顯示在瀏覽器窗口的標題欄中。其基本語法格式如下：<title>網頁標題名稱</title>1.<title>標簽本課件是可編輯的正常PPT課件2.1

HTML5概述如圖2-1所示，線框內顯示的文本即<title>標簽中的內容，是當前運行網頁的標題。本課件是可編輯的正常PPT課件2.1

HTML5概述<meta/>標簽用于定義頁面的元信息，可重復出現在<head>頭部標簽中，在HTML中是一個單標簽。<meta/>標簽本身不包含任何內容，通過“名稱/值”的形式，成對地使用其屬性來定義頁面的相關參數。例如，為搜索引擎提供網頁的關鍵字、作者姓名、內容描述，以及定義網頁的刷新時間等。下面介紹<meta/>標簽常用的幾組設置。（1）<metaname="名稱"content="值"/>。在<meta/>標簽中使用name/content屬性可以為搜索引擎提供信息，其中，name屬性提供搜索內容名稱，content屬性提供對應的搜索內容值。具體應用如下。2.<meta/>標簽本課件是可編輯的正常PPT課件2.1

HTML5概述①設置網頁關鍵字。<metaname="keywords"content="教育教學，人才培養"/>其中，name屬性的值是keywords，用于定義搜索內容名稱為網頁關鍵字，content屬性的值用于定義關鍵字的具體內容，多個關鍵字內容之間用逗號分隔。本課件是可編輯的正常PPT課件2.1

HTML5概述②設置網頁描述。<metaname="description"content="計算機系，提升人才培養質量、計算機科學與技術，電子信息科學與技術，網絡工程，電氣工程及其自動化，軟件工程，統計學，數據科學與大數據技術、校企聯合、工學融合、雙師雙能"/>其中，name屬性的值為description，用于定義搜索內容名稱為網頁描述，content屬性的值用于定義描述的具體內容，需要注意的是網頁描述的文字不必過多。本課件是可編輯的正常PPT課件2.1

HTML5概述③設置網頁作者。<metaname="author"content="吉林農業科技學院"/>其中，name屬性的值為author，用于定義搜索內容名稱為網頁作者，content屬性的值用于定義具體的作者信息。本課件是可編輯的正常PPT課件2.1

HTML5概述（2）<metahttp-equiv="名稱"content="值"/>。在<meta/>標簽中使用http-equiv/content屬性可以設置服務器發送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁面提供相關的參數。其中，http-equiv屬性提供參數類型，content屬性提供對應的參數值。默認會發送<metahttp_x0002_equiv="Content-Type"content="text/html"/>，通知瀏覽器發送的文件類型是HTML，具體應用如下。本課件是可編輯的正常PPT課件2.1

HTML5概述①設置字符集，如“吉林農業科技學院”官網字符集的設置如下：<metahttp-equiv="Content-Type"content="text/html；charset=utf-8"/>其中，http-equiv屬性的值為Content-Type，content屬性的值為text/html和charset=utf-8，中間用“；”隔開，用于說明當前文檔類型為HTML，字符集為utf-8（國際化編碼）。本課件是可編輯的正常PPT課件2.1

HTML5概述②設置頁面自動刷新與跳轉，如定義某個頁面10秒后跳轉至“吉林農業科技學院”官網：<metahttp-equiv="refresh"content="10；url=http：///"/>其中，http-equiv屬性的值為Content-Type，content屬性的值為text/html和charset=utf-8，中間用“；”隔開，用于說明當前文檔類型為HTML，字符集為utf-8（國際化編碼）。本課件是可編輯的正常PPT課件2.1

HTML5概述②設置頁面自動刷新與跳轉，如定義某個頁面10秒后跳轉至“吉林農業科技學院”官網：<metahttp-equiv="refresh"content="10；url=http：///"/>其中，http-equiv屬性的值為refresh，content屬性的值為數值和URL地址，中間用“；”分隔，用于指定在特定的時間后跳轉至目標頁面，該時間默認以秒為單位。本課件是可編輯的正常PPT課件2.1

HTML5概述一個頁面往往需要多個外部文件的配合，在<head>標簽中使用<link/>標簽可引用外部文件，一個頁面允許使用多個<link/>標簽引用多個外部文件。其基本語法格式如下：3.<link/>標簽<link屬性="屬性值"/>本課件是可編輯的正常PPT課件2.1

HTML5概述<link/>標簽的幾個常用屬性如表2-2所示。本課件是可編輯的正常PPT課件2.1

HTML5概述例如，使用<link/>標簽引用外部CSS樣式表：<linkrel="stylesheet"type="text/css"href="style.css"/>上面的代碼表示引用當前HTML頁面所在文件夾中文件名為“style.css”的CSS樣式表文件。CSS樣式表文件的具體使用將在項目3進行詳細介紹，這里讀者作為了解即可。本課件是可編輯的正常PPT課件2.1

HTML5概述<style>標簽用于為HTML5文檔定義樣式信息，位于<head>頭部標簽中，其基本語法格式如下：4.<style>標簽<style屬性="屬性值">樣式內容</style>在HTML中使用<style>標簽時，常常定義其屬性為type，相應的屬性值為text/css，表示使用內嵌式的CSS樣式。本課件是可編輯的正常PPT課件2.1

HTML5概述下面通過例2-1來演示<style>標簽的用法。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>style標簽</title>例2-1example2-1.html本課件是可編輯的正常PPT課件2.1

HTML5概述<styletype="text/css">h3{color：red；}p{color：green；}</style></head><body><h3>設置h3標題為紅色字體</h3><p>設置p段落為綠色字體</p></body></html>本課件是可編輯的正常PPT課件2.1

HTML5概述例2-1使用<style>標簽來定義內嵌式的CSS樣式，控制網頁中文本的顏色。對于CSS樣式規則和語法，將在項目3進行詳細介紹，這里只需要了解<style></style>之間的代碼用于定義元素的樣式即可。本課件是可編輯的正常PPT課件2.1

HTML5概述運行例2-1，效果如圖2-2所示。本課件是可編輯的正常PPT課件2.2標簽概述本課件是可編輯的正常PPT課件2.2標簽概述HTML不是一種編程語言，而是一種標記語言。編程語言是有編譯過程的，而標記語言沒有編譯過程，HTML標簽是直接由瀏覽器解析執行的。標記語言是一套標記標簽。HTML的作用就是用標記標簽來描述網頁，把網頁內容在瀏覽器中展示出來。本課件是可編輯的正常PPT課件2.2標簽概述2.2.1標簽的分類在HTML頁面中，帶有“<>”標簽符的元素被稱為HTML標簽或HTML元素，本書統一稱為HTML標簽，如上面提到的<html>、<head>、<body>等都是HTML標簽。為了方便學習和理解，通常將HTML標簽分為雙標簽和單標簽兩大類。本課件是可編輯的正常PPT課件雙標簽也稱體標簽，是指由開始和結束兩個標簽符組成的標簽，其開始和結束標簽是成對出現的。基本語法格式如下：1.雙標簽<標簽名>內容</標簽名>該語法中<標簽名>表示該標簽的作用開始，一般稱為開始標簽（starttag），</標簽名>表示該標簽的作用結束，一般稱為結束標簽（endtag）。與開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。2.2標簽概述本課件是可編輯的正常PPT課件2.2標簽概述單標簽也稱空標簽，是指用一個標簽符即可完整地描述某個功能的標簽。其基本語法格式如下：2.單標簽<標簽名/>該語法中<標簽名/>后的“/”用來標識標簽的結束。通過上面的學習，已經了解了HTML文檔中的單標簽和雙標簽。下面通過例2-2進一步演示HTML標簽的使用。本課件是可編輯的正常PPT課件2.2標簽概述<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8"/>

<title>新時代中華傳統美德的傳承與發展</title>

</head>

<body>例2-2

example2-2.html本課件是可編輯的正常PPT課件2.2標簽概述<h2>新時代中華傳統美德的傳承與發展</h2><p>來源：《紅旗文稿》</p><hr/><p>中華傳統美德是中華文化的精髓，也是新時代道德建設的不竭源泉。要以禮敬自豪的態度對待中華優秀傳統文化，充分發掘中國歷史中的豐厚道德資源，同時結合新的時代條件和實踐要求繼承創新，充分彰顯其時代價值和永恒魅力，使之與現代文化、現實生活相融相通，成為我們精神生活、道德實踐的鮮明標識。</p></body></html>本課件是可編輯的正常PPT課件2.2標簽概述例2-2使用了不同的標簽來定義網頁，如標題標簽<h2>、水平線標簽<hr/>和段落標簽<p>。運行例2-2，效果如圖2-3所示。本課件是可編輯的正常PPT課件2.2標簽概述多學一招：為什么要有單標簽？HTML標簽的作用原理就是選擇網頁內容，從而進行描述，即需要描述哪個元素，就選擇哪個元素，所以才會有雙標簽的出現，用于定義標簽作用的開始與結束。而單標簽本身就可以描述一個功能，不需要選擇。本課件是可編輯的正常PPT課件2.2標簽概述3.注釋標簽<!--注釋語句-->標簽的分類中除了單標簽和雙標簽以外，還有一個特殊的標簽類型，即注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不能顯示在頁面中的注釋文字，就需要使用注釋標簽。其基本語法格式如下：本課件是可編輯的正常PPT課件2.2標簽概述例如，為<p>段落標簽添加一段注釋，示例代碼如下：<p>這是一段普通的段落。</p><!--是一段注釋，不會在瀏覽器中顯示-->需要說明的是，注釋內容雖然不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，可以被下載到用戶的計算機上，用戶查看源代碼時就可以看到。本課件是可編輯的正常PPT課件2.2標簽概述2.2.2標簽的關系在網頁中會存在多種標簽，各標簽之間都具有一定的關系。標簽的關系主要有嵌套關系和并列關系兩種。本課件是可編輯的正常PPT課件2.2標簽概述嵌套關系也稱包含關系，可以簡單理解為一個雙標簽中包含了其他標簽。例如，在HTML5的結構代碼中，<html>標簽和<head>標簽（或<body>標簽）就是嵌套關系，具體代碼如下：1.嵌套關系<html><head></head><body></body>

</html>本課件是可編輯的正常PPT課件2.2標簽概述需要注意的是，在標簽的嵌套過程中，必須先結束最靠近內容的標簽，再按照由內到外的順序依次關閉標簽。也就是說，標簽的嵌套關系是有層次的，可以嵌套，但不能交叉。在嵌套關系的標簽中，最外層的標簽通常被稱為父級標簽，內層的標簽被稱為子級標簽。只有雙標簽才能作為父級標簽。本課件是可編輯的正常PPT課件2.2標簽概述并列關系也稱兄弟關系，就是兩個標簽處于同一級別，且沒有包含關系。例如，在HTML5的結構代碼中，<head>標簽和<body>標簽就是一對典型的并列關系。在HTML標簽中，無論是單標簽還是雙標簽，都可以擁有并列關系。2.并列關系本課件是可編輯的正常PPT課件2.2標簽概述2.2.3標簽的屬性使用HTML5制作網頁時，如果想讓HTML標簽提供更多的信息，例如希望標題文本的字體為“宋體”且居中顯示，此時僅僅依靠HTML標簽的默認顯示樣式已經不能滿足需求了，需要使用HTML標簽的屬性進行設置。其基本語法格式如下：<標簽名屬性1="屬性值1"屬性2="屬性值2"…>內容</標簽名>本課件是可編輯的正常PPT課件2.2標簽概述由上面的語法可知，標簽可以擁有多個屬性，屬性必須寫在開始標簽中，位于標簽名后面。屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。例如，下面的示例代碼設置了一段居中顯示的文本內容：<p>我是居中顯示的文本</p>本課件是可編輯的正常PPT課件2.3文本標簽本課件是可編輯的正常PPT課件2.3文本標簽HTML最早的用途是展示文本，所以文本標簽是網頁最重要的組成部分。本節主要學習HTML5常用的文本標簽。本課件是可編輯的正常PPT課件2.3文本標簽2.3.1標題標簽為了使網頁更具有語義化，經常會在頁面中用到標題標簽，HTML提供了6個等級的標題標簽，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>重要性遞減，其字號大小也是遞減的。基本語法格式如下：<hn>標題文本</hn>本課件是可編輯的正常PPT課件2.3文本標簽<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8"/>

<title>標題標簽</title>例2-3

example2-3.html該語法中n的取值為1到6。下面演示標題標簽的用法，如例2-3所示。本課件是可編輯的正常PPT課件2.3文本標簽</head><body>

<h1>這是一級標題</h1>

<h2>這是二級標題</h2>

<h3>這是三級標題</h3>

<h4>這是四級標題</h4>

<h5>這是五級標題</h5>

<h6>這是六級標題</h6></body></html>本課件是可編輯的正常PPT課件2.3文本標簽例2-3使用<h1>到<h6>標簽設置了6種級別不同的標題。運行例2-3，效果如圖2-4所示。本課件是可編輯的正常PPT課件2.3文本標簽2.3.2段落標簽在網頁中要把文字有條理地顯示出來，離不開段落標簽<p>，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落。段落標簽的基本語法格式如下。<p>段落文本</p>本課件是可編輯的正常PPT課件2.3文本標簽<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8"/>

<title>使用align設置標題的對齊方式</title>例2-4

example2-4.html下面演示段落標簽<p>的用法及其對齊方式，如例2-4所示。本課件是可編輯的正常PPT課件2.3文本標簽

</head>

<body>

<p>一級標題，默認對齊方式</p>

<p>align="center">二級標題，居中對齊</p>

<p>align="left">三級標題，左對齊</p>

<p>align="right">四級標題，右對齊</p>

</body></html>本課件是可編輯的正常PPT課件2.3文本標簽例2-4中第一個<p>標簽為段落標簽的默認對齊方式，第二、三、四個<p>標簽分別使用align="center"、align="left"和align="right"設置了段落居中對齊、左對齊和右對齊。運行例2-4，效果如圖2-5所示。從圖2-5中容易看出，通過使用<p>標簽，每個段落都會單獨顯示，且段落間存在一定的間隔。本課件是可編輯的正常PPT課件2.3文本標簽2.3.3水平線標簽在網頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。<hr/>就是創建橫跨網頁水平線的標簽。其基本語法格式如下：<hr屬性="屬性值"/><hr/>是單標簽，在HTML中輸入一個<hr/>，就添加了一條默認樣式的水平線。本課件是可編輯的正常PPT課件2.3文本標簽<hr/>標簽常用屬性如表2-3所示。本課件是可編輯的正常PPT課件2.3文本標簽下面通過使用水平線分隔段落文本來演示<hr/>標簽的用法和屬性，如例2-5所示。<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8"/>

<title>水平線標簽</title>例2-5

example2-5.html本課件是可編輯的正常PPT課件2.3文本標簽

</head>

<body>

<h1align="center">講好中華傳統美德故事</h1>

<hrsize="5"align="center"width="800"color="#3f3f3f"/>

<p>中華美德、中國精神、中國故事需要好的講述方式，以人們喜聞樂見的方式作為載體，在學理上、邏輯上、實踐上不斷創新、豐富中華傳統美德的新表述。很多中華傳統美德之所以流傳至今，很重要的一個原因就是采用通俗易懂的故事形式。</p>本課件是可編輯的正常PPT課件2.3文本標簽

<p>講好中華傳統美德故事，不僅要創新形式，同時也要賦予新的符合現代審美的標準。獲得高票房的《哪吒之魔童降世》很好地詮釋了這一點。在這個動畫電影中，李靖不再是為了道德教條迂腐到不愛自己兒子的人，而是嚴父面孔下為了哪吒可以甘愿犧牲自己生命的人；母親具有傳統女性慈愛呵護子女的一面，同時又具有現代女性獨立堅強的一面。這種時空的轉變與邏輯架構，無疑更符合現代生活的境況，因而獲得了人們的極大認同。</p>

<p>《中華好家風》是一檔以弘揚優秀家風為核心的道德建設類文化秀節目，通過傳承中華優秀傳統文化、展現中國家庭家風的文化情感，勾畫出一個個鮮活的家庭、一段段精彩的家風故事、一代代傳承不息的精神堅守。</p>本課件是可編輯的正常PPT課件2.3文本標簽

<p>《中華好故事》通過“愛國勵志”“道德禮儀”“民俗親情”等主題，利用知識競賽、名人出題、故事演繹、知名校友助陣等現代形式傳承中華傳統美德，深受觀眾歡迎。</p>

<p>《經典詠流傳》欄目把經典的詩歌與現代音樂相結合，重回詩歌起源，也讓詩歌回歸生活，利用詩歌來進行傳統經典教育與道德教育。</p>

<hr/>

<palign="right">來源：《紅旗文稿》</p>

</body></html>在例2-5中，第一個<hr/>設置了不同的顏色、對齊方式、粗細和寬度值，第二個<hr/>為水平線的默認樣式標簽。本課件是可編輯的正常PPT課件2.3文本標簽運行例2-5，效果如圖2-6所示。注意：在實際工作中，不贊成使用<hr/>的所有外觀屬性，可通過CSS樣式進行設置。本課件是可編輯的正常PPT課件2.3文本標簽2.3.4換行標簽在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽<br/>，如例2-6所示。本課件是可編輯的正常PPT課件2.3文本標簽<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8"/>

<title>換行標簽</title>

</head>

<body>例2-6

example2-6.html本課件是可編輯的正常PPT課件2.3文本標簽

<p>這是正常段落文本</p>

<p>代碼中的空格鍵只會顯示一個空白字符</p>

<p>代碼中的回車鍵

只會顯示一個空白字符</p>

<p>文中的強制換行效果需要<br/>使用br標簽執行</p>

</body></html>本課件是可編輯的正常PPT課件2.3文本標簽在例2-6中，分別使用換行標簽<br/>和回車鍵兩種方式進行換行。運行例2-6，效果如圖2-7所示。從圖2-7中可以看出，使用回車鍵換行的段落在瀏覽器實際顯示效果中并沒有換行，只是多出了一個空白字符，而使用換行標簽<br/>的段落卻實現了強制換行的效果。注意：<br/>標簽雖然可以實現換行的效果，但并不能取代結構標簽<h>、<p>等。本課件是可編輯的正常PPT課件2.3文本標簽2.3.5文本樣式標簽多種多樣的文字效果可以使網頁變得更加絢麗，為此HTML提供了文本樣式標簽<font>，用來控制網頁中文本的