HTML+CSS基礎(HTML篇)

在日常開發Android中，很多時候會遇到和WebView打交道，對CSS HTML JS不是很清楚的話是完不成一些功能的，本篇開始學習HTML，文章的主要内容是總結了慕課網中，HTML+CSS基礎課程中筆記的總結。

學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實作什麼的：

HTML是網頁内容的載體。内容就是網頁制作者放在頁面上想要讓使用者浏覽的資訊，可以包含文字、圖檔、視訊等。

CSS樣式是表現。就像網頁的外衣。比如，标題字型、顔色變化，或為标題加入背景圖檔、邊框等。所有這些用來改變内容外觀的東西稱之為表現。

JavaScript是用來實作網頁上的特效效果。如：滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顔色改變。還有焦點新聞（新聞圖檔）的輪換。可以這麼了解，有動畫的，有互動的一般都是用JavaScript來實作的。

這一節中我們來學習html檔案的結構：一個HTML檔案是有自己固定的結構的。

代碼講解：

<html></html>稱為根标簽，所有的網頁标簽都在<html></html>中。

<head> 标簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等标簽，頭部标簽在下一小節中會有詳細介紹。

在<body>和</body>标簽之間的内容是網頁的主要内容，如<h1>、<p>、<a>、<img>等網頁内容标簽，在這裡的标簽中的内容會在浏覽器中顯示出來。

認識head标簽

接下來通過一個網頁的學習，來對html标簽有一個初步了解。平常大家說的上網就是浏覽各種各式各樣的網頁，這些網頁都是由html标簽組成的。下面就是一個簡單的網頁。效果圖如下：

我們來分析一下，這個網頁由哪些html标簽組成：

“勇氣”是網頁内容文章的标題，<h1></h1>

就是标題标簽，它在網頁上的代碼寫成<h1>勇氣</h1>

。

“三年級時...我也沒勇氣參加。” 是網頁中文章的段落，<p></p>

是段落标簽。它在網頁上的代碼寫成 <p>三年級時...我也沒勇氣參加。</p>

網頁上那張小女生的圖檔，由img

标簽來完成的，它在網頁上的代碼寫成

網頁的完整代碼如下圖：

總結一下，可以這麼說，網頁中每一個内容在浏覽器中的顯示，都要存放到各種标簽中，是不是SO EASY~

标簽由英文尖括号<和>括起來，如<html>就是一個标簽。

html中的标簽一般都是成對出現的，分開始标簽和結束标簽。結束标簽比開始标簽多了一個/。

如：

（1） <p></p>

（2） <div></div>

（3） <span></span>

标簽與标簽之間是可以嵌套的，但先後順序必須保持一緻，如：<div>裡嵌套<p>，那麼</p>必須放在</div>的前面。如下圖所示。

HTML标簽不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程式員都以小寫為準。

<head>标簽的作用。文檔的頭部描述了文檔的各種屬性和資訊，包括文檔的标題等。絕大多數文檔頭部包含的資料都不會真正作為内容顯示給讀者。

下面這些标簽可用在 head 部分：

<title>标簽：在<title>和</title>标簽之間的文字内容是網頁的标題資訊，它會出現在浏覽器的标題欄中。網頁的title标簽用于告訴使用者和搜尋引擎這個網頁的主要内容是什麼，搜尋引擎可以通過網頁标題，迅速的判斷出網頁的主題。每個網頁的内容都是不同的，每個網頁都應該有一個獨一無二的title。

例如：

<title>标簽的内容“hello world”會在浏覽器中的标題欄上顯示出來，如下圖所示：

<head>标簽中的其它标簽内容的講解，會在以後的章節中一一講解。

現在要開始把網頁中常用到的标簽一一向大家介紹，學習這一章節的時候要記住學習html标簽過程中，主要注意兩個方面的學習：标簽的用途、标簽在浏覽器中的預設樣式。

