通過HTML5制作基礎文本頁_第1頁
通過HTML5制作基礎文本頁_第2頁
通過HTML5制作基礎文本頁_第3頁
通過HTML5制作基礎文本頁_第4頁
通過HTML5制作基礎文本頁_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

電子商務網(wǎng)頁設計與制作Design

and

Creation

of

E-commerce

WebPages

通過HTML5制作基礎文本頁主講人：傅俊THISIS導入：基礎頁面任務分析制作HTML基礎文本頁增加HTML5特性Content導入-基礎頁面任務分析

通過制作一個HTML基礎頁面來承載HTML知識，完成網(wǎng)頁開發(fā)環(huán)境、HTML文本基礎和HTML5結構標簽的學習。以及將該頁面轉換為移動端格式的呈現(xiàn)。制作HTML基礎文本頁創(chuàng)建HTML基礎頁面結構<!doctypehtml><html><head><metacharset="utf-8"><title>浙江某某職業(yè)技術學院招生宣傳</title></head>

<body></body></html>制作HTML基礎文本頁HTML基本結構HTML文檔以<html>標簽開始,以</html>結束,其中可分為頭部<head>和主體<body>兩部分。所有HTML文檔內容則分別嵌套入頭部和主體部分的標簽對之間。一個最基本的HTML網(wǎng)頁代碼如下:<html>

<head>

<!--網(wǎng)頁頭部內容-->

</head>

<body>

<!--網(wǎng)頁主體內容-->

</body>

<html><head>標簽用于定義HTML文檔的頭部信息，主要用來封裝其他位于文檔頭部的標簽，例如<title>、<meta>、<link>及<style>等，用來描述文檔的標題、作者以及和其他文檔的關系等。一個HTML文檔只能含有一對<head>標簽，絕大多數(shù)文檔頭部包含的數(shù)據(jù)不會真正作為內容顯示在頁面中。<body>標簽用于定義HTML文檔所要顯示的內容。一個HTML文檔只能含有一對<body>標簽，且<body>標簽必須在<html>標簽內，位于<head>頭部標簽之后，與<head>標簽是并列關系。制作HTML基礎文本頁HTML的基礎語法HTML是由標簽、標簽屬性和內容注釋構成的，一起用來描述網(wǎng)頁上的各種元素。（1）標簽：用于標示描述功能的符號。通過相應的英文名稱或者縮寫字母嵌套在“<”與“>”里構成,例如<html>、<body>等。標簽一般分為起始標簽和結束標簽,其中起始標簽由<標簽名>組成,如<html>；結束標簽由</標簽名>組成,如</html>。由起始標簽和結束標簽構成的標簽，被稱為雙標簽。只有起始標簽，沒有結束標簽,被稱為單標簽。

HTML標簽關系包含（嵌套）：<head><title></title><head>父子關系并列關系：<head></head><body></body>兄弟姐妹關系制作HTML基礎文本頁HTML的基礎語法（2）屬性：用于進一步描述該標簽。屬性的位置在起始標簽內。一個標簽可以有多個屬性項,各屬性項次序不影響屬性產生的效果,各屬性之間須用空格分隔,空格數(shù)目也不影響屬性的效果。帶屬性的起始標簽的一般可標示為:<標簽名稱屬性名稱=對應屬性值……>。對應屬性值可以用雙引號對包含,也可以不加。

不用對每一個標簽屬性均設置值,每一個屬性都有對應的默認屬性值,若在標簽屬性中不設置新的值,則該屬性值為默認值。

在HTML文檔中,HTML標簽和屬性的書寫不區(qū)分大小寫;HTML文檔可以在一行上書寫多個標簽,也可以把一個標簽包含的屬性分為多行書寫,但一個完整的單詞不能分成兩行寫。制作HTML基礎文本頁HTML的基礎語法（3）內容注釋：可對文檔標簽起注釋的作用,可放在文檔中的任何位置,用<!--……-->標簽。在標簽內的為注釋內容,在瀏覽器預覽時是不顯示的。還有:

html和htm是一樣的；后綴名不能決定文件格式，只能決定文件打開方式。制作HTML基礎文本頁HTML5的新語法（1）文檔聲明：HTML5只有一種<!DOCTYPE>聲明，表示其是HTML5標準：<!DOCTYPEhtml>

（2）字符集：如需正確地顯示HTML頁面，瀏覽器必須知道使用何種字符集。HTML5中簡化為：<metacharset="utf-8">

（3）標簽省略：有些結構標簽可以完全省略，如：html、head、body等。有些雙標簽也可以省略結束符，li、dt、dd、p、option、colgroup、tbody、tr、td、th等。例如在HTML5中，段落標簽可以如此使用：<p>段落。（4）屬性值省略引號：當屬性值不包括空字符串、“<”、“>”、"="、單引號、雙引號等字符時，屬性兩邊的引號可以省略。（5）布爾值：html5中增加布爾值，有屬性為true，沒有屬性為false。對于布爾類型的屬性，比如：readonly、disabled，checked、selected當它們不寫值的時候，就是默認是true。制作HTML基礎文本頁頭部標簽<title>標題標簽,只能在<head>標簽對內出現(xiàn)。<title>標簽所包含的內容通常可以在瀏覽器的標題欄中顯示。<meta>提供有關頁面的元信息(meta-information),也是一個單標簽,在一個頁面的頭部中可以有多個<meta>標簽。meta標簽的作用有搜索引擎優(yōu)化，定義頁面使用的語言，自動刷新并指向新的頁面，實現(xiàn)網(wǎng)頁轉換時的動態(tài)效果，控制頁面緩沖，網(wǎng)頁定級評價，控制網(wǎng)頁顯示的窗口等。<metaname="keywords"content="電子商務,電子支付,科技,浙江"><metaname="description"content="電子商務,電子支付,科技,浙江"><metaname="viewport"content="width=device-width,initial-scale=1"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="refresh"content="5;URL=">

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>制作HTML基礎文本頁將頁面內容補充完整在<body></body>之間繼續(xù)錄入完整，保存后預覽。制作HTML基礎文本頁在主體頁面中添加標題、段落和分割水平線

