《網站前端技術》621-7（梁玲）課件 第二章 HTML與HTML5_第1頁
《網站前端技術》621-7（梁玲）課件 第二章 HTML與HTML5_第2頁
《網站前端技術》621-7（梁玲）課件 第二章 HTML與HTML5_第3頁
《網站前端技術》621-7（梁玲）課件 第二章 HTML與HTML5_第4頁
《網站前端技術》621-7（梁玲）課件 第二章 HTML與HTML5_第5頁
已閱讀5頁，還剩231頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

《網站前端技術》簽到掃碼下載文旌課堂APP掃碼簽到（2022.3.2515:00至2022.3.2515:10）簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設置簽到時間，學生通過“文旌課堂APP”掃描“簽到二維碼”進行簽到。。全課導航第1章網站建設概述第2章HTML與HTML5第3章CSS與CSS3第4章JavaScript基礎第5章JQuery常用函數(shù)第6章開發(fā)者商務網站建設02PARTONE

第2章HTML與HTML501*12掌握HTML文檔的基本結構和常用編輯工具。掌握HTML的無語義標簽、文字相關標簽、圖像標簽、超鏈接標簽、列表標簽、表單及其控件標簽、框架標簽、表格標簽、多媒體標簽等。掌握HTML5新增的標簽、表單控件、屬性等。掌握HTML的相關知識，加強學生的理論基礎，提升學生的專業(yè)技能。制作百度首頁，鍛煉學生的實踐能力，從而達到學以致用的目的。知識目標素質目標學習目標01HTML基礎目錄CONTNETS本章導航13HTML新增常用標簽及通用屬性14HTML新增表單控件及屬性15綜合案例—百度首頁07HTML超鏈接標簽03HTML頭部04HTML無語義標簽05HTML文字相關標簽06HTML圖像標簽02HTML508HTML列表標簽09HTML表單標簽10HTML框架標簽11HTML表格標簽12HTML多媒體標簽01*01HTML基礎01*2.1.1什么是HTMLHTMLHTML指的是超文本標記語言（hypertextmarkuplanguage），是用于編寫網頁的主要語言。它基于標準通用標記語言（standardgeneralizedmarkuplanguage，SGML）定義，是一種標準規(guī)范。HTML主要用于定義網頁結構，它決定網頁上顯示的內容，是網頁文件制作的基礎。HTML是一種用標記標簽（簡稱標簽）描述網頁的標記語言。用HTML編寫的超文本文檔稱為HTML文檔，擴展名為.html或.htm，也就是網頁。網頁文件本身是一種文本文件，本質上是通過在文本文件中添加標簽，來告訴瀏覽器如何顯示其中的內容。瀏覽器按順序閱讀網頁文件，并根據標簽解釋和顯示內容。對書寫有誤的標簽，用戶只能通過顯示效果來分析出錯原因和出錯位置。01*高手點撥

對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。01*2.1.2HTML的主要功能功

能內容HTML的主要功能及功能的具體內容定義（或設置）文本定義文本的標題、段落等。此外，還可以設置文字的字體、字號、顏色等樣式。但是現(xiàn)在一般不用HTML設置樣式，而是用CSS。插入圖像在網頁中插入圖像，使網頁圖文并茂。建立超鏈接通過超鏈接實現(xiàn)不同網站的跳轉。創(chuàng)建列表將信息用一種易讀的方式表現(xiàn)出來。創(chuàng)建表單通過表單實現(xiàn)人機交互，使網站功能更加完善。建立表格以表格的形式顯示頁面信息，為瀏覽者查找信息提供便利。插入多媒體通過網頁共享音頻、視頻、動畫等，并設置播放的時間和次數(shù)表1HTML的主要功能01*HTML標簽是由尖括號“<>”括起來的關鍵詞，每個標簽都有名稱、可選擇的屬性和標簽內容。HTML中，成對出現(xiàn)的標簽稱為雙標簽，單獨出現(xiàn)的標簽稱為單標簽。2.1.3HTML標簽的基本語法雙標簽格式1：<標簽名>標簽內容（文本或超文本）<／標簽名>

例如，定義一個標題的標簽，代碼為：<h1>這是一號標題</h1>格式2：<標簽名屬性名1＝"屬性值1"屬性名2＝"屬性值2"……>標簽內容（文本或超文本）</標簽名>

屬性可選擇，如果標簽中有屬性，則標簽名和屬性名之間要用空格隔開，各屬性值用雙引號括起來。

例如，實現(xiàn)超鏈接的代碼如下：<ahref="web/index.html"target="_blank">點擊我吧</a>

其中，a為超鏈接標簽名稱；href="web/index.html"和target="_blank"兩個屬性，分別定義了超鏈接目標文檔的路徑和打開方式；“點擊我吧”為標簽內容（超鏈接文本）。HTML標簽的基本語法代碼中的標點符號均為英文標點符號。小提示01*2.1.3HTML標簽的基本語法單標簽：格式1：<標簽名/>例如，換行標簽<br/>，它僅僅通知瀏覽器在此處換行，因而不需要界定作用范圍，所以它沒有尾標簽。

格式2：<標簽名屬性名1＝"屬性值1"屬性名2＝"屬性值2"……/>

例如，控制圖像的代碼如下：<imgsrc="img/jp02.jpg"width="400"height="300"/>其中，img是標簽名，表示圖像；src是標簽屬性名，用于將指定圖像引入網頁，img/jp02.jpg是屬性值，表示圖像的地址；width、height也是標簽屬性名稱，分別用于定義圖像的寬度和高度，單位為px（像素，可省略）。從長遠來看，應養(yǎng)成正確關閉單標簽的習慣，因此，在右尖括號前須加上一個空格和斜杠。小提示01*2.1.3HTML標簽的基本語法當一組HTML標簽將一段文字包含在中間時，這段文字與包含文字的HTML標簽稱為一個元素。由于在HTML語法中，每個由HTML標簽與文字形成的元素內，還可以包含另一個元素。因此，整個HTML文件就像一個大元素，其中包含了許多小元素。HTML文檔中一行可以寫多個不同的標簽，也可將一對標簽寫在不同的行中，但每對標簽必須嵌套使用，不能交叉使用。表1列出了標簽的正確用法和錯誤用法。正確錯誤<table><tr><td></td></tr></table><table><tr><td></tr></td></table>表2標簽的正確用法和錯誤用法01*高手點撥上述列表中，<td></td>標簽包含在<tr></tr>標簽中，<tr></tr>標簽又包含在<table></table>標簽中，形成父子關系。01*HTML文檔由起始標簽<html>、頭部標簽<head>和主體標簽<body>三部分組成。下面這段代碼展示了一個基本的HTML文檔結構。2.1.4

