Web前端開(kāi)發(fā)（初級(jí)）（上冊(cè)）課件 第1-3章 Web簡(jiǎn)介、HTML基礎(chǔ)、CSS基礎(chǔ)

Web簡(jiǎn)介第一章Web前端開(kāi)發(fā)初級(jí)(上冊(cè))“十三五”職業(yè)教育國(guó)家規(guī)劃教材學(xué)習(xí)路線Web簡(jiǎn)介01Web的誕生Internet，中文正式譯名為因特網(wǎng),又叫作國(guó)際互聯(lián)網(wǎng)，是由所有使用公用語(yǔ)言互相通信的計(jì)算機(jī)連接而組成的全球網(wǎng)絡(luò)。一旦連接到它的任意一個(gè)節(jié)點(diǎn)，就意味著計(jì)算機(jī)或者其他設(shè)備已經(jīng)連入Internet。目前，Internet的用戶已經(jīng)遍及全球，截止到2018年，已經(jīng)有超過(guò)40億人在使用Internet，并且它的用戶數(shù)還在以等比級(jí)數(shù)上升。Web的誕生Intemnet的前身是美國(guó)國(guó)防部高級(jí)研究計(jì)劃局（AdvancedResearchProjectsAgency，ARPA）主持研制的ARPANET網(wǎng)絡(luò)，當(dāng)時(shí)建立這個(gè)網(wǎng)絡(luò)是為了將美國(guó)的幾臺(tái)軍事和研究用的計(jì)算機(jī)主機(jī)連接起來(lái)。ARPANET網(wǎng)絡(luò)于1969年正式啟用，但當(dāng)時(shí)僅連接了4臺(tái)計(jì)算機(jī)，供科學(xué)家們進(jìn)行計(jì)算機(jī)聯(lián)網(wǎng)實(shí)驗(yàn)使用。Web的誕生1986年美國(guó)國(guó)家科學(xué)基金會(huì)（NationalScienceFoundation，NSF）在政府的資助下，用TCP/IP協(xié)議建立了NSFNET網(wǎng)絡(luò)。NSFNET網(wǎng)絡(luò)于1989年改名為Internet，且向公眾開(kāi)放。從此，Internet便在全球各地普及起來(lái)。Web的誕生目前，Internet在人們的日常生活中，己經(jīng)涉及方方面面，能幫助人們快速找到所需要的信息，空閑的時(shí)候可以依靠網(wǎng)絡(luò)放松自我?？梢园l(fā)郵件或者聊天，可以網(wǎng)上購(gòu)物，可以在網(wǎng)絡(luò)上工作或者聯(lián)系親朋好友，甚至可以在網(wǎng)上交友，等等。Web的誕生E-mail電子郵件，具有速度快、成本低、方便靈活等優(yōu)點(diǎn)，是目前Internet的重要服務(wù)項(xiàng)目之一。FTP文件傳輸，用戶通過(guò)該協(xié)議可以進(jìn)行文件傳輸或者文件訪問(wèn)。由于安全問(wèn)題，其使用場(chǎng)景也越來(lái)越少。BBS電子公告，最早是用來(lái)公布股市價(jià)格等類(lèi)信息的，現(xiàn)在的BBS己經(jīng)發(fā)展成功能齊全的社區(qū)。WWWWorldWideWeb，中文名為萬(wàn)維網(wǎng)，也被稱(chēng)為Web，是Internet中發(fā)展最迅速的部分。Web的誕生1984年，TimBerners-Lee進(jìn)入由歐洲原子核研究會(huì)（CERN）建立的粒子實(shí)驗(yàn)室。他在這里接受了一項(xiàng)工作：為了使歐洲各國(guó)的核物理學(xué)家能通過(guò)計(jì)算機(jī)網(wǎng)絡(luò)及時(shí)溝通傳遞信息進(jìn)行合作研究，需要開(kāi)發(fā)一個(gè)軟件，以便使分布在各國(guó)物理實(shí)驗(yàn)室和研究所的最新信息、數(shù)據(jù)、圖像資料供大家共享。Web的誕生接受這項(xiàng)任務(wù)的TimBerners-Lee于1989年夏天，成功開(kāi)發(fā)出世界上第一個(gè)Web服務(wù)器和第一個(gè)Web客戶機(jī)。1989年12月，TimBerners-Lee將他的發(fā)明正式命名為WorldWideWeb，即WWW。Web的誕生1991年8月6日，TimBerners-Lee建立了世界上第一個(gè)網(wǎng)站，即http：//info.cern.ch/（該網(wǎng)站現(xiàn)在還運(yùn)轉(zhuǎn)如常）。第一個(gè)網(wǎng)站，即http：//info.cern.ch/（該網(wǎng)站現(xiàn)在還運(yùn)轉(zhuǎn)如常）。該網(wǎng)站解釋了WorldWideWeb是什么，以及如何使用網(wǎng)頁(yè)瀏覽器和如何建立一個(gè)網(wǎng)頁(yè)服務(wù)器等。此時(shí)，Web正式誕生。Web的誕生1994年10月，TimBerners-Lee在麻省理工學(xué)院創(chuàng)立了WorldWideWeb

