《網(wǎng)頁設(shè)計與制作應(yīng)用教程》課件-CH2 HTML5 基礎(chǔ)_第1頁
《網(wǎng)頁設(shè)計與制作應(yīng)用教程》課件-CH2 HTML5 基礎(chǔ)_第2頁
《網(wǎng)頁設(shè)計與制作應(yīng)用教程》課件-CH2 HTML5 基礎(chǔ)_第3頁
《網(wǎng)頁設(shè)計與制作應(yīng)用教程》課件-CH2 HTML5 基礎(chǔ)_第4頁
《網(wǎng)頁設(shè)計與制作應(yīng)用教程》課件-CH2 HTML5 基礎(chǔ)_第5頁
已閱讀5頁，還剩21頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC網(wǎng)頁設(shè)計與制作應(yīng)用教程網(wǎng)頁設(shè)計與制作第2章HTML5本章重點代碼規(guī)范語法結(jié)構(gòu)標簽與屬性二、HTML5基礎(chǔ)網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.1XHTML簡介2.3HTML5語法2.4HTML5常用標簽2.2創(chuàng)建簡單的網(wǎng)頁文件2.5HTML5新標簽2.1XHTML簡介HTML是HyperTextMarkupLanguage（超文本標記語言）的縮寫，它是構(gòu)成Web頁面，表示W(wǎng)eb頁面的符號標記語言。1993年6月正式推出HTML1.0版，2014年10月，W3C發(fā)布了HTML5，從而，HTML5取代了HTML4.0和XHTML1.0標準，實現(xiàn)了桌面系統(tǒng)和移動平臺的完美銜接。可以說HTML5是HTML的升級完善，它將Web帶入一個成熟的應(yīng)用平臺，在這個平臺上，視頻、音頻、圖像、動畫以及與設(shè)備的交互都進行了規(guī)范。XHTML的新特點功能兼容性增加了新特性內(nèi)容與表現(xiàn)的分離簡化HTML5新增了內(nèi)容元素，HTML5新增了表單控件，HTML5新增了用于繪畫的canvas元素。HTML5新增了用于媒體播放的video、audio元素。HTML5更好地支持了地理位置、拖曳、攝像頭等API。XHTML的新特性網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.2創(chuàng)建簡單網(wǎng)頁文件網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)

創(chuàng)建一個簡單的網(wǎng)頁，可以通過網(wǎng)頁編輯器來編輯網(wǎng)頁、并保存，生成XHTML文件。打開記事本。單擊Windows的“開始”按鈕，在“程序”菜單的“附件”子菜單中單擊“記事本”命令。創(chuàng)建新文件，并按XHTML語言規(guī)則編輯。在“記事本”窗口中輸入XHTML代碼，代碼內(nèi)容。保存網(wǎng)頁。打開“記事本”的“文件”菜單，選擇“保存”命令。此時將出現(xiàn)“另存為”對話框，在“保存在”下拉列表框中選擇文件要存放的路徑，在“文件名”文本框輸入以“html（或htm）”為后綴的文件名，最后單擊“保存”按鈕，生成網(wǎng)頁文檔。在資源管理器窗口找到網(wǎng)頁文檔，雙擊文檔圖標，隨即在打開的IE瀏覽器窗口中可以瀏覽到網(wǎng)頁內(nèi)容。2.3

HTML5語法網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)XHTML代碼規(guī)范所有的標記都必須有一個相應(yīng)的結(jié)束標記

所有標簽的元素和屬性的名字都必須使用小寫

所有的標記都必須合理嵌套

所有的屬性必須用引號括起來

特殊符號“<”、“>”和“＆”用編碼表示

每個屬性必須賦值

2.4

HTML5常用標簽網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4.1文檔結(jié)構(gòu)標簽HTML5文檔是一種純文本格式的文件，HTML5文檔的基本結(jié)構(gòu)為文件頭和文件主體部分。我們先看下面的源代碼，方便理解文檔結(jié)構(gòu)中的標簽作用。XHTML的基本結(jié)構(gòu)XHTML文檔是一種純文本格式的文件，XHTML文檔的基本結(jié)構(gòu)為：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>我的網(wǎng)頁標題</title></head><body>網(wǎng)頁內(nèi)容</body></html>2.4

HTML5常用標簽網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2．XHTML文檔標記<html>…</html>

3．XHTML文檔頭標記<head>…</head>4．XHTML文檔標題標記<title＞標題內(nèi)容…</title>6．XHTML文檔主體標記<body>網(wǎng)頁內(nèi)容…</…</body>

