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

下載本文檔

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

文檔簡介

模塊3

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

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

溫馨提示

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

最新文檔

評論

0/150

提交評論