HTML5 CSS3網(wǎng)頁設(shè)計與制作 課件 呂麥絲 第1、2章 網(wǎng)頁設(shè)計基礎(chǔ)、HTML基礎(chǔ)

第1章網(wǎng)頁設(shè)計基礎(chǔ)了解網(wǎng)頁設(shè)計的基本流程了解網(wǎng)頁的主要組成部分熟悉網(wǎng)頁開發(fā)工具學(xué)習(xí)目標(biāo)010203本章任務(wù)任務(wù)1網(wǎng)頁設(shè)計概念任務(wù)2網(wǎng)頁開發(fā)工具簡介任務(wù)1網(wǎng)頁設(shè)計概念網(wǎng)頁設(shè)計概念在互聯(lián)網(wǎng)盛行的現(xiàn)代，網(wǎng)頁成了信息展示的一種流行方式之一，它的設(shè)計理念和功能隨著時代的發(fā)展不斷變化，網(wǎng)頁設(shè)計(webdesign)，可以根據(jù)企業(yè)向瀏覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化)，進行網(wǎng)站功能策劃，然后進行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。網(wǎng)頁設(shè)計一般分為三種大類:功能型網(wǎng)頁設(shè)計(服務(wù)網(wǎng)站&B/S軟件用戶端)形象型網(wǎng)頁設(shè)計(品牌形象站)信息型網(wǎng)頁設(shè)計(門戶站)設(shè)計網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計方案。網(wǎng)頁設(shè)計的基本流程設(shè)計一個精美、實用的網(wǎng)頁是所有網(wǎng)頁設(shè)計初學(xué)者的夢想，制作網(wǎng)頁并不困難，但要制作出出色的網(wǎng)頁，尤其是制作復(fù)雜的網(wǎng)頁時就必須全面考慮各種因素，包括文字、圖像、動畫和聲音等。如同其他的計算機應(yīng)用系統(tǒng)一樣，網(wǎng)頁的設(shè)計需要認(rèn)真地規(guī)劃和系統(tǒng)分析，然后才可以設(shè)計出高質(zhì)量的網(wǎng)頁。通常網(wǎng)頁的制作包括分析、設(shè)計、制作、測試和發(fā)布五個環(huán)節(jié)。基本流程網(wǎng)頁設(shè)計的基本流程網(wǎng)頁制作的五個環(huán)節(jié)分析分析主要指認(rèn)識網(wǎng)頁將要服務(wù)的目標(biāo)群體如群體特征、可能的需求等，以此確定網(wǎng)頁信息內(nèi)容及其功能設(shè)計設(shè)計設(shè)計是網(wǎng)頁設(shè)計與制作的關(guān)鍵環(huán)節(jié)，關(guān)系用戶對網(wǎng)頁的接受和利用程度主要內(nèi)容包括收集網(wǎng)頁中用到的素材、確定網(wǎng)頁的內(nèi)容結(jié)構(gòu)、鏈接方式和網(wǎng)頁模型的可視化設(shè)計三個內(nèi)容。制作在完成設(shè)計后，只要選擇一種自己熟悉的網(wǎng)頁制作工具，就可以制作網(wǎng)頁了說制作網(wǎng)頁就是將文字、圖片、動畫、聲音、視頻、程序等素材按照設(shè)計的要求合成起來測試制作完網(wǎng)頁之后，應(yīng)該對網(wǎng)頁做全面的檢測，包括檢查網(wǎng)頁內(nèi)容的科學(xué)性、版面編排的合理性、超鏈接的正確性以及對網(wǎng)頁內(nèi)容做適當(dāng)?shù)脑鰷p等發(fā)布制作網(wǎng)頁的目的是要將網(wǎng)頁發(fā)布到網(wǎng)上，讓更多的瀏覽者來訪問發(fā)布的站點，因此發(fā)布網(wǎng)頁這一環(huán)節(jié)必不可少，否則失去了制作網(wǎng)頁的意義。網(wǎng)頁的主要組成部分層次結(jié)構(gòu)結(jié)構(gòu)層HTML/HTML5樣式層CSS/CSS3行為層Javascript一個完整的網(wǎng)頁按照層次結(jié)構(gòu)組成來說，主要由：結(jié)構(gòu)層、樣式層、行為層三個部分組成。一、層次結(jié)構(gòu)CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣，比如，標(biāo)題字體、顏色變化，或為標(biāo)題加入背景圖片、邊框等，所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單、鼠標(biāo)滑過表格的背景顏色改變，或者焦點新聞（新聞圖片）的輪換?？梢赃@么理解，有動畫的、有交互的一般都是用JavaScript來實現(xiàn)的。網(wǎng)頁的骨架，HTML是網(wǎng)頁內(nèi)容的載體，內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖像、視頻等。網(wǎng)頁的主要組成部分一個網(wǎng)頁按布局結(jié)構(gòu)組成來說，通常由頁頭、正文、頁尾組成。網(wǎng)頁的頁面布局如圖1-1-1所示。二、布局結(jié)構(gòu)網(wǎng)頁的主要組成部分一個網(wǎng)頁按內(nèi)容元素組成來說，通常由文字、圖像、動畫、鏈接、導(dǎo)航條、表格、表單等元素組成，如圖1-1-2所示。三、內(nèi)容元素網(wǎng)頁的主要組成部分三、內(nèi)容元素文本是網(wǎng)頁中敘述性的文字，是最理想的網(wǎng)頁信息載體與交流工具，網(wǎng)頁信息一般主要是以文本為主的，與圖像網(wǎng)頁元素相比，文字雖然不如圖像那樣容易被瀏覽者注意，但卻能簡明扼要地表達(dá)出主題。在網(wǎng)頁中，用戶可以根據(jù)需要通過字體、大小、顏色、底紋、框等選項來設(shè)置文本的屬性。1、文本圖像是指網(wǎng)頁中插入的具有