标簽的用途：我們學習網頁制作時，常常會聽到一個詞，語義化。那麼什麼叫做語義化呢，說的通俗點就是：明白每個标簽的用途（在什麼情況下使用此标簽合理）比如，網頁上的文章的标題就可以用标題标簽，網頁上的各個欄目的欄目名稱也可以使用标題标簽。文章中内容的段落就得放在段落标簽中，在文章中有想強調的文本，就可以使用 em 标簽表示強調等等。

這麼多語義化，但是語義化可以給我們帶來什麼樣的好處呢？

更容易被搜尋引擎收錄。

更容易讓螢幕閱讀器讀出網頁内容。

在網頁上要展示出來的頁面内容一定要放在body标簽中。如下圖是一個新聞文章的網頁。

在浏覽器中的顯示效果：

如果想在網頁上顯示文章，這時就需要<p>标簽了，把文章的段落放到<p>标簽中。

文法：

如下圖所示。

在浏覽器中顯示的效果：

<p>标簽的預設樣式，可以在上圖中看出來，段前段後都會有空白，如果不喜歡這個空白，可以用css樣式來删除或改變它

注意一段文字一個<p>标簽，如在一篇新聞文章中有3段文字，就要把這3個段落分别放到3個<p>标簽中。

使用<hx>标簽來制作文章的标題。

标題标簽一共有6個，h1、h2、h3、h4、h5、h6分别為一級标題、二級标題、三級标題、四級标題、五級标題、六級标題。并且依據重要性遞減。<h1>是最高的等級。

如下圖為騰訊網站。

注意：因為h1标簽在網頁中比較重要，是以一般h1

标簽被用在網站名稱上。騰訊網站就是這樣做的。如：<h1>騰訊網</h1>

文章的标題前面已經說過了，可以使用标題标簽，另外網頁上的各個欄目的标題也可使用它們.

有了段落又有了标題，現在如果想在一段話中特别強調某幾個文字，這時候就可以用到<em>或<strong>标簽。

但兩者在強調的語氣上有差別:<em> 表示強調，<strong> 表示更強烈的強調。并且在浏覽器中<em> 預設用斜體表示，<strong> 用粗體表示。兩個标簽相比，目前國内前端程式員更喜歡使用<strong>表示強調。

在浏覽器中預設樣式是有差別的：

原代碼，如下圖。

浏覽器中的樣子，如下圖。

<em>的内容在浏覽中顯示為斜體，<strong>顯示為加粗。如果不喜歡這種樣式，沒有關系，以後可以使用css樣式去改變它

我們對<em>、<strong>、<span>這三個标簽進行一下總結：

<em>和<strong>标簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。

<span>标簽是沒有語義的，它的作用就是為了設定單獨的樣式用的。

如果現在我們想把上一小節的第一段話“美國夢”三個字設定成blue（藍色），但注意不是為了強調“美國夢”，而隻是想為它設定和其它文字不同的樣式（并不想讓螢幕閱讀器對“美國夢”這三個字加重音讀出），是以這樣情況下就可以用到<span>标簽了。

想在你的html中加一段引用嗎？比如在你的網頁的文章裡想引用某個作家的一句詩，這樣會使你的文章更加出彩，那麼<q>标簽是你所需要的。

如下面例子：

講解：

在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隐的《錦瑟》。因為不是作者自己的文字，是以需要使用<q></q>實作引用。

注意要引用的文本不用加雙引号，浏覽器會對q标簽自動添加雙引号。

<blockquote>的作用也是引用别人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個标簽。

等等，上一節<q>标簽不是也是對文本的引用嗎？不要忘記<q>标簽是對簡短文本的引用，比如說引用一句話就用到<q>标簽。

如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，是以使用<blockquote>。

文法:

與以前我們學過的标簽不一樣，<code><br /></code>标簽是一個空标簽，沒有HTML内容的标簽就是空标簽，空标簽隻需要寫一個開始标簽，這樣的标簽有<code><br />、<hr />和<img />。</code>

