《移動商務(wù)網(wǎng)頁設(shè)計(jì)與制作》第1章 網(wǎng)頁設(shè)計(jì)語言-HTML_第1頁
《移動商務(wù)網(wǎng)頁設(shè)計(jì)與制作》第1章 網(wǎng)頁設(shè)計(jì)語言-HTML_第2頁
《移動商務(wù)網(wǎng)頁設(shè)計(jì)與制作》第1章 網(wǎng)頁設(shè)計(jì)語言-HTML_第3頁
《移動商務(wù)網(wǎng)頁設(shè)計(jì)與制作》第1章 網(wǎng)頁設(shè)計(jì)語言-HTML_第4頁
《移動商務(wù)網(wǎng)頁設(shè)計(jì)與制作》第1章 網(wǎng)頁設(shè)計(jì)語言-HTML_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第1章網(wǎng)頁設(shè)計(jì)語言———HTML1.

1

HTML的第一個實(shí)例1.

2

HTML語言基礎(chǔ)1.

3

HTML基本標(biāo)簽元素1.4小結(jié)返回1.

1

HTML的第一個實(shí)例HTML(HyperTextMarkupLanguage,超文本標(biāo)記語言)是一種用來制作超文本文檔的簡單標(biāo)記語言。HTML網(wǎng)頁就是用這種標(biāo)記語言來書寫的。用HTML標(biāo)記語言寫的網(wǎng)頁文本,只有通過Web瀏覽器進(jìn)行編譯和解釋才能正確顯示。下面是一個HTML文檔的實(shí)例及它在IE瀏覽器中的顯示結(jié)果。返回1.2

HTML語言基礎(chǔ)1.2.1

HTML網(wǎng)頁文檔的結(jié)構(gòu)HTML網(wǎng)頁文檔是一個有結(jié)構(gòu)的文檔,其基本結(jié)構(gòu)包括:最外層的標(biāo)簽是ht-ml標(biāo)簽對,在html標(biāo)簽對中內(nèi)嵌head標(biāo)簽對和body標(biāo)簽對。head標(biāo)簽對中可包括一些頭元素,如title元素,body標(biāo)簽對中可以包含各種網(wǎng)頁元素。圖1.2標(biāo)注了HTML網(wǎng)頁文檔的基本結(jié)構(gòu)。該網(wǎng)頁文檔的代碼如圖1.3所示。該網(wǎng)頁文檔在瀏覽器中的顯示效果如圖1.4所示。上一頁下一頁返回1.2

HTML語言基礎(chǔ)1.2.2

HTML網(wǎng)頁文檔的編寫工具編寫HTML網(wǎng)頁文檔的工具有很多,比如記事本就可以完全滿足網(wǎng)頁代碼的編寫要求,當(dāng)然借助FrontPage、UltraEdit和Dreamweaver等網(wǎng)頁編輯工具更好,因?yàn)樗鼈兡芴峁┐a自動提示和關(guān)鍵字高亮顯示等輔助功能,能幫助開發(fā)者快速布局網(wǎng)頁元素、自動生成網(wǎng)頁代碼,它們還有進(jìn)行實(shí)時(shí)預(yù)覽網(wǎng)頁效果等功能。本書后面的HTML5網(wǎng)頁設(shè)計(jì)開發(fā)必須用到最新版的網(wǎng)頁開發(fā)工具DreamweaverCS6,本教程中的所有實(shí)例都是通過DreamweaverCS6進(jìn)行編輯和開發(fā)的。上一頁返回1.3

HTML基本標(biāo)簽元素1.3.1

HTML網(wǎng)頁頭部標(biāo)簽元素HTML文檔的<head>(標(biāo)簽)元素是所有頭部元素的容器。<head>標(biāo)簽內(nèi)的元素可以是腳本標(biāo)簽,可以是樣式標(biāo)簽(樣式表還包含位置信息,其指示瀏覽器在何處可以找到樣式表),可以是元信息標(biāo)簽,還可以是網(wǎng)頁標(biāo)題標(biāo)簽等。如以下標(biāo)簽都可以被添加到head部分:<title>、<base>、<link>、<meta>、<script>以及<style>。下面對這些標(biāo)簽進(jìn)行簡要介紹。1.<title>元素<title>元素用來定義HTML文檔的標(biāo)簽標(biāo)題。瀏覽器以特殊的方式來使用標(biāo)題,通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。當(dāng)把文檔加入用戶的鏈接列表、收藏夾或書簽列表時(shí),標(biāo)題將成為該文檔鏈接的默認(rèn)名稱。下一頁返回1.3

