第1章 HTML5基礎(chǔ)電子課件_第1頁
第1章 HTML5基礎(chǔ)電子課件_第2頁
第1章 HTML5基礎(chǔ)電子課件_第3頁
第1章 HTML5基礎(chǔ)電子課件_第4頁
第1章 HTML5基礎(chǔ)電子課件_第5頁
已閱讀5頁，還剩20頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第1章

HTML5基礎(chǔ)知識要點(diǎn)1.1什么是HTML1.1.1?

網(wǎng)頁的基本概念1.1.2?HTML的工作原理1.1.3?

創(chuàng)建和測試網(wǎng)頁1.1.4?

網(wǎng)頁編輯工具1.2創(chuàng)建網(wǎng)頁1.2.1?標(biāo)記符基礎(chǔ)1.2.2?網(wǎng)頁的基本結(jié)構(gòu)1.2.3?在網(wǎng)頁中添加內(nèi)容1.3

綜合實(shí)例：人物介紹網(wǎng)頁要點(diǎn)回顧練習(xí)題目錄1.1.1網(wǎng)頁的基本概念1．Internet與WWWWWW01Internet服務(wù)電子郵件（Email）02文件傳輸（FTP）03即時(shí)信息傳遞（QQ、微信、MSN）04網(wǎng)絡(luò)游戲051.1.1網(wǎng)頁的基本概念2．WWW與瀏覽器WWW=Web服務(wù)器+信息資源+瀏覽器1.1.1網(wǎng)頁的基本概念不同瀏覽器→

不同顯示效果PART1主流瀏覽器（用browserstatistics搜索Bing）ChromeIEFirefoxSafariPART2其他平臺差異分辨率操作系統(tǒng)1.1.1網(wǎng)頁的基本概念3．網(wǎng)站與主頁網(wǎng)站（WebSite或Site）=頁面集合主頁（Homepage）=組織或個(gè)人在Web上的開始頁面01搜索引擎02購物網(wǎng)站03公司網(wǎng)站04宣傳網(wǎng)站網(wǎng)站的類別1.1.1網(wǎng)頁的基本概念4．網(wǎng)站中的各種文件任何一個(gè)網(wǎng)站都是由若干個(gè)文件組成的，包括網(wǎng)頁文件、圖像文件等多種類型。這些文件通過一定的方式以文件夾的形式組織起來，構(gòu)成了網(wǎng)站的根文件夾。文件擴(kuò)展名

