一、學習目標
主要是學習web開發中的一些基本性的概念，例如b/s架構，web服務器，dns等等。同時還要學習HTML標記語言，懂得基本的HTML頁面的制作。
二、互聯網相關知識
在正式講解網站開發之前，我們先了解一下軟件開發行業的一些基礎性的知識。只有充分了解這些知識后，在日后的開發中我們才能做到更加的游刃有余。
2.1 什么是軟件？
對于沒接觸過軟件開發的同學來說，可能會產生一個疑問，什么是軟件呢，什么是c/s架構，什么是b/s架構，什么是網站開發，什么是靜態網站，什么是動態網站，什么是lamp架構？帶著這些疑問，歡迎大家走進我們的學習之旅。
什么是軟件呢？軟件就是一個可以運行在操作系統之上的工具，可以幫助人類完成一些日常生活中的事情。例如我們常見的QQ軟件，wps軟件，IE瀏覽器.....目前的軟件主要分為兩類類型：
系統軟件：window操作系統 、Linux操作系統 、Unix操作系統 、IOS操作系統等.... 對于這些計算機來說，必須要安裝這些系統軟件之后，我們才可以使用計算機。沒有安裝系統軟件的電腦被稱為裸機。
應用軟件：迅雷下載軟件、 QQ聊天工具、飛秋.....對于這些應用軟件來說，都是由程序員進行開發的，可以幫助我們處理一些日常生活中的事情。
2.2 軟件體系架構
對于應用軟件又可以分為兩個大類：
c/s架構：c代表客戶端、s代表服務器端。其主要的特點是安裝和維護都是由用戶來操作的。例如QQ聊天工具需要用戶自己去下載，然后安裝和更新。
b/s架構：b代表瀏覽器、s代表服務器端。其主要的特點是開發和維護都是由服務器端維護的，瀏覽器只負責展示。還有基于web的應用軟件，例如在線OA、進銷存系統.....我們常說的網站就是屬于b/s架構中的一種。
2.3 b/s軟件體系架構
我們學習的網站開發就是屬于b/s軟件體系架構，日后我們重點學習的是b/s軟件體系架構，對應c/s架構體系我們不做過多的研究。對應網站開發，我們又可以分為兩大類型：
靜態網站：一般指的都是由html超文本標記語言書寫的文件，不需要后臺編程語言以及數據庫參與的網站。通過超鏈接把頁面文件關聯起來。常見的文件類型后綴如.html、.htm、.shtml等。
動態網站：一般指的都是由后臺編程語言書寫的文件，通常情況下還需要數據庫參數。常見的后綴如.php、.jsp、.asp等。
2.4 什么是上網？
就是使用電腦里面的瀏覽器在地址欄輸入一個網站 http://www.baidu.com 然后在我們電腦上的瀏覽器里面會呈現一個界面，通過點擊頁面上的某些內容獲取不同觀賞體驗，則為上網。
2.5上網的原理是什么呢？
那么上網的原理是什么呢？我們是如何在瀏覽器上見到我們看到的內容呢？
上網就是請求數據，網頁上的內容，怎么就被我們看見了？什么是上網？
我們先不直接解決這個問題，我們做一個小實驗。我們每個人的電腦里面，都有一個神秘的文件夾：
C:\Users\asion\AppData\Local\Microsoft\Windows\Temporary Internet Files
這個文件夾叫做臨時文件夾（文件夾知道存在就可以了，不用自己試著去找）。
我們打開IE瀏覽器，訪問百度首頁。結果，這個文件夾中又多了很多的內容：
通過這個實驗，目前為止，我們可以得出結論，上網的時候，是有真實的、物理的文件傳輸的！
所以我們經常感覺第二次打開網頁，比第一次快，這是因為第一次打開網頁的時候，所有的圖片都已經存過來了。
所以現在也能夠解釋，為什么每次都用360能清理一堆垃圾，釋放很多硬盤空間。
我們發現，瀏覽了一個百度首頁，就出來那么多的文件，所以現在我們的幼小的心靈中，就要有一個初步的認識，網頁不是一個文件，而是一堆文件。
我們可以回答剛才的問題了，“上網”究竟是是什么？答案：上網就是請求數據，就是文件傳輸。
服務器上存放著網頁的相關文件，包括html文件、css文件、js文件、圖片等。當我們打開瀏覽器，輸入網址，我們的計算機就會對這些文件發出HTTP請求。
服務器收到請求之后，會把這些文件通過HTTP協議，傳輸到我們的計算機中（保存到了剛才那個臨時文件夾中）。這些文件，將在我們計算機本地的瀏覽器中，進行渲染、呈遞。
也就是說，本來人家文件好好的在服務器上睡大覺，你一輸入網址，就把這些文件傳輸到本地計算機來了。當這些文件在傳輸到自己的計算機中后，瀏覽器進行進行渲染，為以后顯示信息。
在上面的過程中，我們提到了服務器和瀏覽器、http協議，那么什么是服務器呢，什么是瀏覽器呢....？
2.6 服務器
● 服務器就是計算機，只不過比咱們用的筆記本的配置牛逼了很多，并且24小時不斷電，不關機。
● 服務器上存儲著網頁的相關文件。一旦有訪問者瀏覽網站，服務器就將發送這些文件給訪問者。
● 服務器一旦關機，網站就無法訪問了。
2.7 瀏覽器
瀏覽器是安裝在客戶的電腦里面的一個軟件，能夠讓用戶上網。
瀏覽器有版本之分，有瀏覽器兼容問題，我們的課程將詳細介紹瀏覽器兼容問題。
2.8 HTTP協議
HTTP是Hypertext Transfer Protocol的簡寫，翻譯過來是超文本傳輸協議。
這是一個文件的傳輸協議，我們上網的時候，所有的文件都是通過HTTP這個協議，從服務器上傳輸到客戶的電腦里面的。那么什么是協議呢？
答：協議就是雙方用來通信的一個標準，需要雙方進行遵守、我們日常生活中也有很多的協議，例如常見的婚前財產協議、馬關協議。那么對于我們瀏覽器和服務器進行交互，也需要協議，不然遠程服務器怎么知道瀏覽器需要什么東西，或者瀏覽器如何接受服務器返回的信息呢？這就是有名的http協議。后面的我們會專門學習http協議，這里知道即可。
現在我們必須要樹立一個思想，就是每一個網址，都對應著確定的服務器上的文件。
比如網址：
http://www.baidu.com/1.html
就是服務器上面的1.html文件
http://www.baidu.com/
看似沒有精確到一個文件，但是有一個規定，則瀏覽器默認返回的就是index.html首頁文件。
http://www.baidu.com/aaa/b.html
服務器上面有一個aaa文件夾，這個文件夾里面有一個b.html文件。
服務器演示：
上面都沒不是太理解，也不要著急，后面我們慢慢的就理解了，只需要記?。?br> 訪問的網頁是真實物理的文件。并且一個網頁是很多的物理文件組成的：html文件、圖片文件、js文件、css文件。這些文件要通過特殊軟件才能上傳到服務器上。然后就能讓用戶看了。用戶通過瀏覽器，輸入網址，服務器上面的文件就會通過http請求悄悄地傳輸到用戶的電腦中的臨時文件夾中，在用戶的電腦的瀏覽器中執行、渲染、顯示。
三、靜態網站開發
在我們的課程體系里面，我們先學習靜態網站的開發，需要掌握那些技術呢？主要是如下技術：
html超文本標記語言：主要是用來實現頁面的結構。
css層疊樣式表：主要是設置頁面的樣式，例如頁面字體的大小，顏色等。
javascript腳本語言：主要是制作頁面的一些動態效果，負責和用戶的交互。例如點擊頁面上的某處，彈出一個對話框。
3.1 認識什么是純文本文件txt
windows中自帶一個軟件，叫做記事本。記事本保存的文檔格式就是txt格式，就是英語text的縮寫。術語上，稱呼這個文件叫做“純文本文件”。
那么什么是純文本文件呢？
答：只能保存基本的文本信息，不能保存對文本的修飾，例如我們表示這個是標題，這個是段落，圖片等信息則無法保存。我們可以和word文件做一下對比即可。發現word可以保存除了文本的基本信息，還能保存對文本信息的修飾。
純文本文件就是這樣的文件：
1） 只有文本，沒有樣式；
2） 用記事本等純文本編輯器可讀，不是亂碼
需要注意的是我們網站開發里面的html、css、js都是純本文的。
那么我們該如何適應記事本來書寫HTML文件呢？以及什么是HTML文件呢？
3.2 HTML之hello world
HTML是英語HyperText Markup Language的縮寫，超文本標記語言。是負責描述文檔語義的語言。
.html就是HTML文件的后綴。
現在，來制作我們人生中第一個網頁，
-
新建一個txt文件：
image.png
也就是說，html本質上和txt沒有任何區別，他們都是純文本文件。
-
我們強行把這個文件的拓展名，從txt更改為html，我們會發現小圖標就變成瀏覽器的小圖標了。
image.png
-
在“打開方式”中，用記事本可以編輯它。
現在要養成 編輯器里面編輯 → 保存ctrl+s → 瀏覽器里面刷新F5 的習慣。
image.png
思考：什么是文件的擴展名呢？
答：就是一個文件的文件名后面，以 .(點號)開始到結尾的部分稱為擴展名，通過擴展名我們可以區分出文件的類型，例如word文件，圖片文件，文本文件等。同時也可以通過文件的擴展名來關聯那個應用程序來處理這個文件。
注意事項：部分同學的電腦里面可能隱藏了已知文件類型的默認的擴展名，則我們需要開啟文件擴展名的顯示。
這里以window7作為演示。
-
選中【組織】-->【文件夾和搜索選項】
image.png -
取消【隱藏已知文件類型的擴展名】
image.png
3.3 html到底做了什么？
在百度百科上復制一下喬布斯的個人簡介信息，然后粘貼到HTML文件里面，然后使用瀏覽器打開，查看現象。
瀏覽器效果：
當我們使用瀏覽器打開HTML文件后，發現是所有的文字都是混做一團的。那是為什么呢？
答：純文本txt文件是不能描述文檔的語義的，文檔中不知道誰是主標題，誰是副標題，誰是段落。所以html應運而生。
下面就是一個html文件的演示，就是通過html標簽對兒，來給文本增加語義：
<h1>史蒂夫?喬布斯 （美國蘋果公司聯合創始人）簡介</h1>
<h2>個人信息</h2>
<p>史蒂夫?喬布斯[1] （Steve Jobs，1955年2月24日―2011年10月5日[2] ），出生于美國加利福尼亞州舊金山，美國發明家、企業家、美國蘋果公司聯合創辦人。[3]
1976年4月1日，喬布斯簽署了一份合同，決定成立一家電腦公司。[1] 1977年4月，喬布斯在美國第一次計算機展覽會展示了蘋果Ⅱ號樣機。1997年蘋果推出iMac，創新的外殼顏色透明設計使得產品大賣，并讓蘋果度過財政危機。[4] 2011年8月24日，史蒂夫?喬布斯向蘋果董事會提交辭職申請。[5]
喬布斯被認為是計算機業界與娛樂業界的標志性人物，他經歷了蘋果公司幾十年的起落與興衰，先后領導和推出了麥金塔計算機（Macintosh）、iMac、iPod、iPhone、iPad等風靡全球的電子產品，深刻地改變了現代通訊、娛樂、生活方式。喬布斯同時也是前Pixar動畫公司的董事長及行政總裁。[6]
2011年10月5日，史蒂夫?喬布斯因患胰腺癌病逝，享年56歲。[2] </p>
<h2>早年經歷</h2>
<p>1955年2月24日，史蒂夫?喬布斯出生在美國舊金山。剛剛出世就
青年時期的史蒂夫.喬布斯
青年時期的史蒂夫.喬布斯
被父母遺棄了。幸運的是，保羅?喬布斯和克拉拉?喬布斯――一對好心的夫妻領養了他。[8]
喬布斯生活在美國“硅谷“附近，鄰居都是惠普公司的職員。在這些人的影響下，喬布斯從小迷戀電子學。一個惠普的工程師看他如此癡迷，就推薦他參加惠普公司的“發現者俱樂部“，這是個專門為年輕工程師舉辦的聚會，每星期二晚上在公司的餐廳中舉行。在一次聚會中，喬布斯第一次見到了電腦，他開始對計算機有了一個朦朧的認識。[11] </p>
<h3>早期發展</h3>
<p>蘋果公司成立初期，“蘋果“機的生意清淡。1976年7月，一個偶然的機遇給“蘋果“公司帶來了轉機。零售商保羅?特雷爾（Paul Jay Terrell）來到了喬布斯的車庫，當看完喬布斯演示完電腦后，決定訂購50臺整機，這是做成的第一筆生意。
史蒂夫?喬布斯公司。[15] </p>
瀏覽器效果：
html提供了很多標簽對兒，可以給文本增加不同的語義。比如：
<h1> </h1>標簽對兒，主標題
<h2> </h2>標簽對兒，二級標題
<p> </p> 標簽對兒，普通段落
現在的業界的標準，網頁技術嚴格的三層分離：html就是負責描述頁面的語義；css負責描述頁面的樣式；js負責描述頁面的動態效果的。
所以，html不能讓文字居中，不能更改文字字號、字體、顏色。因為這些都是屬于樣式范疇，都是css干的事兒；html不能讓盒子運動起來，因為這些屬性行為范疇，都是js干的事兒。
html只能干一件事兒，就是通過標簽對兒，給文本增加語義。這是html唯一能做的。
html中，除了語義，其他什么都沒有。
html是一個純本文文件（就是用txt文件改名而成），用一些標簽來描述文字的語義，這些標簽在瀏覽器里面是看不到的，所以稱為“超文本”，所以就是“超文本標記語言”了。
所以，接下來，我們肯定要學習一堆html中的標簽對兒，這些標簽對兒能夠給文本不同的語義。
標簽對兒是由起始標簽和結束標簽組成的：
<h1>喬布斯個人簡介</h1>
<h1> 起始標簽
</h1> 結束標簽
比如，面試的時候問你，h1標簽有什么作用？
正確答案：給文本增加主標題的語義
錯誤答案：給文字加粗、加黑、變大
四、Sublime編輯器
4.1 簡介
書寫代碼肯定需要一款的代碼編輯工具的，任何的純文本編輯器都能夠編輯html代碼，比如記事本、editplus、notepad++。但是所謂工欲善其事必先利其器，在我們作為程序猿的生涯中，不可避免的需要一款高大上的代碼編輯器，那就是著名的sublime Text。
比較有名的專門制作網頁的工具有：
DreamWeaver (Adobe公司的產品，該工具屬于一個老牌編輯器，對于現在的web開發來時，不是一個最好的選擇)
Sublime （高效率的程序書寫工具）
WebStorm （更高級的項目級別編程工具）
HBuilder（國人開發的一款編輯，相當的吃內存）
不管用什么編輯器，你都要知道，做網頁和工具無關，任何的純文本編輯器都能夠做網頁。我們學習的是代碼，而不是所謂的工具。不過，不可否認，一個好的工具，確實能夠提高工作效率，代碼書寫的速度，但是本質上講，記事本也能書寫網頁。
sublime的中文意思是“華麗的”，是2011年開始流行的代碼編輯器，可以編輯java、c、php等很多語言。
html、css、js在sublime中支持非常好。界面也非常漂亮，安裝簡單、小巧、插件多。
今后我們的文件，如何用sublime編輯呢？很簡單，將HTML文件直接拖進來。
一定要記住，保存的時候，一定要文件的擴展名一定要書寫為 .html，表示存為網頁的格式。
4.2 入門使用-HTML基本骨架
效果如下：
4.3 常見快捷鍵使用
sublime中的常用快捷鍵：
ctrl + + 放大文字
ctrl + - 縮小文字
ctrl + shift + d 復制當前行
刪除當前行（直接使用ctrl + l 選中當前行，使用ctrl + x 剪切）
ctrl + shift + ↑ 上移當前行
ctrl + shift + ↓ 下移當前行
先掌握上面的這些快捷鍵。
五、sublime之emmet插件
5.1 基本使用
在上面我們輸入
html:xs
然后在按一下
tab鍵
即可自動填充html的基本骨架，這個功能是由sublime的emmet插件提供的，那么接下來我們就來簡單的學習一下該插件。以后擊打html標簽的時候，僅僅需要輸入標簽的名字，然后按tab就可以自動生成標簽對兒了。
比如，輸入p然后按tab，軟件自動生成：
<p></p>
5.2 項目搭建
什么是一個項目呢？
答：就是把網站開發的所有的文件統一放在一個目錄進行管理。
如何操作呢？
在操作系統創建一個文件夾，然后把該文件夾拖到sublime編輯器即可。
六、HTML基本語法-骨架
6.1 基本骨架
可以使用sublime快速生成。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
<title>Document</title>
</head>
<body>
這里書寫內容
</body>
</html>
對于上面的基本骨架，我們一部分一部分的學習。
6.1.1 文檔聲明頭
任何一個標準的HTML頁面，第一行一定是一個以
<!DOCTYPE ……
開頭的語句。
這一行，就是文檔聲明頭，DocType Declaration。由于HTML語言，也經過了很長時間的發展，存在很多版本，則我們需要告訴瀏覽器使用哪個html的版本去解析該html文件。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
到底有哪些規范呢？
首先我們先確定一件事兒，我們現在學習的是HTML4.01這個版本，這個版本是基本上所有的瀏覽器都能支持其標簽，包含低版本的IE6。同時還有目前流行的HTML5，但是該版本里面的標簽存在很大的兼容性問題，例如IE9才開始支持該版本的部分的標簽。
w3c簡介
例如：同樣的代碼，如果我們不按照標準來寫doctype這樣的話在IE瀏覽器下和標準瀏覽器下的解析效果是不一樣。
代碼：
效果：
解釋：對于同樣的一份代碼，但是不同的瀏覽器解析的效果是不一樣的，這樣就苦了程序員，需要按照各自的瀏覽器的要求去書寫兼容性的代碼。這個時候有一個叫做w3c的組織就看不過去了，則統一制定了標準，要求所有的瀏覽器的廠商按照同一個標準去解析html代碼，減輕代碼編寫時候對兼容性的考慮。
6.1.2 字符集
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
字符集用meta標簽定義，meta表示“元”?！霸迸渲?，就是表示基本的配置項目。
charset就是charactor set“字符集”的意思。
瀏覽器就是通過meta來看頁面需要使用什么樣的字符集的來解析，比如你保存的時候meta寫的，和聲明的不匹配，那么瀏覽器就是亂碼。
中文能夠使用的字符集兩種：
第一種：UTF-8
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
第二種：gb2312
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
也可以寫成gbk
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
思考：那么是是字符集呢？
例如：頁面使用utf-8編碼，但是頁面使用gbk解析，這樣的話，就會出現亂碼。
代碼：
效果：
6.1.3 關鍵字和頁面描述
設置頁面描述：
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
只要設置的Description的頁面，那么百度就根據里面的描述來收錄我們的網站。當用戶在在百度搜索某些和我們description里面設置的關鍵字一樣的時候，百度則會滿足條件的頁面進行返回，這個技術叫做SEO，search engine optimization，搜索引擎優化。
設置頁面關鍵字：
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到你。
Keywords就是“關鍵詞”的意思。
6.1.4 title標簽
<title>網頁的標題</title>
title也是有助于SEO搜索引擎優化的。表現形式為：
七、HTML語法特性
7.1 HTML對換行不敏感，對tab不敏感
HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。
百度為了追求極致的顯示速度，所以HTML標簽都沒有換行、都沒有縮進（tab），HTML和換不換行無關，標簽的層次依然清晰，只不過程序員不可讀了。
7.2 空白折疊現象
HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。
例如如下的代碼里面有空格、縮進、換行。
<p>
我喜歡
編程
</p>
效果：
7.3 標簽要嚴格封閉
標簽必須有嚴格的開始和結束；雖說有的時候不加結束標簽，頁面也可以正常顯示；但是作為一個合格的程序員還是建議按照標準來實現。
八、HTML常見標簽
8.1 h和p標簽
8.1.1 h標題
8.1.3 審查元素
h是容器級的標簽。理論上里面可以放置p、ul，只是法律上的允許，在語義上，不要這么寫。
通過標簽嵌套，這里需要講解一下chrome瀏覽器的審查元素。
例如：編寫一個個人簡介
錯誤寫法：
<p>
<h2>喬布斯簡介</h2>
喬布斯是一個非常了不起的人物.....
</p>
瀏覽器不允許你這么做，我們使用Chrome的F12審查，你會發現，瀏覽器自己把p封閉掉了，不讓你去包裹h1。
正確寫法
<h2>喬布斯簡介</h2>
<p>喬布斯是一個非常了不起的人物.....</p>
九、img-圖片標簽
9.1 能用的圖片類型
頁面上可以插入圖片，能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什么區別，css課上講。
不能往網頁中插入的圖片格式是：psd、ai
9.2 語法
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器上。
插入方法：
img是英語image“圖片”的簡寫
src 是英語source“資源”的簡寫，千萬不要寫成scr。
src是img標簽的屬性，baby.jpg是這個屬性的值。
這個標簽和我們之前學的，都不一樣，因為這個標簽不是“對兒”。自封閉標簽，也稱為單標簽。
為什么？原因很簡單，如果是對兒，里面就要有內容，表示給這個內容增加語義。比如
圖片就是一個圖片，不需要給什么文字增加語義，所以就是自己一個人活得挺好：
常見的單標簽有哪些呢？
常見單標簽如下：
案例1：我們現在需要在頁面上輸出如下的古詩。
作者：白居易
離離原上草，一歲一枯榮。
野火燒不盡，春風吹又生。
遠芳侵古道，晴翠接荒城。
又送王孫去，萋萋滿別情。
代碼：
效果：
案例2：有的時候，我們需要給內容對內容做一個分割輸出，這個時候可以使用
標簽
代碼：
效果：
9.3 alt屬性
alt屬性：alt是英語alternate“替代”的意思，就表示不管因為什么原因，當這個圖片無法被顯示的時候，出現的替代文字。
代碼：
效果：
9.4 相對路徑
HTML中插入圖片，所以現在有兩個文件，一個html文件，一個是jpg文件。
我們關心的就是這兩個文件的相對位置。即使這個網站項目，被用u盤拷給了別人，只要相對路徑不變。圖片一定能夠正常顯示。
當圖片在文件夾里面的時候：
代碼：
效果
如果在很深的文件夾中，也不怕，可以一直羅列下去即可。
如果情況變得復雜，我們的圖片在當前html文件的上一層的文件夾中
代碼：
面試題：
標準答案：
1<img src="../../photo/1.png" />
解釋：
現在document是最大的文件夾，里面有兩個文件夾work和photo。work中又有一個文件夾叫做myweb。myweb文件夾里面有index.html。 所以index.html在myweb文件夾里面，上一級就是work文件夾，上兩級就是document文件夾。通過document文件夾當做一個中轉站，進入photo文件夾，看到了1.png。
十、超鏈接
10.1 基本寫法
一個網站，是由很多html網頁組成的，html網頁之間能夠通過超級鏈接互相跳轉，從而形成了“網”。所以才有“互聯網”一說。
語法：
效果圖：
a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文本級的標簽。
href是英語hypertext reference超文本地址的縮寫。代表前往的網頁地址，可以是相對路徑，也可以是絕對路徑。
相對路徑
和自己在同一個服務器，從自己出發的頁面。一般都是 ./lst.html 或者 ../goods.html這樣
絕對路徑
使用http：//這樣開頭的網站是絕對路徑。例如我們希望點擊前往百度。
10.2 a標簽的另外兩個屬性
title 懸停文本
展示效果：
target 是否在新窗口中打開
target實際上是“目標”的意思。
blank就是“空白”的意思，就表示新建一個空白窗口。為啥有一個_ ，就是語法規定。也就是說，如果不寫target=”_blank”那么就是在相同的標簽頁打開，如果寫了，就是在新的空白標簽頁中打開。
10.3 頁面內的錨點
定義：
可以在頁面當定義錨點，所謂的錨點，就是一個小標記，這個小標記是用戶不可察覺的，用戶不知道這里有一個標記。主要用于本頁面之前的跳轉，常見的使用場合是小說網站，或者在線手冊。
演示：
http://www.motie.com/book/11137/chapter
http://document.thinkphp.cn/manual_3_2.html#page_trace
效果展示：
代碼實操：
- 定義錨點：錨點用name屬性來設置，在一個a標簽上面設置name屬性（或者id屬性），不需要設置href屬性，那么就是頁面的一個錨點。
2.使用a鏈接指向某個錨點：
- 那么網址上的效果如下：
10.4 a是一個文本級的標簽
1.比如一個段落中的所有文字都能夠被點擊
p包裹a：
而不是a包裹p：
a的語義要小于p，a就是可以當做文本來處理，所以p里面相當于放的就是純文字。
- 能夠制作能被點擊的圖片
十一、列表
在web開發中，有3中類型的列表
11.1 無序列表
無序列表，用來表示一個列表的語義，并且每個項目和每個項目之間，是不分先后的。
ul：英語unordered list，“無序列表”的意思。
li：英語list item ， “列表項”的意思。
你會發現，這是我們學習的第一個“組標簽”，就是要么不寫，要么就要寫一組。
例如我們要列出中國的一線城市：
效果：
也就是說，所以的li不能單獨存在，必須包裹在ul里面；反過來說，ul的“兒子”不能是別的東西，只能有li。
瀏覽器會默認的給無序列表小圓點的“先導符號”。但是，我們這里再次強調，ul的作用，并不是給文字增加小圓點的，而是增加無序列表的“語義”的。
錯誤演示
下面的是錯誤的，因為必須用ul包裹：
下面的也是錯誤的，因為ul里面只能有li標簽，而不能有別的：
ul標簽實際應用場景
導航條：
li里面放置的內容可能很多：例如當當的搜索頁面里面展示的列表項
ul的兒子，只能是li。但是li是一個容器級標簽，li里面什么都能放，比如：
11.2 有序列表
ordered list 有序列表，用ol表示
代碼：
效果：
注意：瀏覽器會自動增加阿拉伯序號，也就是說，ol和ul就是語義不一樣，怎么使用都是一樣的。
ol里面只能有li，li必須被ol包裹。li是容器級。
ol這個東西用的不多，如果想表達順序，大家一般也用ul：
11.3 定義列表
定義列表也是一個組標簽，不過比較復雜，出現了三個標簽：
dl表示definition list 定義列表
dt表示definition title 定義標題
dd表示definition description 定義描述信息
dt、dd只能在dl里面；dl里面只能有dt、dd
代碼：
效果：
表達的語義是兩層：
- 是一個列表，列出了html、css、js三個項目
2）每一個詞兒都有自己的描述項，dd是負責對dt的解釋說明
注意：一般我們都是使用ul來描述列表的。
十二、div和span
div和span是非常重要的標簽，div的語義是division“分割”； span的語義就是span“范圍、跨度”。
在后面的CSS學習中，我們將知道，這兩個東西，都是最最重要的“盒子”。
div在瀏覽器中，默認是不會增加任何的效果改變的，但是語義變了，div中的所有元素是一個小區域。
div標簽是一個容器級標簽，里面什么都能放，甚至可以放div自己
span也是表達“小區域、小跨度”的標簽，但是是一個“文本級”的標簽。
就是說，span里面只能放置文字、圖片、表單元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大東西的：
div標簽是最最重要的布局標簽，例如下面的布局頁面
對于上面的布局一般叫做“div+css”。div標簽負責布局，負責結構，負責分塊。css負責樣式。
十三、表單
表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。例如，網站提供的注冊、登錄等功能。
form是英語表單的意思。form標簽里面有action屬性和method屬性，在學習Ajax時候我們詳細的學習。稍微提一下：action屬性就是表示，表單將提交到哪里。 method屬性表示用什么HTTP方法提交，有get、post兩種。
13.1 文本框
input表示“輸入”，指的是這是一個“輸入小部件”，
type表示“類型”，
text表示“文本”，指的是類型是一個文本框的輸入小部件。
效果：
value表示“值”，value屬性就是默認有的值，文本框中已經被填寫好了：
效果：
13.2 密碼框
也就是說，input標簽很神奇，又是文本框，又是密碼框。
到底是啥？看type屬性的值是什么，來決定。
如果type=”text” 文本框
如果type=”password” 密碼框
效果：
13.3 單選按鈕
效果：
注意：對于單選按鈕，只能選一個，術語叫做“互斥”。
radio是“收音機”的意思，input的type的值，如果是radio就是單選按鈕。非常像以前的收音機，按下去一個按鈕，其他的就抬起來了。所以叫做radio。
單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
默認被選擇，就應該書寫checked=”checked”
13.4 復選框
也是input標簽，type是checkbox。
復選框，最好也是有相同的name（雖然他不需要互斥，但是也要有相同的name）
13.5 下拉列表
select就是“選擇”，option“選項”。
select標簽和ul、ol、dl一樣，都是組標簽。
13.6 多行文本框（文本域）
text就是“文本”，area就是“區域”。
效果：
這個標簽，是個標簽對兒。對兒里面不用寫東西。如果寫的話，就是這個框的默認文字。
cols屬性表示columns“列”，rows屬性表示rows“行”。
值就是一個數，表示多少行，多少列。
13.7 三種按鈕
按鈕也是input標簽，一共有三種按鈕：
普通按鈕：
button就是英語“按鈕”的意思。value就是“值”的意思，按鈕上面顯示的文字。
提交按鈕：
submit就是英語“提交”的意思。這個按鈕不需要寫value自動就有“提交”文字。
這個按鈕點擊，表單真的能提交。這個表單就會被提交到，form標簽的action屬性中的那個頁面中去。但是需要我們學習PHP之后，才能對提交的數據進行處理。
重置按鈕：
效果：
reset就是“復位”的意思。點擊該按鈕后會清空表單里面輸入的內容。
13.8 label標簽
本質上講，“用戶名”這三個漢字，和input元素沒有關系。
label就是解決這個問題的。
input元素要有一個id，然后label標簽就有一個for屬性，和id相同，就表示綁定了，這個label和input就有綁定關系了。
十四、HTML雜項
14.1 HTML注釋
任何的程序、代碼都有注釋，注釋就是給程序員看的，不影響程序的。
適當的注釋，能夠讓我們的程序更加可讀，所以用中文提示自己，這里的程序是干什么的。
HTML注釋的語法
Sublime中按ctrl+/ 就是注釋
14.2 字符實體
我們想在頁面上輸出“<h1>”這些字符，但是HTML認為這是一個標簽，還沒封閉。
例如：很開心啊，今天我們學習了<h1>標簽，老師說這個標簽是主標題的語義。
代碼：
效果：
這個時候并沒有正常顯示h1標簽，瀏覽器而是對其進行了解析。那么該如何處理呢？
所以，我們可以使用如下的符號來代替 < 或者 >。
<
就是<的字符實體，什么意思呢？就是用常用字符表示這些符號的方式。
lt 就是英語less than 小于的意思；
>
就是>的字符實體。
gt就是greater than 大于的意思。
©
就是? 版權符號。
nbsp就是英語non-breaking spacing不打斷空格的意思，就是空格。
所以：如何要在 哈哈 之間加上四個空格該如何處理呢？
空出了4個字的格，可以防止空白折疊現象。
14.3 HTML廢棄標簽介紹
HTML現在只負責語義，而不負責樣式。但是HTML一開始，連樣式也包辦了。
這些樣式的標簽，都已經被廢棄。
font標簽
文本相關的標簽
這些標簽，是有著濃厚的樣式的作用，干涉了css的作用，所以HTML拋棄了他們。
水平線