HTML的基本結構組成含義<html><head>文檔頭部</head><body>文檔主體</body></html><html>…</html>HTML文檔的開始結束標簽，告訴瀏覽器HTML文檔的開始和結束位置。其他標簽都應放在這對標簽之內，兩個標簽成對出現(xiàn)，缺一不可。<head>…</head>HTML文檔的頭部開始標簽和結束標簽，一般用于存放網頁的元信息，如網頁描述、關鍵字、作者信息等，這些信息在瀏覽器頁面中均不可見，若在頭部標簽之間的文本又寫在了文件標題標簽（<title>…</title>）中，則文本表示該網頁的標題。頭部標簽和文件標題標簽都成對使用。<body>…</body>HTML文檔的主體開始標簽和結束標簽，網頁中要顯示的所有內容均嵌套在這一對標簽內，也可理解為該標簽中的內容在瀏覽器中可見。表3HTML的基本結構01*【示例】打開應用程序“記事本”，創(chuàng)建文件并以“index.html”命名，注意“.html”為該文件的擴展名，然后在該文檔中輸入以下代碼，并保存在合理的位置。2.1.4

HTML的基本結構<html> <head> <title>我的第一個網頁</title> </head> <body> <p>我的段落</p> </body></html>【效果】在瀏覽器中打開網頁，網頁標題顯示“我的第一個網頁”，網頁內容顯示“我的段落”，如圖2-1-1所示。圖2-1-1

記事本創(chuàng)建網頁的效果標簽<title></title>之間的部分是HTML文件的標題。小提示01*2.1.5

HTML標簽的分類根據是否獨占一行，可以將HTML標簽分為塊標簽和行標簽。

塊標簽：獨占一行，可以設置寬度和高度屬性，而且元素在頁面中遵循從上到下的順序排列，如段落標簽<p></p>。

行標簽：也稱內聯(lián)標簽、行內標簽等，不能獨自占據一行，設置寬度和高度屬性無效，而且元素在頁面中遵循從左到右的順序排列，如超鏈接標簽<a></a>。01*2.1.5

HTML標簽的分類【示例】編輯HTML文檔<body>標簽的內容，代碼如下：<p>美文贊賞</p><p>動畫欣賞</p><ahref="">百度一下</a><ahref="">新浪</a>【效果】網頁中兩個段落從上到下各占一行排列，兩個超鏈接從左到右在同一行排列，如圖2-1-2所示。圖2-1-2

塊元素和行元素的區(qū)別01*2.1.6

HTML注釋為增強代碼可讀性，開發(fā)者常使用注釋解釋HTML文檔中的代碼。在HTML文檔中，注釋由“<!--”開始，由“-->”結束。

【示例】

<!--這里是HTML文檔的注釋--><!--注釋內容不在瀏覽器中顯示哦-->HTML注釋一般放在要注釋內容的上面，不能顯示在瀏覽器中，僅顯示在文檔中。01*編輯工具2.1.6

HTML的常用編輯工具AdobeDreamweaver一款集網頁制作和網站管理于一身的所見即所得網頁代碼編輯器。它不僅能夠編輯網頁，還可以有效地創(chuàng)建、管理網站，同時提供上傳網站的便捷方法。記事本是一個小的應用程序，采用簡單的文本編輯器進行文字信息的記錄和存儲。它也是一個代碼編輯工具，可用于編寫網頁文件。Sublime

Text文本編輯器，同時也是網頁編輯器，能夠編輯網頁中涉及的各種類型的文件，如html、css、js、asp、jsp等。對于不同的文件類型會提供相應的便利和便捷的聯(lián)想輸入。Visual

Studio

Code用于編寫現(xiàn)代Web和云應用的跨平臺源代碼編輯器，可以在桌面上運行，可用于多種操作系統(tǒng)（如Windows，macOS和Linux）。擁有眾多插件，為開發(fā)者提供了豐富的擴展庫。HBuilder由DCloud（數(shù)字天堂）推出的國產前端開發(fā)工具，是Web前端開發(fā)1+X證書考試專用編輯器。支持HTML5，有完整的語法提示和代碼輸入法，能夠極大地提升HTML、CSS和JS的開發(fā)效率。01*2.1.6

HTML的常用編輯工具【示例】使用HBuilderX編輯器創(chuàng)建一個HTML文件?！静襟E】大家自行下載HBuilderX軟件，然后啟動HBuilderX。依次選擇HBuilderX左上方主菜單中的“文件”→“新建”→“html文件”選項。在彈出的對話框中輸入文件名“index”。選擇模板“default”。單擊“創(chuàng)建”按鈕，便可創(chuàng)建index.html文件，文件中默認含有以下代碼：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <body> </body></html>01*上述代碼中，DOCTYPE代表一個聲明，用于向瀏覽器說明當前文檔使用的標準規(guī)范。標簽為<!DOCTYPEhtml>，表示當前文檔使用HTML5標準，它不屬于文檔的結構部分。如果省略DOCTYPE聲明，大多數(shù)瀏覽器也能夠正確顯示文檔內容，但是編寫網頁代碼時不應依賴瀏覽器的處理，需要保持良好的編寫習慣，正確聲明文檔所使用的標準規(guī)范。<metacharset="utf-8">用于設置網頁文件展示時使用的字符集，高手點撥01*2.1.6

HTML的常用編輯工具【步驟】在標簽<title></title>中輸入文本“我的第二個網頁”，如下所示：<title>我的第二個網頁</title>

在標簽<body></body>中輸入以下代碼：<ahref="">百度一下</a>【效果】使用瀏覽器打開文件便可看到如圖2-1-3所示的效果，單擊文字“百度一下”，可打開百度首頁。圖2-1-3

HBuilderX創(chuàng)建的網頁效果02*02HTML502*2.2.1HTML5概述HTML5是最新的HTML標準，在2008年正式發(fā)布，并于2012年形成了穩(wěn)定版本。它結合HTML4.01的相關標準進行革新，符合現(xiàn)代網絡發(fā)展要求。HTML5是專門為承載豐富的Web內容而設計的，并且無須額外插件。它擁有新的語義、圖形，以及多媒體元素。而且，它提供的新元素和新的API簡化了Web應用程序的搭建。HTML5是跨平臺的，可以在不同類型的硬件（如PC、平板、手機、電視機等）上運行。02*

跨瀏覽器、跨平臺HTML5有良好的跨瀏覽器性能。目前，95%的瀏覽器都支持HTML5。用HTML5開發(fā)的頁面或小程序，可以從一個平臺移植到另一個平臺。2.2.2HTML5的優(yōu)勢增強Web應用HTML5的設計者們開發(fā)了一系列用于Web應用的接口。HTML5規(guī)范的制定是開放的，所有人都可以獲取草案的內容，也可以參與進來，提出寶貴的意見?；睘楹咹TML5簡化了某些煩瑣的代碼表示。新增多個新特性HTML5中新增了多個新的特性，如結構化語義標簽、功能型表單控件、用于繪畫的標簽、多媒體標簽，以及某些功能（如文件拖放、本地存儲、地理信息等）等。在遇到無法解決的沖突時，HTML5規(guī)范會將用戶的訴求放在第一位。用戶優(yōu)先02*2.2.3HTML5的語法變化不嚴謹寫法的處理方案在HTML5規(guī)范中都有明確的規(guī)定。但是，對于Web開發(fā)者而言，建議遵循嚴謹?shù)拇a編寫規(guī)范，以保證代碼的可讀性，且便于后期的擴展和修改。對于HTML5的一些新特性，如果舊的瀏覽器不支持，也不會影響頁面的顯示。為了兼容各種不規(guī)范的HTML文檔，HTML5允許存在不嚴謹?shù)膶懛?，具體包括以下幾點。（1）：標簽的屬性值沒有使用英文引號括起來，如<imgsrc=1.jpg>。（2）：標簽不區(qū)分大小寫，如“<P>標簽名用了大寫字母</P>”。（3）：標簽沒有閉合，如“<div><p>段落文本</div>”。（4）：某些屬性可以省略屬性值，如<inputtype="checkbox"checked>。03*03HTML頭部03*2.3