Consortium，中文名為萬(wàn)維網(wǎng)聯(lián)盟，該聯(lián)盟的簡(jiǎn)稱(chēng)為W3C，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。Web的誕生02Web的相關(guān)概念WWWWWW，WorldWideWeb的縮寫(xiě)，也可寫(xiě)為W3、Web，中文名為萬(wàn)維網(wǎng)。WWW是Intemet的最核心部分。它是Internet上那些支持Www服務(wù)和HTTP協(xié)議的服務(wù)器集合。WWW在使用上分為Web客戶端和Web服務(wù)器。用戶可以使用Web客戶端（多用網(wǎng)絡(luò)瀏覽器）訪問(wèn)Web服務(wù)器上的頁(yè)面。Web的相關(guān)概念WebsiteWebsite，中文名為網(wǎng)站，是指在Internet上根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁(yè)的集合。人們可以通過(guò)網(wǎng)站發(fā)布自己想要公開(kāi)的資訊，或者利用網(wǎng)站提供相關(guān)的網(wǎng)絡(luò)服務(wù)。Web的相關(guān)概念URLURL，UniformResourceLocator的縮寫(xiě)，中文名為統(tǒng)一資源定位符，俗稱(chēng)網(wǎng)址。它是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。在WWW上瀏覽或者查詢(xún)信息，必須在網(wǎng)頁(yè)瀏覽器上輸入查詢(xún)目標(biāo)的地址。Web的相關(guān)概念URL的一般格式如下：協(xié)議：//主機(jī)地址（IP地址）+目錄路徑+參數(shù)Web的相關(guān)概念file主要用于訪問(wèn)本地計(jì)算機(jī)中的文件。httpHyperTextTransferProtocol，超文本傳輸協(xié)議。ftpFileTransferProtocol，文件傳輸協(xié)議，可以通過(guò)FTP訪問(wèn)服務(wù)器上的文件。telent允許用戶通過(guò)一個(gè)協(xié)商過(guò)程與一個(gè)遠(yuǎn)程設(shè)備進(jìn)行通信。Web的相關(guān)概念例如：http：//http：//https：///s?ie=UTF-8&wd=HTMLWeb的相關(guān)概念URL的參數(shù)通常放在URL后面，用“?”開(kāi)頭，用“&”將多個(gè)參數(shù)拼接起來(lái)。URL只能用ASCII字符集通過(guò)因特網(wǎng)進(jìn)行發(fā)送，如果包含非ASCII字符集的字符，則需要進(jìn)行轉(zhuǎn)換。Web的相關(guān)概念Web標(biāo)準(zhǔn)Web應(yīng)用開(kāi)發(fā)需要遵循的標(biāo)準(zhǔn)就是WebStandard（Web標(biāo)準(zhǔn)），這里Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)標(biāo)準(zhǔn)（XML、HTML和XHTML），表現(xiàn)標(biāo)準(zhǔn)（CSS），行為標(biāo)準(zhǔn)（DOM、JavaScript）。Web的相關(guān)概念Web瀏覽器Web瀏覽器，簡(jiǎn)稱(chēng)瀏覽器，是一個(gè)顯示網(wǎng)頁(yè)服務(wù)器或者檔案系統(tǒng)內(nèi)的HTML文件，并讓用戶與這些文件互動(dòng)的軟件。第一個(gè)網(wǎng)頁(yè)瀏覽器就是TimBemers-Lee編寫(xiě)的WorldWideWeb，后改名為Nexus。Web的相關(guān)概念主流瀏覽器的發(fā)展歷史如下表所示。Web的相關(guān)概念現(xiàn)存主流瀏覽器的內(nèi)核情況如下表所示。Web的相關(guān)概念Web服務(wù)器Web服務(wù)器的主要功能是提供網(wǎng)上信息瀏覽服務(wù)。Web服務(wù)器可以解析HTTP協(xié)議，當(dāng)Web服務(wù)器接收到一個(gè)HTTP請(qǐng)求時(shí)，會(huì)返回一個(gè)HTTP響應(yīng)，這樣客戶端就可以從服務(wù)器上獲取網(wǎng)頁(yè)（HTML），包括CSS、JS、音頻、視頻等資源。Web的相關(guān)概念03Web開(kāi)發(fā)目前，Web開(kāi)發(fā)主要分為前端和后端兩部分。前端指的是直接與用戶接觸的網(wǎng)頁(yè)，網(wǎng)頁(yè)上通常有HTML、CSS、JavaScript等內(nèi)容；后端指的是程序、數(shù)據(jù)庫(kù)和服務(wù)器層面的開(kāi)發(fā)。Web開(kāi)發(fā)04本章小結(jié)本章簡(jiǎn)單介紹了Internet的歷史和Web的誕生，重點(diǎn)介紹了Web的相關(guān)概念，包括WWW、Website、URL、Web標(biāo)準(zhǔn)、Web瀏覽器、Web服務(wù)器。同時(shí)，明確了Web前端開(kāi)發(fā)需要掌握的內(nèi)容，包括HTML、CSS、JavaScript。本章小結(jié)HTML基礎(chǔ)第二章Web前端開(kāi)發(fā)初級(jí)(上冊(cè))“十三五”職業(yè)教育國(guó)家規(guī)劃教材學(xué)習(xí)路線HTML基礎(chǔ)雖然HTML現(xiàn)在已經(jīng)到了HTML5版本，但本章主要是圍繞HTML4.01和部分XHTML1.0展開(kāi)的。這是因?yàn)槟壳盀g覽器對(duì)HTML5支持的問(wèn)題，現(xiàn)在網(wǎng)頁(yè)的開(kāi)發(fā)，80%左右的用戶使用的還是HTML4已有部分，甚至某些前端開(kāi)發(fā)會(huì)遇到不使用HTMLS的極端情況。正是基于這種情況，HTML4可以稱(chēng)為HTML基礎(chǔ)，掌握它是前端開(kāi)發(fā)所必需的。HTML基礎(chǔ)01HTML概述語(yǔ)言是人類(lèi)最重要的交際工具，是人們進(jìn)行溝通的主要表達(dá)方式。人們借助語(yǔ)言保存和傳遞人類(lèi)文明的成果。同樣，計(jì)算機(jī)雖然是0和1的世界，人們將計(jì)算機(jī)中0和1組成的語(yǔ)言稱(chēng)為機(jī)器語(yǔ)言，但這種機(jī)器語(yǔ)言晦澀難懂。在機(jī)器語(yǔ)言的基礎(chǔ)上，人們逐步研發(fā)出匯編語(yǔ)言、高級(jí)語(yǔ)言、腳本語(yǔ)言、標(biāo)記語(yǔ)言等，HTML是標(biāo)記語(yǔ)言的一種。HTML概述標(biāo)記語(yǔ)言標(biāo)記語(yǔ)言，是一種將文本（Text）以及與文本相關(guān)的其他信息結(jié)合起來(lái)，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。標(biāo)記語(yǔ)言的種類(lèi)有很多，常見(jiàn)的有XML、HTML、XHTML等。HTML概述01HTML（第1版）1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。03HTML3.21997年1月14日，W3C推薦標(biāo)準(zhǔn)，這是第一個(gè)被廣泛使用的標(biāo)準(zhǔn)。02HTML2.01995年11月作為RFC1866發(fā)布。HTML概述HTML4.0HTML4.011997年12月18日，W3C推薦標(biāo)準(zhǔn)。1999年12月24日，W3C推薦標(biāo)準(zhǔn)，這也是另一個(gè)被廣泛使用的標(biāo)準(zhǔn)。HTML概述HTML的基本結(jié)構(gòu)HTML文件由文件頭（head）和文件體（body）兩部分組成，在這兩部分外面還要加上標(biāo)簽<html×</html>說(shuō)明此文件是HTML文件。這樣瀏覽器才能正確識(shí)別HTML文件。HTML概述HTML的基本結(jié)構(gòu)如下：HTML概述將這段文字輸入任意文本編輯器中，注意不要使用Windows的寫(xiě)字板程序，或者M(jìn)icrosoftOfficeWord、WPS等多功能文字處理軟件。輸入完成后保存，保存時(shí)，將文本保存類(lèi)型設(shè)為“喇?”，文件名隨意，但它的后綴名一定是html或者h(yuǎn)tm。HTML概述將該文件用瀏覽器打開(kāi)即可看到下圖。HTML概述下表匯總了HTML4.01和XHTML1.0所有的DTD。HTML概述01HTML的相關(guān)基本定義標(biāo)簽前面已經(jīng)介紹過(guò)，用“<”和“”括起來(lái)的叫作標(biāo)簽。03屬性HTML標(biāo)簽可以擁有屬性。屬性提供了有關(guān)HTML元素更多的信息。02元素一對(duì)標(biāo)簽包含的所有代碼，元素的內(nèi)容是開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。HTML概述HTML的常用開(kāi)發(fā)工具正所謂“工欲善其事，必先利其器”，對(duì)HTML5開(kāi)發(fā)人員來(lái)說(shuō)，好工具的使用總會(huì)為人們帶來(lái)事半功倍的效果。所以，找到適合自己的開(kāi)發(fā)工具是至關(guān)重要的。HTML概述02HTML的全局屬性HTML的全局標(biāo)準(zhǔn)屬性全局標(biāo)準(zhǔn)屬性適用于大多數(shù)元素。在HTML規(guī)范中，規(guī)定了8個(gè)全局標(biāo)準(zhǔn)屬性。HTML的全局屬性class用于定義元素的類(lèi)名。通常用于指向CSS樣式表中的類(lèi)，偶爾會(huì)通過(guò)JavaScript改變所有具有指定class的元素。id用于指定元素的唯一id。style用于指定元素的行內(nèi)樣式。title用于指定元素的額外信息。通常會(huì)在鼠標(biāo)移到元素上時(shí)顯示定義的提示文本。HTML的全局屬性tabindex用于指定元素在Tab鍵下的次序。lang用于指定元素內(nèi)容的語(yǔ)言。accesskey用于指定激活某個(gè)元素的快捷鍵。dir用于指定元素中內(nèi)容的文本方向。HTML的全局屬性HTML的全局事件屬性事件是針對(duì)某個(gè)控件或者元素而言的，且可以識(shí)別的操作。例如，針對(duì)按鈕，有單擊或者按下事件；針對(duì)勾選框，有選中事件和取消選中事件，或者稱(chēng)為選中狀態(tài)改變事件；針對(duì)文本框，有獲取輸入焦點(diǎn)事件、文本變化事件等。HTML的全局屬性HTML4的新特性之一是可以使HTML事件觸發(fā)瀏覽器中的行為，如當(dāng)用戶單擊某個(gè)HTML元素時(shí)啟動(dòng)一段JavaScript程序。在HTML中，事件既可以通過(guò)JavaScript直接觸發(fā)，也可以通過(guò)全局事件屬性觸發(fā)。HTML的全局屬性示例代碼：<!DOCTYPE