說明.htm，.htmlHTML文件，即網(wǎng)頁文件.cssCSS文件，即層疊樣式表文件，用于設(shè)置網(wǎng)頁內(nèi)容的顯示格式.jsJavaScript文件，通過程序的方式實(shí)現(xiàn)特定的功能.gif，.jpg，.png圖像文件.swfFlash文件.wav，.mp3音頻文件.mp4，.mov，.avi視頻文件1.1.2HTML的工作原理1．網(wǎng)頁的HTML本質(zhì)規(guī)范/標(biāo)準(zhǔn)01標(biāo)記符（tag）02HTML(HypertextMarkupLanguage)1.1.2HTML的工作原理2．關(guān)于Web標(biāo)準(zhǔn)對網(wǎng)頁信息內(nèi)容進(jìn)行整理和分類。用于結(jié)構(gòu)化設(shè)計(jì)的Web標(biāo)準(zhǔn)技術(shù)包括HTML、XML和XHTML。結(jié)構(gòu)Part01對被結(jié)構(gòu)化的信息進(jìn)行顯示控制。用于Web設(shè)計(jì)的標(biāo)準(zhǔn)技術(shù)是層疊樣式表（CascadingStyleSheets，CSS，也稱串聯(lián)樣式表或級聯(lián)樣式表）表現(xiàn)Part02對文檔內(nèi)部模型進(jìn)行定義，用于控制動(dòng)態(tài)交互內(nèi)容。這部分標(biāo)準(zhǔn)技術(shù)包括文檔對象模型（DocumentObjectModel，DOM）、瀏覽器對象模型（BrowserObjectModel，BOM）和腳本程序語言JavaScript等行為Part031.1.3創(chuàng)建和測試網(wǎng)頁1．創(chuàng)建網(wǎng)頁01.在Windows（本書以Windows10為例）中啟動(dòng)“記事本”程序02.在“記事本”的窗口中輸入HTML代碼03.輸入代碼結(jié)束后，選擇“文件”菜單中的“保存”或“另存為”命令，彈出“另存為”對話框04.在“文件名”框中輸入網(wǎng)頁的名稱，注意文件名必須以.htm或.html為擴(kuò)展名。如果必要，可定位到特定的目錄1.1.3創(chuàng)建和測試網(wǎng)頁2．測試網(wǎng)頁保存網(wǎng)頁之后，在所選擇的文件夾中將包含我們所創(chuàng)建的網(wǎng)頁文件。該網(wǎng)頁文件名稱左邊有一個(gè)圖標(biāo)（或者是其他當(dāng)前計(jì)算機(jī)上默認(rèn)瀏覽器的圖標(biāo)），表示可以由Chrome將其打開。找到剛創(chuàng)建的網(wǎng)頁文件并雙擊，則可以自動(dòng)啟動(dòng)Chrome瀏覽器，此時(shí)所創(chuàng)建網(wǎng)頁中的內(nèi)容將在瀏覽器中顯示。一般情況下，瀏覽器可以正確顯示所有HTML代碼。如果瀏覽器不能按照我們的預(yù)想進(jìn)行顯示，則表示編寫的HTML代碼有問題，應(yīng)對代碼進(jìn)行修改。1.1.4網(wǎng)頁編輯工具除了使用像“記事本”這樣的純文本編輯器直接進(jìn)行HTML代碼編輯以外，制作網(wǎng)頁時(shí)還可以使用以下兩類軟件工具來提高工作效率。1HTML編輯器把HTML代碼編輯工作簡化的一種工具，主要適用于手動(dòng)編寫HTML代碼的場合。常見的“HTML編輯器”包括VSCode、Notepad++、SublimeText、UltraEdit

和Xcode（適用于macOS）等2所見即所得的網(wǎng)頁編輯器把HTML代碼編輯工作用可視化的方式實(shí)現(xiàn)的一種工具。這是應(yīng)用非常廣泛的一類網(wǎng)頁制作工具，尤其適合初學(xué)者使用。最常見的“所見即所得的網(wǎng)頁編輯器”是Dreamweaver1.2.1標(biāo)記符基礎(chǔ)HTML的語法比較簡單，即使沒有任何計(jì)算機(jī)編程語言（如C、Java等）的基礎(chǔ)也很容易學(xué)。在HTML中，所有的標(biāo)記符都用尖括號（<、>）括起來。例如，<html>表示HTML標(biāo)記符。絕大多數(shù)標(biāo)記符都是成對出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符，開始標(biāo)記符和相應(yīng)的結(jié)束標(biāo)記符定義了標(biāo)記符所影響的范圍。結(jié)束標(biāo)記符與開始標(biāo)記符的區(qū)別是結(jié)束標(biāo)記符在小于號之后有一條斜線。1．基本的HTML語法<h1>這里是標(biāo)題</h1>將以“標(biāo)題1”格式顯示文字“這里是標(biāo)題”，而不影響開始標(biāo)記符和結(jié)束標(biāo)記符以外的其他文字。某些標(biāo)記符，例如換行標(biāo)記符<br>，只要求單一標(biāo)記符，不需要結(jié)束標(biāo)記符。1.2.1標(biāo)記符基礎(chǔ)2．標(biāo)記符的屬性HTML標(biāo)記符的樣子：<html>、<a>。不區(qū)分大小寫，<html>、<Html>和<HTML>一樣，但建議用小寫。01標(biāo)記符一般成對出現(xiàn)，包括開始標(biāo)記符和結(jié)束標(biāo)記符，例如<p></p>。某些標(biāo)記符只要求單一標(biāo)記符號，例如<br>。02開始標(biāo)記符與結(jié)束標(biāo)記符的區(qū)別在于：結(jié)束標(biāo)記符多一個(gè)斜杠“/”（不是反斜杠“\”?。傩允怯脕砻枋鰧ο筇卣鞯奶匦浴＠?，人的身高、體重。HTML屬性放在開始標(biāo)記符，屬性之間用空格分開，屬性值用引號。<ahref="target.htm"title="點(diǎn)擊有驚喜">超鏈接</a>03注意：XHTML要求標(biāo)記符區(qū)分大小寫！養(yǎng)成習(xí)慣都用小寫。注意：對于XHTML，這樣的標(biāo)記寫為<br/>；對于HTML5，直接寫為<br>。1.2.1標(biāo)記符基礎(chǔ)HTML標(biāo)記符Part1Web頁=HTML文件Part2HTML文件的擴(kuò)展名：.htm

