JavaWeb網(wǎng)站設(shè)計(jì)開(kāi)發(fā)第1章Web技術(shù)概述內(nèi)容1.1Web系統(tǒng)簡(jiǎn)介1.2B/S結(jié)構(gòu)1.3Web技術(shù)的學(xué)習(xí)路徑1.4開(kāi)發(fā)環(huán)境的安裝與配置1.1Web系統(tǒng)簡(jiǎn)介HTML的產(chǎn)生瑞士日內(nèi)瓦的歐洲核子研究中心的軟件工程師TimBerners-Lee編寫(xiě)一個(gè)軟件程序，利用一系列標(biāo)簽描述出信息的內(nèi)容和表現(xiàn)形式，再通過(guò)鏈接把這些文件串起來(lái)，讓世界各地的人能夠輕松共享信息。TimBerners-Lee給這種系統(tǒng)命名為“WorldWideWeb”，1990年11月，第一個(gè)Web服務(wù)器nxoc01.cern.ch開(kāi)始運(yùn)行。瀏覽器的產(chǎn)生1993年美國(guó)伊利諾州的伊利諾大學(xué)的MarcAndreessen及其同事開(kāi)發(fā)出了第一個(gè)支持圖文并茂展示網(wǎng)頁(yè)的Web瀏覽器——Mosaic瀏覽器，并成立了網(wǎng)景公司（NetscapeCommunicationCorp.）。W3C組織1994年10月TimBerners-Lee聯(lián)合CERN、DARPA和歐盟成立了Web的核心技術(shù)機(jī)構(gòu)——W3C（WorldWideWebConsortium，萬(wàn)維網(wǎng)聯(lián)盟）。1.1Web系統(tǒng)簡(jiǎn)介HTMLWeb通過(guò)超文本標(biāo)記語(yǔ)言（HyperTextMarkupLanguage，簡(jiǎn)稱HTML）實(shí)現(xiàn)信息與信息的連接；URI通過(guò)統(tǒng)一資源標(biāo)識(shí)符（UniformResourceIdentifier,簡(jiǎn)稱URI）實(shí)現(xiàn)全球信息的精確定位；HTTP通過(guò)超文本傳輸協(xié)議（HyperTextTransferProtocol，簡(jiǎn)稱HTTP）實(shí)現(xiàn)信息在互聯(lián)網(wǎng)中的傳輸。1.2B/S結(jié)構(gòu)1.2B/S結(jié)構(gòu)B/S的系統(tǒng)結(jié)構(gòu)圖1.2B/S結(jié)構(gòu)（1）硬件環(huán)境不同傳統(tǒng)的C/S建立在小范圍里的網(wǎng)絡(luò)環(huán)境；B/S適合建立在廣域網(wǎng)之上的。（2）對(duì)安全要求不同傳統(tǒng)的C/S一般面向相對(duì)固定的用戶群，對(duì)信息安全的控制能力很強(qiáng)；B/S通常建立在廣域網(wǎng)之上，對(duì)安全的控制能力相對(duì)弱。（3）系統(tǒng)架構(gòu)不同傳統(tǒng)的C/S結(jié)構(gòu)可以更加注重流程，可以對(duì)權(quán)限多層次校驗(yàn)；B/S系統(tǒng)所依托的HTTP協(xié)議缺少對(duì)流程、狀態(tài)等方面的管理。（4）系統(tǒng)維護(hù)不同傳統(tǒng)的C/S結(jié)構(gòu)意味著在用戶的計(jì)算機(jī)中必須安裝特定的客戶端軟件；B/S結(jié)構(gòu)的維護(hù)和升級(jí)都發(fā)生在服務(wù)器端。（5）處理問(wèn)題不同傳統(tǒng)的C/S結(jié)構(gòu)適合對(duì)大量數(shù)據(jù)進(jìn)行批量的增、刪、改操作；B/S結(jié)構(gòu)適合面向不同的用戶群。（6）用戶接口不同傳統(tǒng)的C/S結(jié)構(gòu)客戶端軟件對(duì)操作系統(tǒng)有特定的要求，跨平臺(tái)性較差；B/S的前臺(tái)建立在瀏覽器上。（7）數(shù)據(jù)傳輸協(xié)議不同B/S結(jié)構(gòu)的數(shù)據(jù)傳輸采用HTTP協(xié)議，傳輸內(nèi)容一般是使用HTML、XML、JSON等信息；C/S結(jié)構(gòu)中的數(shù)據(jù)傳輸通常是在TCP/IP基礎(chǔ)上的網(wǎng)絡(luò)協(xié)議，包括標(biāo)準(zhǔn)協(xié)議和自定義協(xié)議。（8）系統(tǒng)規(guī)模的擴(kuò)展性不同傳統(tǒng)的C/S結(jié)構(gòu)軟件來(lái)講無(wú)法適應(yīng)企業(yè)快速擴(kuò)張的特點(diǎn)；而B(niǎo)/S結(jié)構(gòu)軟件通過(guò)一次安裝，以后只需設(shè)立賬號(hào)、培訓(xùn)即可。1.3Web技術(shù)的學(xué)習(xí)路徑HTMLHTML是Web開(kāi)發(fā)中常用的標(biāo)記語(yǔ)言，學(xué)習(xí)它們的基本語(yǔ)法和用法可以讓開(kāi)發(fā)者更好地理解Web應(yīng)用的結(jié)構(gòu)和內(nèi)容；CSSCSS用于網(wǎng)頁(yè)的樣式設(shè)計(jì)，可以讓網(wǎng)頁(yè)變得美觀且易于閱讀；JavaScriptJavaScript是一種常用的腳本語(yǔ)言，用于網(wǎng)頁(yè)的動(dòng)態(tài)效果、交互性和數(shù)據(jù)處理。前端框架前端框架是用于開(kāi)發(fā)網(wǎng)站或應(yīng)用程序的軟件工具，它們提供了一組預(yù)定義的結(jié)構(gòu)、庫(kù)和模板，以簡(jiǎn)化開(kāi)發(fā)過(guò)程并提高應(yīng)用程序的可維護(hù)性和可伸縮性。服務(wù)器學(xué)習(xí)Tomcat服務(wù)器的工作原理和配置方法，有助于開(kāi)發(fā)者更好地了解Web應(yīng)用的部署和運(yùn)行環(huán)境；ServletServlet是用于處理Web請(qǐng)求和響應(yīng)；JSPJSP用于創(chuàng)建動(dòng)態(tài)Web頁(yè)面，使開(kāi)發(fā)者更好地實(shí)現(xiàn)Java和HTML的融合；DB交互學(xué)習(xí)Java數(shù)據(jù)庫(kù)操作技術(shù)，幫助開(kāi)發(fā)者實(shí)現(xiàn)企業(yè)級(jí)的Web系統(tǒng)；SSMSSM框架在開(kāi)發(fā)實(shí)踐中極大地簡(jiǎn)化了JavaWeb開(kāi)發(fā)的流程和配置。前端學(xué)習(xí)路徑后端學(xué)習(xí)路徑1.4開(kāi)發(fā)環(huán)境的安裝與配置JDK（JavaDevelopmentKit）是Java語(yǔ)言的軟件開(kāi)發(fā)工具包，主要用于移動(dòng)設(shè)備、嵌入式設(shè)備上的Java應(yīng)用程序。JDK是整個(gè)Java開(kāi)發(fā)的核心，它包含了Java的運(yùn)行環(huán)境（JVM+Java系統(tǒng)類庫(kù)）和Java工具。JDK的長(zhǎng)期支持版本（long-termsupport，LTS）有JDK8、JDK11、JDK17等。另外，JDK17遵守免費(fèi)Java許可協(xié)議（FreeJavaLicense），可免費(fèi)用于生產(chǎn)環(huán)境。DEMOJDK的安裝1.4.1演示.mp41.4開(kāi)發(fā)環(huán)境的安裝與配置Tomcat軟件是Apache軟件基金會(huì)的一個(gè)開(kāi)源項(xiàng)目，支持典型的web應(yīng)用程序。Tomcat是基于JavaEE或JakartaEE的Servlet、JSP、表達(dá)式語(yǔ)言、WebSocket等規(guī)范的開(kāi)源實(shí)現(xiàn)。Tomcat性能穩(wěn)定、占用的系統(tǒng)資源小、擴(kuò)展性好、支持負(fù)載平衡、功能較全面，得到開(kāi)發(fā)者和軟件開(kāi)發(fā)商的認(rèn)可。Tomcat10和更高版本支持開(kāi)源的JakartaEE規(guī)范，Tomcat9和更早版本支持JavaEE規(guī)范，因此導(dǎo)入的jar庫(kù)文件是不一樣的，對(duì)應(yīng)的源代碼也有區(qū)別。DEMOTomcat的安裝1.4.2演示.mp41.4開(kāi)發(fā)環(huán)境的安裝與配置Eclipse是主流、開(kāi)源、跨平臺(tái)的集成開(kāi)發(fā)環(huán)境，最初主要用于Java語(yǔ)言應(yīng)用開(kāi)發(fā)，但通過(guò)插件也可以作為其他計(jì)算機(jī)語(yǔ)言比如C/C++和Python等語(yǔ)言的開(kāi)發(fā)工具。Eclipse的本身是一個(gè)框架平臺(tái)，眾多插件的支持使得Eclipse擁有了巨大的可擴(kuò)展性和靈活性，許多軟件開(kāi)發(fā)商以Eclipse為框架開(kāi)發(fā)自己的IDE。比如，SpringToolSuite（STS）就是一個(gè)基于Eclipse的開(kāi)發(fā)環(huán)境，用于開(kāi)發(fā)Spring應(yīng)用程序，提供了調(diào)試、運(yùn)行和部署Spring應(yīng)用程序的工具。DEMOEclipse的安裝與配置1.4.3演示.mp41.4開(kāi)發(fā)環(huán)境的安裝與配置IntelliJIDEA（簡(jiǎn)稱IDEA）是JetBrains公司提供的Java、HTML、CSS、PHP、Python等編程語(yǔ)言的智能化集成開(kāi)發(fā)環(huán)境，在智能代碼助手、代碼自動(dòng)提示、重構(gòu)、JavaEE支持、各類版本工具（git、svn等）、JUnit、CVS整合、代碼分析等方面的功能豐富。IDEA產(chǎn)品分為旗艦版（UltimateEdition）和社區(qū)版（CommunityEdition），旗艦版可以短期免費(fèi)試用，社區(qū)版本可以長(zhǎng)期免費(fèi)使用，但社區(qū)版功能對(duì)比旗艦版有所縮減，特別是對(duì)于JavaWeb應(yīng)用的開(kāi)發(fā)需要做大量的手工配置。DEMOIDEA的安裝1.4.4演示-1.mp4DEMOIDEA新建網(wǎng)站1.4.4演示-2.mp41.4開(kāi)發(fā)環(huán)境的安裝與配置Maven是Apache提供的一款自動(dòng)化構(gòu)建工具，基于項(xiàng)目對(duì)象模型（ProjectObjectModel，簡(jiǎn)稱POM），用于軟件項(xiàng)目的自動(dòng)化構(gòu)建和依賴管理，可以幫助開(kāi)發(fā)者快速完成工程的基礎(chǔ)構(gòu)建配置。Maven支持的構(gòu)建環(huán)節(jié)包括：（1）清理：在編譯代碼前將之前生成的內(nèi)容刪除；（2）編譯：將源代碼編譯為字節(jié)碼；（3）測(cè)試：運(yùn)行單元測(cè)試用例程序；（4）報(bào)告：測(cè)試程序的結(jié)果；（5）打包：將java項(xiàng)目打成jar包；將Web項(xiàng)目打成war包；（6）安裝：將jar或war生成到Maven倉(cāng)庫(kù)中；（7）部署：將jar或war從Maven倉(cāng)庫(kù)中部署到Web服務(wù)器上運(yùn)行。1.4開(kāi)發(fā)環(huán)境的安裝與配置src：源碼文件夾└main：主代碼文件夾├java：Java代碼文件夾。└webapp：頁(yè)面文件夾，可以放HTML、JSP等靜態(tài)或動(dòng)態(tài)頁(yè)面。├META-INF：主要存放由工具生成的元信息相關(guān)的文件。└WEB-INF：存放插件等文件，這里的文件在瀏覽器不可訪問(wèn)。└Lib：存放web應(yīng)用需要的各種JAR文件，如數(shù)據(jù)庫(kù)驅(qū)動(dòng)JAR文件。課后思考題（1）HTML與W3C組織分別是如何產(chǎn)生的？（2）C/S體系結(jié)構(gòu)和B/S體系結(jié)構(gòu)有何不同之處？（3）B/S結(jié)構(gòu)中的前端和后端分別是做什么的？（4）什么是JDK，在開(kāi)發(fā)實(shí)踐中如何選擇合適的JDK版本？（5）Tomcat軟件的作用是什么，在開(kāi)發(fā)實(shí)踐中如何選擇合適的Tomcat版本？（6）JavaWeb開(kāi)發(fā)中常用的IDE有哪些，在開(kāi)發(fā)實(shí)踐中如何選擇？（7）基于Maven進(jìn)行Web項(xiàng)目構(gòu)建有哪些優(yōu)勢(shì)？JavaWeb網(wǎng)站設(shè)計(jì)開(kāi)發(fā)第2章超文本標(biāo)記語(yǔ)言HTML內(nèi)容2.1HTML5概況2.2HTML文檔結(jié)構(gòu)2.3頭部元素2.4文本元素2.5群組元素2.6超鏈接元素2.7表格元素2.8內(nèi)嵌元素2.9結(jié)構(gòu)元素2.10編輯元素2.11表單元素2.12HTML中的顏色設(shè)置2.13絕對(duì)路徑與相對(duì)路徑2.1HTML5概況與SGML的關(guān)系HTML是使用SGML定義的一個(gè)描述性語(yǔ)言，或可說(shuō)HTML是SGML的一個(gè)應(yīng)用。HTML的語(yǔ)法簡(jiǎn)單HTML的格式和語(yǔ)法非常簡(jiǎn)單，只是由文字及標(biāo)簽組合而成，任何文字編輯器都可以編輯HTML文件，只要能將文件另存成ASCII純文字格式即可。XHTML與DHTML在開(kāi)發(fā)技術(shù)的選型中，通常會(huì)選擇傳統(tǒng)HTML的擴(kuò)展技術(shù)，包括可擴(kuò)展超文本標(biāo)記語(yǔ)言（eXtensibleHyperTextMarkupLanguage，簡(jiǎn)稱為XHTML）和動(dòng)態(tài)HTML（DynamicHTML，簡(jiǎn)稱為DHTML）。HTML5HTML5引入了許多重要的新特性，包括：語(yǔ)義化更好、全新的元素、更多的表單控件、支持多媒體、離線存儲(chǔ)、拖放功能、WebSocket等。2.2HTML文檔結(jié)構(gòu)<html><head><title>網(wǎng)頁(yè)制作教學(xué)</title></head><body>HelloWorld!</body></html>2.2HTML文檔結(jié)構(gòu)在HTML中任何標(biāo)簽皆由”<”及”>”所圍住，如<P>，標(biāo)簽名與小于號(hào)之間不能留有空白字符。在起始標(biāo)簽之標(biāo)簽名前加上符號(hào)”/”便是其終結(jié)標(biāo)簽，如</font>。標(biāo)簽字母大小寫(xiě)皆可。由開(kāi)始標(biāo)簽和終結(jié)標(biāo)簽所構(gòu)成的對(duì)象可以稱為HTML元素（或HTML對(duì)象）。元素帶有參數(shù)，也稱為元素的屬性。參數(shù)只可加于起始標(biāo)簽中。熟悉面向?qū)ο蟪绦蛟O(shè)計(jì)的開(kāi)發(fā)人員更習(xí)慣將它們稱為“HTML對(duì)象和屬性”。通常在一個(gè)完整的HTML文件中，html元素是HTML文檔的根元素，其中包含二個(gè)部份：頭部元素和體部元素，它們分別被包含在<head>標(biāo)簽和<body>標(biāo)簽中。DEMOHTML文檔結(jié)構(gòu)2.2演示.mp42.3頭部元素頭部元素<head>中可以包含多個(gè)元素用來(lái)描述腳本、鏈接樣式表、提供元信息等，這些信息雖然不能直接在頁(yè)面上展示，但對(duì)于文檔的說(shuō)明、可讀性和搜索引擎優(yōu)化等方面至關(guān)重要。<head>元素的子元素包括<title>、<base>、<link>、<meta>和<style>等。2.3頭部元素元素語(yǔ)義HTML支持版本head所有頭部元素的容器。4、5title定義了HTML文檔的標(biāo)題4、5base描述了頁(yè)面中所有超鏈接的默認(rèn)超鏈接基地址（用href屬性指定）和默認(rèn)目標(biāo)（用target屬性指定）4、5link定義HTML文檔和外部資源的關(guān)系4、5meta給出HTML文檔的元數(shù)據(jù)4、5style定義樣式定義4、52.3頭部元素<html><head><title>Titleofthedocument</title><basehref="/htm/"/><basetarget="_blank"/></head><body>Thecontentofthedocument</body></html>2.3頭部元素<link>元素用來(lái)定義HTML文檔和外部資源的關(guān)系，通常用來(lái)聲明HTML所引用的CSS文檔。例如下面的代碼中鏈接了一個(gè)名為mystyle.css的文檔：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>除了鏈接，在HTML中還可以直接嵌入CSS樣式代碼。下例中使用<style>元素來(lái)完成這一任務(wù)：<head><styletype="text/css">body{background-color:yellow;}p{color:blue;}</style></head>2.3頭部元素<meta>元素可以給出HTML文檔的元數(shù)據(jù)（metadata）。元數(shù)據(jù)不會(huì)在網(wǎng)頁(yè)中顯示，但會(huì)被瀏覽器、搜索引擎等程序解析和應(yīng)用。在下面的代碼中，通過(guò)元數(shù)據(jù)給出了頁(yè)面的簡(jiǎn)述、關(guān)鍵詞、作者、字符集等信息：<head><metaname="description"content="FreeWebtutorials"/><metaname="keywords"content="HTML,CSS,XML,JavaScript"/><metaname="author"content="HegeRefsnes"/></head><meta>元素所給出的網(wǎng)頁(yè)元數(shù)據(jù)對(duì)于搜索引擎判斷網(wǎng)頁(yè)類型、內(nèi)容都很有幫助。2.3頭部元素<script>元素中可以嵌入腳本程序，HTML5中腳本程序默認(rèn)是用JavaScript語(yǔ)言書(shū)寫(xiě)；當(dāng)瀏覽器不支持腳本程序的執(zhí)行，則會(huì)顯示<noscript>元素中的內(nèi)容。<template>元素中可以定義前端模板，可以通過(guò)JavaScript代碼進(jìn)行調(diào)用。2.4文本元素在HTML中，文本元素（Text-levelsemantics）用來(lái)定義網(wǎng)頁(yè)中文本內(nèi)容和語(yǔ)義，增加文字的易讀性。文本元素主要包括<a>、<em>、<strong>、<small>、<s>、<cite>、<q>、<dfn>、<abbr>、<time>、<code>、<var>、<samp>、<kbd>、<sub>、<sup>、<i>、<b>、<u>、<mark>、<ruby>、<rb>、<rt>、<rtc>、<rp>、<bdi>、<bdo>、<span>、<br>、<wbr>等。雖然文本的顯示樣式通常是由CSS來(lái)定義，但文本元素的語(yǔ)義也會(huì)影響文本的顯示風(fēng)格，比如上標(biāo)（sup）、下標(biāo)（sub）等文本。2.4文本元素<html><body><em>em定義強(qiáng)調(diào)文本，顯示為斜體字</em><br><strong>strong定義強(qiáng)調(diào)文本，顯示為粗體</strong><br><small>small定義小號(hào)文本</small><br><s>s定義加刪除線的文本</s><br>sub定義下標(biāo)文本，比如a₂<br>sup定義上標(biāo)文本，比如a²<br><i>i定義斜體文本</i><br><b>b定義粗體文本</b><br><u>u定義下劃線文本</u><br><mark>mark定義有加亮記號(hào)的文本</mark></body></html>2.4文本元素<html><body><ruby>中<rt>zhong</rt>文<rt>wen</rt></ruby></body></html>DEMO文本元素2.4演示.mp42.5群組元素在HTML中，群組元素（Groupingcontent）用來(lái)定義網(wǎng)頁(yè)中具有關(guān)聯(lián)性的內(nèi)容和語(yǔ)義。群組元素主要包括<p>、<hr>、<pre>、<blockquote>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、<figure>、<figcaption>、<div>、<main>等。與文本元素一樣，群組元素的語(yǔ)義也會(huì)影響顯示風(fēng)格，比如多個(gè)列表項(xiàng)元素在顯示時(shí)通常會(huì)在前面加上數(shù)字序號(hào)或圖形符號(hào)。2.5群組元素<html><body><p>這是段落。</p><p>hr標(biāo)簽定義水平線：</p><hr/><p>pre標(biāo)簽很適合顯示計(jì)算機(jī)代碼：</p><pre>fori=1to10printinexti</pre><blockquote>段落前面有縮進(jìn)……</blockquote></body></html>2.5群組元素<html><body><ol><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ul><li>咖啡</li><li>茶<ul><li>紅茶</li><li>綠茶</li></ul></li><li>牛奶</li></ul></body></html>2.5群組元素<html><body><h2>一個(gè)定義列表：</h2><dl><dt>計(jì)算機(jī)</dt><dd>用來(lái)計(jì)算的儀器......</dd><dt>顯示器</dt><dd>以視覺(jué)方式顯示信息的裝置......</dd></dl></body></html>2.5群組元素div元素<div>元素用來(lái)將頁(yè)面內(nèi)容分割成各個(gè)獨(dú)立的部分。在每個(gè)<div>元素中，不僅可以包含文本內(nèi)容，也可以包含圖片、表單等其他內(nèi)容。在默認(rèn)的情況下，<div>元素所包含的內(nèi)容，將在新的一行顯示。屬性描述dir設(shè)置文本顯示方向lang設(shè)置語(yǔ)言class類屬性style設(shè)置級(jí)聯(lián)樣式title標(biāo)題屬性nowrap取消自動(dòng)換行id標(biāo)記屬性2.5群組元素<divclass=”定義的類的名稱”>……</div><divid=”定義的名稱”>……</div><divstyle=”定義的樣式”>……</div><divnowrap=”nowrap”>……</div><divtitle=”標(biāo)題內(nèi)容”>……</div><divid="header">...</div><divid="footer">...</div>DEMO群組元素2.5演示.mp42.6超鏈接元素網(wǎng)頁(yè)之間的鏈接（Links）能使瀏覽者從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，實(shí)現(xiàn)文檔互聯(lián)、網(wǎng)站互聯(lián)。超鏈接就像整個(gè)網(wǎng)站的神經(jīng)細(xì)胞，把各種信息有機(jī)地結(jié)合在一起。在HTML中，超鏈接可以通過(guò)<a>元素和嵌套在<map>元素內(nèi)部的<area>元素來(lái)實(shí)現(xiàn)。關(guān)于<area>元素將在嵌入式元素中展開(kāi)描述，本節(jié)將主要討論<a>元素。2.6超鏈接元素屬性描述href鏈接的目標(biāo)URL。hreflang規(guī)定目標(biāo)URL的基準(zhǔn)語(yǔ)言。僅在href屬性存在時(shí)使用。media規(guī)定目標(biāo)URL的媒介類型。默認(rèn)值：all。僅在href屬性存在時(shí)使用。rel規(guī)定當(dāng)前文檔與目標(biāo)URL之間的關(guān)系。僅在href屬性存在時(shí)使用。target在何處打開(kāi)目標(biāo)URL。僅在href屬性存在時(shí)使用。type規(guī)定目標(biāo)URL的MIME類型。僅在href屬性存在時(shí)使用。注：MIME=MultipurposeInternetMailExtensions。2.6超鏈接元素文本鏈接是最常見(jiàn)的一種超鏈接，它通過(guò)網(wǎng)頁(yè)中的文件和其他文件進(jìn)行鏈接，語(yǔ)法如下：<ahref="鏈接的URL地址"target=目標(biāo)窗口的打開(kāi)方式>鏈接元素</a> 鏈接元素可以是文字，也可以是圖片或其他頁(yè)面元素。href屬性是<a>元素最常用的屬性，用來(lái)指定鏈接目標(biāo)的URL地址。鏈接地址可以是絕對(duì)地址，也可以是相對(duì)地址。例如鏈接到W3C官方網(wǎng)站，并打開(kāi)新的瀏覽器顯示該網(wǎng)站，實(shí)現(xiàn)代碼如下：<ahref=”/”target=_blank>W3C</a>2.6超鏈接元素target屬性的取值及功能說(shuō)明target值目標(biāo)窗口的打開(kāi)方式_parent在上一級(jí)窗口打開(kāi)，常在分幀的框架頁(yè)面中使用。_blank新建一個(gè)窗口打開(kāi)。_self在同一窗口打開(kāi)，與默認(rèn)設(shè)置相同。_top在瀏覽器的整個(gè)窗口打開(kāi)，將會(huì)忽略所有的框架結(jié)構(gòu)。2.6超鏈接元素書(shū)簽鏈接也是常用的一種超鏈接，用來(lái)在創(chuàng)建的網(wǎng)頁(yè)內(nèi)容特別多時(shí)對(duì)內(nèi)容進(jìn)行鏈接。書(shū)簽可以與所鏈接文字在同一頁(yè)面，也可以在不同的頁(yè)面。建立書(shū)簽的語(yǔ)法如下：<aname=”書(shū)簽名稱”>文字</a>在代碼的前面增加鏈接文字和鏈接地址就能夠?qū)崿F(xiàn)同頁(yè)面的書(shū)簽鏈接。語(yǔ)法如下：<ahref=”#書(shū)簽的名稱”>鏈接的文字</a>其中，#代表這是書(shū)簽的鏈接地址，書(shū)簽的名稱則是上面定義的書(shū)簽名。如果想鏈接到不同的頁(yè)面需要在鏈接的地址前增加文件所在的位置。語(yǔ)法如下：<ahref=”鏈接的URL地址#書(shū)簽名稱”>鏈接的文字</a>DEMO超鏈接元素2.6演示.mp42.7表格元素在HTML5中使用<table>、<caption>、<tr>、<td>、<th>、<colgroup>、<col>、<tbody>、<thead>、<tfoot>等表格元素構(gòu)建和展示表格式數(shù)據(jù)（Tabulardata）。<table>元素可以用來(lái)定義表格，包括表格的標(biāo)題、表頭及單元格內(nèi)容等。作為<table>元素的子元素，表格行用<tr>定義，表頭元素用<th>元素定義（表頭通常顯示成黑體），單元格內(nèi)容用<td>元素定義。一個(gè)<table>元素可包含一個(gè)或多個(gè)<tr>元素，一個(gè)<tr>元素又可以包含一個(gè)或多個(gè)<th>、<td>元素。2.7表格元素標(biāo)簽語(yǔ)義table定義表格caption定義表格標(biāo)題tr定義表格中的行td定義表格中的單元th定義表格中的表頭單元格colgroup定義表格列的組。通過(guò)此標(biāo)簽，您可以對(duì)列進(jìn)行組合，以便格式化。col為表格中的一個(gè)或多個(gè)列定義屬性值。tbody定義表格主體。thead定義表格的表頭。tfoot定義表格的頁(yè)腳。2.7表格元素<html><body><tableborder="2"style="width:200px"><tr><td>a1</td><td>b1</td><td>c1</td></tr><tr><td>a2</td><td>b2</td><td>c2</td></tr></table></body></html>2.7表格元素<tableborder="1"><caption>跨兩列的單元格</caption><tr><th>姓名</th><thcolspan="2">電話</th></tr><tr><td>張小明</td><td>lt;/td><td>325330425</td></tr></table>……DEMO表格元素2.7演示.mp42.8內(nèi)嵌元素除了文字信息，網(wǎng)頁(yè)中還可以呈現(xiàn)圖形、圖像、音頻、視頻等多媒體信息。為了豐富網(wǎng)頁(yè)的表現(xiàn)方式，HTML5允許以內(nèi)嵌元素(Embeddedcontent)的方式在網(wǎng)頁(yè)中嵌入圖形、圖像、視頻、音頻以及其他可操作的對(duì)象。相關(guān)的元素包括<img>、<iframe>、<embed>、<object>、<param>、<video>、<audio>、<source>、<track>、<map>、<area>、<MathML>系列和<SVG>系列。2.8內(nèi)嵌元素元素語(yǔ)義img定義HTML頁(yè)面中的圖像。iframe定義包含另一個(gè)文檔的行內(nèi)框架。embed定義嵌入的內(nèi)容，比如插件，元素必須有src屬性。object定義一個(gè)嵌入的對(duì)象。param為包含它的object元素提供參數(shù)。video定義視頻，如電影片段或其他視頻流。audio定義聲音，如音樂(lè)或其他音頻流。source為媒介元素（如<video>和<audio>）定義媒介資源。track為video等媒介指定外部字幕。map定義客戶端的圖像映射，圖像映射是帶有可點(diǎn)擊區(qū)域的圖像。area定義圖像映射內(nèi)部的區(qū)域。MathML在文檔內(nèi)使用<math>...</math>標(biāo)簽應(yīng)用各種MathML元素。SVG在文檔中定義可縮放矢量圖形。2.8內(nèi)嵌元素HTML提供了<img>元素用來(lái)描述圖像信息的內(nèi)容和表現(xiàn)形式，但圖像的數(shù)據(jù)并不會(huì)直接插入HTML文檔中，<img>元素的作用是讓HTML文檔在展示時(shí)給圖像留出一個(gè)位置。圖像文件的地址由<img>元素的src屬性指定，當(dāng)瀏覽器無(wú)法下載圖像文件時(shí)，則在相應(yīng)的位置顯示一些文字，文字的內(nèi)容由alt屬性指定。<imgsrc="url"alt="some_text"/>圖像的大小可以在元素中使用width和height屬性給出，如果不設(shè)置這兩個(gè)屬性，則將默認(rèn)為按照?qǐng)D像的實(shí)際尺寸顯示。<imgsrc="pulpit.jpg"alt="Pulpitrock"width="304"height="228"/>2.8內(nèi)嵌元素GIF支持最多256色的圖像。雖然GIF的顏色不夠豐富，但它支持動(dòng)畫(huà)和透明色，在網(wǎng)頁(yè)中常常被用來(lái)設(shè)計(jì)按鈕、菜單等較小的圖像。JPG可以支持高分辨率、顏色豐富的圖像。由于JPG具有很好的壓縮比，非常適合在網(wǎng)頁(yè)中展現(xiàn)照片。當(dāng)然，在使用JPG格式處理圖像時(shí)，壓縮比越大，圖片的質(zhì)量就越差。PNG可以支持顏色豐富的圖像，同時(shí)還可支持alpha濾鏡的透明方式。雖然PNG不支持動(dòng)畫(huà)效果，但與GIF一樣適合作為較小的圖像的顯示方式。2.8內(nèi)嵌元素<img>元素的usemap屬性可以指定可點(diǎn)擊區(qū)域的圖像映射元素，而圖像映射元素本身的設(shè)置是在<map>元素中，其中的<area>元素則給出了具體的區(qū)域和超鏈接的位置，功能類似于<a>元素。下列代碼給出了圖像映射的方式，即在一個(gè)圖像中設(shè)置了三個(gè)不同形狀的區(qū)域，當(dāng)用戶點(diǎn)擊這些區(qū)域時(shí)會(huì)產(chǎn)生如同超鏈接的效果。2.8內(nèi)嵌元素<html><body><imgsrc="planets.gif"width="145"height="126"alt="Planets"usemap="#planetmap"/><mapname="planetmap"><areashape="rect"coords="0,0,82,126"href="sun.htm"alt="Sun"/><areashape="circle"coords="90,58,3"href="mercur.htm"alt="Mercury"/><areashape="circle"coords="124,58,8"href="venus.htm"alt="Venus"/></map></body></html>2.8內(nèi)嵌元素在早期的網(wǎng)頁(yè)設(shè)計(jì)中，開(kāi)發(fā)者經(jīng)常使用<frameset>框架標(biāo)記把瀏覽器窗口劃分成幾個(gè)大小不同的子窗口，每個(gè)子窗口顯示不同的頁(yè)面，也可以在同一時(shí)間瀏覽不同的頁(yè)面。定義子窗口使用元素<frame>。HTML5已經(jīng)不再支持<frameset>與<frame>元素，但仍然支持創(chuàng)建包含文檔的內(nèi)聯(lián)框架的<iframe>元素。元素語(yǔ)義HTML支持版本<frameset>定義框架集4<frame>定義框架集的子窗口4<iframe>創(chuàng)建包含另一個(gè)文檔的內(nèi)聯(lián)（inline）框架4、52.8內(nèi)嵌元素<iframe>元素可以構(gòu)成“浮動(dòng)”的框架，可以在一個(gè)HTML文檔的一個(gè)特定區(qū)域中展示另一個(gè)HTML文檔。屬性功能height定義內(nèi)聯(lián)框架的高度name定義內(nèi)聯(lián)框架的名稱sandbox使內(nèi)聯(lián)框架可以包含其他的一些內(nèi)容，例如表格，腳本等seamless布爾型屬性，使內(nèi)聯(lián)框架看起來(lái)像包含它的文件的一部分（沒(méi)有邊框和滾動(dòng)條等）src設(shè)置內(nèi)聯(lián)框架所引用的地址srcdoc定義在內(nèi)聯(lián)框架中顯示的HTML內(nèi)容，與sandbox和seamless一起使用width定義內(nèi)聯(lián)框架的寬度2.8內(nèi)嵌元素<html><body><iframesrc="/"name="iframe_a"style="width:618px"></iframe><p><ahref=""target="iframe_a">百度</a></p><p><b>注意：</b>因?yàn)槌溄拥哪繕?biāo)表明為iframe，因此當(dāng)點(diǎn)擊超鏈接時(shí)會(huì)在iframe中顯示百度頁(yè)面</p></body></html>2.8內(nèi)嵌元素根據(jù)HTML5的規(guī)范，在網(wǎng)頁(yè)上呈現(xiàn)的視頻和音頻需要符合一定的標(biāo)準(zhǔn)，否則就通過(guò)插件（如activeX）來(lái)呈現(xiàn)。<audio>元素用來(lái)定義聲音，如音樂(lè)或其他音頻流。<audio>與</audio>之間插入的內(nèi)容是供不支持audio元素的瀏覽器顯示的。屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的音頻的URL。2.8內(nèi)嵌元素<html><body><audiosrc="music.mp3"controls="controls">

