轉載自：http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=referral
一，html+css基礎 1-1
Html和CSS的關係
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來瞭解下這三門技術都是用來實現什麼的：
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉式功能表。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有互動的一般都是用JavaScript來實現的。
1-2
1， HTML標籤不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程式員都以小寫為準。
1-3
一個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>等網頁內容標籤，在這裡的標籤中的內容會在瀏覽器中顯示出來。
1-4
1，下面這些標籤可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2，代碼注釋不僅方便程式員自己回憶起以前代碼的用途，還可以協助其他程式員很快的讀懂你的程式的功能，方便多人合作開發網頁代碼。
文法：
<!--注釋文字 -->
3，CSS注釋代碼
就像在Html的注釋一樣，在CSS中也有備註陳述式：用/*備註陳述式*/來標明（Html中使用<!--備註陳述式-->)
1-5
1，語義化：說的通俗點就是：明白每個標籤的用途（在什麼情況下我可以使用這個標籤才合理）比如，網頁上的文章的標題就得用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。
2，語義化的作用
1）. 更容易被搜尋引擎收錄。
2）. 更容易讓螢幕助讀程式讀出網頁內容。
二，認識標籤（第一部分）
2-1
如果想在網頁上顯示文章，這時就需要<p>標籤了，把文章的段落放到<p>標籤中。
文法：
<p>段落文本</p>
2-2
<hx>標籤來製作文章的標題。
標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
文法：
<hx>標題文本</hx> (x為1-6)
文章的標題前面已經說過了，可以使用標題標籤，另外網頁上的各個欄目的標題也可使用它們
2-3
有了段落又有了標題，現在如果想在一段話中特彆強調某幾個文字，這時候就可以用到<em>或<strong>標籤。
但兩者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。並且在瀏覽器中<em> 預設用斜體表示，<strong> 用粗體表示。兩個標籤相比，目前國內前端程式員更喜歡使用<strong>表示強調
2-4
<em>、<strong>、<span>的區別：
1. <em>和<strong>標籤是為了強調一段話中的關鍵字時使用，它們的語義是強調。
2. <span>標籤是沒有語義的，它的作用就是為了設定單獨的樣式用的，把一段話圈起來，然後用css設定樣式。
2-5
q標籤，短文本引用
比如在你的網頁的文章裡想引用某個作家的一句詩，這樣會使你的文章更加出彩，那麼<q>標籤是你所需要的。
文法：
<q>引用文本</q>
1，注意要引用的文本不用加雙引號，瀏覽器會對q標籤自動添加雙引號。
2，注意這裡用<q>標籤的真正關鍵點不是它的預設樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話
blockquote標籤，長文本引用
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用
<q>標籤是對簡短文本的引用，比如說引用一句話就用到<q>標籤。
文法:
<blockquote>引用文本</blockquote>
瀏覽器對<blockquote>標籤的解析是縮排樣式
2-6
換列標籤<br/>
<br/>標籤作用相當於word文檔中的斷行符號。
分割線標籤<hr/>
<hr/>標籤和<br/>標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
<hr/>標籤的在瀏覽器中的預設樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關係，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。
2-7
html特殊字元
空格： (;分號必不可少)
2-8
address標籤，為網頁加入地址資訊
文法：
<address>地址資訊</address>
如：
<address>北京市西城區德外大街10號</address>
在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當然可以，可以在後面的課程中使用css樣式來修改它<address>標籤的預設樣式
2-9
在介紹語言技術的網站中，必免不了在網頁中顯示一些電腦專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標籤了，如下面例子：
<code>var i=i+300;</code>
文法：
<code>代碼語言</code>
注意：在文章中一般如果要插入多行代碼時不能使用<code>標籤，如果是多行代碼，可以使用<pre>標籤。
<pre> 標籤的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和分行符號。如果用以前的方法，斷行符號需要輸入<br>簽，空格需要輸入 。
注意：<pre> 標籤不只是為顯示電腦的原始碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示電腦的原始碼。
三，認識標籤（第二部分）
3-1
1，無序列表
ul-li是沒有前後順序的資訊列表。
文法：
<ul>
<li>資訊</li>
<li>資訊</li>
......
</ul>
舉例：
<ul>
<li>精彩少年</li>
<li>美麗突然出現</li>
<li>觸動心靈的旋律</li>
</ul>
ul-li在網頁中顯示的預設樣式一般為：每項li前都內建一個圓點
2,有序列表
文法：
<ol>
<li>資訊</li>
<li>資訊</li>
......
</ol>
舉例：
下面是一個熱點課程下載熱門排行榜：
<ol>
<li>前端開發面試心法 </li>
<li>零基礎學習html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在網頁中顯示的預設樣式一般為：每項<li>前都內建一個序號，序號預設從1開
3-2
<div>容器標籤
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。
文法：
<div>…</div>
確定邏輯部分：
什麼是邏輯部分。它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標籤作為容器
注釋：<div> 是一個區塊層級元素，也就是說，瀏覽器通常會在 div 元素前後放置一個分行符號。
3-3
建立表格的五個元素：
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、表格中列的個數，取決於一行中資料儲存格的個數。
表格還是需要添加一些標籤進行最佳化，可以添加標題和摘要
<table summary="本表格記錄2012年到2013年庫存記錄，記錄包括隨身碟和耳機庫存量">
<caption>2012年到2013年庫存記錄</caption>
3-4
1，使用<a>標籤，連結到別一個頁面
使用<a>標籤可實現超連結，它在網頁製作中可以說是無處不在，只要有連結的地方，就會有這個標籤。
文法：
<a href=”目標網址”>連結顯示的文本</a>
例如：
<a href = "http://www.imooc.com">click here!</a>
上面例子作用是單擊click here!文字，網頁連結到http://www.imooc.com這個網頁。
3-5
認識<img>標籤，為網頁插入圖片
在網頁的製作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<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格式的影像檔。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
