項目一 HTML5基礎(chǔ) 網(wǎng)頁設(shè)計基礎(chǔ)_第1頁
項目一 HTML5基礎(chǔ) 網(wǎng)頁設(shè)計基礎(chǔ)_第2頁
項目一 HTML5基礎(chǔ) 網(wǎng)頁設(shè)計基礎(chǔ)_第3頁
項目一 HTML5基礎(chǔ) 網(wǎng)頁設(shè)計基礎(chǔ)_第4頁
項目一 HTML5基礎(chǔ) 網(wǎng)頁設(shè)計基礎(chǔ)_第5頁
已閱讀5頁，還剩23頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目一任課老師：XXXHTML5基礎(chǔ)PRESENTATION//SLIDE1創(chuàng)建第一HTML5頁面3制作“電影影評網(wǎng)”頁面2制作“HTML5百科”頁面一、任務(wù)引入小H在網(wǎng)上查看信息，想要搜索目前社會上比較緊缺的人才類型。當(dāng)他看到前端工程師成為互聯(lián)網(wǎng)士時代的職場新貴，有著很好的職業(yè)發(fā)展前景和薪酬待遇時，就萌生了想要從事這方面工作的念頭?？墒?，對于“前端開發(fā)”而言，小日完全是個新手，對于網(wǎng)站開發(fā)和網(wǎng)頁設(shè)計，他一竅不通。在非常仔細(xì)地查看了具體的崗位需求后，小日決定要好好學(xué)習(xí)“前端開發(fā)”的相關(guān)知識，由此進(jìn)入了漫長但又有趣的學(xué)習(xí)過程。1.HTML5概述HTML(HyperTextMarkupLanguage)是用來描述網(wǎng)頁的超文本標(biāo)記語言。HTML并不是編程語言。標(biāo)記語言是一套標(biāo)記標(biāo)簽MarkupTag)，用于創(chuàng)建網(wǎng)頁。HTML文檔包含了HTML標(biāo)簽及文本內(nèi)容，HTML文檔也叫作Web頁面。HTML5是HTML的第5代版本。二、相關(guān)知識二、相關(guān)知識1.HTML5的優(yōu)勢新增了多個新特性解決了跨瀏覽器問題12能夠化繁為簡基于用戶優(yōu)先原則34HTML5瀏覽器的支持情況現(xiàn)今，瀏覽器的許多新功能都是從HTML5標(biāo)準(zhǔn)中發(fā)展而來的。目前常用的瀏覽器有IE瀏覽器、火狐(Firefox)瀏覽器、谷歌(Chrome)瀏覽器、獵豹瀏覽器、Safàri瀏覽器、Opera瀏覽器等。通過對這些主流Web瀏覽器的發(fā)展策略進(jìn)行調(diào)查，發(fā)現(xiàn)它們都在支持HTML5上采取了措施。二、相關(guān)知識2.HTML5基礎(chǔ)1）HTML5文檔的基本格式學(xué)習(xí)任何一門語言，首先要掌握它的基本格式，就像寫信需要符合書信的格式要求一樣，HTML5標(biāo)記語言同樣需要遵從一定的規(guī)范。HTML5文檔的基本格式主要包括<!doctype>文檔類型聲明、<html>根標(biāo)記、<head>頭部標(biāo)記、<body>主體標(biāo)記。<!doctype>標(biāo)記<html></html>標(biāo)記<body></body>標(biāo)記二、相關(guān)知識2）HTML5語法123標(biāo)記不區(qū)分大小寫允許部分屬性的屬性值省略允許屬性值不使用引號二、相關(guān)知識雙標(biāo)記單標(biāo)記3）HTML標(biāo)記500W500WPRESENTATION二、相關(guān)知識4）標(biāo)記的屬性使用HTML制作網(wǎng)頁時，如果要讓HTML標(biāo)記提供更多的信息，例如希望標(biāo)題文本的字體為“微軟雅黑”且居中顯示，此時僅僅依靠HTML標(biāo)記的默認(rèn)顯示樣式已經(jīng)不能滿足需求了，需要對HTML標(biāo)記的屬性加以設(shè)置。二、相關(guān)知識PRESENTATION5）HTML5文檔頭部相關(guān)標(biāo)記（1）<title></title>標(biāo)記(2)<meta>標(biāo)記(4)<style></style>標(biāo)記(3)<link>標(biāo)記二、相關(guān)知識PRESENTATION//SLIDE1創(chuàng)建第一HTML5頁面3制作“電影影評網(wǎng)”頁面2制作“HTML5百科”頁面一、任務(wù)引入通過學(xué)習(xí)，小日已經(jīng)了解了如何創(chuàng)建一個HTML文檔，并掌握了文檔中相關(guān)標(biāo)記和屬性等內(nèi)容。現(xiàn)在，他想進(jìn)一步嘗試使用HTML5制作一個簡單的頁面。在實現(xiàn)這個頁面之前，他還需要進(jìn)行相應(yīng)的知識準(zhǔn)備，包括常用圖像格式、圖像標(biāo)記<img/>、絕對路徑和相對路徑、超鏈接等方面的基礎(chǔ)知識與技能的學(xué)習(xí)。文本控制標(biāo)記123標(biāo)題和段落標(biāo)記特殊字符標(biāo)記文本格式化標(biāo)記二、相關(guān)知識1.文本控制標(biāo)記主要有以下三種：01.標(biāo)題標(biāo)記02.段落標(biāo)記03.水平線標(biāo)記04.換行標(biāo)記1標(biāo)題標(biāo)記4換行標(biāo)記3水平線標(biāo)記2段落標(biāo)記二、相關(guān)知識我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)記和段落標(biāo)記。GIF格式PNG格式JPG格式GIF格式最突出的地方就是它支持動畫，同時它也是一種無損的圖像格式。PNG格式包括PNG-8和真色彩PNG(PNG-24和PNG-32)。JPG格式所能顯示的顏色比GI格式和PNG格式要多得多，可以用來保存超過256種顏色的圖像。二、相關(guān)知識2.圖像標(biāo)記1）常用圖像格式titleBorderalignvspace和hspacewidth和height圖像的替換文本屬性alt二、相關(guān)知識2）圖像標(biāo)記<img/>231456相對路徑絕對路徑500W500W從文件自身的位置出發(fā)，依次說明到達(dá)目標(biāo)文件的路徑二、相關(guān)知識3）相對路徑和絕對路徑先指明最高級的層次，然后依次向下說明3.超鏈接標(biāo)記超鏈接的常用屬性包含href和target：href：用于指定鏈接目標(biāo)的URL地址。當(dāng)為<a>標(biāo)記應(yīng)用href屬性時，它就具有了超鏈接的功能。target：用于指定鏈接頁面的打開方式。target有self和blank兩種取值。其中，self為默認(rèn)值，意為在原窗口中打開；blank為在新窗日中打開。hreftarget二、相關(guān)知識PRESENTATION//SLIDE1創(chuàng)建第一HTML5頁面3制作“電影影評網(wǎng)”頁面2制作“HTML5百科”頁面一、任務(wù)引入通過學(xué)習(xí)，小H已經(jīng)掌握了HTML5基本文檔結(jié)構(gòu)，能夠利用標(biāo)題、段落、圖片、超鏈接標(biāo)簽等制作簡單的網(wǎng)頁了。小日很滿意自己學(xué)到的知識和技能,但是他并不滿足于此，他還想做出更美觀、更實用的網(wǎng)頁，如能夠進(jìn)行簡單的用戶交互。本任務(wù)重點介紹列表元素、結(jié)構(gòu)元素、分組元素、頁面交互元素、文本層次語義元素以及全局屬性。ul元素(無序列表)是網(wǎng)頁中最常用的列表，其各個列表項之間沒有順序級別之分，通常是并列的dl元素(定義列表)用于對術(shù)語或名詞進(jìn)行解釋和描述ol元素(有序列表)有排列順序的列表，其各個列表項按照一定的順序排列列表的嵌套應(yīng)用列表項中也包含若干子列表項，要在列表項中定義子列表項就需要將列表進(jìn)行嵌套二、相關(guān)知識1.列表元素1234footer元素article元素section元素aside元素nav元素header元素二、相關(guān)知識2314562.結(jié)構(gòu)元素fgure和fgcaption元素hgroup元素500W500Wfgure元素用于定義獨立的流內(nèi)容，一般指一個單獨的單元二、相關(guān)知識用于將多個標(biāo)題組成一個標(biāo)題組，通常它與h1~h6元素組合使用3.分組元素頁面交互標(biāo)記123details和summary元素meter元素progress元素二、相關(guān)知識4.頁面交互元素主要有以下三種：文本層次語義元素123

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論