你的瀏覽器不支持音頻元素。</audio></body></html>2.8內(nèi)嵌元素<video>元素用來(lái)定義視頻，如電影片段或其他視頻流。<video>與</video>之間插入的內(nèi)容是供不支持video元素的瀏覽器顯示的。屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。heightpixels設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的視頻的URL。widthpixels設(shè)置視頻播放器的寬度。2.8內(nèi)嵌元素<html><body><videowidth="320"height="240"src="video.mp4"controls="controls">

你的瀏覽器不支持視頻元素。</video></body></html>2.8內(nèi)嵌元素<math><mrow><mi>A</mi><mo>=</mo><mfencedopen="["close="]"><mtable><mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd></mtr>……</mtable></mfenced></mrow></math>MathML中的一系列元素可以幫助在HTML文檔內(nèi)顯示數(shù)學(xué)公式，并且這些元素本身也具有相應(yīng)的語(yǔ)義。注意：并不是所有的瀏覽器都能顯示MathML標(biāo)簽，因此在網(wǎng)站中使用這個(gè)系列的元素時(shí)需要告知所支持的瀏覽器及版本情況。2.8內(nèi)嵌元素<progress>和<meter>是在HTML5中新增的元素。<progress>元素可以用來(lái)顯示正在執(zhí)行的狀態(tài)或進(jìn)度情況，配合JavaScript程序，可以控制<progress>元素中的value屬性，以精確地顯示進(jìn)展情況。<meter>元素可以以直方圖的形式顯示值的大小。為了實(shí)現(xiàn)直方圖的顯示，除了需要通過(guò)value屬性給出具體的數(shù)值，還需要通過(guò)min和max屬性給出該直方圖的最小和最大值，以便可以按比例進(jìn)行顯示。min和max屬性的缺省值為0和1。2.8內(nèi)嵌元素<html><body>

