網頁設計與制作課件 第3章 HTML5基礎與應用_第1頁
網頁設計與制作課件 第3章 HTML5基礎與應用_第2頁
網頁設計與制作課件 第3章 HTML5基礎與應用_第3頁
網頁設計與制作課件 第3章 HTML5基礎與應用_第4頁
網頁設計與制作課件 第3章 HTML5基礎與應用_第5頁
已閱讀5頁，還剩16頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML5基礎與應用PowerPointdesign目錄CONTENTS01.HTML5概述02.HTML的常用標簽03.練習案例HTML5概述Part0101什么是HTMLHTML5是構建網站內容的一種語言描述方式。HTML5是互聯(lián)網的新一代標準，是構建以及呈現(xiàn)互聯(lián)網內容的一種語言方式，被認為是互聯(lián)網的核心技術之一。HTML的全稱為HyperTextMarkupLanguage，表示超文本標記語言。所謂超文本，是指HTML可以加入圖片、聲音、動畫、影視等內容，它可以從一個文件跳轉到另一個文件。02HTML的基本結構HTML元素的構成：解釋HTML元素是由預定義的HTML標簽組成，包括單標簽和雙標簽的使用。HTML文檔的主要部分：描述HTML文檔由頭部信息和主體信息構成，包括<head>和<body>標簽的用途。HTML標簽的類型：區(qū)分單標簽和雙標簽，并解釋標簽屬性的作用。03HTML5文件的創(chuàng)建HTML5文件的創(chuàng)建過程：使用文本編輯器創(chuàng)建HTML5文件，包括新建文本文檔、輸入HTML代碼、保存為HTML文件等步驟。HTML5的基本結構：展示一個簡單的HTML5文檔結構，包括<html>、<head>、<title>和<body>標簽的使用。HTML5文件的瀏覽：描述如何通過瀏覽器打開并查看HTML5文件的效果。課堂案例——編寫HTML5在Windows的操作系統(tǒng)下，創(chuàng)建一個HTML5文件的步驟如下。（1）單擊鼠標右鍵，在彈出的菜單中中執(zhí)行“新建>文本文檔”命令，打開“記事本”文件。課堂案例——編寫HTML5（2）在“記事本”中輸入以下HTML代碼。<html><head><title>網頁標題</title></head><body>編寫HTML5</body></html>課堂案例——編寫HTML5（3）在“記事本”文件中執(zhí)行“文件>另存為”命令，打開“另存為”對話框，在“保存類型”下拉列表中選擇“所有文件”，然后在“文件名”文本框中輸入文件名以及擴展名（比如編寫HTML5.html），最后設置保存路徑，這樣就建好了一個HTML文檔。（4）打開該文件所在的目錄，可以看到文件的圖標已經變成了一個HTML文件。課堂案例——編寫HTML5（5）使用鼠標左鍵雙擊該文件，瀏覽器將顯示此頁面。標題欄顯示“網頁標題”，文檔中出現(xiàn)文字“編寫HTML5”。

使用DreamweaverCC創(chuàng)建一個頁面是很容易的，而不需要在純文本中編寫代碼。打開DreamweaverCC切換到代碼視圖，可以看到Dreamweaver在新文檔中已經自動創(chuàng)建了HTML文檔。課堂案例——編寫HTML5HTML文檔是由HTML元素組成的文本文件。HTML元素是預定義正在使用的HTML標簽，即HTML標簽用來組成HTML元素。HTML標簽兩端有兩個包括字符<和>，這兩個包括字符被稱為角括號。標簽通常是成對出現(xiàn)，比如<body>和</body>。一對標簽的前面一個是開始標簽，第二個是結束標簽，在開始和結束標簽之間的文本是元素內容。HTML標簽并不區(qū)分字母的大小寫，比如<title>與<TITLE>所表示的含義是一致的。HTML主要由頭部信息和主體信息兩部分構成，如圖3-9所示。頭部信息是文檔的開頭部分，以<head>標簽開始，</head>標簽結束。在標簽對之間可包含文檔總標題<title>…</title>、腳本操作<script>…</script>等，如不需要也可以省略。<body>標簽是文檔主題部分的開始，以</body>標簽結束，其標簽對包含眾多的標簽。<html>…</html>標簽在最外層，表示這對標簽之間的內容是HTML文檔，標簽對之間包含所有HTML標簽HTML的基本結構HTML中的標簽豐富多樣，通過它們可以表現(xiàn)出豐富多彩的設計風格，下面就介紹標簽的幾種類型。1.單標簽某些標簽稱為“單標簽”，因為它只需單獨使用就能完整地表達意思，這類標簽的語法如下。<標簽名稱>最常用的單標簽是<br>，它表示換行。2.雙標簽雙標簽由“始標簽”和“尾標簽”兩部分構成，必須成對使用，其中“始標簽”使瀏覽器從此處開始執(zhí)行該標簽所表示的功能，而“尾標簽”告知瀏覽器在這里結束該功能?！笆紭撕灐鼻凹右粋€斜杠（/）即成為尾標簽，雙標簽的語法如下。<標簽>內容</標簽>其中“內容”部分就是這對標簽要施加作用的部分，例如想突出某段文字的顯示，就可以將該段文字放在<em>…</em>標簽中。3.標簽屬性在單標簽和雙標簽的始標記內可以包含一些屬性，其語法如下。<標簽名稱屬性1屬性2屬性3…>各屬性之間無先后次序，屬性也可省略（即取默認值）。例如單標簽<hr>表示在文檔當前位置繪制一條水平線，默認是從窗口中當前行的最左端一直到最右端，屬性為<hrsize=3align=leftwidth="75%">，其中各屬性的含義如下。