5．XHTML文檔元信息標簽<metacharset="utf-8"/>1.<!DOCTYPE><!DOCTYPE>位于文檔的最前面，用于說明當前文檔使用哪種HTML標準規(guī)范。<head>標簽用于定義文檔的頭部，它是所有頭部元素的容器用于提供有關(guān)頁面的元信息用于定義文檔的標題說明自身是一個HTML文檔(1)主體位于頭部之后，以<body>為開始標簽，</body>為結(jié)束標簽。它定義網(wǎng)頁上顯示的主要內(nèi)容與顯示格式，是整個網(wǎng)頁的核心，網(wǎng)頁中要真正顯示的內(nèi)容都包含在主體中，如文本、超鏈接、圖像、表格和列表等等。(2)<body>標簽有很多“呈現(xiàn)屬性”，用于呈現(xiàn)頁面外觀，如bgcolor、text、link、alink、vlink、background、leftmargin、topmargin等。2.4.1文檔結(jié)構(gòu)標簽2.4

HTML5常用標簽網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4.2文本格式標簽1．<！--…-->注釋標簽注釋并不局限于一行，長度不受限制。2．<h#>標題標簽語法：<h#align="對齊方式">標題文字</h#>

說明：（1）“#”用來指定標題文字的大小，取1～6的整數(shù)值，取1時文字最大，6時最小。（2）屬性align用來設(shè)置標題在頁面中的對齊方式，取值為：left（左對齊）、center（居中）、right（右對齊），默認為left。（3）<h#>…</h#>標記默認顯示宋體，在一個標題行中無法使用不同大小的字體。（4）與用<title>…</title>定義的網(wǎng)頁標題不同，標題格式顯示在瀏覽器窗口內(nèi)，而不顯示在瀏覽器的標題欄中。網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)3.段落標記<p>…</p>格式為：

<palign=＂對齊方式＂>文字</p>

2.4

HTML5常用標簽4.強制換行<br/>格式為：文字<br/>5.水平線標記<hr/>格式為：＜hralign=“l(fā)eft|center|right”

size=“橫線粗細”

width=＂橫線長度＂color=＂橫線色彩＂noshade＝＂noshade＂>說明：size：設(shè)定線條粗細，以像素為單位，默認值為2。width：設(shè)定線段長度，可以是絕對值（以像素為單位）或相對值（相對于當前窗口的百分比）。所謂絕對值，是指線段的長度是固定的，不隨窗口尺寸的改變而改變。所謂相對值，是指線段的長度相對于窗口的寬度而定，窗口的寬度改變時，線段的長度也隨之增減，默認值為100%，即始終填滿當前窗口。noshade：設(shè)定線條為平面顯示（沒有三維效果），若省略則有陰影或立體效果。網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)色彩色彩英文名稱十六進制代碼黑色block#000000藍色blue#0000ff棕色brown#a52a2a青色cyan#00ffff灰色gray#808080綠色green#008000乳白色Ivory#fffff0橘黃色orange#ffa500粉紅色pink#ffc0cb紅色red#ff0000白色white#ffffff黃色yellow#ffff00深紅色crimson#cd061f淡紫色lavender#dbdbf8color：設(shè)定線條色彩，默認為黑色。色彩可以用相應(yīng)的英文名稱或以“#”引導(dǎo)的一個十六進制代碼來表示，見表。2.4

HTML5常用標簽網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4

HTML5常用標簽<html><head><metacharset="utf-8"/><title>文本格式標簽應(yīng)用</title></head><body><h1align="center">春有百花秋有月</h1><palign="right">無門慧開禪師</p><hralign="center"slze="8"width="80%"color="blue"/><palign="center">春有百花秋有月，<br/>夏有涼風冬有雪，<br/>若無閑事掛心頭，<br/>便是人間好時節(jié)。</p></body></html>例1：使用<p>、<h>、<br>和<hr>標簽標識文本演示結(jié)果如下：網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4.3字符格式標簽1.<em>和<strong>強調(diào)標簽<em>和<strong>標簽都是短語元素。<em>把文本定義為強調(diào)的內(nèi)容，<strong>把文本定義為語氣更強的強調(diào)的內(nèi)容。2．<i>斜體標簽標簽是短語元素，將包含其中的文本以斜體字（italic）顯示。3.<sup>和<sub>上下標標簽標簽中的內(nèi)容將會以當前文本流中字符高度的一半來顯示，但是與當前文本流中文字的字體和字號都是一樣的。

4.特殊字符標簽HTML中有些字符無法直接表示出來，如“<”、“>”符號，使用特殊符號標簽就可以將它們在網(wǎng)頁中表示出來，常見的特殊符號表示如表所示。2.4

