整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網頁，可以群（526929231）使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個編輯器
剛開始設計HTML語言是為了將文字圖像關聯在一起，用另一臺發送或接收
HTML 不是一種編程語言，而是一中標記語言(mark-up language),標記語言是一套標記標簽(mark-up tag)
標簽是由尖括號 < > 把關鍵詞括起來，標簽通常是成對出現的
讀取 HTML 文檔，使用標簽來解析頁面的內容，以網頁的形式現實，瀏覽器不會現實HTML標簽
每種瀏覽器都有自己的內核(引擎)（解析網頁的一個程序，io以什么方式去渲染它都要通過引擎去執行）
目前主流的瀏覽器分為五種
Chrome谷歌瀏覽器 （Webkit內核，V8 js引擎）
Firefox火狐瀏覽器 （Gecko內核）
Internet Explorer IE瀏覽器（ Trident內核）
Opera 歐朋瀏覽器 （Presto內核） 主要市場：移動端
Safari 蘋果瀏覽器 （Webkit內核，但JS引擎為Nitro）
不需要去記，簡單了解下
標簽必須閉合
所有標簽名一律小寫
代碼縮進，使閱讀代碼更加易懂
特殊符號規范使用
命名規范，見名之意
PS: 所有的標記符號都是半角英文
眾說紛紜編輯器太多，最終只是一個工具，希望同學們能從萬千世界中找到適合自己的編輯器伙伴
| 編輯器 | 描述 |
|---|---|
| EditPlus | 手寫模式，適合初學手寫，無代碼提示(有IE調試視圖) |
| Sublime | 插件特別多，占用內存小，啟動速度快，打開大項目較慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特別多，啟動較慢，占用內存大，開發和管理視圖都很方便 |
| Dreamweaver | 適合初學，主要代碼提示和代碼插入功能強大，主要偏向于設計(有設計視圖) |
| 插件名 | 描述 | 詳情請戳 |
|---|---|---|
| emmet | 前端自動補全，提供快捷補全方式 | |
| ColorPicker | 調色板，顏色選擇器 | |
| SublimeTmpl | sublime模板，可以快速創建一個HTML模板 | |
| view in browser | 用快捷方式打開瀏覽器進行調試HTML(需要配置參考后面網頁) | |
| LiveReload | 實時刷新HTML(編輯器里按下保存ctrl+s的時候，已經打開的HTMl會自動刷新) | 谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載 |
| Color Highlighter | CSS顏色代碼高亮及顏色預覽提示 | |
| CSS3 | CSS3的代碼高亮提示 | 還針對了CSS3的選擇器及錨類選擇器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代碼提示 | |
| Sublime-Better-Completion | 可自選開啟代碼提示，支持jQ、js、bootstrap、php、sql ... | 倉庫地址此插件只能通過Github克隆下載安裝安裝方法 |
注：Github 網頁中 下面是有詳細的使用方法 packagecontrol.io官網 里面search 可以進行搜索插件名字來找到具體使用方法，還有什么不懂或者安裝出現編碼錯誤以及安裝不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是標簽，主要用于文檔類型的聲明 |
| charset="utf-8" | 聲明字符編碼集 |
| http-equiv="Content-Type" | 把Content屬性關聯到HTTP頭部(協議頭) |
HTML模板
簡單了解，并不需要熟練掌握
Dom節點樹
.html .htm這兩種是比較常見的
在早期系統中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展采用.htm
現在通常使用.html作為擴展名
接下來所有的標簽元素學習都在body標簽里面去敲打實現、
為了突出標題，字體大小和加粗發生相應的改變
<h1>我是大主題</h1> <h2>我是大主題</h2> <h3>我是大主題</h3> <h4>我是大主題</h4> <h5>我是大主題</h5> <h6>我是大主題</h6>
<!doctype html><!-- 讓瀏覽器使用html5的標準解析 --> <html> <head> <!-- 設置字符編碼集讓瀏覽器使用utf8解析當前網頁 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，關鍵詞，多個請用逗號分開" /> <meta name="description" content="網頁描述，八十字內" /> <title>瀏覽器標簽頁上的網頁標題</title> </head> <body> <!-- 所有的標簽學習都在這body里面去敲，上面head元素里面的內容做個了解就可以了 --> <h1>我是大標題</h1> <h2>我是主題2</h2> <h3>我是主題3</h3> <h4>我是主題4</h4> <h5>我是主題5</h5> <h6>我是主題6</h6> </body> </html>
可以發現h標簽從h1到h6會隨著數值越小字越小，并且都是會加粗和各占一行的狀態（前后的元素都會被換行）
h1標簽一般一個頁面里面只會寫一次，為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優化)
<p> 冬著一身素衣，緩緩而來，季節沒有了往日的姹紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。 </p>
剛我們了解到了瀏覽器是識別尖括號的，如果要在頁面中顯示html標記那要怎么做呢？這時候就需要特殊符號的表示來顯示
| 符號 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引號 | " |
| 版權 | © |
| ×叉 | × |
| & | & |
| 符號 | 描述 |
|---|---|
| B標簽 | 物理加粗，頁面呈現加粗狀態. |
| Strong標簽 | 不僅能加粗，還利于搜索引擎優化 |
<b>物理加粗，頁面呈現加粗狀態.</b> <strong>不僅能加粗，還利于搜索引擎優化，就是類似于百度、谷歌這種搜索引擎爬取你的網頁的時候會查找這個標簽里面的內容來優化顯示網頁的排名</strong>
可以根據word文檔上面發現 b是加粗 u是下劃線 i是傾斜 同樣適用于標簽
<i>我是傾斜</i> <u>我加了下劃線</u>
鏈接一個頁面,點擊則會跳轉這個鏈接頁面
使用錨點滾動到設定的位置
<a href=""></a> a標簽中的href控制點擊的時候跳轉到哪里如果沒寫表示刷新當前頁面 <a href="#"></a> 跳轉到當前頁面(回歸到頁面頂部) <a href="javascript： void(0);"></a> 死鏈接，不會跳轉，一般用于js特效 <a href="#name">錨點到一個標簽上所對應的ID名字，點擊則跳到那個標簽位置</a> <a >跳轉到百度</a> 跳轉到百度 需要注意的是 http 協議不能少
點擊#flag的a標簽的時候會跳到到上面h2標簽
只有擁有name屬性的
a標簽
才能錨點,還有一種方式是通過ID標識唯一元素，也可以跳轉(不僅僅是a標簽)
| 描述 | 標簽 |
|---|---|
| 滾動標簽 | marquee |
| 字體標簽 | font |
| 定義水平線 | hr |
marquee
| 屬性 | 描述 |
|---|---|
| direction | 滾動方向 |
| behivior | 行為 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滾動 |
| scroll | 滾動 |
| slide | 滑落 |
| 屬性 | 描述 |
|---|---|
| color | 顏色 |
| size | 0-7 |
| face | 字體 |
與font相似，擁有color和size屬性
hr標簽沒有結束標簽 按照早期的習慣也H5也遵循XHTML的解析 所以統一會加一個反斜杠表示結束這個標簽，不加也能夠正確顯示，但是養成一個良好的習慣確實重要，比如微信小程序就是沒有結束標簽必須要使用一個反斜杠結尾否則直接報錯、
結合今天所學，寫一個簡單的網頁
內容如下：
寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫，網上一大把哈哈，可以自己寫下，鍛煉下思維
需要包括h、p、a、加粗
題材不限，至少200字
在習題一的文章底部，使用滾動標簽進行滾動方向為45°
HTTP / 1.1服務器支持所謂的虛擬主機。也就是說，相同的物理服務器可以容納多個虛擬主機，具有不同的主機名（例如，www.nowhere123.com和www.test909.com）以及它們自己的專用文檔根目錄。因此，在HTTP / 1.1 GET請求中，必須包括一個名為“Host”的請求頭，以選擇其中一個虛擬主機。
GET /index.html HTTP/1.1 Host: 127.0.0.1 (blank line)
HTTP/1.1 200 OK Date: Sun, 18 Oct 2009 12:10:12 GMT Server: Apache/2.2.14 (Win32) Last-Modified: Sat, 20 Nov 2004 07:16:26 GMT ETag: "10000000565a5-2c-3e94b66c2e680" Accept-Ranges: bytes Content-Length: 44 Content-Type: text/html <html><body><h1>It works!</h1></body></html>
以下示例顯示HTTP / 1.1請求中的“Host”標頭是必需的。如果缺少“Host”標頭，則服務器返回錯誤“400 Bad Request”。
GET /index.html HTTP/1.1 (blank line) HTTP/1.1 400 Bad Request Date: Sun, 18 Oct 2009 12:13:46 GMT Server: Apache/2.2.14 (Win32) Content-Length: 226 Connection: close Content-Type: text/html; charset=iso-8859-1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>400 Bad Request</title> </head><body> <h1>Bad Request</h1> <p>Your browser sent a request that this server could not understand.<br /> </p> </body></html>
在前面的所有示例中，如果可以滿足請求（即無條件），則服務器返回整個文檔。您可以使用其他請求標頭來發出“條件請求”。例如，要根據上次修改日期請求文檔（以便決定是否使用本地緩存副本），或者要求提供文檔（或范圍）的一部分而不是整個文檔（對于下載大文件）。
條件請求標頭包括：
本節介紹一些常用的請求標頭。
有關更多詳細信息，請參閱HTTP規范。
標題名稱的語法是使用短劃線（ - ）連接的初始標題的單詞，例如，Content-Length，If-Modified-Since。
Host: domain-name HTTP / 1.1支持虛擬主機。多個DNS名稱（例如，www.nowhere123.com和www.nowhere456.com）可以駐留在同一物理服務器上，具有自己的文檔根目錄。HTTP / 1.1中必須使用主機頭來選擇其中一個主機。
如果服務器，客戶端可以使用以下標頭進行內容協商，以請求服務器提供文檔的首選類型（就媒體類型而言，例如JPEG與GIF，或使用的語言，例如英語與法語）維護同一文檔的多個版本。
Accept: mime-type-1, mime-type-2, ...客戶端可以使用Accept標頭告訴服務器它可以處理的MIME類型，它更喜歡。如果服務器具有所請求文檔的多個版本（例如，GIF和PNG中的圖像，或TXT和PDF中的文檔），則它可以檢查該標題以決定將哪個版本傳遞給客戶端。（例如，PNG比GIF更先進，但并非所有瀏覽器都支持PNG。）此過程稱為內容類型協商。
Accept-Language: language-1, language-2, ... 客戶端可以使用Accept-Language標頭告訴服務器它可以處理或更喜歡的語言。如果服務器具有所請求文檔的多個版本（例如，英語，中文，法語），則它可以檢查該標題以決定返回哪個版本。此過程稱為語言協商。
Accept-Charset: Charset-1, Charset-2, ...對于字符集協商，客戶端可以使用此標頭告訴服務器它可以處理或更喜歡哪些字符集。字符集的示例是ISO-8859-1，ISO-8859-2，ISO-8859-5，BIG5，UCS2，UCS4，UTF8。
Accept-Encoding: encoding-method-1, encoding-method-2, ... 客戶端可以使用此標頭告訴服務器它支持的編碼類型。如果服務器具有所請求文檔的編碼（或壓縮）版本，則它可以返回客戶端支持的編碼版本。服務器還可以在返回客戶端之前選擇對文檔進行編碼，以減少傳輸時間。服務器必須設置響應頭“Content-Encoding”以通知客戶端返回的文檔已編碼。常見的編碼方法是“x-gzip（.gz，.tgz）”和“x-compress（.Z）”。
Connection: Close|Keep-Alive -客戶端可以使用此標頭告知服務器在此請求之后是否關閉連接，或者為另一個請求保持連接活動。HTTP / 1.1默認使用持久（保持活動）連接。HTTP / 1.0默認關閉連接。
Referer: referer-URL - 客戶端可以使用此標頭指示此請求的引用者。如果您點擊網頁1中的鏈接訪問網頁2，則網頁1是請求網頁2的推薦人。所有主要瀏覽器都設置此標題，可用于跟蹤請求的來源（用于網絡廣告），或內容定制）。盡管如此，這個標題不可靠并且很容易被欺騙。請注意，推薦人拼錯為“Referer”（不幸的是，您也必須遵循）。
User-Agent: browser-type - 確定用于發出請求的瀏覽器類型。服務器可以根據瀏覽器的類型使用此信息返回不同的文檔。
Content-Length: number-of-bytes -由POST請求使用，以通知服務器請求正文的長度。
Content-Type: mime-type -由POST請求使用，以通知服務器請求正文的媒體類型。
Cache-Control: no-cache|... -客戶端可以使用此標頭指定代理服務器如何緩存頁面。“no-cache”要求代理從原始服務器獲取新副本，即使本地緩存副本可用。（HTTP / 1.0服務器無法識別“Cache-Control：no-cache”。而是使用“Pragma：no-cache”。如果您不確定服務器的版本，則包括兩個請求標頭。）
Authorization: 客戶端使用它來提供其憑據（用戶名/密碼）以訪問受保護資源。
Cookie: cookie-name-1=cookie-value-1, cookie-name-2=cookie-value-2, ... - 客戶端使用此標頭將cookie返回給服務器，該服務器之前由此服務器設置用于狀態管理。
If-Modified-Since: date -告訴服務器僅在特定日期之后修改了頁面。
假設文檔基目錄“htdocs”中存在名為“testdir”的目錄。
如果客戶端向“/ testdir /”發出GET請求（即，在目錄中）。
有趣的是，如果客戶端向“/ testdir”發出GET請求（未指定目錄路徑“/”），則服務器返回“301 Move Permanently”，其新“Location”為“/ testdir /“。
大多數瀏覽器將跟進另一個“/ testdir /”請求。例如，如果您從瀏覽器發出不帶尾隨“/”的http://127.0.0.1:8000/testdir，您可能會注意到在給出響應后，地址中添加了一個尾隨的“/”。所以應該在目錄請求中包含“/”以保存額外的GET請求。
URL (Uniform Resource Locator)
RFC 2396中定義的URL（統一資源定位符）用于通過Web唯一標識資源。 URL具有以下語法：
protocol://hostname:port/path-and-file-name
URL中有4個部分：
URL不能包含特殊字符，例如空格或“?”。特殊字符以％xx的形式編碼，其中xx是ASCII十六進制代碼。例如，'?'編碼為％7e;'+'編碼為％2b。空白可以編碼為％20或'+'。編碼后的URL稱為編碼URL。
RFC3986中定義的URI（統一資源標識符）比URL更通用，URL甚至可以在資源中定位片段。
HTTP協議的URI語法是：
http://host:port/path?request-parameters#nameAnchor
客戶端可以使用請求標頭Accept-Charset與服務器協商它喜歡的字符集。
Accept-Charset: charset-1, charset-2, ...
常見的字符集包括：ISO-8859-1（Latin-I），ISO-8859-2，ISO-8859-5，BIG5（繁體中文），GB2312（簡體中文），UCS2（2字節Unicode），UCS4（4字節Unicode），UTF8（編碼Unicode）等。
客戶端可以使用Accept-Encoding標頭告訴服務器它支持的編碼類型。常見的編碼方案是：“x-gzip（.gz，.tgz）”和“x-compress（.Z）”。
Accept-Encoding: encoding-method-1, encoding-method-2, ...
類似地，AddEncoding指令用于將文件擴展名與編碼方案相關聯。
例如：
AddEncoding x-compress .Z AddEncoding x-gzip .gz .tgz
在HTTP / 1.0中，服務器在默認情況下傳遞響應后關閉TCP連接（連接：關閉）。也就是說，每個TCP連接只服務一個請求。這不是效率，因為許多HTML頁面包含超鏈接（通過<a href="url">標記）到其他資源（例如圖像，腳本 - 本地或遠程服務器）。如果下載包含5個內聯圖像的頁面，則瀏覽器必須與同一服務器建立6次TCP連接。
客戶端可以與服務器協商并要求服務器在傳遞響應后不關閉連接，以便可以通過同一連接發送另一個請求。這稱為持久連接（或保持連接）。持久連接極大地提高了網絡的效率。對于HTTP / 1.0，默認連接是非持久性的。要請求持久連接，客戶端必須在請求消息中包含請求標頭“Connection：Keep-alive”以與服務器協商。
對于HTTP / 1.1，默認連接是持久的。客戶端不必發送“Connection：Keep-alive”標頭。相反，客戶端可能希望發送標題“Connection：Close”以要求服務器在傳遞響應后關閉連接。
持久連接對于具有許多小內聯圖像和其他相關數據的網頁非常有用，因為所有這些都可以使用相同的連接下載。
持久連接的好處是：
KeepAlive指令決定是否支持持久連接。這取值為On或Off。
KeepAlive On|Off
MaxKeepAliveRequests指令設置可以通過持久連接發送的最大請求數。您可以設置為0以允許無限數量的請求。建議設置較高的數字以獲得更好的性能和網絡效率。
MaxKeepAliveRequests 200
KeepAliveTimeOut指令設置持久連接等待下一個請求的超時時間（以秒為單位）。
KeepAliveTimeout 10
本文版權歸是三僡然所有，轉載請標明出處。歡迎轉載，歡迎評論，歡迎分享。如果你有文章想分享可以聯系我。
標
網頁必定會存在跳轉不同網頁的功能，幾乎可以在所有的網頁中找到鏈接，點擊鏈接可以從一個網頁跳轉到另一個網頁。
跳轉到百度
1、標簽
<a />
2、屬性
Href:要跳轉到的地址
Target：跳轉的網頁在哪個窗口打開
Target常用的值有兩個，_self表示在自身網頁中打開，_blank表示新打開一個窗口。默認是_self。
3、示例
<a target="_blank">我要跳轉到百度</a>
超鏈接標簽除了有跳轉網頁的功能以外，還有一個功能，就是書簽功能，經常會用在小說網站或者文檔網站。
跳轉到書簽位置
超鏈接標簽本身是具有跳轉功能，再結合書簽功能，就能達到跳轉到其他頁面的書簽位置。用法都一樣，只不過書簽是定在其他網頁，然后本頁面的超鏈接標簽的href的值，是跳轉路徑+#+書簽標簽。以下示例：
1、在目標網頁里定好書簽
在目標網頁里定好書簽
2、本網頁的超鏈接標簽對接好目標地址以及目標書簽.
對接目標地址以及目標書簽
跳轉到目標網頁并定位到書簽位置
超鏈接標簽知識體系
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
