一、簡介
1、發展史
（1）web1.0 時代
產物：網頁製作
那時的網頁主要是靜態網頁，即沒有與用户交互，僅僅是提供信息瀏覽的網頁。如QQ日誌、博文等。
網頁製作三劍客：Dreamweaver+Fireworks+Flash
（2）web2.0 時代
產物：前端開發
有了靜態網頁和動態網頁。
動態網頁即指用户不僅可以瀏覽網頁，還可以與服務器進行交互。如新浪微博。
現在的網站開發無論是開發難度，還是開發方式上，都更接近傳統的網站後台開發，所以現在不再叫“網頁製作”，而是叫“web前端開發”。
2、web前端能做什麼
公司官網（在PC通過瀏覽器來訪問公司網站）
移動端網頁（在手機上瀏覽公司信息、小遊戲等）
移動端APP（例如：淘寶、去哪兒旅遊、攜程等）
微信小程序（隨用隨裝，不佔用手機空間）
3、前端開發的3個組成部分：
結構（HTML）、表現（CSS）、行為（JavaScript）
網頁現在的標準是W3C
4、HTML及其作用
（1）什麼是HTML？
Hyper Text Markup Language（超文本標記語言）
HTML是一門描述性語言。
是一種用於創建網頁的標記語言。
（2）作用
搭建網站框架。
5、CSS及其作用
（1）什麼是CSS？
層疊樣式表
（2）作用
給網站內容添加不同的表現形式，是網站樣式美觀。
6、JavaScript及其作用
JavaScript是一門腳本語言。
用於定義網站上的對象的行為。
二、HTML
1.HTML簡介
HTML是一個網頁的主體和基礎。
標記語言是一種將文本（Text）以及文本相關的其他信息結合起來，展現出關於文檔結構和數據處理細節的計算機文字編碼。
與文本相關的其他信息（包括例如文本的結構和表示信息等）與原來的文本結合在一起，但是使用標記（markup）進行標識。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>第一個文檔</title>
</head>
<body>
我們的文檔
</body>
</html>如上面代碼中的帶尖括號的html,head,meta等就叫做標籤，用來描述文本的作用。這些標籤互相嵌套構成了文本結構。
寫好的HTML文件最終都會運行在瀏覽器上，由瀏覽器來解析。
2.開發環境
常用開發工具：Hbuild、Sublime Text、Dreamweare、PyCharm等。
HTML文件的後綴名為： .htm 或 .html
3.HTML標籤規範
（1）在HTML中規定標籤使用英文的的尖括號即`<`和`>`包起來，如`<html>`、`<p>`都是標籤。
（2）HTML中的標籤通常都是成對出現的，分為開始標籤和結束標籤，結束標籤比開始標籤多了一個`/`，如`<p>標籤內容</p>`和`<div>標籤內容</div>`。開始標籤和結束標籤之間的就是標籤的內容。
（3）標籤之間是可以嵌套的
（4）HTML標籤不區分大小寫，`<h1>`和`<H1>`是一樣的，但是我們通常建議使用小寫
（5）不是所有標籤都支持互相嵌套。
4.HTML文檔結構
<!-- 聲明文檔類型，標記該文檔為html文件 -->
<!DOCTYPE HTML>
<!-- 頁面根節點 -->
<html>
<head>
<!-- 聲明頭部的元信息，對文檔規定編碼格式 -->
<meta charset="utf-8"/>
<title>文檔標題</title>
</head>
<body>
文檔主體
</body>
</html>
（1）<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位於<html>標籤之前，表明該文檔是HTML5文檔。（2）<html></html><html></html>中。（3）<head></head><title>、<script>、<style>、<link>和<meta>等標籤。（4）在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在<body>標籤中的內容最終會在瀏覽器中顯示出來。
HTML文檔包含了HTML標籤及文本內容。
5.HTML註釋
快捷鍵：ctrl+?
註釋格式：
<!--這裏是註釋的內容-->注意：註釋不支持嵌套，註釋不能寫在HTML標籤中。
6.head 標籤
head標籤描述了文檔的各種屬性和信息，包括文檔標題、編碼方式及URL等信息，這些信息大部分是用來提供索引，辨認或其他方面的應用的。
<head lang='en'>
<title>標題信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>以下標籤可以用在head標籤中：
1.1. title標籤
定義文檔的標題，顯示在瀏覽器標籤頁的標題欄。可以將其看作一個網頁的標題。
主要用來告訴用户和搜索引擎這個網頁的主要內容是什麼，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題。
格式：<title>標題</title>
創建一個帶有我們自定義標題內容的網頁：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個文檔</title>
</head>
<body>
</body>
</html>將上面內容存儲為一個HTML文件，在瀏覽器中打開即可。
1.2. meta標籤
提供有關頁面的元信息、針對搜索引擎和更新頻度的描述和關鍵詞。
標籤位於文檔頭部，可以定義文檔的編碼類型等信息。
所提供的信息用户不可見。
meta標籤共有兩個屬性：http-equiv，name
1.2.1. http-equiv屬性
用來向瀏覽器傳達信息，幫助瀏覽器正確的顯示網頁內容，屬性值為content
（1）重定向 2秒後跳轉到對應網址：
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">（2）指定文檔內容類型和編碼類型
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />（3）告訴瀏覽器以最高級模式渲染當前網頁
<meta http-equiv="x-ua-compatible" content="IE=edge">1.2.2. name屬性
主要用於網頁的關鍵字和描述，是寫給搜索引擎看的，關鍵字之間用“,”隔開，與之對應的屬性值為content。content中的內容主要是便於搜索引擎查找信息和分類信息。為了SEO優化
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="豆瓣">1.3. link標籤
（1）定義網站圖標：
<link rel="icon" href="./fav.ico">（2）引入外部樣式：
<link rel="stylesheet" type="text/css" href="./mystyle.css">1.4. style標籤
定義內部樣式
<style type="text/css"></style>1.5. script標籤
定義JavaScript代碼或引入JavaScript文件
<script type="text/javascript"></script>
<script src="myscript.js"></script>7.body標籤
想要在網頁上展示的內容就要放在body中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>詩歌</title>
</head>
<body>
<div class="詩歌">
<h3>海燕</h3>
<p>在茫茫的大海上，</p>
<p>狂風捲集着烏雲。</p>
<p>在烏雲和大海之間，，</p>
<p><i>海燕</i>像黑色的閃電，</p>
<p>在高傲地飛翔。</p><hr>
</div>
</body>
</html>7.1. 標題標籤 h1-h6
用於定義標題。塊級元素
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>標題標籤</title>
</head>
<body>
<h1>一級標題</h1><h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>7.2. 文本樣式標籤
主要用來對HTML頁面中的文本進行修飾。
文本樣式標籤主要用來對HTML頁面中的文本進行修飾，比如加粗、斜體、線條樣式等...
1. `<b></b>`：加粗
2. `<i></i>`：斜體
3. `<u></u>`：下劃線
4. `<s></s>`：刪除線
5. `<sup></sup>`：上標
6. `<sub></sub>`：下標
現在如果想在一段文字中特別強調某幾個字，這時候就可以用到`<em>`或`<strong>`標籤。
這兩個標籤都是表示強調，但是兩者在強調的語氣上有區別:`<em>`表示強調，`<strong>`表示更強烈的強調。
在瀏覽器中`<em>`默認會用斜體表示，`<strong>`會用粗體來表示。兩個標籤相比，我們通常會推薦大家使用`<strong>`表示強調7.3. 段落標籤p
paragraph縮寫，用於定義段落
是一個塊級元素
<p>在茫茫的大海上，</p>
<p>狂風捲集着烏雲。</p>
<p>在烏雲和大海之間，</p>7.4. 超鏈接標籤a
anchor縮寫。是一個鏈接點。
a為行內元素
作用：將當前位置的頁面、文本或圖片鏈接到其他頁面、文本或者圖片
（1）跳轉到其他頁面：
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>target參數： _self ，默認值，在當前網站打開鏈接的資源地址； _blank 在新的網站打開鏈接的資源地址
title：鼠標懸停時顯示的標題
（2）下載文件：
<a href="a.zip">下載包</a>（3）跳轉到郵箱：
<a href="mailto:zhaoxu@tedu.cn">聯繫我們</a>（4）返回頁面頂部：
<a href="#">跳轉到頂部</a>（5）跳轉到指定id：
<a href="#p1">跳轉到p1</a>（6）觸發<a>默認動作時，執行一段JavaScript代碼：
<a href="javascript:alert(1)">內容</a>（7）觸發<a>時無任何操作：
<a href="javascript:;">內容</a>7.5. 列表標籤ul，ol
ul：unordered lists，無序列表
ol：ordered lists，有序列表
列表標籤是塊級元素
通常跟li標籤一起用，每條li表示列表的內容
<!-- 無序列表 type可以定義無序列表的樣式-->
<ul type="circle">
<li>我的賬户</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定義有序列表的樣式 -->
<ol type="a">
<li>我的賬户</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>View Code
（1）ul標籤的屬性：
type：列表標識的類型，值如下：
disc：實心圓(默認值)
circle：空心圓
square：實心矩形
none：不顯示標識
（2）ol標籤的屬性：
type：列表標識的類型，值：
1：數字
a：小寫字母
A：大寫字母
i：小寫羅馬字符
I：大寫羅馬字符
起始編號 ，默認為1
7.6. 盒子標籤div
division縮寫，定義文檔的分區，可以將文檔分為獨立的、不同的部分
是一個塊級元素
<body>
<div class="詩歌">
<h1>海燕</h1>
<h2>海燕</h2>
<h3>海燕</h3>
<h4>海燕</h4>
<h5>海燕</h5>
<h6>海燕</h6>
<p>在茫茫的大海上，</p>
<p>狂風捲集着烏雲。</p>
<p>在烏雲和大海之間，</p>
<p><i>海燕</i>像黑色的閃電，</p>
<p>在高傲地飛翔。</p><hr>
</div>
<div class="鏈接">
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
</div>
</body>View Code
每個<div></div>區域表示獨立的一塊，中間還可以嵌套<div></div>
7.7. 圖片標籤<img/>
用於向網頁中插入圖片
是一個行內塊元素
語法：<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息" />
<!-- 圖片標籤<img/> -->
<div class="圖片">
<img src="./picture1.png" alt="圖片加載失敗" style="width: 300px;height: 240px">
</div>（1）src設置的圖片地址可以是本地的地址也可以是一個網絡地址。
（2）圖片的格式可以是png、jpg和gif。
（3）alt屬性的值會在圖片加載失敗時顯示在網頁上。
（4）還可以為圖片設置寬度(width)和高度(height)，不設置就顯示圖片默認的寬度和高度
（5）與行內元素在一行內顯示
7.8. span標籤
span標籤可以單獨摘出某塊內容，結合css設置相應的樣式
是行內元素
<span>hello world</span>
<span>the student is learning</span>7.9. 換行標籤<br>
用來將內容換行，其在HTML網頁上的效果相當於我們平時使用word編輯文檔時使用回車換行。
7.10. 分割線<hr>
用來在HTML頁面中創建水平分隔線，通常用來分隔內容.
7.11. 特殊符號
注意：瀏覽器在顯示的時候會移除源代碼中多餘的空格和空行，所有連續的空格或空行都會被算作一個空格。HTML代碼中的所有連續的空行（空格）也被顯示為一個空格。
常用特殊字符：
內容 代碼
空格
> >
< <
& &
¥ ¥
版權 ©
註冊 ®特殊字符對照表：http://tool.chinaz.com/Tools/HtmlChar.aspx
7.12. 表格標籤table
<table>：定義表格
<thead>：表格頭
<tbody>：表格主體
<tr>：行
<th>：表格頭裏的單元格，默認加粗居中，常與<tr>結合使用定義表格頭
<td>：表格主體裏的單元格，即表格數據（table data），數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等
<tfoot>表格底部
表格行和列合併：
rowspan 合併行(豎着合併)
colspan 合併列(橫着合併)示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" cellspacing="0">
<!-- 表格頭 -->
<thead>
<tr>
<!-- thead裏面使用th -->
<th>時間</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!-- 表格主體 -->
<tbody>
<tr>
<!-- tbody裏面使用td -->
<td rowspan="3">上午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>化學</td>
<td>物理</td>
</tr>
<tr>
<td>化學</td>
<td>物理</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
</tr>
<tr>
<td>物理</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>化學</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>數學</td>
<td>英語</td>
<td>數學</td>
<td>英語</td>
<td>化學</td>
</tr>
<tr>
<td>英語</td>
<td>數學</td>
<td>英語</td>
<td>物理</td>
<td>語文</td>
</tr>
</tbody>
<!-- 表底部 -->
<tfoot>
<tr>
<!-- tfoot裏面使用td -->
<td colspan="6">課程表</td>
</tr>
</tfoot>
</table>
</body>
</html>View Code
7.13. 表單標籤form
表單是一個包含表單元素的區域
表單元素是允許用户在表單中輸入內容，比如：文本域(textarea)、輸入框(input)、單選框
作用：表單用於顯示、輸入信息，並將信息提交給服務器
語法：
<form>允許出現表單控件</form>常見屬性：
表單控件分類：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單控件</title>
</head>
<body>
<div class="form">
<!-- form標籤是塊級元素，form表單是被提交的 -->
<form action="http://www.baidu.com" method="get">
<p>
<!-- lable標籤是行內元素 -->
<label for="user">用户名：</label>
<!-- input標籤是行內塊元素 -->
<input type="text" name="username" id="user" placeholder="請輸入用户名">
</p>
<p>
<!-- lable標籤是行內元素 -->
<label for="password">密碼： </label>
<!-- input標籤是行內塊元素 -->
<input type="text" name="password" id="password" placeholder="請輸入密碼">
</p>
<p>
<!-- 單選框checked會被默認選中。如何使選項產生互斥效果：name值相同 -->
用户性別：
<input type="radio" name="sex" value="男" checked="">男
<input type="radio" name="sex" value="女">女
</p>
<p>
<!-- 複選框 -->
用户愛好：
<input type="checkbox" name="checkfav" value="吃">吃
<input type="checkbox" name="checkfav" value="喝">喝
<input type="checkbox" name="checkfav" value="玩">玩
<input type="checkbox" name="checkfav" value="樂">樂
</p>
<p>
<!-- 上傳文件 此時method必須設置為post,enctype必須為multipart/form-data -->
<input type="file" name="textfile">
</p>
<p>
<!-- 文本域 -->
自我評價：
<textarea cols="20" rows="5" name="txt" placeholder="請作自我評價"></textarea>
</p>
<p>
<!-- 下拉列表 -->
户籍地址：
<select name="sel" size="3" multiple="">
<option value="深圳" selected="">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="湖南">湖南</option>
</select>
</p>
<p>
<!-- 定義一個普通的按鈕 -->
<input type="button" name="btn" value="普通按鈕" disabled="disabled">
<!-- disabled：禁用按鈕 -->
<!-- 提交form表單：submit -->
<input type="submit" name="btn" value="提交">
</p>
<p>
<!-- 重置按鈕 -->
<input type="reset" name="">
</p>
</form>
<!-- button標籤 -->
<button type="button">按鈕</button>
</div>
</body>
</html>View Code
8.HTML標籤屬性
HTML標籤可以設置屬性，屬性一般以鍵值對的方式寫在開始標籤中。
<div id="i1">這是一個div標籤</div>
<p class='p1 p2 p3'>這是一個段落標籤</p>
<a href="http://www.luffycity.com">這是一個鏈接</a>
<input type='button' onclick='addclick()'></input>id就div標籤的屬性
注意：
（1）HTML標籤除一些特定屬性外可以設置自定義屬性，一個標籤可以設置多個屬性用空格分隔，多個屬性不區分先後順序。
（2）屬性值要用引號包裹起來，通常使用雙引號也可以單引號。
（3）屬性和屬性值不區分大小寫，但是推薦使用小寫。
9.HTML標籤分類
HTML中標籤元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。
9.1. 塊級元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>特點：display:block;
1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。獨佔一行
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
9.2. 行內元素：
<a> <span> <br> <i> <em> <strong> <label>特點：display:inline;
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
9.3. 行內塊元素：
<img> <input>特點：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置
10.HTML標籤嵌套
（1）塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素。
正確：<div><div></div><h1></h1><p><p></div>
正確：<a href=”#”><span></span></a>
錯誤：<span><div></div></span>
（2）塊級元素不能放在p標籤裏面，比如
錯誤：<p><ol><li></li></ol></p>
錯誤：<p><div></div></p>
（3）有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：h1、h2、h3、h4、h5、h6、p
（4）li元素可以嵌入ul，ol，div等標籤