HTML5常用標簽網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4.4超鏈接標簽超鏈接（HyperLink）是HTML的一個最強大的和最有價值的功能，起到網(wǎng)頁互聯(lián)的橋梁作用。超鏈接可以看作是一個“熱點”，它可以從當前網(wǎng)頁定義的位置跳轉(zhuǎn)到其他位置，包括當前頁的某個位置、Internet、本地硬盤或其他文件，甚至跳轉(zhuǎn)到聲音、圖像等多媒體文件。1.<a>超鏈接標簽<a>標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。它在網(wǎng)頁上建立超文本鏈接。通過單擊文本或圖像，可以從此處轉(zhuǎn)到另一個鏈接資源（目標資源），這個目標資源有惟一的地址（URL）。語法：<ahref="地址"target="打開窗口方式">鏈接對象</a>說明：(1)href屬性非常重要，它的值為一個URL，即目標資源的有效地址。如果要創(chuàng)建一個不鏈接到其他位置的空鏈接，可用“#”代替URL，即<ahref＝"#"＞鏈接對象</a>(2)target屬性設(shè)定超級鏈接被單擊后所打開窗口的方式，可選值為：_blank,_parent,_self和_top。2.4

HTML5常用標簽網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4

HTML5常用標簽4．錨點鏈接錨點可以實現(xiàn)當前頁面內(nèi)部文字的超鏈接，需要先建立錨點，通過建立錨點對頁面內(nèi)的文字進行引導(dǎo)和跳轉(zhuǎn)。錨點定義就是建立一個書簽，對該文本做一個記號。（1）錨點定義語法：<aname=＂錨點名＂>目標文字</a>（2）錨點鏈接語法：<ahref＝＂＃錨點名＂>熱點文本</a>這里，name的賦值和href的賦值之間只差一個“#”號，是鏈接對應(yīng)的關(guān)鍵。即單擊熱點文本，將跳轉(zhuǎn)到錨點名開始的位置。

5．指向下載文件的鏈接如果鏈接到的文件不是HTML文件，則該文件將作為可下載文件。語法：<ahref=＂可下載文件名＂>熱點文本</a>

6．指向電子郵件的鏈接單擊指向電子郵件的鏈接，將打開默認的電子郵件程序，如Foxmail、OutlookExpress等，并自動填寫郵件地址。語法：<ahref＝＂mailto：E-mail地址＂>熱點文本</a>網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)超鏈接實例，HTML代碼如下2.4

HTML5常用標簽編輯并保存以上代碼文檔，然后按F12鍵，在瀏覽器中瀏覽頁面效果，如圖2-8所示。可以測試各種超鏈接功能。網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4.5多媒體標簽2.4

HTML5常用標簽1．<img>圖像標簽在HTML中，使用img標簽可以把一幅圖像加入到網(wǎng)頁中。語法：<imgsrc=＂圖像文件名＂alt=＂簡單說明＂width=＂圖像寬度＂height=＂圖像高度＂/>說明：img是單標簽。src：指出要加入圖像的文件名，規(guī)定顯示圖像的URL。如，src="/i/eg_tulip.jpg"。alt：規(guī)定圖像的替代文本。如，alt="郁金香"。width：設(shè)定圖像的寬度（像素數(shù)或百分數(shù)），通常應(yīng)設(shè)為圖像的真實大小以免失真。若需要改變圖像大小，最好事先使用圖像編輯工具。height：設(shè)定圖像的高度（像素數(shù)或百分數(shù)）。img標簽的應(yīng)用除了在網(wǎng)頁中插入圖像功能，還可以用圖像作為網(wǎng)頁的背景，即使用<body>標簽的background屬性，為網(wǎng)頁加上背景圖像。例如：<bodybackground=＂i/bg.jpg＂>background取值為一個圖像文件名，并且要指出文件存放的路徑，可以是相對路徑，也可以是絕對路徑。圖像文件可以是gif格式或jpg格式的文件,如果圖像小于頁面，圖像會進行重復(fù)。

網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.<audio>標簽<audio>標簽是HTML5的新標簽，用于定義聲音，能夠支持ogg、mp3、wav等三種音頻格式。語法：<audio>…</audio>例如：<audiosrc="i/2-music.ogg"controls="true"autoplay="true">您瀏覽器不支持audio標簽。</audio>其中，autoplay屬性控制是否網(wǎng)頁加載自動播放；controls是否顯示播放控件，默認不顯示；loop屬性用于控制循環(huán)次數(shù)，如果值為正整數(shù)，則播放指定的次數(shù)，默認是無線循環(huán)播放。