在 html 代碼中輸入回車、空格都是沒有作用的。在html文本中想輸入回車換行，就必須輸入<code><br /></code>。

xhtml1.0寫法：

html4.01寫法：

在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入<code></code>。注意，後面一定要有分号才行。

在資訊展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。

<code>xhtml1.0版本 <hr /></code>

注意：

<hr />标簽和<br />标簽一樣也是一個空标簽，是以隻有一個開始标簽，沒有結束标簽。

<hr />标簽的在浏覽器中的預設樣式線條比較粗，顔色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。

大家注意，現在一般使用 xhtml1.0 的版本（其它标簽也是），這種版本比較規範。

一般網頁中會有一些網站的聯系位址資訊需要在網頁中展示出來，這些聯系位址資訊如公司的位址就可以<address>标簽。也可以定義一個位址（比如電子郵件位址）、簽名或者文檔的作者身份。

<code><address>聯系位址資訊</address></code>

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的程式設計代碼，當代碼為一行代碼時，你就可以使用<code>标簽了，如下面例子：

注意：在文章中一般如果要插入多行代碼時不能使用<code>标簽了。

注：如果是多行代碼，可以使用<code><pre></code>标簽。

<code><pre>語言代碼段</pre></code>

<code><pre></code> 标簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留白格和換行符。

如下代碼：

<code><pre> var message="歡迎"; for(var i=1;i<=10;i++) { alert(message); }</pre></code>

在浏覽器中的顯示結果為：

在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<code><br></code>簽，空格需要輸入<code>&nbsp</code>;

<code><pre></code>标簽不隻是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，隻是<pre>标簽的一個常見應用就是用來展示計算機的源代碼。

舉例：

ul-li在網頁中顯示的預設樣式一般為：每項li前都自帶一個圓點，如下圖所示：

如果想在網頁中展示有前後順序的資訊清單，怎麼辦呢？如，當當網上的書籍熱賣排行榜，如下圖所示。這類資訊展示就可以使用<code><ol></code>标簽來制作有序清單來展示。

下面是一個熱點課程下載下傳排行榜：

<code><ol></code>在網頁中顯示的預設樣式一般為：每項<code><li></code>

前都自帶一個序号，序号預設從1開始，如下圖所示：

在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>

标簽中，這個<div>标簽的作用就相當于一個容器。

确定邏輯部分：

什麼是邏輯部分？它是頁面上互相關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框标出的部分就是一個邏輯部分，就可以使用<div>

标簽作為容器。

給div命名，使邏輯更加清晰

為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設定一個名稱，用id

屬性來為<div>

提供唯一的名稱，這個就像我們每個人都有一個身份證号，這個身份證号是唯一辨別我們的身份的，也是必須唯一的。

如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的了解呢？是不是右邊的那幅圖呢。

有時候我們需要在網頁上展示一些資料，如某公司想在網頁上展示公司的庫存清單。如下表：

想在網頁上展示上述表格效果可以使用以下代碼：

建立表格的四個元素：

table、tbody、tr、th、td

1、<table>…</table>：整個表格以<table>

标記開始、</table>

标記結束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完後才顯示。加上這些表格結構， tbody包含行的内容下載下傳完優先顯示，不必等待表格結束後在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗了解table 可以按結構一塊塊的顯示，不在等整個表格加載完後顯示。）

3、<tr>…</tr>：表格的一行，是以有幾對tr 表格就有幾行。

4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>

，說明一行中就有幾列。

tr是“table row（表格行）”的縮寫，用于表示一行的開始和結束。這也容易了解。

td是“table data（表格資料）”的縮寫，用于表示行中各個單元格（cell）的開始和結束。

5、<th>…</th>：表格的頭部的一個單元格，表格表頭。

6、表格中列的個數，取決于一行中資料單元格的個數。