一般頁面布局都有標題、章和節(jié)等結構，HTML也提供了相應的標題標簽，為了加強分割還可以添加水平線進行內容結構之間的分割。這里選取主體內容中的“浙江某某職業(yè)技術學院”、“學校簡介”、“辦學特色”、“實訓基地”等章節(jié)內容進行修改。制作HTML基礎文本頁在網(wǎng)頁中添加列表

在網(wǎng)頁中大部分信息可以通過列表形式顯示的，如咨詢列表、排行信息、分類列表等，通過列表結構能夠更為有效的對信息進行管理和定義。這里在“實訓基地”部分，可以添加對具體5個基地的列表化說明。制作HTML基礎文本頁標題標簽HTML提供了六個級別的標題,n值越小,標題字號就越大。<h1>定義最大的標題,<h6>定義最小的標題。在這些標簽中嵌套的文字元素顯示黑體字體且自動插入一個空行。段落標簽當需要換段落另起一段時可以使用段落標簽<p>,段落的結束由</p>來標簽,一般可以將</p>省略,因為下一個<p>的開始就意味著上一個<p>的結束。換行標簽換行標簽<br>是一個單標簽,與段落標簽的顯示效果都是另起一行,換段則新起的一行與原行之間有一空行,另外由于不屬于同一段落,對齊方式可以不同。而通過換行標簽<br>則是緊貼原行下方另起一行,仍屬于同一段落。制作HTML基礎文本頁換行標簽關于單標簽有一點要說明：<br>是HTML寫法。

<br/>是XHTML1.1的寫法，也是XML寫法。因為XHTML、XML中所有標簽都需要自行封閉。

<br/>是XHTML為兼容HTML的寫法，也是XML寫法。

因為HTML5兼容XHTML寫法，所以三種都可以使用，沒有區(qū)別。但是沒有</br>的寫法。水平線標簽在屏幕上顯示一條水平線段,可從視覺上將頁面分割成不同部分。無序列表標簽無序列表ul標簽用來將“標簽內容”以列表的方式顯示，列表項目無先后順序之分，也就是沒有編號。列表內的數(shù)據(jù)項以li標簽來列舉，ul標簽中的li標簽項目數(shù)據(jù)默認會加上一個圓點符號。無序列表是一個項目的列表，此列項使用實心圓進行標記。列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等。其語法形式如下：<ul><li>無序列表項1</li><li>無序列表項2</li>……</ul>增加HTML5新特性改為移動端設備的基本結構為體現(xiàn)在移動端應用中呈現(xiàn)給訪問者，考慮采用移動設備的HTML基本結構。<head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>浙江某某職業(yè)技術學院招生宣傳</title></head>增加HTML5新特性改為移動端設備的基本結構

對于移動設備的訪問支持，最主要的問題就是分辨率尺寸，雖然通過屏幕放大縮小也可訪問傳統(tǒng)的網(wǎng)頁，也這樣用戶體驗不佳，而且也會存在實際使用問題。

可在<head>之中添加viewport元數(shù)據(jù)標簽。<metaname="viewport“content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>width=device-width--寬度為設備寬度，如果你的頁面寬度小于設備寬度，就需要修改一下這個屬性，會出現(xiàn)可以頁面左右滑動initial-scale-初始的縮放比例

minimum-scale-允許用戶縮放到的最小比例

maximum-scale-允許用戶縮放到的最大比例

user-scalable-用戶是否可以手動縮放

增加HTML5新特性HTML5新增的結構標簽

隨著網(wǎng)頁標準化的推行，很多網(wǎng)頁在布局時都是采用了Div+CSS的布局方式。<div>標簽是塊級元素，它是可用于組合其他HTML元素的容器。div標簽沒有特定的含義，可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯(lián)。其語法形式如下：<div>…任何網(wǎng)頁元素（標簽）</div>

與CSS一同使用，div標簽可用于對大的內容塊設置樣式屬性。但當在頁面中只有div來定義結構時，可以說整個HTML文檔結構定義不清晰，語義化是不明確的。在HTML5中，為了使文檔的結構更加清晰明確，專門添加了頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標簽。這些結構標簽可以使頁面布局。增加HTML5新特性HTML5新增的結構標簽（1）header標簽header標簽定義文檔的頁眉，通常是一些引導和導航信息。（2）nav標簽nav標簽代表頁面的一個部分，是一個可以作為頁面導航的鏈接組。（3）section標簽section標簽，定義文檔中的節(jié)。section元素是對頁面文檔結構進行劃分的最基本的也是最主要的結構元素，主要用來對網(wǎng)站或應用程序中的頁面上的內容進行層次結構上的劃分。但section元素標簽并非一個普通的容器元素，它表示一段專題性的內容，一般會帶有標題。當需要描述一件具體的事物的時候，通常鼓勵使用article來代替section；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div元素而非

溫馨提示

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

評論

0/150

提交評論