網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第3章 HTML知識(shí)準(zhǔn)備_第1頁
網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第3章 HTML知識(shí)準(zhǔn)備_第2頁
網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第3章 HTML知識(shí)準(zhǔn)備_第3頁
網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第3章 HTML知識(shí)準(zhǔn)備_第4頁
網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第3章 HTML知識(shí)準(zhǔn)備_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第3章HTML知識(shí)準(zhǔn)備網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents3.1

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

課堂實(shí)戰(zhàn)3.5

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

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

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

課堂實(shí)戰(zhàn)3.5

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

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

課堂實(shí)戰(zhàn)3.5

課后練習(xí)3.3.1HTML5的語法變化HTML語法是在SGML（StandardGeneralizedMarkupLanguage，標(biāo)準(zhǔn)通用標(biāo)記語言）語言的基礎(chǔ)上建立的，但是由于SGML的語法非常復(fù)雜，文檔結(jié)構(gòu)解析程序的開發(fā)也不太容易，多數(shù)Web瀏覽器不作為SGML解析器運(yùn)行。HTML規(guī)范中雖然要求“應(yīng)遵循SGML的語法”，但實(shí)際情況卻是，對(duì)于HTML的執(zhí)行在各瀏覽器之間并沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，因此也就有了HTML5。在HTML5中，提高Web瀏覽器間的兼容性是HTML5要實(shí)現(xiàn)的重大的目標(biāo)。要確保兼容性，必須消除規(guī)范與實(shí)現(xiàn)的背離。HTML5分析了各個(gè)瀏覽器之間的特點(diǎn)和功能，在此基礎(chǔ)上要求這些瀏覽器所有內(nèi)部功能符合一個(gè)通用標(biāo)準(zhǔn)，從而大大提高了各瀏覽器正常運(yùn)行的可能性。3.3.2

HTML5中的標(biāo)記方法HTML5的標(biāo)記方法主要有以下3種：1.內(nèi)容類型(ContentType)HTML5的文件擴(kuò)展符與內(nèi)容類型保持不變。2.DOCTYPE聲明DOCTYPE聲明是HTML文件中必不可少的，它位于文件第一行。3.字符編碼的設(shè)置字符編碼的設(shè)置方法也有些新的變化。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.表單相關(guān)的屬性2.與鏈接相關(guān)的屬性3.其它屬性目錄Contents3.1

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

溫馨提示

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

評(píng)論

0/150

提交評(píng)論