HTML頭部

網頁頭部標簽<head></head>，是雙標簽，也是網頁的第一個組成部分。

<head></head>通常用于放置網頁的元信息，如網頁描述、關鍵字、作者信息等。但是，大多數(shù)內容在瀏覽器中不可見。

<head></head>標簽內通常包含<title>、<meta>、<style>、<link>、<script>等標簽。03*高手點撥

元信息是關于信息的信息，用于描述信息的結構、語義、用途和用法等。元信息允許服務器提供所發(fā)送數(shù)據的信息。HTML的元信息其實就是meta標簽，該標簽的詳細信息見后面的章節(jié)。03*2.3.1<title>標簽網頁標題是對一個網頁的高度概括，它顯示在瀏覽器選項卡標題處。瀏覽用戶通過網頁標題能快速了解一個網頁的基本功能，并快速判斷網頁是否被需要。添磚加瓦：一般來說，網站首頁的標題就是網站的正式名稱，而網站中文章內容頁面的標題是文章的題目，欄目首頁的標題通常是欄目名稱。當然這種一般原則并不是固定不變的，在實際工作中可能會有一定的變化，但無論如何變化，總體上仍然會遵照這種規(guī)律。在HTML文檔中，網頁標題要寫在<title>與</title>之間，并且<title>標簽總是嵌套在標簽<head></head>之間?！臼纠?lt;head><title>網頁標題</title></head>03*2.3.1<meta>標簽<meta>標簽一般用于定義網頁的關鍵字、網頁說明和作者信息等。這些信息不會顯示在客戶端，但是會被瀏覽器解析。簡單地說，<meta>標簽是單標簽，用來告訴搜索引擎這個頁面是做什么的。<meta>標簽嵌套在標簽<head></head>之間，標簽<head></head>之間可以有多個<meta>標簽。一個<meta>標簽定義一個網頁的相關內容。<meta>標簽有兩個重要的屬性name和http-equiv。name屬性：標簽的屬性值沒有使用英文引號括起來，如<imgsrc=1.jpg>。name屬性主要用于描述網頁，與之對應的屬性是content，即當name屬性規(guī)定好網頁信息后，后面還需緊跟content屬性設置具體的內容，這樣設置才可以生效。這樣做便于搜索引擎機器人查找、分類。03*2.3.1<meta>標簽表4常用的name屬性值屬性名含義用法name屬性關鍵字（keywords）描述網頁產品及服務的詞語。關鍵字可以是多個，中間用英文逗號“,”隔開。<metaname="keywords"content="HTML,CSS,JS,jQuery"/>網頁說明（description）向搜索引擎提供的關于網頁的概括性描述。網頁的說明是由一兩個詞語或段落組成的，內容一定要有相關性，描述不能太短、太長或過分重復。<metaname="description"content="web前端技術，1+X證書制度"/>作者信息（author）標注網頁的作者姓名，通常跟郵箱地址。<metaname="author"content="WangZRY,wzry@"/>版權信息（copyright）標注網站的版權信息<metaname="copyright"content="版權所有?"/>編輯網頁軟件（generator）說明網站采用什么編輯器制作。<metaname="generator"content="HBuilder——DCloud"/>重訪時間（revisit-after）指如果頁面不經常更新，可以設置一個爬蟲的重訪時間，以減輕搜索引擎爬蟲為服務器帶來的壓力。<metaname="revisit-after"content="sevendays"/>03*2.3.1<meta>標簽http-equiv屬性：類似于HTTP的頭部協(xié)議，它回應給瀏覽器一些有用的信息，以幫助瀏覽器正確、精確地顯示網頁內容。與之對應的屬性同樣為content，其值是對http-equiv屬性內容的具體描述。屬性名含義用法http-equiv屬性刷新（refresh）自動刷新網頁并指向新頁面。<metahttp-equiv="refresh"content="2;URL="/>指點迷津：該代碼表示當前頁面在2秒后自動刷新，并跳轉到w3school官網。網頁編碼格式（content-Type）向搜索引擎提供的關于網頁的概括性描述。網頁的說明由一兩個詞語或段落組成的，內容要有相關性，描述不能太短、太長或過分重復。<metahttp-equiv="content-Type"content="text/html;charset=utf-8"/>此功能在HTML5中簡化為：<metacharset="utf-8"/>表5常用的http-equiv屬性值04*04HTML無語義標簽04*2.4HTML無語義標簽HTML無語義標簽

HTML中的絕大多數(shù)標簽都有確定的語義，以標識該標簽的內容在網頁中要如何顯示。如<p>標簽顯示為段落，<h1>～<h6>標簽顯示為標題，<img>顯示為圖像等。HTML中還有兩個重要的無語義標簽<span>和<div>。04*2.4.1<span>標簽<span>標簽沒有確定的語義，用于修飾文本，以區(qū)別于周圍其他文本，通常需要配合CSS來使用。它是行標簽，其語法格式：<spanstyle="文本樣式">修飾文本</span>【示例2-4-1】編輯HTML文檔<body>標簽的內容。<body> <p><span>是<spanstyle="font-style:italic;">行標簽</span>，沒有確定的語義；通常用于<spanstyle="font-size:22px;font-style:italic;">修飾文本</span>，以區(qū)別于周圍其他文本。</p></body>【效果】<span>標簽內的內容“行標簽”和“修飾文本”樣式不同于其他文本，如圖2-4-1所示。圖2-4-1<span>標簽效果“<”和“>”用于表示特殊字符，style="font-style:italic;"和style="font-size:22px;font-style:italic;"用于設置<span>標簽間文本的樣式。小提示04*2.4.2<div>標簽<div>標簽沒有確定的語義，通常用于劃分區(qū)域，從而對頁面進行布局。該標簽可以看作是一個能夠將其他HTML元素嵌套在內的容器。它是塊標簽，語法格式：<div>待劃分區(qū)域的內容</div>【示例2-4-2】編輯HTML文檔<body>標簽的內容。<body> <div> <h2>下面是兩個段落</h2> <p><div>是塊標簽，沒有確定的語義，通常用于劃分區(qū)域，從而對頁面進行布局。該標簽可以看作是一個能夠將其他HTML元素嵌套在內的容器。</p> <p>本頁面中有一個二級標題和兩個段落，都包含在一對<div>標簽內。</p> </div></body>04*2.4.2<div>標簽【效果】頁面效果如圖2-4-2所示。