說明性的圖片。圖像擁有豐富的色彩和表現(xiàn)形式，能夠表達(dá)更加豐富的內(nèi)容和含義，并且具有文本無法達(dá)到的視覺效果。添加適量的圖像可以使制作的網(wǎng)頁圖文并茂，具有更好的活力和表現(xiàn)力，但如果在網(wǎng)頁中加入過多的圖像，反而會影響網(wǎng)頁的整體視覺效果，并會明顯降低網(wǎng)頁的下載速度。2、圖像在網(wǎng)頁中常使用JPG、GIF、BMP、PNG等格式的圖像文件，例如：Logo圖標(biāo)，代表網(wǎng)站形象或欄目內(nèi)容的標(biāo)志性圖片；背景圖，用來裝飾和美化網(wǎng)頁；圖標(biāo)，主要用于導(dǎo)航，在網(wǎng)頁中具有重要的作用，相當(dāng)于路標(biāo)；Banner廣告，用于宣傳站內(nèi)活動等的廣告。網(wǎng)頁的主要組成部分三、內(nèi)容元素網(wǎng)頁中的動畫能夠活躍網(wǎng)頁氣氛，增加網(wǎng)頁包含的信息量。網(wǎng)頁動畫包含很多類型，常用的如GIF動畫、腳本動畫等，簡單說明如下：GIF動畫，實際也是圖像，不過顯示為動態(tài)效果，一般用來制作各種動態(tài)圖標(biāo)，對網(wǎng)頁進行修飾。腳本動畫，一般使用JavaScript語言編寫的特效，如鼠標(biāo)特效、欄目切換、變形動畫、移動動畫、漸隱漸顯動畫等。3、動畫超鏈接是網(wǎng)站的靈魂，它是從一個網(wǎng)頁指向另一個目的端的鏈接，如指向另一網(wǎng)頁或者相同網(wǎng)頁上的不同位置，超鏈接可以指向一幅圖片、一個電子郵件地址、一個文件、一個程序或者也可以是本頁中的其他位置。超鏈接的載體可以是文本、圖片或者動畫等。超鏈接廣泛地存在于網(wǎng)頁的圖片和文字中，提供與圖片和文字相關(guān)內(nèi)容的鏈接，在超鏈接上單擊鼠標(biāo)左鍵，即可鏈接到相應(yīng)地址（URL）的網(wǎng)頁，可以說超鏈接是網(wǎng)頁的最大特色。4、鏈接網(wǎng)頁的主要組成部分三、內(nèi)容元素導(dǎo)航條是一組超鏈接，方便用戶訪問網(wǎng)站內(nèi)部各個欄目。導(dǎo)航條可以是文字，也可以是圖片，還可以是動畫。導(dǎo)航條可以顯示多級菜單和下拉菜單效果。5、導(dǎo)航條表格在網(wǎng)頁中的作用非常大，它可以用來布局網(wǎng)頁，設(shè)計各種精美的網(wǎng)頁效果，也可以用來組織和顯示數(shù)據(jù)。6、表格表單主要用來收集用戶信息，實現(xiàn)瀏覽器與服務(wù)器之間的信息交互。7、表單除了上面的網(wǎng)頁常用基本元素，在頁面中可能還包括音頻、視頻、框架等各種構(gòu)成元素。8、其他元素任務(wù)2網(wǎng)頁開發(fā)工具導(dǎo)入我們應(yīng)該用什么寫網(wǎng)頁代碼？我們可以通過文本編輯器，如：記事本，完全可以編寫網(wǎng)頁源代碼但是效率……不忍直視實際開發(fā)中，注重開發(fā)的效率和便捷性，因此我們會使用一些開發(fā)工具開發(fā)工具有很多：VisualStudioCode、Webstorm、Sublime、Dreamweaver、Hbuilder我們這里介紹VisualStudioCode和Hbuilder兩個工具HBuilderX開發(fā)工具HBuilderX，H是HTML的首字母，Builder是構(gòu)造者，X是HBuilder的下一代版本，我們也簡稱HX。HBuilderX是HBuilder的升級版，它也是DCloud（數(shù)字天堂）推出為前端開發(fā)者服務(wù)的通用IDE，或者稱為編輯器。1.下載HBuilderX工具h(yuǎn)ttps://www.dcloud.io/hbuilderx.html，下圖所示。2.下載后將壓縮包解壓，找到HbuilderX.exe文件，雙擊即可啟動程序，如右圖。什么是HBuilderX

