牛牛怎么配牌

書名： Java Web 從入門到項目實踐(超值版)
作者名：聚慕課教育研發中心
本章字數： 4546字
更新時間： 2019-12-20 12:09:29

第3章　網頁的基石——HTML與CSS基礎

學習指引

HTML也叫作超文本標記語言，它是網頁設計的基礎，也是網站開發者必須熟練掌握的一門標記語言。本章將講解HTML的基礎知識。

重點導讀

?　掌握HTML文檔的基本結構。

?　了解HTML的常見元素。

?　了解CSS語法。

3.1　HTML簡介

前端即網站前臺部分，指運行在PC端、移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展，HTML 5、CSS 3、前端框架的應用，跨平臺響應式網頁設計已經能夠適應各種屏幕分辨率，完美的動效設計，給用戶帶來極高的用戶體驗。

HTML是前端開發人員的必備技能，也是所有程序開發人員都常用到的工具。HTML是指超文本標記語言（Hyper Text Markup Language），是標準通用標記語言下的一個應用。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標記語言的結構包括“頭”部分和“主體”部分，其中，“頭”部分提供關于網頁的信息，“主體”部分提供網頁的具體內容。

3.1.1　HTML元素和屬性

1. HTML元素

HTML元素指從開始標簽到結束標簽的所有代碼，如表3-1所示。

表3-1　HTML元素實例

2. HTML元素語法

（1）HTML元素通常以開始標簽起始，以結束標簽終止。

（2）元素的內容是開始標簽與結束標簽之間的內容。

（3）有些HTML元素具有空內容，空元素在標簽中關閉（以開始標簽的結束而結束）。

（4）大多數HTML元素可設置屬性。

3. 嵌套HTML元素

大多數HTML元素可以嵌套其他HTML元素。

HTML文檔由嵌套的HTML元素構成。

HTML文檔實例：

上面這段HTML代碼包含三個嵌套的HTML元素，分別如下。

1）<p>元素

     <p>Hello World！</p>

這個<p>元素定義了HTML文檔中的一個段落。

這個元素擁有一個開始標簽<p>，以及一個結束標簽</p>。

元素內容是：Hello World！。

2）<body>元素

<body>元素定義了HTML文檔的主體。

這個元素擁有一個開始標簽<body>，以及一個結束標簽</body>。

元素內容是另一個HTML元素（<p>元素）。

3）<html>元素

     <html>
     <body>
     <p> Hello World！</p>
     </body>
     </html>

<html>元素定義了整個HTML文檔。

這個元素擁有一個開始標簽<html>，以及一個結束標簽</html>。

元素內容是另一個HTML元素（<body>元素）。

3.1.2　HTML樣式

樣式是HTML 4引入的，它是一種新的首選的改變HTML元素樣式的方式。通過HTML樣式，能夠通過使用style屬性直接將樣式添加到HTML元素，或者間接地在獨立的樣式表中（CSS文件）進行定義。

【例3-1】HTML樣式實例–字體樣式。

運行結果：style樣式中指定了font-family、color、font-size三種樣式，運行結果如圖3-1所示。

圖3-1　HTML樣式實例–字體樣式

【例3-2】HTML樣式實例–背景顏色。

運行結果：style樣式實例分別為<body>、<h2>、<p>指定了background-color樣式，設置其背景顏色依次為：灰色、紅色、黃色，運行結果如圖3-2所示。

圖3-2　HTML樣式實例–背景顏色

【例3-3】HTML樣式實例–文本對齊。

運行結果：style樣式分別為<h1>、<p>指定了text-align樣式，設置其文本對齊方式均為居中對齊，運行結果如圖3-3所示。

圖3-3　HTML樣式實例–文本對齊

3.1.3　超鏈接

HTML使用超鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。單擊鏈接可以從一個頁面跳轉到另一個頁面。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一張圖片，單擊這些內容可以跳轉到新的文檔或者當前文檔中的某個部分。

可以使用<a>標簽在HTML中創建超鏈接，使用<a>標簽的方式有以下兩種。

（1）通過使用href屬性創建指向另一個文檔的鏈接。

（2）通過使用name屬性創建文檔內的書簽。

超鏈接的HTML代碼很簡單，通常以如下方式創建超鏈接。

     <a href="url">超鏈接文本</a>

href屬性規定鏈接的目標，開始標簽和結束標簽之間的文字被作為超級鏈接來顯示。

【例3-4】超鏈接實例。

運行結果如圖3-4所示，單擊Hello World！即可進入超鏈接指向的頁面。