圖2-4-2<div>標簽效果<h2>標簽是二級標題標簽。小提示05*05HTML文字相關標簽05*2.5.1標題標簽<h1>～<h6> HTML文字相關標簽文字是網頁中非常重要的信息，在HTML中有很多修飾文字的標簽。<h1>～<h6>標簽用于提升內容的層級，構建文檔的結構，并且標題文本以加粗格式顯示。align屬性設置標題的對齊方式，其值有l(wèi)eft（文字左對齊）、center（文字居中對齊）、right（文字右對齊）。<h1>～<h6>內容的對齊方式屬性若未設置，則對齊方式默認為左對齊。<h1>～<h6>標簽是塊標簽。語法格式：<h1align="對齊方式">文本內容</h1>05*【示例2-5-1】編輯HTML文檔<body>標簽的內容。<body><h1align="center">一級標題</h1><h2align="center">二級標題</h2><h3align="left">三級標題</h3><h4align="right">四級標題</h4><h5>五級標題</h5><h6>六級標題</h6><h7>有七級標題嗎？</h7></body>2.5.1標題標簽<h1>～<h6> 【效果】h1、h2、h3、h4、h5、h6分別表示一級到六級標題，各自獨占一行，并加粗顯示，而且標題內容的字體格式逐漸減小，對齊方式按照屬性設置或默認設置顯示，如圖2-5-1所示。此外，h7內容的字體大小明顯比h6內容的字體大，也沒有加粗，由此可證實HTML規(guī)則中沒有七級標題標簽。圖2-5-1

各級標題標簽與對齊方式屬性設置效果05*【示例2-5-2】

編輯HTML文檔<body>標簽的內容。<body><palign="center">美文欣賞</p><p>人站得高些，不但能有幸早些領略到期望的曙光，還能有幸發(fā)現(xiàn)生命的立體的詩篇。每一個人的人生，都是這詩篇中的一個詞、一個句子或者一個標點。你可能沒有成為一個美麗的詞，一個引人注目的句子，一個驚嘆號，但你依然是這生命的立體詩篇中的一個音節(jié)、一個停頓、一個必不可少的組成部分。這足以使你放棄前嫌，萌發(fā)為人類孕育新的歌聲的興致，為世界帶來更多的詩意。</p><palign="right">——《站在歷史枝頭微笑》</p></body>2.5.2段落標簽<p>

<p>標簽用于定義段落，段前段后會產生比段內行距較多的空白，也就是說段間距大于行間距。align屬性設置段落文本的對齊方式。若段落標簽未使用屬性設置內容的對齊方式，則對齊方式默認為左對齊。<p>標簽是塊標簽，語法格式：<palign="對齊方式">段落文字</p>05*【效果】段前段后有多于段內行距的空白，第一個段落居中對齊，第二個段落左對齊，第三個段落右對齊，如圖2-5-2所示。2.5.2段落標簽<p>

圖2-5-2

段落標簽與對齊方式屬性設置效果在HTML5中，許多元素的align屬性被廢棄，因此建議使用CSS進行屬性設置。小提示05*<br/>標簽用于強制換行。如果需要多次換行，則可以連續(xù)使用多個換行標簽。語法格式：<p>一段文字<br/>一段文字</p>2.5.3換行標簽<br/>

【示例2-5-3】在【示例2-5-2】的基礎上，編輯HTML文檔<body>標簽的內容，即在第二個段落中添加標簽<br/>，代碼如下：編輯HTML文檔<body>標簽的內容。<p>人站得高些，不但能有幸早些領略到期望的曙光，還能有幸發(fā)現(xiàn)生命的立體的詩篇。每一個人的人生，都是這詩篇中的一個詞、一個句子或者一個標點。<br/>你可能沒有成為一個美麗的詞，一個引人注目的句子，一個驚嘆號，但你依然是這生命的立體詩篇中的一個音節(jié)、一個停頓、一個必不可少的組成部分。這足以使你放棄前嫌，萌發(fā)為人類孕育新的歌聲的興致，為世界帶來更多的詩意。</p>05*2.5.3換行標簽<br/>

【效果】換行標簽<br/>后面的內容另起一行，但沒有像段落一樣加大行距，因此換行標簽<br/>前后的內容仍然是一個段落，如圖2-5-3所示。圖2-5-3

使用換行標簽效果05*2.5.4水平線<hr/>

【示例2-5-4】

在【示例2-5-2】的基礎上，編輯HTML文檔<body>標簽的內容，即在第二個段落中添加標簽<hr/>，代碼如下：<p>人站得高些，不但能有幸早些領略到期望的曙光，還能有幸發(fā)現(xiàn)生命的立體的詩篇。每一個人的人生，都是這詩篇中的一個詞、一個句子或者一個標點。<hr/>你可能沒有成為一個美麗的詞，一個引人注目的句子，一個驚嘆號，但你依然是這生命的立體詩篇中的一個音節(jié)、一個停頓、一個必不可少的組成部分。這足以使你放棄前嫌，萌發(fā)為人類孕育新的歌聲的興致，為世界帶來更多的詩意。</p><hr/>標簽用于在頁面中設置一條水平線，以有效分隔前后內容。語法格式：<p>一段文字<hr/>一段文字</p>05*2.5.4水平線<hr/>

【效果】段落內容被水平線分隔開，如圖2-5-4所示。圖2-5-4

插入水平線效果在HTML4.01中，<font>標簽不被贊成使用；在HTML5中，<font>標簽被廢棄。小提示05*2.5.5文字樣式標簽<font>

<font>標簽用于規(guī)定文本的大小、顏色和字體，可選的屬性有size、color、face。行標簽，語法格式：<fontsize="數(shù)字"color="顏色名"face="字體族">文字內容</font>【示例2-5-5】在【示例2-5-2】的基礎上，編輯HTML文檔<body>標簽的內容，即將第二個和第三個段落標簽修改為文字樣式標簽，并設置標簽屬性，代碼如下：<body> <palign="center">美文欣賞</p> <fontsize="3"color="#666"face="隸書">人站得高些，不但能有幸早些領略到期望的曙光，還能有幸發(fā)現(xiàn)生命的立體的詩篇。每一個人的人生，都是這詩篇中的一個詞、一個句子或者一個標點。你可能沒有成為一個美麗的詞，一個引人注目的句子，一個驚嘆號，但你依然是這生命的立體詩篇中的一個音節(jié)、一個停頓、一個必不可少的組成部分。這足以使你放棄前嫌，萌發(fā)為人類孕育新的歌聲的興致，為世界帶來更多的詩意。</font> <fontsize="4"color="#B91720"face="宋體">——《站在歷史枝頭微笑》</font></body>05*2.5.5文字樣式標簽<font>