？HBuilderX開發(fā)工具1.使用“文件”菜單→“新建”→“html文件”,可以新建一個html文件，如圖1-2-3、1-2-4。HBuilderX

的使用HBuilderX開發(fā)工具2.編輯網(wǎng)頁，如圖1-2-5。3.當(dāng)編輯完成后，點擊“保存”按鈕，就可以點擊右側(cè)的“預(yù)覽”按鈕看效果（若是第一次使用“預(yù)覽”，需選擇內(nèi)置瀏覽器插件，安裝之），如圖1-2-6。HBuilderX

的使用提示：輸入關(guān)鍵字時，具有智能提示列表，可以加快輸入速度，也可以用上下鍵移動到需要的條目再用Ctrl+回車確定，如圖1-2-7。VisualStudioCode開發(fā)工具什么是VisualStudioCode

？VisualStudioCode(簡稱VSCode/VSC)是一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比Diff、GIT等特性，支持插件擴展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持Win、Mac以及Linux。下載地址：/VisualStudioCode開發(fā)工具VisualStudioCode

安裝1.下載VisualStudioCode工具/，圖1-2-8所示。VisualStudioCode開發(fā)工具VisualStudioCode

安裝2.下載后雙擊安裝文件，啟動安裝程序，如圖1-2-9。3.安裝步驟，如圖1-2-10至1-2-16。VisualStudioCode開發(fā)工具VisualStudioCode

安裝VisualStudioCode開發(fā)工具VisualStudioCode

安裝VisualStudioCode開發(fā)工具VisualStudioCode

安裝4.雙擊桌面圖標(biāo)啟動程序，如圖1-2-17。5.打開VSCode軟件，可以看到剛剛安裝的VSCode軟件默認(rèn)使用的是英文語言環(huán)境，如圖1-2-18。VisualStudioCode開發(fā)工具6.使用快捷鍵Ctrl+Shift+P,在彈出的搜索框中輸入configurelanguage，然后選擇搜索出來的ConfigureDisplayLanguage，如圖1-2-19。VisualStudioCode

安裝VisualStudioCode開發(fā)工具7.單擊installadditionallanguages，如圖1-2-20。VisualStudioCode

安裝VisualStudioCode開發(fā)工具9.安裝后在圖右下角單擊changelanguageandrestart，如圖1-2-22。VisualStudioCode

安裝VisualStudioCode開發(fā)工具10.這時，界面變成了中文字體，如圖1-2-23。VisualStudioCode

安裝HBuilderX開發(fā)工具創(chuàng)建一個網(wǎng)頁文件1.在電腦某個目錄下面創(chuàng)建一個文件夾，例如：VSCODEXM2.在文件菜單下找到“打開文件夾”命令，然后選擇第一步創(chuàng)建的文件夾，如圖1-2-24。VisualStudioCode

使用HBuilderX開發(fā)工具3.在資源管理器面板可以看到創(chuàng)建的文件夾（相當(dāng)于一個項目），并且右邊有新建文件、新建文件夾等按鈕，如圖1-2-25。VisualStudioCode

