一、web標准介紹
web標准：
- w3c：萬維網聯盟組織，用來制定web標准的機構（組織）
- web標准：制作網頁遵循的規范
- web標准規范的分類：結構標准、表現標准、行為標准。
- 結構：html。表示：css。行為：Javascript
總結說明：
- 結構標准：相當於人的骨架。html就是用來制作網頁的。
- 表現標准： 相當於人的衣服。css就是對網頁進行美化的。
- 行為標准： 相當於人的動作。JS就是讓網頁動起來，具有生命力的
一張圖明白什么是html、css、js
二、html
1、html介紹
html全稱HyperText Markup Language，翻譯為超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。比如字體、顏色、大小等。
超文本：音頻，視頻，圖片稱為超文本。
標記 ：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。
作用：HTML是負責描述文檔語義的語言。
注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。
2、html網絡術語
- 網頁 ：由各種標記組成的一個頁面就叫網頁。
- 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
- 標記：
<p>稱為開始標記 ，</p>稱為結束標記，也叫標簽。每個標簽都規定好了特殊的含義。 - 元素：
<p>內容</p>稱為元素. - 屬性：給每一個標簽所做的輔助信息
3、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的基本語法特征
HTML對換行不敏感，對tab不敏感
HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關，都不影響頁面的結構。
也就是說，HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關系。但是，我們發現有良好的縮進，代碼更易讀。要求大家都正確縮進標簽。
空白折疊現象
HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示
標簽要嚴格封閉
<html></html> <meta />
③html結構
1 <!DOCTYPE html> #文檔聲明頭，DocType Declaration，簡稱DTD，此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。 2 <html lang="en"> 3 <head> #頭標簽（head）
4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
head標簽
<title>：指定整個網頁的標題，在瀏覽器最上方顯示。<meta>：提供有關頁面的基本信息<link>：定義文檔與外部資源的關系。- <style>:定義內部樣式表與網頁的關系
Meta標簽
標簽位於文檔的頭部，不包含任何內容，針對搜索引擎和更新頻度的描述和關鍵詞，提供的信息是用戶不可見的。
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，搜索引擎優化）。
title標簽
主要用來告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題
<title>小米商城</title>
④html顏色
顏色表示
- 純單詞表示：red、green、blue、orange、gray等
- 10進制表示：rgb(255,0,0)
- 16進制表示：#FF0000、#0000FF、#00FF00等
RGB色彩模式
自然界中所有的顏色都可以用紅、綠、藍(RGB)這三種顏色波長的不同強度組合而得，這就是人們常說的三原色原理
4、html標簽
html標簽又叫做html元素，它分為塊級元素和內聯元素（也可以叫做行內元素），都是html規范中的概念。
①塊級元素
塊級元素是指本身屬性為display:block;的元素。因為它自身的特點，我們通常使用塊級元素來進行大布局（大結構）的搭建。
特點：
獨占一行，每一個塊級元素都會從新的一行重新開始，從上到下排布
可以直接控制寬度、高度以及盒子模型的相關css屬性
在不設置寬度的情況下，塊級元素的寬度是它父級元素內容的寬度
在不設置高度的情況下，塊級元素的高度是它本身內容的高度
②內聯元素
內聯元素是指本身屬性為display:inline;的元素。因為它自身的特點，我們通常使用塊級元素來進行文字、小圖標（小結構）的搭建
特點：
和其他內聯元素從左到右在一行顯示
不能直接控制寬度、高度以及盒子模型的相關css屬性，但是直接設置內外邊距的左右值是可以的
內聯元素的寬高是由本身內容的大小決定（文字、圖片等）
內聯元素只能容納文本或者其他內聯元素（此處請注意，不要在內聯元素中嵌套塊級元素）
③文本級和容器級
從HTML的角度來講，標簽還可以分為文本級和容器級：
文本級標簽：p、span、a、b、i、u、em。
容器級標簽：div、h系列、li、dt、dd。
文本及標簽的意思是標簽中只可以放文本，不可以放其他內容。你會發現除了p之外，所有的文本級標簽，都是行內元素。p是個文本級，但是是個塊級元素。
5、html中的特殊字符
：空格 （non-breaking spacing，不斷打空格）<：小於號（less than）>：大於號（greater than）&：符號&"：雙引號'：單引號©：版權©™：商標™
常用特殊字符：
、<、>、©
比如說，你想把<p>作為一個文本在頁面上顯示，直接寫<p>是肯定不行的，因為這代表的是一個段落標簽，所以這里需要用到轉義字符。應該這么寫：
這是一個HTML語言的<p>標簽