下載進(jìn)度：<progressvalue="22"max="100"></progress><p><progress/></p><p>顯示度量值：</p><metervalue="3"min="0"max="10">3/10</meter><br><metervalue="0.6">60%</meter></body></html>2.8內(nèi)嵌元素根據(jù)HTML5的規(guī)范，<svg>和<canvas>元素都可以完成在網(wǎng)頁(yè)中的繪圖功能。<canvas>元素用來(lái)繪制2D圖形，這與SVG的作用相似。不同的是，<canvas>元素的繪圖機(jī)制依賴于分辨率、不支持事件處理器，但可以按照像素重新生成。<canvas>元素也需要JavaScript代碼的支持。與<canvas>元素不同的是，SVG是一種使用XML描述2D圖形的語(yǔ)言，SVG中所描述的2D圖形元素是以矢量圖形對(duì)象的方式存在，不依賴分辨率，可以附加JavaScript事件處理器。可以通過(guò)JavaScript來(lái)修改圖形對(duì)象的屬性，瀏覽器會(huì)自動(dòng)重繪圖形。注意，一些瀏覽器需要插件才能支持SVG。2.8內(nèi)嵌元素<html><body><svgxmlns="/2000/svg"version="1.1"height="190"><polygonpoints="100,1040,180190,6010,60160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/></svg></body></html>DEMO內(nèi)嵌元素2.8演示.mp42.8內(nèi)嵌元素HTML本身的元素是有限的，特別是在HTML5之前的版本，開(kāi)發(fā)者為了在HTML頁(yè)面中實(shí)現(xiàn)多媒體應(yīng)用和更復(fù)雜的客戶端操作，就需要在HTML文檔中增加各種插件對(duì)象以擴(kuò)展文檔的表現(xiàn)能力。自從1996年NetscapeNavigator2.0引入了對(duì)QuickTime插件的支持，插件這種開(kāi)發(fā)方式為其它廠商擴(kuò)展Web客戶端的信息展現(xiàn)方式開(kāi)辟了一條自由之路。微軟公司迅速在IE3.0瀏覽器中增加了對(duì)ActiveX的插件對(duì)象支持，RealNetworks公司的Realplayer插件也很快在Netscape和IE瀏覽器中取得了成功。然而，隨著HTML5標(biāo)準(zhǔn)的制定與應(yīng)用，通過(guò)使用新技術(shù)（包括音頻元素、視頻元素、矢量圖形元素、應(yīng)用緩存）讓瀏覽器直接支持相關(guān)的多媒體或交互應(yīng)用，這種技術(shù)趨勢(shì)必然導(dǎo)致Flash等很多傳統(tǒng)的插件技術(shù)被新的技術(shù)標(biāo)準(zhǔn)取代。2.8內(nèi)嵌元素Java小應(yīng)用程序Java小應(yīng)用程序（JavaApplet）憑借Java本身的跨平臺(tái)性、安全性等優(yōu)點(diǎn)，可以實(shí)現(xiàn)圖形繪制、字體和顏色控制、動(dòng)畫(huà)和聲音的播放、人機(jī)交互及遠(yuǎn)程數(shù)據(jù)訪問(wèn)等功能。ActiveXActiveX是Microsoft對(duì)于一系列面向?qū)ο蟪绦蚣夹g(shù)和工具的稱呼，其中主要的技術(shù)是組件對(duì)象模型（ComponentObjectModel，簡(jiǎn)稱為COM）。ActiveX只能在Windows環(huán)境下運(yùn)行。FlashFlash是一種基于矢量圖像的交互式多媒體技術(shù)。矢量圖像也稱為面向?qū)ο蟮膱D像，它使用稱為矢量的直線和曲線來(lái)描述圖像。2.9結(jié)構(gòu)元素HTML5中支持的多種結(jié)構(gòu)元素來(lái)呈現(xiàn)文檔中的各節(jié)（Sections）內(nèi)容，包括HTML4中已經(jīng)定義的<body>、<address>、<h1>、<h2>、<h3>、<h4>、<h5>和<h6>元素，以及HTML5中新定義的<article>、<section>、<nav>、<aside>、<header>和<footer>元素。元素語(yǔ)義body定義文檔的主體。h1到h6定義標(biāo)題1到標(biāo)題6。address定義文檔作者或擁有者的聯(lián)系信息。article定義外部的內(nèi)容。section定義文檔中的節(jié)。如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。nav定義導(dǎo)航鏈接的部分。aside定義article以外的內(nèi)容，且與article的內(nèi)容相關(guān)。header定義文檔的頁(yè)眉。footer定義文檔的頁(yè)腳。2.9結(jié)構(gòu)元素<html><body><h1>這是標(biāo)題1</h1><h2>這是標(biāo)題2</h2><h3>這是標(biāo)題3</h3><h4>這是標(biāo)題4</h4><h5>這是標(biāo)題5</h5><h6>這是標(biāo)題6</h6></body></html>2.9結(jié)構(gòu)元素在HTML5中新增了<article>、<section>、<nav>、<aside>、<header>、<footer>等新元素，而這些元素的作用主要體現(xiàn)在語(yǔ)義上，主要目的是增加文檔的可讀性和搜索引擎優(yōu)化，在內(nèi)容展示方面并沒(méi)有特別的改變。為了方便理解，這里將這些結(jié)構(gòu)元素和word文檔結(jié)構(gòu)進(jìn)行類比：<header>相當(dāng)于頁(yè)眉，<footer>相當(dāng)于頁(yè)腳，<article>相當(dāng)于正文，<section>是正文中包含的各個(gè)部分（可以理解為段落或章節(jié)），<aside>是正文的注解，而<nav>則是網(wǎng)站中經(jīng)常使用的導(dǎo)航欄。DEMO結(jié)構(gòu)元素2.9演示.mp42.10編輯元素HTML5中的編輯元素（Edits）包括<ins>和<del>，它們配合可以描述對(duì)文檔的更新和修正。元素語(yǔ)義HTML支持版本ins定義文檔的其余部分之外的插入文本。4、5del定義文檔中已刪除的文本。4、52.11編輯元素<html><body><insdatetime="2016-03-1600:00Z"><p>我喜歡吃蘋(píng)果。</p></ins><deldatetime="2015-10-11T01:25-07:00"><p>我喜歡吃梨。</p></del></body></html>2.11表單元素<form>元素在頁(yè)面中產(chǎn)生表單，表單提供了用戶與Web服務(wù)器的信息交互功能，是Web技術(shù)的要素之一。表單接受用戶信息后，把信息提供給服務(wù)器，然后由服務(wù)器端的應(yīng)用程序處理信息，把處理結(jié)果返給用戶并向用戶顯示。表單的定義元素是<form>。表單中可以包含<form>、<input>、<label>、<button>、<select>、<datalist>、<optgroup>、<option>、<textarea>、<keygen>、<output>、<progress>、<meter>、<fieldset>、<legend>等子元素。2.11表單元素元素語(yǔ)義HTML支持版本form定義供用戶輸入的HTML表單。4、5input定義輸入控件4、5label為input元素定義元素，響應(yīng)鼠標(biāo)點(diǎn)擊。5button定義按鈕。4、5select定義選擇列表（下拉列表）。4、5datalist與input元素配合使用，定義input可能的值。5optgroup定義選擇列表中相關(guān)選項(xiàng)的組合4、5option定義選擇列表中的選項(xiàng)4、5textarea定義多行的文本輸入控件4、5keygen定義用于表單的密鑰對(duì)生成器字段。5output定義不同類型的輸出，比如腳本的輸出。5progress定義運(yùn)行中的進(jìn)度。5meter定義度量衡。5fieldset將表單內(nèi)的相關(guān)元素分組。4、5legend定義fieldset元素的其余內(nèi)容的標(biāo)題。4、52.11表單元素<form>元素的4個(gè)主要屬性分別是action、method、enctype、target。例如下面的代碼：<formmethod="post"action="URL"enctype="text/plain"target="_self"><form>action屬性該屬性值指定了提交表單時(shí)對(duì)應(yīng)的服務(wù)器程序地址。method屬性method屬性指定表單中的輸入數(shù)據(jù)的傳輸方法，它的取值是get或post。enctype屬性enctype屬性指定表單中輸入數(shù)據(jù)的編碼方法。target屬性target屬性用來(lái)指定目標(biāo)窗口的打開(kāi)方式。2.11表單元素input元素定義輸入控件，用來(lái)搜集用戶信息。屬性功能name定義輸入控件的名稱type指定控件的類型，默認(rèn)值是textmaxlength規(guī)定控件允許輸入的字符的最大長(zhǎng)度minlength規(guī)定控件允許輸入的字符的最小長(zhǎng)度size規(guī)定控件輸入域的大小readonly規(guī)定用戶是否可以修改其中的值。required規(guī)定是否是必填信息multiple規(guī)定是否可以填寫(xiě)多個(gè)值pattern定義用戶輸入的字符串模板max規(guī)定可填寫(xiě)的最大值min規(guī)定可填寫(xiě)的最小值step規(guī)定數(shù)據(jù)的步長(zhǎng)list列出輸入的選項(xiàng)placeholder給出文本框的占位字符串，可實(shí)現(xiàn)文本框水印效果checked提供復(fù)選框和單選按鈕的初始狀態(tài)value提供控件輸入域的初始值src定義以提交按鈕形式顯示的圖像的URL2.11表單元素<input>元素的屬性type的取值及意義值功能hidden隱藏的輸入字段，把表單中的一個(gè)或多個(gè)組件隱藏起來(lái)text單行的輸入文本框，接受任何形式的輸入，默認(rèn)寬度為20個(gè)字符tel電話號(hào)碼輸入url網(wǎng)絡(luò)地址URL輸入email電子郵件地址輸入password密碼字段，該字段中的字符用*替代date日期輸入time時(shí)間輸入number數(shù)字輸入range范圍輸入color顏色輸入checkbox復(fù)選框，提供多項(xiàng)選擇radio單選按鈕，提供單項(xiàng)選擇file文件上傳submit提交按鈕，單擊提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器image圖像形式的提交按鈕，單擊圖像，發(fā)送表單信息提交服務(wù)器reset重置按鈕，把表單中的所有數(shù)據(jù)恢復(fù)為默認(rèn)值button可點(diǎn)擊按鈕，可用于創(chuàng)建提交按鈕、復(fù)位按鈕和普通按鈕2.11表單元素<formmethod="post"action="travel.jsp">