上述代碼在浏覽器中顯示的預設的樣式為：

總結：

1、table表格在沒有添加css樣式之前，在浏覽器中顯示是沒有表格線的

2、表頭，也就是th标簽中的文本預設為粗體并且居中顯示

Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們後期合并單元格知識點的講解，是以在這一節中我們為表格添加一些樣式，為它添加邊框。

在右側代碼編輯器中添加如下代碼：

上述代碼是用 css 樣式代碼（後面章節會詳細講解），為th

，t單元格添加粗細為一個像素的黑色邊框。

結果視窗顯示出結果樣式：

2.17 caption标簽，為表格添加标題和摘要

表格還是需要添加一些标簽進行優化，可以添加标題和摘要。代碼如下：

摘要

摘要的内容是不會在浏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格内容，還可以使螢幕閱讀器更好的幫助特殊使用者讀取表格内容。

文法：<table summary="表格簡介文本">

标題

用以描述表格内容，标題的顯示位置：表格上方。

href：Hypertext Reference的縮寫。意思是超文本引用。

使用<a>标簽可實作超連結，它在網頁制作中可以說是無處不在，隻要有連結的地方，就會有這個标簽。

<code><a href="目标網址" title="滑鼠滑過顯示的文本">連結顯示的文本</a></code>

<code><a href="http://www.imooc.com" title="點選進入慕課網">click here!</a></code>

上面例子作用是單擊click here!文字，網頁連結到http://www.imooc.com這個網頁。

title屬性的作用，滑鼠滑過連結文字時會顯示這個屬性的文本内容。這個屬性在實際網頁開發中作用很大，主要友善搜尋引擎了解連結位址的内容（語義化更友好），如右側案例代碼（8-12行）。