HTML

PUBLIC

π_//W3C//DTD

HTMI

4.01//EN""http：//www.w3，org/

TR/html4/strict.dtd">HTML的全局屬性運(yùn)行結(jié)果如下圖所示。HTML的全局屬性03HTML的元素HTML的主體元素一個(gè)完整的HTML文檔必須有它的主體元素，前面已經(jīng)給出了一個(gè)基本結(jié)構(gòu)的例子。但它不是一個(gè)完整的HTML文檔，將上面的例子在正中運(yùn)行。HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素一個(gè)最簡(jiǎn)潔的HTML文檔應(yīng)該如下：HTML的元素IE中運(yùn)行結(jié)果正常，如下圖所示。HTML的元素HTML的無(wú)語(yǔ)義元素HTML中每個(gè)標(biāo)簽都有自己的語(yǔ)義。例如，<body>表示主體，<head>表示HTML文件信息頭，<hl>表示一級(jí)標(biāo)題。但也有兩個(gè)無(wú)語(yǔ)義的標(biāo)簽，如<span>和<div>.<span>和<div>的不同之處在于：<span>是內(nèi)聯(lián)標(biāo)簽，用在一行文本中，前后銜接緊密；而<div>是塊級(jí)標(biāo)簽，它等同于其前后有換行。HTML的元素示例代碼：HTML的元素HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML常用<div>標(biāo)簽劃分節(jié)或者區(qū)域，它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)?，F(xiàn)在有很多網(wǎng)頁(yè)的布局方式可以叫作DIV+CSS.DIV用于存放需要顯示的數(shù)據(jù)（文字、圖表等），CSS用于指定如何顯示數(shù)據(jù)樣式，從而做到結(jié)構(gòu)與樣式的相互分離，便于后期維護(hù)與改版。HTML的元素這種布局代碼簡(jiǎn)單，且易于維護(hù)。HTML的元素HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML的標(biāo)題元素<h1><h6>標(biāo)簽可定義標(biāo)題。其中，<h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題。由于<h>元素?fù)碛写_切的語(yǔ)義，因此在開(kāi)發(fā)過(guò)程中需要選擇恰當(dāng)?shù)臉?biāo)簽層級(jí)構(gòu)建文檔的結(jié)構(gòu)。通常，<h1>用于最頂層的標(biāo)題；<h2>、<h3>和<h4>用于較低的層級(jí)；<h5>和<h6>由于文檔層級(jí)關(guān)系，使用頻率比較低。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML的段落元素<p>標(biāo)簽用于定義段落，瀏覽器會(huì)自動(dòng)在其前后創(chuàng)建一些空白。段落的行數(shù)需要依賴(lài)瀏覽器窗口的大小。如果調(diào)節(jié)瀏覽器窗口的大小，將改變段落中的行數(shù)，而且如果段落元素的內(nèi)容中連續(xù)出現(xiàn)了很多空格，或者連續(xù)出現(xiàn)了一個(gè)以上的換行，瀏覽器都將解讀為一個(gè)空格。該標(biāo)簽支持全局標(biāo)準(zhǔn)屬性和全局事件屬性。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML的注釋元素<!--一>用于在HTML中插入注釋?zhuān)拈_(kāi)始標(biāo)簽為<!-，結(jié)束標(biāo)簽為一，開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽不一定在一行，也就是說(shuō)，可以寫(xiě)多行注釋。瀏覽器不會(huì)顯示注釋?zhuān)鳛橐粋€(gè)開(kāi)發(fā)者，經(jīng)常要在一些代碼旁做一些注釋?zhuān)@樣做的好處很多。HTML的元素HTML的格式化元素示例代碼：HTML的元素HTML的元素HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML的圖片元素在HTML中，圖像是由<img>元素定義的，<img>元素是空元素標(biāo)簽，也就是說(shuō)，為了更加嚴(yán)謹(jǐn)和可靠，在實(shí)際開(kāi)發(fā)中，最好寫(xiě)成<img/>。有很多情況，一張圖片可能勝過(guò)千言萬(wàn)語(yǔ)，但是圖片過(guò)多或者過(guò)大，也可能造成用戶的等待，甚至造成用戶不知所云。所以，在編寫(xiě)HTML文檔時(shí)，圖文并茂一定要合理。HTML的元素HTML的超鏈接元素超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許我們同其他網(wǎng)頁(yè)或者站點(diǎn)之間進(jìn)行鏈接的元素。各個(gè)網(wǎng)頁(yè)鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。超鏈接可以是一個(gè)字、一個(gè)詞或者一組詞，也可以是一幅圖像。將鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)超鏈接上時(shí)，鼠標(biāo)箭頭會(huì)變?yōu)橐恢恍∈?。可以說(shuō)，超鏈接是Web頁(yè)面和其他媒體的重要區(qū)別之一。HTML的元素這就需要<a>標(biāo)簽的target屬性進(jìn)行規(guī)定，它的默認(rèn)值為self，其他的值還有_blank、parent、top等，如下表所示。HTML的元素常見(jiàn)的超鏈接大致可以分為以下7種類(lèi)型文本鏈接；錨點(diǎn)鏈接；圖像鏈接；圖像熱區(qū)鏈接；E-mail鏈接；JavaScript鏈接；空鏈接。HTML的元素HTML的列表元素通常人們會(huì)將相關(guān)信息用列表的形式放在一起，這樣會(huì)使內(nèi)容顯得更加有條理性。HTML提供了3種列表模式。HTML的元素?zé)o序列表無(wú)序列表的每一項(xiàng)前綴都顯示為圖形符號(hào)，用<ul>定義無(wú)序列表，用<li>定義列表項(xiàng)。有序列表有序列表的前綴通常為數(shù)字或者字母，用<ol>定義有序列表，用<li>定義列表項(xiàng)。定義列表定義列表是一種特殊的列表，它的內(nèi)容不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。HTML的元素HTML的表格元素表格用<table>標(biāo)簽定義。表格標(biāo)題用<caption>標(biāo)簽定義，每個(gè)表格均有若干行，用<tr>標(biāo)簽定義。每行被分割為若干單元格，用<td>標(biāo)簽定義，當(dāng)單元格是表頭時(shí)，一般用<th>標(biāo)簽定義。HTML的元素<table>標(biāo)簽常用屬性如下表所示。HTML的元素HTML的表單元素在實(shí)際使用中，經(jīng)常會(huì)遇到賬號(hào)注冊(cè)、賬號(hào)登錄、搜索、用戶調(diào)查等，大部分網(wǎng)站在這些問(wèn)題上使用HTML表單與用戶進(jìn)行交互。表單元素允許用戶在表單中輸入內(nèi)容，如文本框、文本域、單選框、復(fù)選框、下拉列表、按鈕等，當(dāng)用戶信息填寫(xiě)完畢后，進(jìn)行提交操作，然后表單可以將用戶在瀏覽時(shí)輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。HTML的元素<input>元素可以通過(guò)type的屬性值定義以下10種表單控件。HTML的元素HTML的框架元素前面講述了網(wǎng)頁(yè)布局，大部分網(wǎng)頁(yè)可以看作DIV+CSS布局方式，但是，有一小部分網(wǎng)頁(yè)不是這么做的，它們可能是table布局方式，也可能是框架集布局方式。table布局方式通篇用<table>元素完成，通常見(jiàn)于報(bào)告單等，使用較少。HTML的元素框架集布局用到了HTML框架集元素，框架集布局和普通布局最大的不同就是，框架集布局可以在同一個(gè)瀏覽器窗口顯示一個(gè)以上的頁(yè)面?？蚣芗季衷趯?xiě)法上，首先是DTD的不同，需要用到框架集模式。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示，圖中左側(cè)的淘寶網(wǎng)無(wú)法下拉，并且無(wú)法調(diào)整大小。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素04HTML的預(yù)留字符在編程語(yǔ)言中有大量的保留字，這些保留字不能用作變量名或者過(guò)程名。同樣，在HTML中也存在大量的類(lèi)似字符，稱(chēng)作預(yù)留字符。在實(shí)際開(kāi)發(fā)中，這些預(yù)留字符是不能使用的，因?yàn)闉g覽器可能會(huì)誤讀我們想要表達(dá)的內(nèi)容。HTML的預(yù)留字符常見(jiàn)的HTML需要轉(zhuǎn)義的字符可以查看下表。HTML的預(yù)留字符HTML還提供了大量的實(shí)體字符，用于輸入一些特殊符號(hào)，如下表所示。HTML的預(yù)留字符05本章小結(jié)本章主要介紹了HTML和XHTML的歷史，需要重點(diǎn)掌握HTML4的元素及其用法，并了解HTML的全局事件屬性，為學(xué)習(xí)CSS和JavaScript奠定基礎(chǔ)。本章小結(jié)CSS基礎(chǔ)第三章Web前端開(kāi)發(fā)初級(jí)(上冊(cè))“十三五”職業(yè)教育國(guó)家規(guī)劃教材學(xué)習(xí)路線CSS基礎(chǔ)01什么是CSSCSS，英文全稱(chēng)是CascadingStyleSheets，中文名為級(jí)聯(lián)樣式單，也有人稱(chēng)其為層疊樣式單。層疊就是樣式可以層層疊加，可以對(duì)一個(gè)元素多次設(shè)置樣式，后面定義的樣式會(huì)對(duì)前面定義的樣式進(jìn)行重寫(xiě)，在瀏覽器中看到的效果是使用最后一次設(shè)置的樣式。什么是CSSCSS是一種表現(xiàn)語(yǔ)言，是對(duì)網(wǎng)頁(yè)結(jié)構(gòu)語(yǔ)言的補(bǔ)充。CSS主要用于網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)，包括字體、顏色、位置等方面的設(shè)計(jì)。在HTML網(wǎng)頁(yè)中加入CSS，可以使網(wǎng)頁(yè)展現(xiàn)更豐富的內(nèi)容。什么是CSS02CSS的歷史CSS1.0發(fā)布于1996年12月，這個(gè)版本提供了有關(guān)文字、顏色、位置和文本屬性等基本信息。發(fā)布于1998年5月，這個(gè)版本提供了比CSS1.0更強(qiáng)的XML和HTML文檔的格式化功能。CSS的歷史CSS2.0CSS2.1由于當(dāng)時(shí)瀏覽器支持性不太好，存在各種各樣的漏洞，使開(kāi)發(fā)一個(gè)跨平臺(tái)且表現(xiàn)一致的網(wǎng)頁(yè)十分困難，故W3C于2007年發(fā)布了CSS2.1。是CSS2.0修訂的第一版，糾正了CSS2.0中的一些錯(cuò)誤，刪除和修改了一些屬性和行為，2011年6月成為標(biāo)準(zhǔn)。CSS的歷史03CSS樣式單的使用方法CSS樣式單可以增強(qiáng)HTML文檔的顯示效果。為了在HTML中使用CSS樣式單，通常有以下4種方式。CSS樣式單的使用方法導(dǎo)入外部樣式文件通過(guò)<style>元素使用@import導(dǎo)入，效果與引入外部樣式文件相同。使用內(nèi)聯(lián)樣式定義將CSS樣式單寫(xiě)到元素的通用屬性style中，這種方式只對(duì)單個(gè)元素有效。引入外部樣式文件過(guò)<link>元素引入外部樣式文件，外部樣式文件通常是CSS后綴的文件。使用內(nèi)部樣式定義直接將CSS樣式單寫(xiě)在<style>元素中作為元素的內(nèi)容。CSS樣式單的使用方法04CSS的兩個(gè)特性CSS的第一個(gè)特性是“層疊”，也就是說(shuō)，一個(gè)HTML文檔可能會(huì)使用多種CSS樣式單，細(xì)化到某元素來(lái)說(shuō)，會(huì)層疊多層樣式單，但生效的總會(huì)有一個(gè)順序。CSS的第二個(gè)特性是“繼承”，繼承指的是特定的CSS屬性可以從父元素向下傳遞到子元素。CSS的兩個(gè)特性繼承示例代碼：CSS的兩個(gè)特性運(yùn)行結(jié)果如下圖所示。CSS的兩個(gè)特性05CSS的基本語(yǔ)法CSS由兩部分組成：selector{propertyl：valuel；property2：value2；property3：value3；…}其中，selector被稱(chēng)為選擇器，選擇器決定了樣式定義對(duì)哪些元素生效。property：value被稱(chēng)為樣式，每一條樣式都決定了目標(biāo)元素將會(huì)發(fā)生的變化。CSS的基本語(yǔ)法（1）一般來(lái)說(shuō)，一行定義一條樣式，每條聲明末尾都需要加上分號(hào)。（2）CSS對(duì)大小寫(xiě)不敏感，但在實(shí)際編寫(xiě)中，推薦屬性名和屬性值皆用小寫(xiě)。CSS的基本語(yǔ)法06CSS的選擇器元素選擇器元素選擇器示例代碼：CSS的選擇器運(yùn)行結(jié)果如下圖所示。CSS的選擇器通配符選擇器通配符選擇器示例代碼：CSS的選擇器運(yùn)行結(jié)果如下圖所示。CSS的選擇器屬性選擇器對(duì)帶有指定屬性的HTML元素設(shè)置樣式。從廣義的角度來(lái)看，元素選擇器是屬性選擇器的特例，是一種忽視指定HTML元素的屬性選擇器。CSS的選擇器屬性選擇器的語(yǔ)法格式共有4種，如下表所示。CSS的選擇器派生選擇器/上下文選擇器后代選擇器派生選擇器依據(jù)元素在其位置的上下文關(guān)系定義樣式，在CSS1.0中，這種選擇器被稱(chēng)為上下文選擇器，CSS2.0改名為派生選擇器。后代選擇器（DescendantSelector）可以選擇某元素后代的元素，后代選擇器中兩個(gè)元素之間的間隔可以是無(wú)限的。CSS的選擇器子元素選擇器子元素選擇器（ChildSelectors）只能選擇作為某元素子元素的元素。相鄰兄弟選擇器相鄰兄弟選擇器（AdjacentSiblingSelector）可以選擇緊接在另一元素后的元素，且二者有相同父元素。CSS的選擇器id選擇器id選擇器示例代碼：CSS的選擇器運(yùn)行結(jié)果如下圖所示。CSS的選擇器類(lèi)選擇器類(lèi)選擇器示例代碼：CSS的選擇器運(yùn)行結(jié)果如下圖所示。CSS的選擇器偽類(lèi)選擇器在選取元素時(shí)，CSS除了可以根據(jù)元素名、id、class、屬性選取元素，還可以根據(jù)元素的特殊狀態(tài)選取元素，即偽類(lèi)選擇器和偽元素選擇器。偽類(lèi)是指那些處在特殊狀態(tài)的元素。偽類(lèi)名可以單獨(dú)使用，泛指所有元素，也可以和元素名稱(chēng)連起來(lái)使用，特指某類(lèi)元素。偽類(lèi)以冒號(hào)（：）開(kāi)頭，元素選擇符和冒號(hào)之間不能有空格，偽類(lèi)名中間也不能有空格。CSS的選擇器CSS中常用的偽類(lèi)如下表所示。CSS的選擇器偽元素選擇器偽元素是指那些元素中特別的內(nèi)容，與偽類(lèi)不同的是，偽元素表示的是元素內(nèi)部的東西。邏輯上存在，但在文檔樹(shù)中并不存在與之對(duì)應(yīng)關(guān)聯(lián)的部分。偽元素選擇器的格式與偽類(lèi)選擇器一致。CSS的選擇器在CSS中常用的偽元素如下表所示。CSS的選擇器07CSS的屬性CSS背景屬性CSS允許為任何元素添加純色作為背景，也允許使用圖像作為背景，并且可以精準(zhǔn)地控制背景圖像，以達(dá)到精美的效果。CSS的屬性CSS背景屬性如下表所示。CSS的屬性CSS字體屬性HTML最核心的內(nèi)容還是以文本內(nèi)容為主，CSS也為HTML的文字設(shè)置了字體屬性，不僅可以更換不同的字體，還可以設(shè)置文字的風(fēng)格等。CSS的屬性CSS中常用字體屬性如下表所示。CSS的屬性CSS文本屬性我們經(jīng)常需要控制HTML網(wǎng)頁(yè)中文本的顏色、對(duì)齊方式、換行風(fēng)格等顯示效果，這些效果都是由CSS文本屬性控制的。CSS的屬性CSS中常用文本屬性如下表所示。CSS的屬性CSS尺寸屬性CSS可以控制每個(gè)元素的大小、包含寬度，以及最小寬度、最大寬度、高度、最小高度、最大高度。CSS的屬性CSS尺寸屬性如下表所示。CSS的屬性CSS列表屬性CSS列表屬性用于改