【效果】原本各自成段的第二、三段呈現(xiàn)在同一段落中，且原第二段內容字號變?yōu)椤?號”、顏色為“黑灰色”、字體為“隸書”，原第三段內容字號變?yōu)椤?號”、顏色為“酒紅色”、字體為“宋體”，如圖2-5-5所示。圖2-5-5

字體標簽及其屬性設置效果05*<i>標簽用于定義斜體字，<em>標簽用于定義著重文字，它們都可以將文字修飾為斜體。它們都是行標簽。其語法格式：<p><i>斜體文字</i>正常文字<em>斜體文字</em></p>。2.5.6傾斜文字標簽<i>和<em>

【示例2-5-6】在【示例2-5-2】的基礎上，編輯HTML文檔<body>標簽的內容，即在第一個段落中添加傾斜文字標簽<i>和<em>，代碼如下：<palign="center"><i>美文</i>欣<em>賞</em></p>【效果】文字“美文”和“賞”都變成了斜體，如圖2-5-6所示。圖2-5-6

斜體修飾標簽使用效果小提示根據HTML5規(guī)范，在沒有其他更合適的標簽使用時，才把<i>標簽作為最后的選項，通常建議使用<em>標簽。05*【示例2-5-7】在【示例2-5-2】的基礎上，編輯HTML文檔<body>標簽的內容，即在第一個段落中添加加粗文字標簽<b>和<strong>，代碼如下：<palign="center"><b>美文</b>欣<strong>賞</strong></p>2.5.7加粗文字標簽<b>和<strong>

【效果】文字“美文”和“賞”都變成了粗體，如圖2-5-7所示。根據HTML5規(guī)范，在沒有其他更合適的標簽使用時，才把<b>標簽作為最后的選項，通常建議使用<strong>標簽。小提示圖2-5-7斜體修飾標簽使用效果05*<u>標簽用于定義帶有下劃線的文字。它是行標簽，其語法格式：<p><u>帶有下劃線的文字</u>正常文字</p>2.5.8文字下劃線標簽<u>

【示例2-5-8】在【示例2-5-7】的基礎上，編輯HTML文檔<body>標簽的內容，即將第一個段落中的加粗文字標簽<b>修改為文字下劃線標簽<u>，代碼如下：<palign="center"><u>美文</u>欣<strong>賞</strong></p>【效果】文字“美文”加下劃線修飾，“賞”字依然是粗體，如圖2-5-8所示。在HTML4.01中，<u>標簽不被贊成使用。HTML5不支持<u>標簽。小提示圖2-5-8

斜體修飾標簽使用效果05*

在HTML文檔中，可以直接使用鍵盤輸入多個空格鍵，但是在瀏覽器顯示的網頁上最多只顯示一個空格。使用HTML中的預留字符

，在網頁中顯示多個空格。使用多個

，可以在網頁中顯示連續(xù)的空格（英文空格）。2.5.9預留字符的使用

【示例2-5-9】在【示例2-5-5】的基礎上，編輯HTML文檔<body>標簽的內容，即在第一個段落中添加4個預留字符

，代碼如下：<palign="center">美文

欣賞</p>【效果】文字“美文”和“欣賞”之間有四個英文空格，如圖2-5-9所示。圖2-5-9

斜體修飾標簽使用效果05*在網頁制作中，除了空格，還有一些特殊字符也需要使用代碼替代。一般情況下，特殊字符的代碼由前綴“&”、字符名稱和后綴“;”組成。2.5.9預留字符的使用

顯示字符預留字符空格

“"&&<

<>

>?（版權）©?（商標）™?（注冊商標）®￥（人民幣元）¥表6常用的預留字符06*06HTML圖像標簽06*如今網頁越來越豐富多彩，這是因為網頁中添加了各種各樣的圖像文件，對網頁進行了美化。目前，市場上有很多類型的圖像，而且不同的瀏覽器對不同類型的圖像可能有不同的識別能力。但是，幾乎任何瀏覽器都可以識別PNG、JPG、GIF格式的圖像（后綴名分別為.png、.jpg、.gif）。因此，開發(fā)者一般將圖像處理為這三種類型中的一種。2.6.1網頁中圖像文件類型圖像的使用一定要與網頁的主題相匹配，圖像的色彩要與網頁中文字的顏色相協(xié)調，這樣才能達到深化主題且美觀的效果。此外，網頁中可以使用圖像作為頁面的背景。但是，為了保證瀏覽器載入網頁的速度，建議大家盡量避免使用太大的圖像作為網頁背景圖像。小提示HTML圖像標簽06*資源地址

相對地址絕對地址2.6.2網頁中的相對地址和絕對地址概念：指以當前網頁文件為起點，通過層級關系描述資源的位置。

使用方法：（1）要引用的資源與網頁文件在同一目錄中，則只需輸入要鏈接資源文件的名稱即可，如“img1.png”。（2）要引用的資源位于網頁文件的下一級目錄中，則需要先輸入目錄名，再加上“/”，最后輸入資源文件名即可，如“img/img1.png”。（3）要引用的資源位于網頁文件的上一級目錄中，則需要先輸入“../”，再輸入目錄名，最后輸入資源文件名即可，如“../img/img1.png”。用途與特點：用于引用網站內部的資源。構建鏈接的兩個文件之間的相對關系不受站點文件夾所處服務器位置的影響。即站點文件夾所在服務器地址發(fā)生改變，文件夾的所有內部文件地址都不會出現(xiàn)問題。概念：帶有盤符或網絡協(xié)議的完整路徑。

使用方法：（1）帶有盤符的完整路徑，如“D:/example/img/images/img1.png”表示圖像文件img1.png在本地計算機中的絕對位置，以盤符D:/開頭。（2）帶有網絡協(xié)議的完整路徑，如：“/i/eg_mouse.jpg”表示圖像文件eg_mouse.jpg在網絡中的絕對位置，以https://協(xié)議開頭。用途與特點：用于引用網站外部的資源。使用絕對地址定位鏈接資源文件比較清晰。但是，需要輸入的內容較多，而且如果資源文件出現(xiàn)移動，就需要重新設置所有相關的鏈接。06*<img>標簽用于定義圖像，可以指定圖像的地址、寬度、高度、邊框和替代文本，其可選擇的屬性有src，用于指定圖像的URL；width，用于指定圖像的寬度；height，用于指定圖像的高度；border，用于指定圖像周圍的邊框；alt，用于指定圖像的替代文本。<img>標簽是行標簽，其語法格式:<imgsrc="圖像文件的地址（相對地址或絕對地址）"width="寬度值"height="高度值"border="邊框值"alt="文本"/>2.6.3圖像標簽<img>屬性width、height、border的值是一個數(shù)值，單位默認為px（像素），可省略。小提示06*【示例2-6-1】編輯HTML文檔<body>標簽的內容。<body> <imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="這是一張圖像"/></body>2.6.3圖像標簽<img>在網頁中插入圖像時，一定要保證所插入圖像位于網站文件夾中，否則一旦移動網站文件位置，圖像就不能正常顯示。小提示【效果】在頁面主體部分顯示圖像，地址為"img/beijing.jpg"，寬度為400px，高度根據比例縮放，邊框為3px，頁面顯示效果如圖2-6-1所示。當圖像地址找不到圖像時，則顯示為點位符，頁面效果如圖2-6-2所示。圖2-6-1圖像標簽及其屬性設置效果圖2-6-2找不到圖像資源效果04*6align屬性用于定義圖像周圍文本與圖像混排時的對齊規(guī)則，其值有top、bottom、right、left、middle。其中，top表示將圖像與頂部對齊；bottom表示將圖像與底部對齊；right表示將圖像對齊到右邊；left表示將圖像對齊到左邊；middle表示將圖像與中央對齊。2.6.4圖像對齊方式align【示例2-6-2】編輯HTML文檔<body>標簽的內容。<body>

