網頁設計與制作案例實戰教程課件 第3章 HTML知識準備_第1頁
網頁設計與制作案例實戰教程課件 第3章 HTML知識準備_第2頁
網頁設計與制作案例實戰教程課件 第3章 HTML知識準備_第3頁
網頁設計與制作案例實戰教程課件 第3章 HTML知識準備_第4頁
網頁設計與制作案例實戰教程課件 第3章 HTML知識準備_第5頁
已閱讀5頁，還剩25頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

第3章HTML知識準備網頁設計與制作案例實戰教程目錄Contents3.1

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

課堂實戰3.5

課后練習3.1.1HTML語言基礎HTML（HyperTextMarkupLanguage）并不是程序設計語言，而是一種排版網頁中資料顯示位置的標記結構語言。HTML文件是一種可以用任何文本編輯器創建的ASCII碼文檔。常見的文本編輯器包括記事本、寫字板等，這些文本編輯器都可以編寫HTML文件，在保存時以.htm或.html作為文件擴展名保存即可。當使用瀏覽器打開這些文件時，瀏覽器將對其進行解釋，瀏覽者就可以從瀏覽器窗口中看到頁面內容。3.1.2文件開始標簽<html><html>與</html>標簽限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。語法描述如下：<html>…</html>3.1.3文件頭部標簽<head><head>標簽用于定義文檔的頭部，它是所有頭部元素的容器。<head>中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在Web中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。語法描述如下：<head>…</head>3.1.4標題標簽<titie><title標簽可定義文檔的標題，是head部分中唯一必需的元素。瀏覽器會以特殊的方式來使用標題，并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時，標題將成為該文檔鏈接的默認名稱。語法描述如下：<title>…</title>3.1.5標題標簽<titie><title標簽可定義文檔的標題，是head部分中唯一必需的元素。瀏覽器會以特殊的方式來使用標題，并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時，標題將成為該文檔鏈接的默認名稱。語法描述如下：<title>…</title>3.1.6主體標簽<body><body>標簽定義文檔的主體，包含文檔的所有內容，比如文本、超鏈接、圖像、表格和列表等。語法描述如下：<body>…</body>3.1.7

UI設計常用軟件<meta>標簽可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。<meta>標簽位于文檔的頭部，不包含任何內容。<meta>標簽的屬性定義了與文檔相關聯的名稱/值對。<meta>標簽永遠位于head元素內部。name屬性提供了名稱/值對中的名稱。語法說明如下：<metaname="description/keywords"content="頁面的說明或關鍵字"/>目錄Contents3.1

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

課堂實戰3.5

課后練習3.2.1標題文字HTML中設置文章標題的標簽為<h></h>。語法描述如下：<h1>…</h1>標題標簽<h1>-<h6>標簽可定義標題，<h1>定義最大的標題，<h6>定義最小的標題。3.2.2文字字體Face屬性可以設置HTML語言中文字的不同字體效果。若瀏覽器中沒有安裝相應字體，設置的效果將會被瀏覽器中的通用字體替代。語法描述如下：<fontface="字體">文本內容</font>3.2.3段落換行換行標簽<br>可以設置一段很長的文字換行，以便于瀏覽和閱讀。語法描述如下：<br>3.2.4不換行標簽<nobr>標簽可以幫助用戶解決瀏覽器的限制，避免自動換行。語法描述如下：<nobr>不需換行文字</nobr>3.2.5圖像標簽制作網頁時，插入圖片可以更好的美化網頁，吸引用戶瀏覽。在HTML語言中，插入圖片的標簽為<img>。語法描述如下：<imgsrc="圖片文件地址">3.2.6超鏈接標簽超鏈接是指從一個網頁指向一個目標的連接關系。通過超鏈接可以連接各個網頁，使其構成真正的網站。下面將針對HTML語言中的超鏈接標簽進行介紹。1.頁面鏈接在HTML中創建超鏈接需要使用<a>標記，具體格式是：<ahref="URL"target="_blank">鏈接</a>2.錨記鏈接建立錨記鏈接，可以對同一網頁的不同部分進行鏈接。3.電子郵件鏈接若將href屬性的取值指定為“mailto:電子郵件地址”，則可以獲得指向電子郵件的超鏈接。3.2.7列表標簽在HTML中的列表分為有序列表和無序列表2種。有序列表是指帶有序號標志（如數字）的列表；無序列表是指沒有序號標志的列表。1.有序列表有序列表的標簽是<ol>,其列表項標簽是<li>。2.無序列表無序列表的標簽是<ul>，其列表項標簽是<li>。3.2.8表格標簽使用表格可以有效的管理網頁信息，使頁面布局整齊美觀。表格一般由行、列、單元格三個部分組成。在網頁中使用表格會用到3個標簽，即<table>、<tr>、<td>。<table>標簽表示表格對象，<tr>標簽表示表格中的行，<td>標簽表示單元格，<td>標簽必須包含在<tr>標簽內。語法描述如下：<table><tr><td>表項目1</td>……<td>表項目n</td></tr>……<tr><td>表項目1</td>……<td>表項目n</td></tr></table>3.2.9表單標簽使用表單可以增加網站與用戶之間的互動，實現更多的功能，如網站登錄、賬戶注冊等等。表單是由<form>標簽定義的。常用的表單元素有下面6種：文本框復選框單選按鈕提交按鈕多行文本框下拉菜單3.2.10實操案例：絲竹詩文本案例將以絲竹詩文網頁的制作為例，對<img>、<br>等標簽的應用進行介紹。目錄Contents3.1

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

課堂實戰3.5

課后練習3.3.1HTML5的語法變化HTML語法是在SGML（StandardGeneralizedMarkupLanguage，標準通用標記語言）語言的基礎上建立的，但是由于SGML的語法非常復雜，文檔結構解析程序的開發也不太容易，多數Web瀏覽器不作為SGML解析器運行。HTML規范中雖然要求“應遵循SGML的語法”，但實際情況卻是，對于HTML的執行在各瀏覽器之間并沒有一個統一的標準，因此也就有了HTML5。在HTML5中，提高Web瀏覽器間的兼容性是HTML5要實現的重大的目標。要確保兼容性，必須消除規范與實現的背離。HTML5分析了各個瀏覽器之間的特點和功能，在此基礎上要求這些瀏覽器所有內部功能符合一個通用標準，從而大大提高了各瀏覽器正常運行的可能性。3.3.2

HTML5中的標記方法HTML5的標記方法主要有以下3種：1.內容類型(ContentType)HTML5的文件擴展符與內容類型保持不變。2.DOCTYPE聲明DOCTYPE聲明是HTML文件中必不可少的，它位于文件第一行。3.字符編碼的設置字符編碼的設置方法也有些新的變化。3.3.3HTML5中新增元素在HTML5中，新增了以下元素：1.section元素2.article元素3.aside元素4.header元素5.fhgroup元素6.footer元素7.nav元素8.figure元素9.video元素10.audio元素11.embed元素12.mark元素13.progress元素14.meter元素15.time元素16.wbr元素17.canvas元素18.command元素19.details元素20.datalist元素

3.3.4HTML5中新增屬性元素在HTML5中，還新增加了很多的屬性，下面簡單介紹一些新增的屬性。1.表單相關的屬性2.與鏈接相關的屬性3.其它屬性目錄Contents3.1

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

溫馨提示

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

最新文檔

評論

0/150

提交評論