或.htmlPart3HTML文檔基本結(jié)構(gòu)<html></html><head></head><body></body>1.2.2網(wǎng)頁的基本結(jié)構(gòu)Web頁的基本結(jié)構(gòu)1.2.2網(wǎng)頁的基本結(jié)構(gòu)head標(biāo)記符首部標(biāo)記<head></head>位于Web頁的開頭，其中不包括Web頁的任何實(shí)際內(nèi)容，而是提供一些與Web頁有關(guān)的特定信息。首部標(biāo)記中的內(nèi)容也用相應(yīng)的標(biāo)記符括起來。例如，樣式表（CSS）定義位于<style>和</style>之間；腳本定義位于<script></script>之間。1.2.2網(wǎng)頁的基本結(jié)構(gòu)title標(biāo)記符Part1在首部標(biāo)記符中，最基本、最常用的標(biāo)記符是標(biāo)題標(biāo)記<title>和</title>，用于定義網(wǎng)頁的標(biāo)題Part2當(dāng)網(wǎng)頁在瀏覽器中顯示時(shí)，網(wǎng)頁標(biāo)題將在瀏覽器窗口的標(biāo)簽中顯示注意：網(wǎng)頁標(biāo)題是瀏覽者第一個(gè)看到的網(wǎng)頁內(nèi)容，應(yīng)確保其簡明扼要、有意義！1.2.2網(wǎng)頁的基本結(jié)構(gòu)body標(biāo)記符Part1正文標(biāo)記符<body>和</body>包含Web頁的內(nèi)容。文字、圖形、鏈接以及其他HTML元素都位于該標(biāo)記符內(nèi)。Part2正文標(biāo)記符中的文字，如果沒有其他標(biāo)記符修飾，則將以無格式的形式顯示。注意：空格、回車這些格式控制在顯示時(shí)都不起作用。1.2.2網(wǎng)頁的基本結(jié)構(gòu)添加注釋1不論是編寫程序還是制作網(wǎng)頁，為所做的工作添加注釋都是一種良好的工作習(xí)慣。實(shí)際上，添加注釋是任何開發(fā)工作必須遵循的規(guī)范之一2HTML的注釋由開始標(biāo)記符<!--和結(jié)束標(biāo)記符-->構(gòu)成。這兩個(gè)標(biāo)記符之間的任何內(nèi)容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示1.2.2網(wǎng)頁的基本結(jié)構(gòu)顯示特殊字符01.如果用戶需要在網(wǎng)頁中顯示某些特殊字符，例如：<（小于號）、>（大于號）、”（引號）等，則需使用參考字符來表示，而不能直接輸入02.參考字符以“&”號開始，以“；”結(jié)束，既可以使用數(shù)字代碼，也可以使用代碼名稱。例如：1<a在網(wǎng)頁中應(yīng)寫為1<a1.3綜合實(shí)例：人物介紹網(wǎng)頁創(chuàng)建與測試網(wǎng)頁01在“記事本”中編寫代碼02保存為.htm或

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論