《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊2 HTML5開發基礎_第1頁
《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊2 HTML5開發基礎_第2頁
《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊2 HTML5開發基礎_第3頁
《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊2 HTML5開發基礎_第4頁
《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊2 HTML5開發基礎_第5頁
已閱讀5頁，還剩20頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

模塊二HTML5開發基礎目錄任務一任務二任務三寫一個簡單的HTML5頁面設置“在線學習網”的首頁文件頭部信息引入知識點2.1HTML簡介2.2HTML文件的基本結構任務1編寫一個簡單的HTML5頁面2.1HTML簡介HTML是一切網頁實現的基礎，在網絡中瀏覽的網頁都是一個個由HTML標記構成的文件。瀏覽器只要看到HTML源代碼，就能解析成網頁。HTML文件本身是一種純文本文件，我們可以使用任意一種文本編輯工具進行編寫。比如，使用最簡單的記事本工具，或Editplus、HBuilder、Sublime、InterlliJIDEA等文本編輯工具，或Dreamweaver可視化編輯工具編寫。目前，最新的HTML文件是HTML5。任務1編寫一個簡單的HTML5頁面2.1HTML簡介2.1.1HTML的定義HTML（HyperTextMarkupLanguage，超文本標記語言）是由W3C（WorldWideWebConsortium，萬維網聯盟）所提出的，是用于描述網頁文檔的一種標記語言，其主要用途是制作網頁。用HTML編寫的超文本文檔稱為HTML文檔，也叫網頁。它能獨立于各種操作系統平臺。任務1編寫一個簡單的HTML5頁面2.1HTML簡介2.1.2HTML的發展歷史HTML（第一版）：在1993年6月作為互聯網工程工作小組（IETF）工作草案發布，并非標準。

HTML2.0：1995年11月作為RFC1866發布，在RFC2854于2000年6月發布之后被宣布已經過時。

HTML3.2：1996年1月14日，W3C推薦標準。

HTML4.0：1997年12月18日，W3C推薦標準。

HTML4.01（微小改進）：1999年12月24日，W3C推薦標準。HTML5：2014年10月29日，W3C宣布，經過接近8年的艱苦努力，HTML5標準規范終于制定完成。任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構HTML文檔包含標記和純文本，它被Web瀏覽器讀取并解析后以網頁的形式顯示出來。每個網頁都有其基本的結構，包括HTML文檔的結構，標記的語法格式，語法規范等。2.2.1HTML的語法格式HTML的語法結構主要有標記、屬性和元素組成，其基本語法格式如下：<標記名屬性1=“屬性值1”屬性2=“屬性值2”…>內容</標記名>任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構1.標記HTML標記組成HTML文檔的元素，每一個標記描述了一個功能。標記分為單標記，雙標記兩種。（1）單標記：只需單獨使用就能完整地表達意思，這類標記的基本語法格式如下：<標記名>（2）雙標記：這類標記的基本語法格式如下：<標記名>內容</標記名>任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構2.標記的屬性使用HTML制作網頁時，如果想讓HTML標記提供更多的信息，可以使用HTML標記的屬性來實現，許多單標記和雙標記的始標記內可以包含一些屬性。在HTML中，屬性要在開始標記中指定，用來表示該標記的性質和特性?；菊Z法格式如下：<標記名屬性1=“屬性值1”屬性2=“屬性值2”…>任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構3.元素HTML（element）元素是由“標記（tag）”和“屬性（attribute）”所組成，指的是從開始標記到結束標記的所有代碼。沒有內容的HTML元素被稱為空元素，空元素是在開始標記中關閉的。例如，以下代碼片段所示：<p>歡迎來到廣東創新科技職業學院信息工程學院</p><!--該p元素為有內容的元素-->任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構2.2.2HTML的文檔結構HTML5文件的基本結構如下：<!doctypehtml><!--文檔類型的聲明--><html><!--文檔的開始--><head><!--文檔頭部的開始--><title>此處是網頁標題</title><!--文檔標題信息的開始和結束--></head><!--文檔頭部的結束--><body><!--文檔主體的開始-->此處是網頁文件內容</body><!--文檔主體的結束--></html><!--文檔的結束-->任務1編寫一個簡單的HTML5頁面2.2HTML文件的基本結構2.2.3HTML的常用標記HTML5文檔核心是HTML5標記，標記是用來實現網頁元素的最小單位。學習HTML語言時，除要知道HTML語言結構外，更多是學習掌握這些標記的使用方法。HTML語言的常用標記包含文件結構標記、文本段落標記、鏈接標記、表格標記、列表標記等等任務1編寫一個簡單的HTML5頁面任務1編寫一個簡單的HTML5頁面任務實現（1）創建一個HTML5頁面。（3）該網頁頁面顯示的內容為“讓我們開始HTML語言的新旅程！”。（2）該網頁頁面標題為“第一個HTML頁面”。引入知識點任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3頁面的頭部摘要信息在網頁的頭部<head>和</head>標記所包含的部分中，通常存放一些介紹頁面內容的信息，例如頁面標題、關鍵字、描述、頁面大小，更新日期和網頁快照等。其中，網頁標題及頁面描述稱為網頁的摘要信息。如果希望自己發布的網頁能被百度、谷歌等搜索引擎搜索到，在制作網頁時就需要注意編寫網頁的摘要信息。接下來就介紹一下網頁的摘要信息，<meta>標記如何去使用。任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.1<meta>標記元數據（metadata）是關于數據的信息。<meta>標記是頁面頭部部分中的一個輔助性標記，提供關于HTML文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。meta元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.2<meta>標記屬性<meta>設置的內容包括字符集、網頁關鍵字、網頁描述信息、頁面的刷新及跳轉等，這些內容都是通過設置meta標記的相應屬性來實現。任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.3使用<meta>設置頁面字符集在HTML5中，有一個新的charset屬性，它使字符集的設置更加簡化?；菊Z法格式如下：<metacharset="字符集">例如，下列代碼告訴瀏覽器，網頁使用字符集為utf-8，代碼如下：<metacharset="utf-8">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.4使用<meta>設置作者信息基本語法格式如下：<metaname="author"content="作者的姓名">例如，將作者的姓名“李小茗”添加到網頁的源代碼中，代碼如下：<metaname="author"content="李小茗">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.5使用<meta>設置網頁搜索關鍵字基本語法格式如下：<metaname="keywords"content="關鍵字1,關鍵字2,關鍵字3,…">例如，定義針對搜索引擎的關鍵字，代碼如下：<metaname="keywords"content="網頁制作,HTML,Dreamweaver">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.6使用<meta>設置網頁描述信息基本語法格式如下：<metaname="discription"content="描述內容">例如，在網頁中設置為網站設計者提供網頁制作的說明信息，代碼如下：<metaname="discription"content="這是一個網頁制作等在線學習平臺，擁有系統的前端和移動開發等課程。">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.7使用<meta>設置網頁刷新時間基本語法格式如下：<metahttp-equiv="refresh"content="刷新間隔時間">例如，將網頁設置為每隔10秒自動刷新，代碼如下：<metahttp-equiv="refresh"content="10">任務2設置“在線學習網”的首頁文件頭部信息2.3頁面的頭部摘要信息2.3.8使用<meta>設置網頁自動跳轉基本語法格式如下：<metahttp-equiv="refresh"content="刷新間隔時間";url="頁面地址">例如，將網頁設置10秒之后，網頁自動跳轉到中國大學慕課網站首頁，代碼如下：<metahttp-equiv="refresh"content="10";url="">任務2設置“在線學習網”的首頁文件頭部信息任務實現

溫馨提示

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

評論

0/150

提交評論