主要內容

web標準
瀏覽器介紹
開發工具介紹
HTML介紹
HTML顏色介紹
HTML規範
HTML結構詳解

1、web標準

web準備介紹：css

w3c：萬維網聯盟組織，用來制定web標準的機構（組織）
web標準：製做網頁遵循的規範
web準備規範的分類：結構標準、表現標準、行爲標準。
結構：html。表示：css。行爲：Javascript。

web準備總結：html

結構標準：至關於人的身體。html就是用來製做網頁的。
表現標準：至關於人的衣服。css就是對網頁進行美化的。
行爲標準：至關於人的動做。JS就是讓網頁動起來，具備生命力的

2、瀏覽器介紹

瀏覽器是網頁運行的平臺，經常使用的瀏覽器有IE、火狐（Firefox)、谷歌（Chrome）、獵豹瀏覽器、Safari和Opera等git

瀏覽器內核：github

瀏覽器	內核
IE	trident
chrome	blink
火狐	gecko
Safari	webkit

PS：「瀏覽器內核」也就是瀏覽器所採用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。渲染引擎是兼容性問題出現的根本緣由。web

3、開發工具介紹

Sublime Text的使用面試

參考連接：Sublime Text使用技巧chrome

4、HTML介紹

一、HTML的概述編程

html全稱HyperText Mackeup Language，翻譯爲超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。好比字體、顏色、大小等。瀏覽器

超文本：音頻，視頻，圖片稱爲超文本。
標記：<英文單詞或者字母>稱爲標記，一個HTML頁面都是由各類標記組成。

做用：HTML是負責描述文檔語義的語言。服務器

注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。

HTML是負責描述文檔語義的語言

html中，除了語義，其餘什麼都沒有。

html是一個純本文文件（就是用txt文件更名而成），用一些標籤來描述文字的語義，這些標籤在瀏覽器裏面是看不到的，因此稱爲「超文本」，因此就是「超文本標記語言」了。
因此，接下來，咱們確定要學習一堆html中的標籤對兒，這些標籤對兒可以給文本不一樣的語義。

好比，面試的時候問你，h1標籤有什麼做用？

正確答案：給文本增長主標題的語義。
錯誤答案：給文字加粗、加黑、變大。

二、HTML的網絡術語

網頁：由各類標記組成的一個頁面就叫網頁。
主頁(首頁) : 一個網站的起始頁面或者導航頁面。
標記： <p>稱爲開始標記，</p>稱爲結束標記，也叫標籤。每一個標籤都規定好了特殊的含義。
元素：<p>內容</p>稱爲元素.
屬性：給每個標籤所作的輔助信息。

5、HTML顏色介紹

顏色表示:

純單詞表示：red、green、blue、orange、gray等
10進製表示：rgb(255,0,0)
16進製表示：#FF0000、#0000FF、#00FF00等

咱們你們先記住幾個純單詞的顏色，css課程中會詳細講10進制和16進制。

RGB色彩模式：

天然界中全部的顏色均可以用紅、綠、藍(RGB)這三種顏色波長的不一樣強度組合而得，這就是人們常說的三原色原理。
RGB三原色也叫加色模式，這是由於當咱們把不一樣光的波長加到一塊兒的時候，能夠獲得不一樣的混合色。例：紅+綠=黃色，紅+藍＝紫色，綠+藍=青
在數字視頻中，對RGB三基色各進行8位編碼就構成了大約1678萬種顏色，這就是咱們常說的真彩色。全部顯示設備都採用的是RGB色彩模式。
RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。

6、HTML的規範

HTML是一個弱勢語言
HTML不區分大小寫
HTML頁面的後綴名是html或者htm(有一些系統不支持後綴名長度超過3個字符，好比dos系統)
HTML的結構：
- 聲明部分：主要做用是用來告訴瀏覽器這個頁面使用的是哪一個標準。是HTML5標準。
- head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
- body部分：咱們所寫的代碼必須放在此標籤內。

一、編寫HTML的規範

1）全部標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>

（2）全部的標記都必須小寫。

（3）全部的標記都必須關閉。

雙邊標記：<span></span>
單邊標記：<br> 轉成 <br /> <hr> 轉成 <hr />，還有<img src=「URL」 />