使用HBuilderX開發(fā)工具4.點擊新建文件按鈕，創(chuàng)建一個hello.html文件，如圖1-2-26。VisualStudioCode

使用HBuilderX開發(fā)工具5.編輯該文件，如圖1-2-27。VisualStudioCode

使用HBuilderX開發(fā)工具6.編輯好了之后，點擊進入“擴展商店”，搜索并安裝兩個插件“openinbrowser”和“viewinbrowser”，如圖1-2-28。VisualStudioCode

使用HBuilderX開發(fā)工具7.找到想運行的html文件，點擊選擇默認(rèn)的瀏覽器即可，如圖1-2-29。VisualStudioCode

使用總結(jié)了解網(wǎng)頁設(shè)計的基本流程了解網(wǎng)頁的主要組成部分下載安裝開發(fā)工具熟悉網(wǎng)頁開發(fā)工具千里之行始于足下第2章HTML基礎(chǔ)學(xué)習(xí)目標(biāo)認(rèn)識HTML，了解HTML發(fā)展歷史01掌握HTML文檔的基本結(jié)構(gòu)02掌握文本標(biāo)題、段落、換行等其他標(biāo)記的使用03簡單網(wǎng)頁的設(shè)計與應(yīng)用04本章任務(wù)任務(wù)1HTML概念任務(wù)2HTML文檔基本結(jié)構(gòu)任務(wù)3HTML文檔標(biāo)簽屬性任務(wù)4案例實戰(zhàn)——第一個HTML網(wǎng)頁設(shè)計文檔任務(wù)1HTML概念HTML簡介

什么是HTML？HTML是HyperTextMarkupLanguage的英文縮寫，即超文本標(biāo)記語言，它是用來描述網(wǎng)頁的一種語言。HTML不是一種編程語言，而是一種標(biāo)記語言，標(biāo)記語言是一套標(biāo)記標(biāo)簽，使用標(biāo)記標(biāo)簽構(gòu)成HTML文檔，并用來描述網(wǎng)頁，所以HTML文檔也被稱為網(wǎng)頁。所謂超文本，有兩層含義：1、超越文本限制

網(wǎng)頁中可以加入圖片、聲音、動畫、多媒體等內(nèi)容。2、超級鏈接文本

網(wǎng)頁中的文件可以跳轉(zhuǎn)到另一個文件，甚至可以與世界各地主機上的文件相連接。常用的瀏覽器HTML文檔能獨立于各種操作系統(tǒng)平臺，訪問它只需要一個web瀏覽器。Web瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示HTML標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容。因此，我們所看到的網(wǎng)頁，是瀏覽器對HTML文檔進行解釋的結(jié)果。同樣，我們也可以通過瀏覽器直接查看一個網(wǎng)頁的HTML源代碼，在瀏覽器菜單欄上選擇“查看源文件”即可。常用的瀏覽器有IE（新版本的Windows操作系統(tǒng)改為Edge）、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平時稱為五大瀏覽器，瀏覽器圖標(biāo)如下：HTML發(fā)展歷史1990年，由于對Web未來發(fā)展的遠(yuǎn)見，TimBerners-Lee提出了超文本的概念，并于第二年在SGML(en-US)的基礎(chǔ)上將其正式定義為一個標(biāo)記語言。IETF(en-US)于1993年正式開始制定HTML規(guī)范，并在經(jīng)歷了幾個版本的草案后于1995年發(fā)布了HTML2.0版本。1994年，Berners-Lee為了Web發(fā)展而成立了W3C(en-US)。1996年，W3C接管了HTML的標(biāo)準(zhǔn)化工作，并在1年后發(fā)布了HTML3.2推薦標(biāo)準(zhǔn)。1999年，HTML4.0發(fā)布，并在2000年成為ISO(en-US)標(biāo)準(zhǔn)。2014年發(fā)布了HTML5標(biāo)準(zhǔn)的最終版。任務(wù)2HTML文檔基本結(jié)構(gòu)任務(wù)描述設(shè)計“HelloHTML”頁面，效果圖如圖2-2-1所示：圖2-2-1任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路主體包含一級標(biāo)題顯示文字內(nèi)容‘“HelloHTML”頁面’。網(wǎng)頁title包含文字內(nèi)容“HTML基礎(chǔ)”。meta關(guān)鍵字設(shè)置屬性值為“網(wǎng)頁，計算機”。任務(wù)實現(xiàn)頁面基本結(jié)構(gòu)HTML的每個頁面都包含一些基本的結(jié)構(gòu)標(biāo)簽，頁面內(nèi)容也就是在這些基本標(biāo)簽中書寫的，下面我們通過一個示例來看看一個頁面的基本結(jié)構(gòu)有哪些。示例內(nèi)容：第一個HTML網(wǎng)頁示例參考代碼如下：上面這段代碼表示了HTML文檔的基本結(jié)構(gòu)，主要使用了<!DOCTYPE>、<html>、<head>、<title>以及<body>等標(biāo)簽。頁面基本結(jié)構(gòu)標(biāo)簽說明<!DOCTYPE>標(biāo)簽用法：文檔聲明標(biāo)簽，為單標(biāo)簽，告知web瀏覽器當(dāng)前頁面使用了哪種HTML版本編寫代碼，此處使用的是HTML5版本。聲明文檔必不可少，而且必須位于HTML文檔的第一行。語法格式如下：<!DOCTYPEhtml><html>標(biāo)簽用法：表示頁面編寫的代碼都是HTML代碼。該標(biāo)簽為雙標(biāo)簽，直到</html>結(jié)束。除了文檔聲明標(biāo)簽外的所有標(biāo)簽都必須寫在<html></html>中間。語法格式如下：<html></html>頭部標(biāo)簽用法：<head>是HTML文檔的頭部標(biāo)簽,表示頁面的“頭部”，該標(biāo)簽也為雙標(biāo)簽，到</head>結(jié)束。在此標(biāo)簽中可以插入用以說明文件的標(biāo)題和一些公共屬性的標(biāo)簽，如title、meta等。語法格式如下：<head></head>主體標(biāo)簽用法：<body>用來定義主體標(biāo)簽，表示頁面的“身體”，它也是雙標(biāo)簽，到</body>結(jié)束，頁面中要展示的絕大部分內(nèi)容都寫在<body></body>之間。語法格式如下：<body>

