Html和CSS的關系
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什么的：
1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。
標簽的語法
1. 標簽由英文尖括號<和>括起來，如<html>就是一個標簽。
2. html中的標簽一般都是成對出現的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個/。
如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
3. 標簽與標簽之間是可以嵌套的，但先后順序必須保持一致。
如：<div>里嵌套<p>，那么</p>必須放在</div>的前面。如下圖所示。
4. HTML標簽不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為准。
html文件基本結構
這一節中我們來學習html文件的結構：一個HTML文件是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
1. <html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。
2. <head> 標簽用於定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽，頭部標簽在下一小節中會有詳細介紹。
3. 在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
head標簽
<head>標簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
下面這些標簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標簽：在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用於告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
例如：
<head>
<title>hello world</title>
</head>
<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示：
<!--注釋文字 –>
<body>標簽，網頁上顯示的內容放在這里
在網頁上要展示出來的頁面內容一定要放在body標簽中。
<p>標簽，添加段落
如果想在網頁上顯示文章，這時就需要<p>標簽了，把文章的段落放到<p>標簽中。
語法：
<p>段落文本</p>
注意一段文字一個<p>標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標簽中。如下圖所示。
在瀏覽器中顯示的效果：
<p>標簽的默認樣式，可以在上圖中看出來，段前段后都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它。
<hx>標簽，為你的網頁添加標題
文章的段落用<p>標簽，那么文章的標題用什么標簽呢？在本節我們將使用<hx>標簽來制作文章的標題。
標題標簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
語法：<hx>標題文本</hx> (x為1-6)
文章的標題前面已經說過了，可以使用標題標簽，另外網頁上的各個欄目的標題也可使用它們。如下圖為騰訊網站。
注意：因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如：<h1>騰訊網</h1>
h1-h6標簽的默認樣式：
標簽代碼：
在瀏覽器中顯示的樣式：
從上面的圖片可以看出標題標簽的樣式都會加粗，h1標簽字號最大，h2標簽字號相對h1要小，以此類推h6標簽的字號最小。
<strong>和<em>，加入強調語氣
有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標簽。
但兩者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。
並且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。
語法：
<em>需要強調的文本</em>
<strong>需要強調的文本</strong>
如，在網上商城中，某產品的打折后的價格是需要強調的。如下圖。
代碼實現：
在瀏覽器中默認樣式是有區別的：
原代碼，如下圖。
瀏覽器中的樣子，如下圖。
<em>的內容在瀏覽中顯示為斜體，<strong>顯示為加粗。以后可以使用css樣式去改變這種樣式。
<span>標簽，為文字設置單獨樣式
對<em>、<strong>、<span>這三個標簽進行一下總結：
1. <em>和<strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。
2. <span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。
如果現在我們想把“美國夢”三個字設置成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設置和其它文字不同的樣式（並不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標簽了。
語法：
<span>文本</span>
<q>標簽，短文本引用
語法：
<q>引用文本</q>
如下面例子：
<p>最初知道庄子，是從一首詩<q>庄生曉夢迷蝴蝶。望帝春心托杜鵑。</q>開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。后來才明白這個典故出自是庄子的《逍遙游》，《逍遙游》代表了庄子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。</p>
講解：
1. 在上面的例子中，“庄生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用<q></q>實現引用。
2. 注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。
下圖是代碼顯示結果：
注意這里用<q>標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。
<blockquote>標簽，長文本引用
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。
<q>標簽是對簡短文本的引用，比如說引用一句話就用到<q>標簽。
如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用<blockquote>。
語法:
<blockquote>引用文本</blockquote>
如下面例子：
<blockquote>明月出天山，蒼茫雲海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。</blockquote>
瀏覽器對<blockquote>標簽的解析是縮進樣式。如下圖所示：
<br>標簽，分行顯示文本
<br />標簽作用相當於word文檔中的回車。
上節的代碼改為：
語法：
xhtml1.0寫法：
<br />
html4.01寫法：
<br>
大家注意，現在一般使用 xhtml1.0 的版本的寫法（其它標簽也是），這種版本比較規范。
與以前我們學過的標簽不一樣，<br />標簽是一個空標簽，沒有HTML內容的標簽就是空標簽，空標簽只需要寫一個開始標簽，這樣的標簽有<br />、<hr />和<img />。
講到這里，你是不是有個疑問，想折行還不好說嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就行了嗎？很遺憾，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。
總結：在 html 代碼中輸入回車、空格都是沒有作用的。在html文本中想輸入回車換行，就必須輸入<br />。
 ，網頁中添加一些空格