圖3-4　超鏈接實例

3.1.4　圖像標簽

在HTML中，圖像由<img>標簽定義。

<img>是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。

要在頁面上顯示圖像，需要使用源屬性（src）。

src即source。源屬性的值是圖像的URL地址。

定義圖像的語法是：

     <img src="url" />

URL指存儲圖像的位置，可以是相對位置，也可以是絕對位置。

瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。

     替換文本屬性（alt）

alt屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。

     <img src="url" alt="text">

在瀏覽器無法載入圖像時，替換文本屬性可以告訴讀者丟失的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是一個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

【例3-5】圖像標簽實例。

運行結果如圖3-5所示。

圖3-5　圖像標簽實例

3.1.5　HTML表格

表格由<table>標簽來定義。每個表格均有若干行（由<tr>標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母td指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。

【例3-6】表格實例。

運行結果：在瀏覽器中的顯示如圖3-6所示。

圖3-6　表格實例

1. 邊框屬性

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格：

2. 表格的表頭

表格的表頭使用<th>標簽進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文本。

【例3-7】表頭實例。

運行結果：在瀏覽器中的顯示如圖3-7所示。

圖3-7　表頭實例

3.1.6　HTML頭部元素

1. HTML <head>元素

<head>元素是所有頭部元素的容器。<head>內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，以及提供元信息等。

以下標簽都可以添加到head部分：<title>、<base>、<link>、<meta>、<script>、<style>。

2. HTML <title>元素

<title>標簽定義文檔的標題。

title元素能夠定義瀏覽器工具欄中的標題，提供頁面被添加到收藏夾時顯示的標題，顯示在搜索引擎結果中的頁面標題。

一個簡化的HTML文檔如下。

3. HTML <base>元素

<base>標簽為頁面上的所有鏈接規定默認地址或默認目標（target）。

4. HTML <link>元素

5. HTML <style>元素

6. HTML <meta>元素

元數據（metadata）是關于數據的信息。

典型的情況是，meta元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。

元數據可用于瀏覽器（如何顯示內容或重新加載頁面）、搜索引擎（關鍵詞），或其他Web服務。

一些搜索引擎會利用meta元素的name和content屬性來索引頁面。

下面的meta元素定義頁面的描述。

     <meta name="description" content="百度一下，你就知道" />

下面的meta元素定義頁面的關鍵詞。

     <meta name="keywords" content="HTML, CSS " />

name和content屬性的作用是描述頁面的內容。

7. HTML <script>元素

3.1.7　表單

在HTML中表單用于收集用戶輸入信息。

<form>元素定義HTML表單：

     <form>
     表單元素
     </form>

表單元素指的是不同類型的input元素、復選框、單選按鈕、提交按鈕等。

<input>元素是最重要的表單元素。

<input>元素有很多形態，可以根據不同的type屬性改變。

<input>元素的常用類型如表3-2所示。

表3-2　<input>元素的常用類型

【例3-8】input元素常用類型實例。

<input type="text">定義用于文本輸入的單行輸入字段。

運行結果：實例中用到text、radio、submit、reset類型，運行結果如圖3-8所示。

圖3-8　input元素常用類型實例

1. action屬性

action屬性定義在提交表單時執行的動作，通常表單會被提交到Web服務器上的網頁。

例如：<form action="action_page.jsp">

如果省略action屬性，則action會被設置為當前頁面。

2. method屬性

method屬性規定在提交表單時所用的HTTP方法（GET或POST）。

     <form action="action_page.jsp" method="GET">

或：

     <form action="action_page.jsp" method="POST">

1）GET方法（默認方法）

使用GET方法時，表單數據在頁面地址欄中是可見的。

     action_page.jsp?name=Name&tel=Tel

GET最適合少量數據的提交。瀏覽器會設定容量限制。

2）POST方法

如果表單正在更新數據，或者包含敏感信息（例如密碼），POST的安全性更佳，因為在頁面地址欄中被提交的數據是不可見的。

3. name屬性

要正確地提交數據，每個輸入字段必須設置一個name屬性。

如以下代碼只會提交姓名字段。

4. form屬性

HTML <form>元素，若設置所有可能的屬性，是這樣的：

     <form action="action_page.jsp" method="GET" target="_blank" accept-charset="UTF-8"
     ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
     表單元素
     </form>

<form>的屬性及描述如表3-3所示。

表3-3　<form>的屬性及描述

3.1.8　HTML事件

本節以表格形式列出HTML常用事件，但不做演示，讀者可自行學習。