<h1></h1></body><title>標(biāo)簽：表示頁面的標(biāo)題，該標(biāo)簽為雙標(biāo)簽，如要指定HTML文檔的網(wǎng)頁標(biāo)題（它將顯示在瀏覽器窗口頂部標(biāo)題欄），就要在頭部內(nèi)容中提供有關(guān)信息。用title元素來指定網(wǎng)頁標(biāo)題，即在<title></title>之間寫上網(wǎng)頁標(biāo)題，如“標(biāo)題：我的第一個網(wǎng)站”。<meta>標(biāo)簽：一般用來定義頁面信息的名稱、關(guān)鍵字等，可提供有關(guān)頁面的元信息（meta-information），該標(biāo)簽為單標(biāo)簽，并且一個頭部中可以有多個<meta>標(biāo)簽。META標(biāo)簽分兩大部分：HTTP標(biāo)題信息(HTTP-EQUIV)和頁面描述信息(NAME)。例如加入關(guān)鍵字Keywords會自動被大型搜索網(wǎng)站自動搜集，也可以設(shè)定頁面格式及刷新等等。這些定義的內(nèi)容并不在網(wǎng)頁頁面中顯示。但他們會有一些特殊的作用。如：<metaname="Keywords"content="網(wǎng)頁,計算機">可以定義在網(wǎng)頁發(fā)布后，如在網(wǎng)站搜索“網(wǎng)頁，計算機”等文字內(nèi)容時，搜索到該頁面。任務(wù)實現(xiàn)“HelloHTML”頁面實現(xiàn)<!DOCTYPEhtml><html><head><title>HTML基礎(chǔ)</title>/*標(biāo)題定義*/<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><metaname="Keywords"content="網(wǎng)頁,計算機">/*關(guān)鍵字定義*/</head><body><h1>“HelloHTML”頁面</h1>/*頁面文字定義*/</body></html>任務(wù)描述任務(wù)分析任務(wù)3HTML文檔標(biāo)簽屬性任務(wù)描述