要想輸入空格，必須寫入 。
語法：
在html代碼中輸入空格是不起作用的。
<hr>標簽，添加水平橫線
在信息展示時，有時會需要加一些用於分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：
語法：
html4.01版本<hr>
xhtml1.0版本 <hr />
注意：
1. <hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。
2. <hr />標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。
3. 大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本比較規范。
<address>標簽，為網頁加入地址信息
一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。
語法：
<address>聯系地址信息</address>
如：
<address>文檔編寫：lilian 北京市西城區德外大街10號</address>
<address> 本文的作者：<a href="mailto:lilian@imooc.com">lilian</a> </address>
在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當然可以，可以在后面的課程中使用 css 樣式來修改它<address>標簽的默認樣式。
<code>標簽，加入一行代碼
在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標簽了，如下面例子：
<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行代碼時不能使用<code>標簽了。
語法：
<code>代碼語言</code>
注：如果是多行代碼，可以使用<pre>標簽。
<pre>標簽，為網頁加入大段代碼
加入一行代碼的標簽為<code>，但是在大多數情況下是需要加入大段代碼的，如下圖：
怎么辦？不會是每一代碼都加入一個<code>標簽吧，沒有這么復雜，這時候就可以使用<pre>標簽。
語法：
<pre>語言代碼段</pre>
<pre> 標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
如下代碼：
<pre>
var message="歡迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
在瀏覽器中的顯示結果為：
在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入
注意：<pre> 標簽不只是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。
ul，無序列表
ul-li是沒有前后順序的信息列表。
語法：
<ul> <li>信息</li> <li>信息</li> ...... </ul>
舉例：
<ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li> </ul>
ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點，如下圖所示：
ol，有序列表
在網頁中展示有前后順序的信息列表
語法：
<ol> <li>信息</li> <li>信息</li> ...... </ol>
舉例：
下面是一個熱點課程下載排行榜：
<ol> <li>前端開發面試心法 </li> <li>零基礎學習html</li> <li>JavaScript全攻略</li> </ol>
<ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始，如下圖所示：
div在排版中的作用
在網頁制作過程過中，可以把一些獨立的邏輯部分划分出來，放在一個<div>標簽中。
這個<div>標簽的作用就相當於一個容器。
語法：
<div>…</div>
確定邏輯部分：
什么是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標簽作為容器。
給div命名，使邏輯更加清晰
在上一小節中，我們把一些標簽放進<div>里，划分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設置一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。
如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。
語法：
<div id="版塊名稱">…</div>
table標簽，認識網頁上的表格
有時候我們需要在網頁上展示一些數據，如某公司想在網頁上展示公司的庫存清單。如下表：
想在網頁上展示上述表格效果可以使用以下代碼：
創建表格的四個元素：
table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數，取決於一行中數據單元格的個數。
上述代碼在瀏覽器中顯示的默認的樣式為：
總結：
1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
2、表頭，也就是th標簽中的文本默認為粗體並且居中顯示
用css樣式，為表格加入邊框
Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便於我們后期合並單元格知識點的講解，所以在這一節中我們為表格添加一些樣式，為它添加邊框。
在右側代碼編輯器中添加如下代碼：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代碼是用 css 樣式代碼（后面章節會詳細講解），為th，td單元格添加粗細為一個像素的黑色邊框。
結果窗口顯示出結果樣式：
caption標簽，為表格添加標題和摘要
表格還是需要添加一些標簽進行優化，可以添加標題和摘要。
摘要
摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法：<table summary="表格簡介文本">
標題
用以描述表格內容，標題的顯示位置：表格上方。
語法：
<table>
<caption>標題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<a>標簽，鏈接到另一個頁面
使用<a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。
語法：
<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
例如：
<a href="http://www.imooc.com" title="點擊進入慕課網">click here!</a>
上面例子作用是單擊click here!文字，網頁鏈接到http://www.imooc.com這個網頁。
title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好），如下
注意：還有一個有趣的現象，只要為文本加入a標簽后，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000}),后面會詳細講解。
在新建瀏覽器窗口中打開鏈接
<a>標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。
如下代碼：
<a href="目標網址" target="_blank">click here!</a>
使用mailto在網頁中鏈接Email地址
<a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。
我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：
注意：如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。
下面是一個完整的實例:
在瀏覽器中顯示的結果：
發送
點擊鏈接會打開電子郵件應用，並自動填寫收件人等設置好的信息，如下圖：
“對此影評有何感想，發送郵件給我”加入鏈接，使其單擊后可以自動發送郵件，具體要求：
1、發送人郵箱地址：yy@imooc.com。
2、郵件主題：觀了不起的蓋茨比有感。
3、郵件內容：你好，對此評論有些想法。
<img>標簽，為網頁插入圖片
語法：
<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
舉例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
講解：
1、src：標識圖像的位置；
2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
4、圖像可以是GIF，PNG，JPEG格式的圖像文件。