3.<video>標簽<video>標簽是HTML5的新標簽，用于定義視頻，比如電影片段或其他視頻流。語法：<video>…</video>例如：<videosrc="somevideo.wmv">您的瀏覽器不支持video標簽。</video>

4.<embed>標簽<embed>標簽是HTML5中的新標簽，用于插入多媒體插件。它可以用來插入各種多媒體，能支持mid、wav、swf、mp3等格式。語法：<embed/>例如：<embedsrc=＂i/2-music.wav＂/>，自動播放一段音頻。<embedsrc=＂i/2-fl.swf＂/>，播放一段flash動畫。2.4

HTML5常用標簽網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4

HTML5常用標簽2.4.6其他標簽1.列表標簽列表分為無序列表和有序列表兩類。帶序號標志（如數(shù)字、字母等）的表項就組成有序列表，否則為無序列表。(1)<ul>無序列表標簽<ul><li>HTML5音頻</li><li>HTML5視頻</li><li>HTML5畫布</li><li>HTML5拖放</li></ul>

代碼示例如下：說明：<ul>用來定義一個無序列表，<li>用來定義列表項，Type=#設(shè)置無序列表的符號樣式，其取值有以下3種，默認為實心圓。type=disc實心圓type=circle空心圓type=square方框網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4

HTML5常用標簽（2）<ol>列表使用<ol>標簽建立有序列表，通過帶序號的列表可以更清楚地表達信息的順序。<ol><li>HTML5音頻</li><li>HTML5視頻</li><li>HTML5畫布</li><li>HTML5拖放</li></ol>

代碼示例如下：說明：<ol>用來定義一個有序列表，<li>用來定義有序列表項，Type=#設(shè)置序列表的符號樣式，取值有以下幾種，默認為“1.2.3.”序列。Type=1Type=aType=AType=IType=i網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4

HTML5常用標簽2.表格標簽表格將文本和圖像按行、列排列，它和列表一樣，有利于表達信息。表格在主頁中常用來建立網(wǎng)頁的框架，使整個頁面中的圖像和空白分布更規(guī)則，并使條目更清晰。代碼示例如下：

說明：表格標簽通常包括有：<table>（表格）、<th>（表頭）、<tr>（行）、<td>（單元格）。還包括一些可選標簽，如：<tbody>、<thead>、<tfoot>、<caption>等。<thead>用于定義表格中的表頭內(nèi)容，<tbody>用于定義表格中的主體內(nèi)容，<tfoot>用于定義表格中的注腳內(nèi)容，<caption>用于定義表格標題。網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.4

HTML5常用標簽

3.表單標簽<form>標簽用于為用戶輸入創(chuàng)建HTML表單，并向服務(wù)器傳輸數(shù)據(jù)。表單能夠包含<input>標簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。4.框架標簽<frame>標簽定義frameset中的一個特定的窗口（框架）。frameset中的每個框架都可以設(shè)置不同的屬性，比如border、scrolling、noresize等等。不能與<frameset></frameset>標簽一起使用<body></body>標簽。5.樣式/節(jié)標簽<style>標簽用于為HTML文檔定義樣式信息。在style中，type屬性是必需的，定義style元素的內(nèi)容。唯一可能的值是"text/css"。style元素位于head部分中。<div>可定義文檔中的分區(qū)或節(jié)（division/section）。div標簽是用來定義網(wǎng)頁面的內(nèi)容中的邏輯區(qū)域的標簽，通過插入div標簽，并應(yīng)用CSS定位樣式來創(chuàng)建頁面布局?？梢园盐臋n分割為獨立的、不同的部分。常采用id或class來標記<div>，標簽的作用會變得更加有效。網(wǎng)頁設(shè)計與制作——HTML5基礎(chǔ)2.5

HTML5新標簽

2.5.1<canvas>標簽<canvas>標簽定義圖形，比如圖表和其他圖像。標簽通過腳本（通常是JavaScript）來繪制圖形（比如圖表和其他圖像）。標簽描述<audio>定義音頻內(nèi)容<video>定義視頻（video或者movie）<source>定義多媒體資源<video>和<audio><embed>定義嵌入的內(nèi)容，比如插件。<track>為諸如<video>和<audio>元素之類的媒介規(guī)定外部文本軌道。2.5.2新多媒體標簽2.5.3新語義和結(jié)構(gòu)元素標簽描述<article>定義頁面獨立的內(nèi)容區(qū)域。<aside>定義頁面的側(cè)邊欄內(nèi)容。aside標簽的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān)。<bdi>允許您設(shè)置一段文本，使其脫離

溫馨提示

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

評論

0/150

提交評論