請(qǐng)輸入姓名：<inputtype="text"name="textname"size="12"maxlength="6"/><br/>

請(qǐng)輸入密碼：<inputtype="password"name="passname"size="12"maxlength="6"/><br/>

上傳的文件：<inputtype="file"name="filename"size="12"maxlength="6"/><br/>

請(qǐng)選擇旅游城市，可多選<inputtype="checkbox"name="復(fù)選框1">北京……

請(qǐng)選擇付款方式

<inputtype="radio"name="支付方式"id="card“checked="checked"><labelfor="card">信用卡</label>……<br/>

出發(fā)日期<inputtype="date"/>

出發(fā)時(shí)間<inputtype="time"/><br/><inputtype="reset"name="復(fù)位按鈕"value="復(fù)位"><inputtype="submit"name="提交按鈕"value="確定"><inputtype="button"name="close"value="關(guān)閉當(dāng)前窗口"onclick="window.close()"></form>2.11表單元素<fieldset>元素可以將表單中的一部分內(nèi)容組合起來(lái)，生成一組相關(guān)表單的字段。當(dāng)一組表單元素作為子元素放到<fieldset>元素內(nèi)時(shí)，瀏覽器通常會(huì)以加上邊框的方式進(jìn)行顯示。作為<fieldset>元素的第一個(gè)子元素，<legend>元素可以為<fieldset>元素加上標(biāo)題。2.11表單元素<html><body><fieldset><legend>健康信息：</legend><form><label>身高：<inputtype="text"/></label><label>體重：<inputtype="text"/></label></form></fieldset></body></html>2.11表單元素<select>元素定義下拉式列表框和滾動(dòng)式列表框。當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表。在將<select>表單數(shù)據(jù)提交給服務(wù)器時(shí)，同時(shí)還包括了<select>元素的name屬性值。屬性功能disabled規(guī)定禁用該下拉列表，被禁用的下拉列表既不可用，也不可點(diǎn)擊?？梢允褂肑avaScript來(lái)清除disabled屬性，以使下拉列表變?yōu)榭捎脿顟B(tài)multiple規(guī)定可選擇多個(gè)選項(xiàng)name規(guī)定下拉列表的名稱size規(guī)定下拉列表中可見(jiàn)選項(xiàng)的數(shù)目2.11表單元素<select>元素的語(yǔ)法如下所示:<selectname="下拉列表名稱"size="下拉列表顯示的條數(shù)"><optionvalue="控件的初始值"selected="selected">選項(xiàng)描述</option> <optionvalue="控件的初始值">選項(xiàng)描述</option></select>使用<select>元素定義下拉列表框時(shí)，由<option>元素定義列表框的各個(gè)選項(xiàng)。<option>元素位于<select>元素內(nèi)部。一個(gè)<select>元素可以包含多個(gè)<option>元素。<option>元素要與<select>元素一起使用，否則元素是無(wú)意的。2.11表單元素<html><body><formmethod="post"action="travel.jsp"><inputlist="cars"/><datalistid="cars"><optionvalue="BMW"label="BMW"><optionvalue="Ford"label="Ford"><optionvalue="Volvo"label="Volvo"></datalist></form></body></html>DEMO表單元素2.11演示.mp42.12HTML中的顏色設(shè)置HTML中的顏色是由紅（Red）、綠（Green）、藍(lán)（Blue）三種顏色組合而成的RGB值來(lái)表示。RGB中三個(gè)顏色的值分別都可以從0（十六進(jìn)制記作#00）到255（十六進(jìn)制記作#FF），所以可以組合出16777216（256x256x256）種顏色。比如，紅色為#FF0000，黃色為#FFFF00，黑色為#000000，白色為#FFFFFF。在HTML標(biāo)準(zhǔn)中，有許多種顏色還可以直接用顏色名稱表示，比如aqua、black、blue、gray、green、purple、red、white和yellow等。2.12HTML中的顏色設(shè)置<html><body><pstyle="background-color:#FFFF00">Colorsetbyusinghexvalue</p><pstyle="background-color:rgb(255,255,0)">Colorsetbyusingrgbvalue</p><pstyle="background-color:yellow">Colorsetbyusingcolorname</p></body></html>2.13絕對(duì)路徑與相對(duì)路徑絕對(duì)路徑來(lái)說(shuō)明文件的位置<linkrel="stylesheet"type="text/css"href="/css/mystyle.css"/><imgsrc="/img/pulpit.jpg"alt="Pulpitrock"/><ahref="/htm/sample/hello.htm">Hello!</a>上述的代碼語(yǔ)法正確，也能達(dá)到預(yù)定的效果，但卻不符合軟件工程的要求。網(wǎng)站在設(shè)計(jì)開(kāi)發(fā)和運(yùn)行維護(hù)的過(guò)程中需要不斷進(jìn)行適當(dāng)修改，甚至可能會(huì)整體遷移（從一個(gè)域名變?yōu)榱硗庖粋€(gè)域名）。在這類情況下，絕對(duì)路徑的缺點(diǎn)會(huì)非常明顯，不便于系統(tǒng)的開(kāi)發(fā)和維護(hù)。2.13絕對(duì)路徑與相對(duì)路徑相對(duì)路徑的描述方式如果該HTML文檔和被引用的文檔在同一個(gè)目錄下，則直接寫(xiě)引用文件名即可。如果被引用的文檔是在該HTML文檔的下一級(jí)目錄，則使用在之前加入子目錄的名稱即可。例如“img/abc.jpg”。如果被引用的文檔是在該HTML文檔的上一級(jí)目錄，則可使用“..”來(lái)說(shuō)明。例如“../abc.htm”。前面列舉的幾個(gè)絕對(duì)路徑的描述可改為如下相對(duì)路徑：<linkrel="stylesheet"type="text/css"href="../css/mystyle.css"/><imgsrc="../img/pulpit.jpg"alt="Pulpitrock"/><ahref="sample/hello.htm">Hello!</a>或以“/”開(kāi)頭來(lái)描述：<linkrel="stylesheet"type="text/css"href="/css/mystyle.css"/><imgsrc="/img/pulpit.jpg"alt="Pulpitrock"/><ahref="/htm/sample/hello.htm">Hello!</a>這種方式的好處在于，文件的引用不受該HTML文件本身路徑的影響，便于開(kāi)發(fā)和維護(hù)。2.14思考題（1）HTML是一種計(jì)算機(jī)語(yǔ)言，它與同樣也是計(jì)算機(jī)語(yǔ)言的C語(yǔ)言等都什么本質(zhì)的不同？（2）相對(duì)之前的標(biāo)準(zhǔn)，HTML5的主要變化包括哪些？（3）表格元素在頁(yè)面設(shè)計(jì)中非常重要，特別是在商業(yè)系統(tǒng)中的數(shù)據(jù)展示方面尤為常用。請(qǐng)說(shuō)明<table>、<tr>、<td>元素分別具有什么功能。（4）超鏈接元素中可以設(shè)置target屬性，請(qǐng)分別描述target屬性的不同取值及功能。（5）HTML中支持插入的圖像文件格式主要有哪些，它們各有什么特點(diǎn)？課后思考題（6）請(qǐng)?jiān)诓煌臑g覽器中測(cè)試它們對(duì)HTML5頻、視頻元素的支持情況，測(cè)試音頻和視頻的編碼要求。（7）試用<iframe>元素在網(wǎng)頁(yè)中嵌入你所在地區(qū)的天氣情況。提示：可以在互聯(lián)網(wǎng)中先找到可以正常顯示的小型天氣頁(yè)面，然后將其嵌入。（8）請(qǐng)思考在什么樣的情況下會(huì)使用<select>元素，編寫(xiě)代碼完成單選和多選的功能。（9）<div>元素常常用來(lái)進(jìn)行頁(yè)面的布局設(shè)計(jì)，試應(yīng)用<div>元素模仿設(shè)計(jì)一個(gè)門(mén)戶網(wǎng)站（比如新浪或網(wǎng)易等）的頁(yè)面布局。（10）請(qǐng)分別應(yīng)用絕對(duì)路徑和相對(duì)路徑方式的超鏈接設(shè)計(jì)兩個(gè)頁(yè)面，并讓它們相互指向。JavaWeb網(wǎng)站設(shè)計(jì)開(kāi)發(fā)第3章層疊樣式表CSS內(nèi)容3.1CSS3概況3.2選擇符3.3CSS的層疊性與優(yōu)先次序3.4常用屬性及其應(yīng)用實(shí)例3.5CSS盒子模型和網(wǎng)頁(yè)布局方式3.6前端UI框架——Bootstra3.1CSS簡(jiǎn)介層疊樣式表（CascaingStyleSheet，簡(jiǎn)稱為CSS）是W3C組織所擬定出的一套標(biāo)準(zhǔn)的樣式語(yǔ)言規(guī)范。隨著CSS技術(shù)技術(shù)的使用，HTML頁(yè)面真正“活動(dòng)”了起來(lái)。而在HTML5中，一些純粹用作顯示效果的元素將取消，因?yàn)樗鼈冿@示效果的工作更適合由CSS來(lái)?yè)?dān)當(dāng)。作為一種用于網(wǎng)頁(yè)展示的樣式語(yǔ)言，CSS增加了更多的樣式定義方式來(lái)輔助HTML語(yǔ)言。通過(guò)CSS樣式表的定義，只要設(shè)定某種元素（如：表格、背景、連結(jié)、文字、按鈕、滾動(dòng)條等）的樣式，則各網(wǎng)頁(yè)相同種類的元素將會(huì)呈現(xiàn)出相同的風(fēng)格。這種方式不僅加快了網(wǎng)站開(kāi)發(fā)的進(jìn)度，而且便于建立一個(gè)風(fēng)格統(tǒng)一的網(wǎng)站。3.1CSS簡(jiǎn)介CSS的定義可以直接放在HTML元素中，稱為內(nèi)聯(lián)樣式。形式如下：<pstyle="color:sienna;margin-left:20px">Thisisaparagraph.</p>CSS的定義可以放在HTML文件的<style>元素中，稱為內(nèi)部樣式表。形式如下：<head><style>body{background-color:yellow;}</style></head>CSS的定義也可以獨(dú)立保存在一個(gè)擴(kuò)展名為.css的文件中，通過(guò)鏈接的方式包含入網(wǎng)頁(yè)中，稱為外部樣式表。形式如下：<head><linkrel="stylesheet"type="”text/css”"href="”foo.css”"></head>3.2選擇符一條CSS規(guī)則中包括兩個(gè)部分：一個(gè)選擇符（selector）和一個(gè)或多個(gè)描述（declaration），描述之間用分號(hào)隔開(kāi)。每一個(gè)描述中又包含屬性名（property）和屬性值（value）。語(yǔ)法如下：selector{property:value;property:value;}下面的CSS規(guī)則中聲明了段落元素<p>的顯式方式，包括文本居中、黑色、arial字體。CSS中的注釋在“/*”和“*/”之間。p{text-align:center;color:black;font-family:arial;}在這個(gè)例子中，p是選擇符，text-align、color和font-family是屬性，并為這些屬性設(shè)置了相應(yīng)的屬性值。3.2選擇符（1）類選擇符選擇符可以是一種HTML元素，例如“p”、“table”等，這些可以看作是HTML預(yù)定義的類。例如下面的CSS規(guī)則：body{background:#fff;margin:0;padding:0;}p{color:#ff0000;}應(yīng)用了上述CSS的HTML文檔中所有的<body>元素（雖然只可能有一個(gè)）和所有的<p>元素都將無(wú)需聲明而自動(dòng)遵守上述的CSS規(guī)則。3.2選擇符（2）子類選擇符選擇符可以是一種HTML元素的一部分實(shí)例，可以理解為基于該類元素（基類）的一個(gè)子類。例如下面的CSS規(guī)則：td.fancy{background:#666;}p.rchild{text-align:right}在HTML應(yīng)用上述CSS規(guī)則時(shí)，必須聲明元素的class為某個(gè)子類。例如下面代碼：<tdclass="fancy">ABC<td><pclass="rchild">p標(biāo)記中的內(nèi)容</p>如果在定義子類時(shí)沒(méi)有給出基類的名稱，則可認(rèn)為它是任何基類的子類。例如下面的CSS規(guī)則：.cchild{text-align:center}3.2選擇符（3）嵌套類選擇符選擇符可以是根據(jù)元素之間的嵌套關(guān)系而確定的類，嵌套關(guān)系也可以理解為上下文關(guān)系。例如下面的CSS規(guī)則和相應(yīng)的HTML代碼：tda{text-align:center;}<tableborder="1"><tr><td><ahref="a.htm">FileA</a></td><td><ahref="b.htm">FileB</a></td></tr></table><ahref="c.htm">FileC</a>上述CSS規(guī)則意味著：只有在單元格中的超鏈接才會(huì)應(yīng)用文字居中的樣式，而其它的超鏈接則會(huì)忽略這一規(guī)則。3.2選擇符（4）id選擇符選擇符可以是HTML文檔中的一個(gè)特定元素，例如用“id”屬性標(biāo)識(shí)的某一個(gè)段落。這些可以看作是HTML元素類的實(shí)例對(duì)象。例如下面的CSS規(guī)則和相應(yīng)的HTML代碼：#red{color:red;}#green{color:green;}<pid="red">這個(gè)段落是紅色。</p><pid="green">這個(gè)段落是綠色。</p>id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。3.2選擇符（5）偽類與偽元素選擇符CSS偽類（Pseudo-class）用于向某些選擇器添加特殊的效果。使用偽類選擇符的語(yǔ)法如下：selector:pseudo-class{property:value;}偽類描述