前端設(shè)計(jì)與開發(fā) 課件 模塊3 HTML5中新增的標(biāo)簽及屬性_第1頁(yè)
前端設(shè)計(jì)與開發(fā) 課件 模塊3 HTML5中新增的標(biāo)簽及屬性_第2頁(yè)
前端設(shè)計(jì)與開發(fā) 課件 模塊3 HTML5中新增的標(biāo)簽及屬性_第3頁(yè)
前端設(shè)計(jì)與開發(fā) 課件 模塊3 HTML5中新增的標(biāo)簽及屬性_第4頁(yè)
前端設(shè)計(jì)與開發(fā) 課件 模塊3 HTML5中新增的標(biāo)簽及屬性_第5頁(yè)
已閱讀5頁(yè)，還剩32頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

模塊3

HTML5中新增的標(biāo)簽及屬性制作“古都花城洛陽(yáng)代表性古跡”網(wǎng)頁(yè)任務(wù)3.1任務(wù)描述作為中國(guó)歷史文化名城，洛陽(yáng)有著幾千年的文明積淀和豐富的文化遺產(chǎn)，包括諸多聞名遐邇的古跡。這些古跡不僅見證了中國(guó)古代歷史的輝煌，也構(gòu)成了洛陽(yáng)獨(dú)特的城市文化底蘊(yùn)和旅游資源。在全球信息化的時(shí)代背景下，通過(guò)網(wǎng)絡(luò)平臺(tái)向全世界展示洛陽(yáng)的歷史古跡，不僅有助于增進(jìn)人們對(duì)洛陽(yáng)乃至中國(guó)傳統(tǒng)文化的認(rèn)識(shí)與了解，也能夠推動(dòng)洛陽(yáng)文化旅游產(chǎn)業(yè)的發(fā)展，吸引更多的游客前往洛陽(yáng)實(shí)地探訪。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，掌握HTML5中新增的語(yǔ)義化標(biāo)簽和分組標(biāo)簽，能夠利用所學(xué)知識(shí)制作“古都花城洛陽(yáng)代表性古跡”網(wǎng)頁(yè)。相關(guān)知識(shí)3.1.1語(yǔ)義化標(biāo)簽使用div無(wú)語(yǔ)義，HTML5引入新標(biāo)簽改善協(xié)助內(nèi)容語(yǔ)義化，推動(dòng)自然語(yǔ)言處理與AI智能語(yǔ)義化讓代碼更清晰，便于維護(hù)，提升AI解析能力語(yǔ)義化概念HTML5前的局限標(biāo)簽語(yǔ)義化作用HTML5語(yǔ)義化標(biāo)簽新增語(yǔ)義化標(biāo)簽強(qiáng)化文檔結(jié)構(gòu)表達(dá)，適應(yīng)具體使用場(chǎng)景頁(yè)面結(jié)構(gòu)劃分header、nav、section、article、aside、footer定義頁(yè)面區(qū)域01021.header標(biāo)簽<header>標(biāo)簽是頁(yè)面加載的第一個(gè)標(biāo)簽，包含了站點(diǎn)的標(biāo)題、Logo、網(wǎng)站導(dǎo)航等，是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)標(biāo)簽，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題。<header></header>標(biāo)簽對(duì)中可以包含多個(gè)<hl>~<h6>標(biāo)簽、<hgroup></hgroup>標(biāo)簽對(duì)、<nav></nav>標(biāo)簽對(duì)、<form></form>標(biāo)簽對(duì)等。2.nav標(biāo)簽<nav>標(biāo)簽用于構(gòu)建頁(yè)面或站點(diǎn)內(nèi)的導(dǎo)航鏈接，表示一組可導(dǎo)航到其他頁(yè)面或當(dāng)前頁(yè)面其他部分的鏈接3.section標(biāo)簽<section>標(biāo)簽用于定義文檔中的節(jié)（Section），如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。它用于將內(nèi)容分塊，使其成為獨(dú)立的段落或區(qū)域。<section></section>標(biāo)簽對(duì)通常由內(nèi)容及其標(biāo)題組成，用于將相關(guān)內(nèi)容組織在一起，并在文檔流中創(chuàng)建一個(gè)新的節(jié)。014.article標(biāo)簽<article>標(biāo)簽用于定義文檔、頁(yè)面、應(yīng)用程序或站點(diǎn)中的自包含成分所構(gòu)成的一個(gè)頁(yè)面的一部分，并且這部分專用于獨(dú)立地分類或復(fù)用。5.article標(biāo)簽<aside>標(biāo)簽用于定義除<article></article>標(biāo)簽對(duì)中內(nèi)容以外的附加內(nèi)容。它常用于定義側(cè)欄、文章的鏈接集合、廣告、友情鏈接、相關(guān)產(chǎn)品列表等。6.footer標(biāo)簽<footer>標(biāo)簽用于定義與頁(yè)面、文章或內(nèi)容區(qū)塊相關(guān)的信息。它通常作為上層父級(jí)內(nèi)容區(qū)塊或根區(qū)塊的腳注，并定義相關(guān)區(qū)塊的附加信息，如文章的作者或日期等。7.figure標(biāo)簽<figure>標(biāo)簽用于定義獨(dú)立的流內(nèi)容，如圖像、圖表、照片、代碼等。figure元素的內(nèi)容應(yīng)該與主要內(nèi)容相關(guān)，但<article>標(biāo)簽的作用是定義獨(dú)立的完整的內(nèi)容，則不應(yīng)對(duì)文檔的布局產(chǎn)生影響。8.figcaption標(biāo)簽<figcaption>標(biāo)簽用于定義<figure></figure>標(biāo)簽對(duì)中內(nèi)容的標(biāo)題，應(yīng)該被放置于<figure>標(biāo)簽的第一個(gè)或最后一個(gè)子標(biāo)簽的位置。3.1.2分組標(biāo)簽<hgroup>標(biāo)簽用于對(duì)標(biāo)題及其子標(biāo)題進(jìn)行分組。<hgroup>標(biāo)簽一般會(huì)對(duì)<h1>～<h6>元素進(jìn)行分組，如一個(gè)內(nèi)容區(qū)塊的標(biāo)題及其子標(biāo)題算一組。通常情況下，當(dāng)文章只有一個(gè)主標(biāo)題時(shí)，是不需要使用<hgroup>標(biāo)簽的。任務(wù)規(guī)劃通過(guò)網(wǎng)頁(yè)設(shè)計(jì)，運(yùn)用HTML5等現(xiàn)代Web技術(shù)，制作友好、直觀的用戶界面，包括合理的網(wǎng)頁(yè)布局、清晰的導(dǎo)航結(jié)構(gòu)，深度挖掘和展示洛陽(yáng)古跡背后的歷史故事與文化內(nèi)涵，促進(jìn)各地游客對(duì)中國(guó)傳統(tǒng)歷史文化的學(xué)習(xí)和交流。任務(wù)實(shí)施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為luoyang。（2）在VSCode中打開項(xiàng)目文件夾luoyang，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“monument.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊monument.html文件，進(jìn)入代碼編輯窗口。在<title></title>標(biāo)簽對(duì)中設(shè)置網(wǎng)頁(yè)的標(biāo)題為“古都花城洛陽(yáng)代表性古跡”。（4）在<body></body>標(biāo)簽對(duì)中添加<header></header>標(biāo)簽對(duì)，并在<header></header>標(biāo)簽對(duì)內(nèi)添加一級(jí)標(biāo)題和<nav></nav>標(biāo)簽對(duì)。（5）在步驟（4）中添加的<nav></nav>標(biāo)簽對(duì)內(nèi)添加導(dǎo)航鏈接。（6）繼續(xù)在<body></body>標(biāo)簽對(duì)中添加<main></main>標(biāo)簽對(duì)，并在<main></main>標(biāo)簽對(duì)中添加一組<section></section>標(biāo)簽對(duì)，用于放置第一個(gè)名勝古跡龍門石窟的介紹內(nèi)容。任務(wù)實(shí)施（7）在<main></main>標(biāo)簽對(duì)中再次添加一組<section></section>標(biāo)簽對(duì)，用于放置第二個(gè)名勝古跡白馬寺的介紹內(nèi)容。（8）仿照步驟在<main></main>標(biāo)簽對(duì)中添加第三組<section></section>標(biāo)簽對(duì)，用于放置第三個(gè)名勝古跡洛陽(yáng)牡丹園的介紹內(nèi)容。（9）最后在<body></body>標(biāo)簽對(duì)中添加一組<footer></footer>標(biāo)簽對(duì)，然后在添加的<footer></footer>標(biāo)簽對(duì)中添加版權(quán)相關(guān)內(nèi)容。（10）為了使頁(yè)面更加美觀，在<head></head>標(biāo)簽對(duì)中添加<style></style>標(biāo)簽對(duì)，對(duì)頁(yè)面樣式進(jìn)行美化（CSS部分參考模塊4）。制作“數(shù)字圖書館”網(wǎng)頁(yè)任務(wù)3.2任務(wù)描述數(shù)字圖書館作為文化傳播的載體，能夠跨越地域界限，傳播中華文化，促進(jìn)文化交流與互鑒。許多優(yōu)秀的國(guó)產(chǎn)數(shù)字圖書館走出國(guó)門，讓世界讀者了解中國(guó)的歷史、文化和社會(huì)發(fā)展現(xiàn)狀，不僅提升了國(guó)家文化軟實(shí)力，也為構(gòu)建人類命運(yùn)共同體貢獻(xiàn)了文化力量。數(shù)字圖書館的便捷性和普及性使得人們可以隨時(shí)隨地獲取知識(shí)，加深對(duì)各個(gè)領(lǐng)域的了解，并為個(gè)人的學(xué)習(xí)、研究和娛樂(lè)提供了豐富的資源和可能性。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，掌握頁(yè)面交互標(biāo)簽，理解HTML元素的全局屬性，利用所學(xué)知識(shí)制作“數(shù)字圖書館”網(wǎng)頁(yè)。相關(guān)知識(shí)3.2.1頁(yè)面交互標(biāo)簽