這是圖像

<imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="這是一張圖像"align="middle">

以及常用屬性</body>【效果】圖像的中央與文本的中央對齊，如圖2-6-3所示。圖2-6-3

圖像對齊方式屬性設置效果06*hspace和vspace屬性用于定義圖像四周文本與圖像之間的距離。其中，hspace屬性用于定義左右兩側文字與圖像的間距；vspace屬性用于定義上下兩端文字與圖像的間距。語法格式：<imgsrc="圖像文件的地址"hspace="距離值"vspace="距離值"/>2.6.5水平間距hspace和垂直間距vspace距離值是一個數(shù)值，其單位默認為px（像素），可以省略。小提示【示例2-6-3】在【示例2-6-2】的基礎上，編輯HTML文檔<body>標簽的內容，即在img標簽中添加水平間距屬性hspace。<imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="這是一張圖像align="middle"hspace="30">【效果】圖像左側和右側的文本與圖像間隔30px，如圖2-6-4所示。圖2-6-4

水平間距屬性設置效果07*07HTML超鏈接標簽07*2.7HTML超鏈接標簽HTML超連接標簽超鏈接全稱超文本鏈接。它是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖像，一個電子郵件地址，一個文件，甚至是一個應用程序。在一個網頁中用來超鏈接的對象，可以是一段文本或一個圖像。當瀏覽者單擊已經鏈接的文本或圖像后，瀏覽器頁面將會跳轉到新的頁面或當前頁面中的某個部分。超鏈接的存在是網頁文件與其他文件最大的區(qū)別之一，它的存在方便用戶共享更多的資源。07*<a>標簽用于定義超鏈接，可以從一張頁面鏈接到另一張頁面，其屬性有href，用于指定鏈接地址，其值是絕對地址或相對地址。該標簽是行標簽，其語法格式：<ahref="鏈接地址">超鏈接內容</a>2.7.1超鏈接標簽<a>當把鼠標指針移動到網頁中的某個鏈接上時，鼠標指針通常會變?yōu)橐恢恍∈?。小提示【示?-7-1】

編輯HTML文檔<body>標簽的內容。<body> <ahref="">百度一下</a> <ahref="bigClass.html">站內一級列表頁</a></body>【效果】超鏈接文本的格式默認為藍色字體且有下劃線，如圖2-7-1所示。圖2-7-1

超鏈接標簽默認效果07*target屬性用于定義目標文檔在何處顯示，可以是當前窗口、新窗口、某浮動窗口等，其取值有_self、_blank、_parent和_top。其中，_self表示在當前窗口中打開目標文檔；_blank表示在新窗口中打開目標文檔；_parent表示將目標頁面載入到當前框架的父框架窗口中，如果沒有框架，則等同于_self；_top表示將目標頁面載入到整個瀏覽器窗口，并刪除所有框架。超鏈接標簽<a>沒有設置屬性target，則默認為_self。2.7.2超鏈接標簽target【示例2-7-2】在【示例2-7-1】基礎上，編輯HTML文檔<body>標簽的內容，即為第一個超鏈接標簽<a>添加屬性target。<ahref=""target="_blank">百度一下</a><ahref="bigClass.html">站內一級列表頁</a>【效果】單擊鏈接“百度一下”，則百度首頁會在一個新的瀏覽器窗口中打開；單擊鏈接“站內一級列表頁”，則bigClass.html頁面會在當前瀏覽器窗口中顯示。07*錨點鏈接用于實現(xiàn)在一個頁面中的不同位置之間或不同頁面中的某兩個位置之間進行跳轉。錨點的設置同樣使用<a>標簽，作為錨點的<a>標簽不需要href屬性，而是需要用name或id屬性來定義錨點的名稱或標記錨點。2.7.3錨點鏈接小提示錨點又可以理解為書簽，只是不會以任何特殊方式顯示，它對瀏覽者是不可見的。要實現(xiàn)錨點鏈接，首先需要定義一個錨點，然后以此錨點為鏈接目標，主要步驟如下。步驟11.定義錨點，其語法格式：<aname="錨點名稱">錨點位置（可以為空）</a>或者<aid="錨點id值">錨點位置（可以為空）</a>為了遵行HTML5規(guī)范，建議使用id屬性。小提示07*2.7.3錨點鏈接步驟22.鏈接到錨點，其語法格式：<ahref="#錨點名稱/#id值">鏈接載體</a>【示例2-7-3】編輯HTML文檔<body>標簽的內容。<body> <ahref="#shuqian">注意事項</a><br/> <imgsrc="img/beijing.jpg"alt=""><br/> <aid="shuqian">書簽：</a><br/> <p>您可以使用

name屬性創(chuàng)建

HTML頁面中的書簽。書簽不會以任何特殊方式顯示，它對讀者是不可見的。當使用命名錨（namedanchors）時，我們可以創(chuàng)建直接跳至該命名錨（如頁面中某個小節(jié)）的鏈接，這樣瀏覽者就無須不停地滾動頁面來尋找他們需要的信息了。</p></body>07*2.7.3錨點鏈接【效果】“注意事項”鏈接顯示在頁面最上方，如圖2-7-2所示。單擊“注意事項”鏈接后，頁面直接跳轉到書簽位置，如圖2-7-3所示。圖2-7-2單擊錨點鏈接之前效果圖2-7-3單擊錨點鏈接之后效果07*2.7.4圖像鏈接在網站中，很多時候將圖像作為鏈接載體，其語法格式如下：<ahref="目標網頁地址"> <imgsrc="鏈接載體的圖像地址"alt=""/></a>【示例2-7-4】