size：定義線的粗細，屬性值取整數(shù)，缺省值為1。

align：表示對齊方式，可取left（左對齊）、center（居中）、right（右對齊），缺省值為“l(fā)eft（左對齊）”。

width：定義線的長度，可取相對值（由一對""號括起來的百分數(shù)，表示相對于充滿整個窗口的百分比），也可取絕對值（用整數(shù)表示的屏幕像素點的個數(shù)，如width=500），默認值是“100%”。HTML的基本結構HTML的常用標簽Part02保存和瀏覽HTML文件：說明如何將代碼保存為HTML文件，并在瀏覽器中查看效果。（1）新建一個記事本文檔，在文檔中輸入以下HTML代碼。<html><head><title>無標題文檔</title></head><body>憶江南<br>江南好，風景舊曾諳。<br>日出江花紅勝火，春來江水綠如藍。<br>能不憶江南？</body></html>課堂案例——輸入古詩保存和瀏覽HTML文件：說明如何將代碼保存為HTML文件，并在瀏覽器中查看效果。（2）將以上代碼保存為HTML文件，然后使用瀏覽器瀏覽。課堂案例——輸入古詩學習HTML當然不能少了<html>標簽，<html>標簽用來標識HTML文檔的開始，</html>則用來標識HTML文檔的結束，兩者成對出現(xiàn)，缺一不可。<html>、</html>在文檔的最外層，文檔中的所有文本和html標簽都包含在其中，它表示該文檔是以超文本標識語言（HTML）編寫的。事實上，現(xiàn)在常用的Web瀏覽器都可以自動識別HTML文檔，并不要求有<html>標簽，也不對該標簽進行任何操作，但是為了使HTML文檔能夠適應不斷變化的Web瀏覽器，還是應該養(yǎng)成不省略這對標簽的良好習慣。<html>…</html>HTML的常用標簽<head>…</head>構成HTML文檔的頭部部分是由<head>…</head>標簽實現(xiàn)的，前面提到了<head>和</head>標簽對，可以包含文檔的標題如<title>…</title>、CSS樣式規(guī)則的<style>…</style>組件等。<body>…</body>是HTML文檔的主體部分，包含表格<table>…</table>、超級鏈接<ahref>…</a>、換行<br>等許多標簽。<body>…</body>中所定義的文本和圖像將通過瀏覽器顯示出來。<body>…</body>HTML的常用標簽<title>…</title><title>…</title>標簽對所包含的就是網頁的標題，即瀏覽器頂部標題欄所顯示的內容，將要顯示的文字輸入在<title>…</title>之間就可以了。一般文章都有標題、副標題、章和節(jié)等結構，HTML中也提供了相應的標題標簽<hn>，其中n為標題的等級，HTML總共提供6個等級的標題，n越小，標題字號就越大。將代碼保存為HTML文件，然后使用瀏覽器瀏覽?？梢钥闯觯恳粋€標題的字體為加粗體，內容文字前后都插入了空行。<hn>…</hn>HTML的常用標簽<br>在HTML語言規(guī)范里，每當瀏覽器窗口被縮小時，瀏覽器會自動將右邊的文字轉折至下一行。所以，對于自己決定需要換行的地方，應加上<br>換行標簽，<br>為單標簽。<br>標簽不管放在什么位置，都能夠強制換行。需要注意的是，雖然<br>標簽在頁面排版的時候很有用，但過度使用可能會導致網頁結構混亂。為了使文檔在瀏覽器顯示時排列得整齊、清晰，在文字段落之間，通常用<p>…</p>來做標記。文件段落的開始由<p>來標記，段落的結束由</p>來標記。標簽</p>是可以省略的，因為下一個<p>的開始就意味著上一個<p>的結束。<p>標簽還有一個屬性align，它用來指明字符顯示時的對齊方式，一般有center、left、right這3種對齊方式。center表示居中顯示文檔內容，left表示靠左對齊顯示文檔內容，right則表示靠右顯對齊顯示文檔內容。將代碼保存為HTML文件（擴展名為.htm或.html），然后用IE瀏覽器打開它。<p>…</p>HTML的常用標簽<align=#>通過align屬性可以設置文字或圖片的對齊方式，left表示靠左對齊，right表示靠右對齊，center表示居中對齊，它的基本語法如下。<divalign=#>（#＝left／right／center）把代碼保存為HTML文件，然后使用瀏覽器瀏覽。練習案例Part03制作提示第1步：打開記事本文檔，輸入以下HTML代碼。<html><head><title>排版網頁</title></head><body>排版網頁<p><h1>飲湖上初晴后雨二首?其二</h1><h2>[作者]蘇軾[朝代]宋</h2><h3>水光瀲滟晴方好，山色空蒙雨亦奇。</h3><h3>欲把西湖比西子，淡妝濃抹總相宜。</h3></body></html>練習案例——排版網頁制作提示第2步：在“記事本”文件中執(zhí)行“文件>另存為”命令，打開“另存為”對話框，在“保存類型”下拉列表中選擇“所有文件”，然后在“文件名”文本框中輸入文件名以及擴展名（比如編寫HTML5.html），最后設置保存路徑，這樣就建好了一個HTML文檔。練習案例——排版網頁第3步：打開該文件所在的目錄，

溫馨提示

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

最新文檔

評論

0/150

提交評論