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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第1章

HTML5基礎知識要點1.1什么是HTML1.1.1?

網頁的基本概念1.1.2?HTML的工作原理1.1.3?

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

網頁編輯工具1.2創(chuàng)建網頁1.2.1?標記符基礎1.2.2?網頁的基本結構1.2.3?在網頁中添加內容1.3

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論