編輯HTML文檔<body>標簽的內容，代碼如下：<body> <ahref=""> <imgsrc="img/logo.gif"alt=""width="300"height="auto"> </a></body>【效果】當鼠標浮于圖像上時，鼠標指針變?yōu)槭中巍螕魣D像，網頁可跳轉至百度首頁。視覺上，圖像鏈接與普通圖像沒有不同。小提示07*2.7.5圖像熱區(qū)鏈接圖像熱區(qū)鏈接是指在一張圖像上劃出若干個區(qū)域（稱為熱區(qū)），這些區(qū)域可以分別設置超鏈接，從而鏈接到不同的目標位置。需要注意的是，設置圖像熱區(qū)鏈接使用<area>標簽定義圖像映射中的區(qū)域（圖像映射是指帶有可單擊區(qū)域的圖像），并在<area>標簽的外層增加<map>標簽定義一個客戶端圖像映射。設置圖像熱區(qū)鏈接的步驟如下。步驟11.在圖像文件中設置映射圖像的名稱，即在添加圖像的<img>標簽中使用usemap屬性，添加圖像要引用的映射圖像的名稱。其語法格式：<imgsrc="圖像地址"usemap="#映射圖像名稱"/>步驟22.定義熱區(qū)圖像和熱區(qū)連接，其語法格式如下：<mapname="映射圖像名稱"> <areashape="熱區(qū)形狀"coords="熱區(qū)坐標"href="連接地址"/></map>07*高手點撥shape屬性用于定義區(qū)域的形狀，其值有circle、rect、poly、default（默認值）。其中，circle表示圓形；rect表示矩形；poly表示多邊形；default表示整幅圖像。coords屬性用于定義可單擊區(qū)域（對鼠標敏感的區(qū)域）的坐標。當shape="circle"時，coords="x,y,r"，其中(x,y)為圓心坐標，r為半徑。當shape="rect"時，coords="x1,y1,x2,y2"，其中(x1,y1)為矩形左上角坐標，(x2,y2)為矩形右下角坐標。當shape="poly"時，coords="x1,y1,x2,y2,x3,y3,…"，其中(x1,y1)，(x2,y2)，(x3,y3)等，則是多邊形各頂點的坐標。07*【示例2-7-5】

編輯HTML文檔<body>標簽的內容。<body><imgsrc="img/googlein.jpg"usemap="#map_name"width="400px"/><mapname="map_name"><areashape="circle"coords="200,200,30"href=""alt=""/><areashape="rect"coords="120,120,185,185"href=""alt=""/><areashape="poly"coords="200,260,150,300,250,300"href=""alt=""/></map></body>2.7.5圖像熱區(qū)鏈接07*【效果】當單擊圖像上的相應區(qū)域時，會分別顯示熱區(qū)形狀，且鼠標指針變?yōu)槭中危鐖D2-7-4所示。2.7.5圖像熱區(qū)鏈接圖2-7-4圖像上的熱點區(qū)域效果07*空鏈接就是指鼠標指向鏈接后，鼠標指針變?yōu)槭中?，但單擊鏈接后，頁面仍然停留在當前頁面?？者B接用于設置暫時還未確定鏈接的目標地址，便于后期更新鏈接的目標地址。設置空鏈接的方法有很多，可以將<a>標簽的href屬性值設置為空，也可以僅使用符號#，還可以使用JavaScript的語句，語法格式如下：<ahref=""></a><ahref="#"></a><ahref="javascript:void(0)"></a>2.7.6空鏈接07*【示例2-7-6】

編輯HTML文檔<body>標簽的內容，代碼如下：<body> <imgsrc="img/beijing.jpg"/> <ahref="">這是第一個空鏈接</a> <ahref="#">這是第二個空鏈接</a> <ahref="javascript:void(0)">這是第三個空鏈接</a></body>【效果】當圖像高度超過一屏時，單擊第一個和第二個空鏈接不會有新頁面出現(xiàn)，但頁面會返回到頂部，但是單擊第三個空連接時，頁面不會發(fā)生任何改變。2.7.6空鏈接07*E-mail鏈接一般用于設置頁面中的“聯(lián)系我們”等條目，以指向一個電子郵件地址，然后瀏覽器會啟動系統(tǒng)默認的郵件程序（如果有的話）。E-mail鏈接的語法格式：<ahref="mailto:郵件地址"></a>2.7.7E-mail空鏈接【示例2-7-7】

編輯HTML文檔<body>標簽的內容，代碼如下：<body> <ahref="mailto:123456789@">聯(lián)系站長</a></body>圖2-7-5E-mail鏈接效果【效果】單擊“聯(lián)系站長”，出現(xiàn)需要使用的應用程序，如圖2-7-5所示。07*JavaScript鏈接用于在瀏覽器窗口中設置彈窗，從而實現(xiàn)提示或警告。JavaScript鏈接的語法格式：<ahref="javascript:alert('彈窗顯示內容');"></a>2.7.8JavaScript鏈接【效果】單擊“來點我吧！”，在瀏覽器中出現(xiàn)一個彈窗，顯示alert中的信息，如圖2-7-6所示。圖2-7-6JavaScript鏈接效果【示例2-7-8】

編輯HTML文檔<body>標簽的內容。<body> <ahref="javascript:alert('Hello，mydarling！');">來點我吧！</a></body>在語句javascript:alert('Hello，mydarling！');中除單引號內部涉及的標點符號外，其余標點符號全部為英文格式。小提示08*08HTML列表標簽08*列表可以將相關信息有條理地組織在一起。HTML中提供無序列表、有序列表和定義列表3種列表。2.8.1無序列表<ul>即無序列表標簽，用于定義無序列表，可選擇的屬性有type。type屬性用于定義列表項目符號的類型，其值有disc、square、circle、none。其中，disc表示實心圓；square表示實心方塊；circle表示空心圓；none表示無列表項目符號。<li>即列表項標簽，用于定義列表項目，可用在無序列表和有序列表中。<ul>和<li>標簽都是塊標簽，它們的語法格式如下：<ul> <li>列表內容1</li> <li>列表內容2</li> … <li>列表內容n</li></ul>08*2.8.1無序列表【效果】頁面顯示無序列表，列表項前面的符號為實心正方形，如圖2-8-1所示。圖2-8-1無序列表效果HTML5將廢棄列表的type屬性，可以用CSS實現(xiàn)，詳細介紹見后面章節(jié)。小提示08*2.8.2有序列表<ol>即有序列表標簽，用于定義有序列表，其可選擇的屬性有type和start。（1）type屬性用于定義列表項目符號的類型，其值有1（默認值）、a、A、i、Ⅰ。其中，1表示數(shù)字有序列表；a表示按小寫字母順序排列的有序列表；A表示按大寫字母順序排列的有序列表；i時表示小寫羅馬字母；Ⅰ表示大寫羅馬字母。（2）start屬性用于定義有序列表的起始值，其值為數(shù)值，默認的值為1。<ol>標簽是塊標簽，其語法格式如下：<ol> <li>列表內容1</li> <li>列表內容2</li> … <li>列表內容n</li></ol>08*2.8.2有序列表【示例2-8-2】

編輯HTML文檔<body>標簽的內容。<body> <p>愛好</p> <oltype="a"start="3"> <li>運動</li> <li>聽音樂</li> <li>羽毛球</li> </ol></body>