本任務(wù)主要講解屬性和屬性值的設(shè)置。通過對水平線的屬性和屬性值進行不同的設(shè)置，呈現(xiàn)出形態(tài)各異的水平分隔線。通過本案例，同學(xué)們可以熟悉頁面的文檔結(jié)構(gòu)，并且對標(biāo)簽的屬性和屬性值的設(shè)置，有一個初步的了解。任務(wù)3：設(shè)計水平分隔線效果圖任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路1.在頁面里面寫入文字和水平線。2.對水平線的屬性和屬性值進行設(shè)置，使其呈現(xiàn)出案例效果。任務(wù)實現(xiàn)基本語法1、HTML標(biāo)簽HTML中由左尖角號（<）、內(nèi)容以及右尖角號（>）組成的用于描述功能的符號稱為“標(biāo)記”。使用<>包圍的目的是將HTML文檔標(biāo)記與普通文本進行區(qū)分。如常用的<html>、<head>、<body>等都是標(biāo)記。標(biāo)記通常分為單標(biāo)記和雙標(biāo)記兩種類型。2、屬性和屬性值HTML通過標(biāo)記告訴瀏覽器如何展示網(wǎng)頁，如<br>告訴瀏覽器顯示一個換行。另外還可以為某些元素附加一些信息，這些附加信息被稱為屬性（attribute）?；A(chǔ)案例操作1.單標(biāo)記和雙標(biāo)記示例（1）單標(biāo)記單標(biāo)記僅單獨使用就可以表達(dá)完整的意思。語法格式：<標(biāo)記名稱>語法說明：最常用的單標(biāo)記是<br>,它表示換行。（2）雙標(biāo)記雙標(biāo)記由首標(biāo)記和尾標(biāo)記兩部分構(gòu)成，它必須成對使用。首標(biāo)記告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能。尾標(biāo)記告訴Web瀏覽器在這里結(jié)束該標(biāo)記。語法格式：<標(biāo)記名稱>內(nèi)容</標(biāo)記名稱>參考代碼如下：<B><I>文字加粗和傾斜演示</I></B>注意：這里的“b”是“粗體（bold）”的意思標(biāo)記可以包含標(biāo)記，即標(biāo)記可以成對嵌套，但是不能交叉地嵌套?；A(chǔ)案例操作2.屬性語法示例給頁面插入一條粗細(xì)為5px，顏色為紅色的水平線參考代碼如下：<hrsize="5px"color=red>如上面案例所示，通過標(biāo)簽的屬性和屬性值的設(shè)置，可以對標(biāo)簽進行一些個性化設(shè)計，屬性基本語法：<標(biāo)記名稱屬性名1="屬性值"屬性名2="屬性值">語法說明：屬性應(yīng)寫在首標(biāo)記內(nèi)，并且和標(biāo)記名之間有一個空格分隔。例如，上例中hr標(biāo)記中，size為屬性，5px為屬性值，屬性值可以直接書寫，也可以使用""括起來。以下寫法也是正確的：<hrsize=5px>基礎(chǔ)案例操作3.注釋注釋標(biāo)簽用于在HTML源碼中插入注釋。注釋會被瀏覽器忽略?？梢允褂米⑨寣Τ绦虼a進行解釋，適當(dāng)?shù)淖⑨寣σ院蟠a的閱讀和維護產(chǎn)生很大的幫助。語法格式：<!--注釋內(nèi)容-->語法說明：左括號后需要寫一個驚嘆號，右括號前就不需要了。基礎(chǔ)案例操作4.編寫HTML文件的注意事項“<”和“>”是任何標(biāo)記的開始和結(jié)束。元素的標(biāo)記要用這對尖括號括起來，并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個斜杠“/”；元素必須被關(guān)閉。標(biāo)記可以嵌套使用，但不能嵌套標(biāo)記。任何回車符和空格在HTML代碼中都不起作用。為了代碼清晰，建議不同的標(biāo)記都單獨占一行；標(biāo)記中可以放置各種屬性，屬性值都用“"”括起來；標(biāo)簽名和屬性建議都用小寫字母。編寫代碼，一般應(yīng)該使用縮進風(fēng)格，以便更好的理解頁面的結(jié)構(gòu)，便于閱讀和維護?；A(chǔ)案例操作4.編寫HTML文件的注意事項為了使瀏覽器能正常瀏覽網(wǎng)頁，在用記事本或別的HTML開發(fā)工具編寫好HTML文檔后，在保存HTML時，對HTML文件的命名要注意以下幾點：（1）文件的擴展名為.htm或.html結(jié)束，建議統(tǒng)一使用html作為文件名的后綴；（2）文件名中只可由英文字母、數(shù)字或下劃線組成；（3）文件名中不要包含特殊符號，比如空格、$等；（4）文件名區(qū)分大小寫；（5）網(wǎng)站首頁文件名一般是index.html或default.html。任務(wù)實現(xiàn)<!DOCTYPEhtml><html><metacharset="UTF-8"><head><title>水平分隔線</title></head><