1.progress標(biāo)簽<progress>標(biāo)簽屬于狀態(tài)交互標(biāo)簽，用于在網(wǎng)頁(yè)中展示某個(gè)任務(wù)的完成進(jìn)度。它可以呈現(xiàn)為一個(gè)進(jìn)度條，并具有兩個(gè)屬性：max屬性表示任務(wù)的總量，默認(rèn)值為1；value屬性表示當(dāng)前的任務(wù)量。2.meter標(biāo)簽meter標(biāo)簽用于展示數(shù)據(jù)狀態(tài)，如投票比例、考試分?jǐn)?shù)，其屬性包括form、value、max、min，其中value需在min和max之間details標(biāo)簽/summary標(biāo)簽details標(biāo)簽用于創(chuàng)建可交互的細(xì)節(jié)控件，初始狀態(tài)是隱藏的，通過(guò)設(shè)置open屬性可顯示其內(nèi)容details標(biāo)簽介紹01summary標(biāo)簽用于為<details>元素設(shè)置可見標(biāo)題，用戶點(diǎn)擊可展開詳細(xì)信息summary標(biāo)簽023.2.2全局屬性全局屬性是適用于所有HTML元素的共有屬性。這意味著這些屬性可以用于任何元素，即使某些屬性在某些元素上可能沒有實(shí)際效果。1.contenteditable屬性（HTML5新屬性）contenteditable屬性是一個(gè)枚舉屬性，用于指示元素是否可供用戶編輯。當(dāng)元素沒有顯式設(shè)置contenteditable屬性時(shí)，它會(huì)從父元素繼承該屬性。2.class屬性（1）必須以英文字母A～Z或a～z開頭。（2）可以包含英文字母A～Z和a～z、數(shù)字0～9、連字符(-)和下劃線(_)。（3）在HTML中，類名是區(qū)分大小寫的。類名的命名規(guī)則class屬性的值是一個(gè)以空格分隔的元素的類名列表，它允許CSS和Javascript通過(guò)類選擇器或DOM方法document.getElementsByClassName()來(lái)選擇和訪問(wèn)特定的元素。3.data-*屬性data-*屬性用于存儲(chǔ)私有的，頁(yè)面后應(yīng)用的自定義數(shù)據(jù)，允許在HTML和其DOM表示之間交換專有信息，可由JavaScript腳本使用。所有這些自定義數(shù)據(jù)屬性都可以通過(guò)所屬元素的HTMLElement接口來(lái)訪問(wèn)。需要注意的事項(xiàng)如下：（1）屬性名不要包含大寫字母，不要出現(xiàn)中文、空格和特殊字符，在“data-”的后面必須至少有一個(gè)字符。（2）屬性名可以是任何字符串。4.dir屬性dir屬性用于規(guī)定元素內(nèi)容的文本方向。5.draggable屬性draggable屬性用于規(guī)定元素是否可被拖動(dòng)。6.dropzone屬性dropzone屬性用于規(guī)定當(dāng)被拖動(dòng)的數(shù)據(jù)在拖放到元素上時(shí)，是否被復(fù)制、移動(dòng)或鏈接。7.hidden屬性hidden屬性用于隱藏元素。例如，它可以用于隱藏頁(yè)面中的元素，這些元素在登錄過(guò)程完成之前不可用。瀏覽器不會(huì)渲染被隱藏的元素。需要注意的是，hidden屬性不能用于隱藏本應(yīng)合法顯示的內(nèi)容?？梢酝ㄟ^(guò)設(shè)置hidden屬性來(lái)使元素在滿足特定條件時(shí)對(duì)用戶可見，如選擇復(fù)選框等。然后，可以使用JavaScript來(lái)刪除hidden屬性，以使該元素變得可見。8.id屬性id屬性為元素提供了唯一的標(biāo)識(shí)符，使得開發(fā)者可以通過(guò)CSS樣式表和腳本語(yǔ)言精確地選擇和操作特定元素。（1）必須以英文字母A～Z或a～z開頭。（2）可以包含英文字母A～Z和a～z、數(shù)字0～9、冒號(hào)(:)、點(diǎn)號(hào)(.)和下劃線(_)。ID的命名規(guī)范9.spellcheck屬性spellcheck屬性用于定義是否可以檢查元素是否存在拼寫錯(cuò)誤，可對(duì)類型為text的input元素中的值（非密碼）、textarea元素中的值和可編輯元素中的值進(jìn)行拼寫檢查。true：元素的拼寫會(huì)被檢查false：元素的拼寫檢查被禁用，不會(huì)顯示拼寫錯(cuò)誤提示屬性值含義10.style屬性style屬性用于定義要應(yīng)用于元素的CSS樣式聲明。請(qǐng)注意，建議在單獨(dú)的文件中定義樣式。該屬性和<style>元素主要用于快速添加樣式，如用于測(cè)試目的。11.translate屬性translate屬性用于規(guī)定一個(gè)元素的內(nèi)容在頁(yè)面載入時(shí)是否需要被翻譯。任務(wù)規(guī)劃隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，線上閱讀圖書已成為許多人日常學(xué)習(xí)和生活的一部分。與此同時(shí)，HTML5作為一種現(xiàn)代化的網(wǎng)頁(yè)標(biāo)記語(yǔ)言，以其優(yōu)異的跨平臺(tái)特性成為構(gòu)建圖書展示網(wǎng)頁(yè)的首選技術(shù)。本任務(wù)旨在創(chuàng)建一個(gè)既能有效地展示圖書內(nèi)容，又具有良好交互體驗(yàn)和適應(yīng)多種終端環(huán)境的HTML5圖書網(wǎng)頁(yè)。通過(guò)科學(xué)合理的標(biāo)簽使用和巧妙的交互設(shè)計(jì)，從而吸引并留住用戶，提升網(wǎng)站的流量和口碑。任務(wù)實(shí)施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為library。（2）在VSCode中打開項(xiàng)目文件夾library，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“books.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊books.html文件，進(jìn)入代碼編輯窗口。在<title></title>標(biāo)簽對(duì)中設(shè)置網(wǎng)頁(yè)的標(biāo)題為“數(shù)字圖書館”。（4）在<body></body>標(biāo)簽對(duì)中添加<header></header>標(biāo)簽對(duì)，并在<header></header>標(biāo)簽對(duì)內(nèi)添加一級(jí)標(biāo)題和<nav></nav>標(biāo)簽對(duì)，然后在添加的<nav></nav>標(biāo)簽對(duì)中添加導(dǎo)航鏈接。（5）繼續(xù)在<body></body>標(biāo)簽對(duì)中添加一組<main></main>標(biāo)簽對(duì)，并在<main></main>標(biāo)簽對(duì)中添加一組<section></section>標(biāo)簽對(duì)，用于放置“最新圖書”部分的內(nèi)容，并插入二級(jí)標(biāo)題“最新圖書”。（6）在步驟（5）中添加的<section></section>標(biāo)簽對(duì)中添加兩組<article></article>標(biāo)簽對(duì)，分別用于放置第一部圖書和第二部圖書的信息，并設(shè)置全局

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論