HTML基本標(biāo)簽元素2.<base>標(biāo)簽<base>標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。通常情況下,瀏覽器會從當(dāng)前文檔的URL中提取相應(yīng)的元素來填寫相對URL中的空白。使用<base>標(biāo)簽可以改變這一點(diǎn)。使用<base>標(biāo)簽后瀏覽器將不再使用當(dāng)前文檔的URL,而使用指定的基本URL來解析所有的相對URL。這其中包括<a>、<img>、<link>以及<form>標(biāo)簽中的URL。3.<link>標(biāo)簽HTML<link>標(biāo)簽定義文檔與外部資源的關(guān)系。<link>標(biāo)簽最常見的用途是鏈接樣式表。下面的實(shí)例展示了HTML文檔如何鏈接一個外部樣式表。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素4.<meta>標(biāo)簽HTML的<meta>標(biāo)簽定義有關(guān)頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。<meta>標(biāo)簽位于文檔的頭部,不包含任何內(nèi)容。<meta>標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。在HTML中,<meta>標(biāo)簽沒有結(jié)束標(biāo)簽,但在XHTML中,<meta>標(biāo)簽必須被正確地關(guān)閉。提示:<meta>標(biāo)簽永遠(yuǎn)位于head元素內(nèi)部。元數(shù)據(jù)總是以名稱/值的形式被成對傳遞。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素5.<script>標(biāo)簽HTML的<script>標(biāo)簽用于定義客戶端腳本,比如JavaScript。script元素既可以包含腳本語句,也可以通過src屬性指向外部腳本文件。其必需的type屬性規(guī)定腳本的MIME類型。腳本的常見應(yīng)用有圖像操作、表單驗(yàn)證以及動態(tài)內(nèi)容更新。提示:淤假如此元素內(nèi)部的代碼沒有位于某個函數(shù)中,那么這些代碼會在頁面加載時(shí)被立即執(zhí)行,但<frameset>標(biāo)簽之后的腳本會被忽略。于請參閱<noscript>元素。對于那些在瀏覽器中禁用腳本或者其瀏覽器不支持客戶端腳本的用戶來說,該元素非常有用。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素6.<style>標(biāo)簽<style>標(biāo)簽是HTML定義樣式表時(shí)使用的標(biāo)簽。HTML中的樣式表稱為CSS樣式表(層疊樣式表),可以用于控制網(wǎng)頁的字體、顏色、圖像、表格、鏈接和布局格式,是Web頁面設(shè)計(jì)的重要技術(shù),它使得網(wǎng)頁內(nèi)容與樣式定義徹底分開,甚至可以將CSS保存為.css文件,使用時(shí)再進(jìn)行調(diào)用導(dǎo)入。這樣就可以通過定義和修改CSS達(dá)到頁面設(shè)計(jì)的效果。1.3.2

HTML網(wǎng)頁正文部分的標(biāo)簽元素1.body部分的常用標(biāo)簽元素HTML元素除了嵌入在<head>標(biāo)簽中的標(biāo)簽元素,其他大部分元素都嵌入在<body>標(biāo)簽中。這些標(biāo)簽元素有很多,見表1.1。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素2.body部分的常用元素使用舉例1)<h1>、<hr>、<font>、<sup>、<sub>、<b>等標(biāo)簽HTML的<h1>到<h6>標(biāo)簽用來定義網(wǎng)頁正文里的標(biāo)題。<h1>定義最大的標(biāo)題,<h6>定義最小的標(biāo)題。HTML的<hr>標(biāo)簽在HTML頁面中創(chuàng)建一條水平線。水平分隔線(horizon-talrule)可以在視覺上將文檔分隔成各個部分。HTML的<font>標(biāo)簽規(guī)定文本的字體、字體尺寸、字體顏色。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素HTML的<sup>、<sub>標(biāo)簽可定義上標(biāo)文本和下標(biāo)文本。包含在<sup>標(biāo)簽和其結(jié)束標(biāo)簽</sup>中的內(nèi)容將會以當(dāng)前文本流中字符高度的一半(上半高度)來顯示,但是與當(dāng)前文本流中文字的字體和字號都是一樣的。包含在<sub>標(biāo)簽和其結(jié)束標(biāo)簽</sub>中的內(nèi)容將會以當(dāng)前文本流中字符高度的一半(下半高度)來顯示,但是與當(dāng)前文本流中文字的字體和字號都是一樣的。HTML的<b>標(biāo)簽呈現(xiàn)粗體文本效果。<b>標(biāo)簽明確地將包括在它和其結(jié)束標(biāo)簽之間的字符或者文本變成粗體。以上六種標(biāo)簽都是修飾網(wǎng)頁文字的標(biāo)簽。下面的實(shí)例中分別演示了上面六種標(biāo)簽修飾文字后的效果。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素2)<table>、<th>、<td>、<center>等標(biāo)簽在網(wǎng)頁制作中,表格是很重要、很常用的網(wǎng)頁布局元素。<table>標(biāo)簽定義HTML表格。簡單的HTML表格由<table>元素以及一個或多個<tr>、<th>或<td>元素組成。<tr>元素定義表格的行,<th>元素定義表頭,<td>元素定義表格單元。更復(fù)雜的HTML表格也可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>以及<tbody>元素。3)<a>、<link>、<address>等標(biāo)簽(1)<a>標(biāo)簽。<a>標(biāo)簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。<a>元素最重要的屬性是href屬性,它指定鏈接的目標(biāo)。例如要鏈接到w3school,使用如下屬性值的<a>標(biāo)簽就可以了:上一頁下一頁返回1.3