注意：還有一個有趣的現象不知道小夥伴們發現了沒有，隻要為文本加入a标簽後，文字的顔色就會自動變為藍色（被點選過的文本顔色為紫色），顔色很難看吧，不過沒有關系後面我們學習了css樣子就可以設定過來（a{color:#000}),後面會詳細講解。

在建立浏覽器視窗中打開連結

<a>标簽在預設情況下，連結的網頁是在目前浏覽器視窗中打開，有時我們需要在新的浏覽器視窗中打開。

<code><a href="目标網址" target="_blank">click here!</a></code>

target之前一定要加空格！

擴充：

_blank -- 在新視窗中打開連結

_parent -- 在父窗體中打開連結

_self -- 在目前窗體打開連結,此為預設值

_top -- 在目前窗體打開連結，并替換目前的整個窗體(架構頁)

<a>标簽還有一個作用是可以連結Email位址，使用mailto能讓通路者便捷向網站管理者發送電子郵件。我們還可以利用mailto

做許多其它事情。下面一一進行講解，請看詳細圖示：

注意：如果mailto後面同時有多個參數的話，第一個參數必須以“?

”開頭，後面的參數每一個都以“&

”分隔。

下面是一個完整的執行個體:

在浏覽器中顯示的結果：

發送

點選連結會打開電子郵件應用，并自動填寫收件人等設定好的資訊，如下圖：

舉個栗子：

1、發送人郵箱位址：[email protected]。

2、郵件主題：觀了不起的蓋茨比有感。

3、郵件内容：你好，對此評論有些想法。

在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖檔，可以使用<img>标簽來插入圖檔。

src：辨別圖像的位置；

alt：指定圖像的描述性文本，當圖像不可見時（下載下傳不成功時），可看到該屬性指定的文本；

title：提供在圖像可見時對圖像的描述(滑鼠滑過圖檔時顯示的文本)；

圖像可以是GIF，PNG，JPEG格式的圖像檔案。

網站怎樣與使用者進行互動？答案是使用HTML表單(form)。表單是可以把浏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。

1.<form> ：<form>标簽是成對出現的，以<form>開始，以</form>結束。

2.action ：浏覽者輸入的資料被傳送到的地方,比如一個PHP頁面(save.php)。

3.method ：資料傳送的方式（get/post）。

注意:

1、所有表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在 <form></form> 标簽之間（否則使用者輸入的資訊可送出不到伺服器上哦！）。

2、method : post/get 的差別這一部分内容屬于後端程式員考慮的問題。感興趣的小夥伴可以檢視本小節的 wiki，裡面有詳細介紹。

hidden 定義隐藏輸入字段

image 定義圖像作為送出按鈕

number 定義帶有 spinner 控件的數字字段

password 定義密碼字段。字段中的字元會被遮蔽

radio 定義單選按鈕

range 定義帶有 slider 控件的數字字段

reset 定義重置按鈕。重置按鈕會将所有表單字段重置為初始值

search 定義用于搜尋的文本字段

submit 定義送出按鈕。送出按鈕向伺服器發送資料

text 預設。定義單行輸入字段，使用者可在其中輸入文本。預設是 20 個字元

url 定義用于 URL 的文本字段

文本輸入框、密碼輸入框

當使用者要在表單中鍵入字母、數字等内容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

1、type：

當type="text"時，輸入框為文本輸入框

當type="password"時, 輸入框為密碼輸入框

2、name：

為文本框命名，以備背景程式ASP 、PHP使用。

3、value：

為文本輸入框設定預設值。(一般起到提示作用)

3.2 文本域，支援多行文本輸入

當使用者需要在表單中輸入大段文字時，需要用到文本輸入域。

1 <code><textarea></code>标簽是成對出現的，以<code><textarea></code>開始，以<code></textarea></code>結束。

2、cols ：

多行輸入域的列數。

3、rows ：

多行輸入域的行數。

4、在<code><textarea></textarea></code>标簽之間可以輸入預設值。

在浏覽器中顯示結果：

在使用表單設計調查表時，為了減少使用者的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的差別是單選框中的選項使用者隻能選擇一項，而複選框中使用者可以任意選擇多項，甚至全選。

1、type:

當 type="radio" 時，控件為單選框

當 type="checkbox" 時，控件為複選框

2、value：送出資料到伺服器的值（背景程式PHP使用）

3、name：為控件命名，以備背景程式 ASP、PHP 使用

注意：為單選框的時候，name一定要名字相同才行

4、checked：當設定 checked="checked" 時，該選項被預設選中

如下面代碼：

注意:同一組的單選按鈕，name 取值一定要一緻，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

下拉清單在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：

1、value：

2、selected="selected"：

設定selected="selected"屬性，則該選項就被預設選中。

下拉清單也可以進行多選操作，在<code><select></code>标簽中設定multiple="multiple"屬性，就可以實作多選功能，在 windows 作業系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下代碼：

在表單中有兩種按鈕可以使用，分别為：送出按鈕、重置。這一小節講解送出按鈕：當使用者需要送出表單資訊到伺服器時，需要用到送出按鈕。

type：隻有當type值設定為submit時，按鈕才有送出作用

value：按鈕上顯示的文字

當使用者需要重置表單資訊到初始時的狀态時，比如使用者輸入“使用者名”後，發現書寫有誤，可以使用重置按鈕使輸入框恢複到初始狀态。隻需要把type設定為"reset"就可以。

type：隻有當type值設定為reset時，按鈕才有重置作用

輸入賬号

單擊重置按鈕

label标簽不會向使用者呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 标簽内點選文本，就會觸發此控件。就是說，當使用者單擊選中該label标簽時，浏覽器就會自動将焦點轉到和标簽相關的表單控件上（就自動選中和該label标簽相關連的表單控件上）。

注意：标簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。

例子：

至此HTML基礎部分就已經完畢了，接下來分析CSS層疊樣式表 (Cascading Style Sheets)

HTML+CSS基礎(HTML篇)

繼續閱讀

【HTML&CSS】聖杯布局和雙飛翼布局