【效果】頁面顯示有序列表，列表項前面的符號為英文小寫字母，從計數(shù)值3開始，即這里顯示的c，如圖2-8-2所示。圖2-8-2有序列表效果08*2.8.3定義列表<dl>標簽用于定義列表，結合<dt>和<dd>標簽使用。<dt>標簽用于定義列表中的項目。<dd>標簽用于描述列表中的項目。它們都是塊標簽，其語法格式如下：<dl> <dt>列表項目1</dt> <dd>描述1</dd> <dt>列表項目2</dt> <dd>描述2</dd> … <dt>列表項目n</dt> <dd>描述n</dd></dl>08*2.8.3定義列表【示例2-8-3】編輯HTML文檔<body>標簽的內容。<body> <p>愛好</p> <dl> <dt>運動</dt> <dd>如跑步、游泳</dd> <dt>聽音樂</dt> <dd>尤其是英文經典歌曲和紅色經典歌曲</dd> <dt>專業(yè)性工作</dt> <dd>如編寫程序，實現(xiàn)網站前端后臺效果</dd> </dl></body>08*2.8.3定義列表【效果】頁面顯示自己定義的列表，如圖2-8-3所示。

圖2-8-3定義列表效果

09*09HTML表單標簽09*2.9.1表單標簽<form>表單在網頁中主要負責數(shù)據采集功能。對于用戶而言，它是數(shù)據錄入和提交的界面；對于網站而言，它是獲取用戶信息的途徑。HTML表單標簽<form>標簽是塊標簽，其語法格式如下：<formname="表單名稱"action="表單處理程序"method="傳送方法"enctype="表單數(shù)據的編碼類型"target="提交地址打開方式">…</form>04*92.9.1表單標簽<form>屬性定義屬性取值<form>標簽name給表單命名，一般與表單id屬性值相同，該屬性方便JavaScript程序捕捉。action指定表單數(shù)據提交的目標位置，是一般表單的必有屬性，默認為當前頁面，其值為目標地址。method用于指定數(shù)據提交到服務器時使用哪種HTTP方法，其值有兩種get和post。該屬性是表單的必有屬性，其默認值是get。get方法，通過URL傳遞給程序。表單中的數(shù)據按照“變量名=值”的形式，添加到action所指向的目標位置后，兩者使用“？”連接，各變量之間使用“&”連接。該方法數(shù)據容量小，數(shù)據暴露在URL中，非常不安全。post方法，將表單中的數(shù)據放在form的數(shù)據體中，按照變量名和值相對應的方式，傳遞到action所指向的目標位置。該方法能傳輸大容量的數(shù)據，所有操作對用戶不可見的，非常安全。表7

<form>標簽的常用屬性09*高手點撥簡單、少量、安全的數(shù)據可以使用get方法進行傳遞。大量或者需要保密的數(shù)據則使用post方法進行傳遞。09*912.9.1表單標簽<form>屬性定義屬性取值<form>標簽enctype用于指定表單數(shù)據在發(fā)送到服務器時的編碼類型①application/x-www-form-urlencoded（默認值）：在傳送前對所有字符編碼，在傳輸大型文件時效率較低。②multipart/form-data：指定傳輸?shù)臄?shù)據為二進制類型。③text/plain：純文本傳輸，不對特殊字符編碼，但是空格會轉換為加號“+”。target用于定義表單數(shù)據提交地址的打開方式，其值有_self（默認值）和_blank。①_self表示在當前頁面打開。②_blank表示在新頁面打開。續(xù)表7

<form>標簽的常用屬性09*2.9.2表單空間<input>表單控件是提供一組允許用戶操作的控件，從而接收用戶輸入的數(shù)據。<input>標簽用于搜集用戶信息，是表單中功能最豐富、種類最多的控件。其可選擇的屬性有type、value、name。（1）type屬性用于規(guī)定表單控件的類型。不同的type值使得<input>標簽具有不同的功能。（2）value屬性用于規(guī)定預備提交的值，一般由用戶輸入或選擇。（3）name屬性用于規(guī)定表單控件的名稱，由開發(fā)者定義。通過設置<input>標簽不同的type屬性值，可以獲得不同功能的控件。09*2.9.2表單空間<input>1．文本域text當type的值為text時，可獲得文本域控件，它可以為用戶提交文本內容提供便利。該控件的語法格式如下：<inputtype="text"value="默認值"name="單行文本框名稱"/>【示例2-9-1】

編輯HTML文檔<body>標簽的內容。<body><formaction="index.jsp"> <inputtype="text"value="搜索一下"name="comName"/></form></body>09*2.9.2表單空間<input>【效果】頁面中文本框顯示默認值“搜索一下”，如圖2-9-1所示。用戶可以在文本框中輸入文本，顯示內容會隨之改變，提交的值即value屬性的值，且當用戶提交時，變量comName的值即為文本框中的顯示值，如圖2-9-2所示。

圖2-9-1文本域加載初始效果

圖2-9-2用戶輸入信息效果在HTML中，表單控件存在于form表單中。小提示09*2.9.2表單空間<input>2．密碼域password當type的值為password時，可獲得密碼域控件，它可以將用戶輸入的值設置為不可見，且默認顯示為實心圓點。該控件的語法格式如下：<inputtype="password"value="默認值"name="密碼域名稱"/>【示例2-9-2】

編輯HTML文檔<body>標簽的內容，代碼如下：<body> <formaction="index.jsp"> <inputtype="password"value="123456"name="userPass"/> </form></body>09*2.9.2表單空間<input>【效果】頁面顯示效果如圖2-9-3所示。其中，密碼域顯示為實心圓點，默認值為“123456”。當用戶輸入自己的密碼后，value的值隨之改變，表單提交的變量名為“userPass”，其值為value的值。圖2-9-3密碼域效果09*2.9.2表單空間<input>3．隱藏域hidden當type的值為hidden時，可獲得隱藏域控件，它用于定義需要提交但不需要顯示或不方便顯示的信息。該控件的語法格式如下：<inputtype="hidden"value="默認值"name="隱藏域名稱"/>【示例2-9-3】在【示例2-9-1】的基礎上，編輯HTML文檔<body>標簽的內容，即在表單中添加隱藏域控件，代碼如下：<body> <formaction="index.jsp"> <inputtype="text"value="搜索一下"name="comName"/> <inputtype="hidden"value="1"name="comId"/> </form></body>09*982.9.2表單空間<input>【效果】文本域正常顯示，但隱藏域不顯示，頁面效果如圖2-9-1所示。但是，在頁面空白處右擊鼠標，然后在彈出的選項欄中選擇“審查元素（N）”選項，便可以在網頁下方的“元素”欄目框中看到隱藏域的內容，如圖2-9-4所示。圖2-9-4隱藏域在“元素”欄目框中的效果09*2.9.2表單空間<input>4．單選按鈕radio當type的值為radio時，可獲得單選按鈕控件，允許用戶選取給定數(shù)目的選擇中的一個選項。該控件的語法格式如下：<inputtype="radio"name="單選按鈕名稱"value="信息值1"/>信息值顯示1<inp

溫馨提示

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

最新文檔

評論

0/150

提交評論