HTML基本標(biāo)簽元素<ahref="">w3school</a>(2)<link>標(biāo)簽。<link>標(biāo)簽定義文檔與外部資源的關(guān)系。<link>標(biāo)簽最常見的用途是鏈接樣式表。例如在本HTML網(wǎng)頁文檔中鏈接一個外部樣式表:<head><linkrel="stylesheet"type="text/css"href="theme.css"/></head>(3)<address>標(biāo)簽。<address>標(biāo)簽可定義一個地址(比如電子郵件地址)?？墒褂盟鼇矶x地址、簽名或者文檔的作者身份。不論創(chuàng)建的文檔是簡短扼要還是冗長完整,都應(yīng)該確保每個文檔都附加了一個地址,這樣做不僅為讀者提供了反饋的渠道,還可以增加文檔的可信度。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素4)<p>、<div>、<li>、<ul>、<ol>等標(biāo)簽(1)<p>標(biāo)簽。<p>標(biāo)簽定義段落。p元素會自動在其前后創(chuàng)建一些空白。瀏覽器會自動添加這些空間,也可以在樣式表中規(guī)定。例如,以下代碼標(biāo)記了一個段落:<p>Thisissometextinaveryshortparagraph</p>(2)<div>標(biāo)簽。<div>標(biāo)簽可定義文檔中的分區(qū)或節(jié)(division/section)。<div>標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具,并且不使用任何格式與其關(guān)聯(lián)。如果用id或class來標(biāo)記<div>,那么該標(biāo)簽的作用會變得更加有效。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素<div>是一個塊級元素。這意味著它的內(nèi)容自動地開始一個新行。實(shí)際上,換行是<div>固有的唯一格式表現(xiàn)?？梢酝ㄟ^<div>的class或id應(yīng)用額外的樣式,但不必為每一個<div>都加上類或id,雖然這樣做也有一定的好處?？梢詫ν粋€<div>元素應(yīng)用class或id屬性,但是更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是,class用于元素組(類似的元素,或者可以將其理解為某一類元素),而id用于標(biāo)識單獨(dú)唯一的元素。(3)<li>、<ul>、<ol>標(biāo)簽。<li>標(biāo)簽定義列表項(xiàng)目,<ul>標(biāo)簽定義無序列表,<ol>標(biāo)簽定義有序列表。往往將<li>與<ul>結(jié)合使用定義無序列表,將<li>和<ol>結(jié)合使用定義有序列表。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素5)<form>、<input>、<button>、<select>、<textarea>等標(biāo)簽(1)<form>標(biāo)簽。HTML中的表單標(biāo)簽<form>用于為用戶輸入創(chuàng)建HTML表單。表單能夠包含input元素,比如文本字段、復(fù)選框、單選框、提交按鈕等。表單還可以包含menus、textarea、fieldset、legend和label元素。表單用于向服務(wù)器傳輸數(shù)據(jù)。提示:form元素是塊級元素,其前后會產(chǎn)生換行。(2)<input>標(biāo)簽。<input>標(biāo)簽用于收集用戶信息。根據(jù)不同的type屬性值,輸入字段擁有很多種不同形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等。上一頁下一頁返回1.3

HTML基本標(biāo)簽元素6)<img>、<embed>標(biāo)簽(1)<img>標(biāo)簽。<img>標(biāo)

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論