1. Window事件屬性

針對Window對象觸發的事件（應用到<body>標簽），如表3-4所示。

表3-4　Window事件屬性

2. Form事件

由HTML表單內的動作觸發的事件（應用到幾乎所有HTML元素，但最常用在form元素中），如表3-5所示。

表3-5　Form事件屬性

3. Mouse事件

由鼠標或類似用戶動作觸發的事件，如表3-6所示。

表3-6　Mouse事件屬性

4. Keyboard事件

由鍵盤或類似用戶動作觸發的事件，如表3-7所示。

表3-7　Keyboard事件屬性

3.2　CSS簡介

層疊樣式表（Cascading Style Sheets，CSS）是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

在CSS還沒有引入到頁面設計之前，傳統的HTML要實現頁面美化在設計上是十分麻煩的，例如要設計頁面中文字的樣式，如果使用傳統的HTML語句來設計頁面就不得不在每個需要設計的文字上都定義樣式。CSS的出現改變了這一傳統模式。

3.2.1　CSS語法

CSS語法由兩個主要的部分構成：選擇器，以及一條或多條聲明。例如：

     selector {declaration1; declaration2;…;declarationN }

所有HTML中的標記都是通過不同的CSS選擇器進行控制的。

每條聲明由一個屬性和一個值組成。

屬性（property）是希望設置的樣式屬性（style attribute）。每個屬性有一個值，屬性和值之間用冒號分開。

     selector {property: value}

例如：

其中，background是屬性，red是background屬性的一個值。

3.2.2　CSS選擇器

常用的CSS選擇器有標簽選擇器，類選擇器，id選擇器等。使用選擇器可以對不同的HTML元素進行樣式控制，實現樣式效果。

1. 標簽選擇器

最常見的CSS選擇器是標簽選擇器，文檔的元素就是最基本的選擇器。如果設置HTML的樣式，選擇器通常是某個HTML標簽，如p、h1、em、a，甚至可以是html本身。

例如：

2. 類選擇器

標簽選擇器在使用中非常簡捷，但是會有一定的局限性，如果聲明了標簽選擇器，頁面中所有該標簽都會應用該樣式。假如頁面中有三個<span>標簽，如果想讓每個顯示效果都不一樣，使用標簽選擇器就無法實現了。

類選擇器允許以一種獨立于文檔元素的方式來指定樣式。類選擇器的名稱由用戶自己定義，以“.”開頭，在HTML頁面中使用自己定義的class屬性聲明即可。

只有適當地使用class屬性標記文檔后，才能使用類選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。

例如：

以下是<body>中<span>標簽的定義方法：

     <span class="one">一</span>
     <span class="two">二</span>
     <span class="three">三</span>

3. id選擇器

id選擇器通過HTML元素的id屬性來選擇增添樣式，與類選擇器使用方法類似。但是HTML頁面中不能包含兩個相同的id標記，因此定義的id選擇器只能被使用一次。

id選擇器以“#”號開始，在HTML頁面中使用自己定義的id屬性聲明即可。

例如：

以下是<body>中<span>標簽的定義方法。

     <span class=" span_text " id=" one">一</span>
     <span class=" span_text " id=" two">二</span>
     <span class=" span_text " id= " three ">三</span>

3.3　綜合案例

利用本章學習的HTML與CSS基礎知識，以及簡單的JavaScript語句，完成對輸入信息的收集與展示。

【例3-9】HTML基礎綜合案例。

運行結果如圖3-9和圖3-10所示。

圖3-9　頁面顯示效果

圖3-10　提交信息后頁面彈出對話框

3.4　就業面試解析與技巧

本章所講的都是HTML與CSS基礎知識，在前端開發的就業面試中，這些是遠遠不夠的，讀者還需要更深入地學習掌握JavaScript、jQuery等知識。

3.4.1　面試解析與技巧（一）

面試官：行內元素有哪些？塊級元素有哪些？空元素有哪些？

應聘者：

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea。

塊級元素：div、ul、li、dl、dt、dd、p、h1~h6、blockquote。

空元素：即沒有內容的HTML元素，例如，br、meta、hr、link、input、img。

3.4.2　面試解析與技巧（二）

面試官：簡述src與href的區別。

應聘者：

href是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如，JS腳本，圖片和框架等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將JS腳本放在底部而不是頭部的原因。

官术网_书友最值得收藏!

Java Web 從入門到項目實踐(超值版)

第3章 網頁的基石——HTML與CSS基礎

3.1 HTML簡介

3.1.1 HTML元素和屬性