（4）全部的屬性值必須加引號。<h1 id="head"></h1>

（5）全部的屬性必須有值。<input type="radio" checked="checked" />

二、HTML的基本語法特徵

（1）HTML對換行不敏感，對tab不敏感

HTML只在意標籤的嵌套結構，嵌套的關係。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。

也就是說，HTML不是依靠縮進來表示嵌套的，就是看標籤的包裹關係。可是，咱們發現有良好的縮進，代碼更易讀。要求你們都正確縮進標籤。

(2) 空白摺疊現象

HTML中全部的文字之間，若是有空格、換行、tab都將被摺疊爲一個空格顯示。

（3）標籤要嚴格封閉

7、HTML結構詳解

新建HTML文件，輸入 html:5,按tab鍵後，自動生成的代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

一、文檔聲明頭

任何一個標準的HTML頁面，第一行必定是一個以

<!DOCTYPE...

開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。

PS:

XHTML：Extensible Hypertext Markup Language，可擴展超文本標註語言。

XHTML的主要目的是爲了取代HTML，也能夠理解爲HTML的升級版。

HTML的標記書寫很不規範，會形成其它的設備(ipad、手機、電視等)沒法正常顯示。

XHTML與HTML4.0的標記基本上同樣。

XHTML是嚴格的、純淨的HTML

如下內容僅作了解：

HTML4.01有哪些規範呢？

首先咱們先肯定一件事兒，咱們如今學習的是HTML4.01這個版本，這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。可是IE六、七、8這些瀏覽器還不能過早的淘汰，因此這幾年網頁仍是應該用HTML4.01來製做。現在，手機、移動端的網頁，就可使用HTML5了，由於其兼容性更高。

說個題外話，html1 至 html3 是美國軍方以及高等研究所用的，並未對外公開。

HTML4.01裏面有兩大種規範，每大種規範裏面又各有3種小規範。因此一共6種規範（見下面）：

HTML4.01裏面規定了普通和XHTML兩大種規範。

HTML以爲本身有一些規定不嚴謹，好比，標籤是否能夠用大寫字母呢？<H1></H1>

因此，HTML就以爲，把一些規範嚴格的標準，又制定了一個XHTML1.0。在XHTML中的字母X，表示「嚴格的」。

總結一下，HTML4.01一共有6種DTD，說白了，HTML第一行語句一共有6種：

下面對上圖中的三種小規範進行解釋：

strict：表示「嚴格的」，這種模式裏面的要求更爲嚴格。這種嚴格體如今哪裏？有一些標籤不能使用。
好比，u標籤，就是給一個本文加下劃線，可是這和HTML的本質有衝突，由於HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。因此，在strict中是不能使用u標籤的。
那怎麼給文本增長下劃線呢？從此的css將使用css屬性來解決。
那麼，XHTML1.0更爲嚴格，由於這個體系自己規定好比標籤必須是小寫字母、必須嚴格閉合標籤、必須使用引號引發屬性等等。
Transitional：表示「普通的」，這種模式就是沒有一些別的規範。
Frameset：表示「框架」，在框架的頁面使用。

在sublime輸入的html:xt，x表示XHTML，t表示transitional。
HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了（W3C本身打臉了）：

<!DOCTYPE html>

ok，下面重點的來了。

二、頭標籤（head）

head標籤都放在頭部分之間。這裏麪包含了：<title>、<meta>、<link>，<style>

<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
<meta>：提供有關頁面的基本信息
<link>：定義文檔與外部資源的關係。
<style>:定義內部樣式表與網頁的關係

2.1 Meta標籤介紹：

元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。

標籤位於文檔的頭部，不包含任何內容。

提供的信息是用戶不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

經常使用的meta標籤：

　　（1）http-equiv屬性

它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

　　（2）name屬性

主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />

這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。讓別人可以找到你，搜索到。

<meta name="Description" content="網易是中國領先的互聯網技術公司，爲用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />

只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，這個技術叫作SEO（search engine optimization，搜索引擎優化）。

效果以下：

<meta name=viewport content="width=device-width, initial-scale=1">

上面這個標籤，是讓咱們網頁支持移動端，移動設備優先（瞭解便可）

2.2 title標籤

主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。

 <title>飛飛飛</title>

HTML介紹和head標籤-01