1.前端語言組成
web准備規范的分類：結構標准、表現標准、行為標准。
web結構：html。表示：css。行為：Javascript。
web准備總結：
結構標准：相當於人的骨架。html就是用來制作網頁的。
表現標准： 相當於人的衣服。css就是對網頁進行美化的。
行為標准： 相當於人的動作。JS就是讓網頁動起來，具有生命力的
2.HTML介紹
2-1 HTML概述
html全稱HyperText Mackeup Language，翻譯為超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。比如字體、顏色、大小等。
- 超文本：音頻，視頻，圖片稱為超文本。
- 標記 ：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。
作用：HTML是負責描述文檔 語義 的語言。
注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。
2-2 HTMl網絡術語
網頁 ：由各種標記組成的一個頁面就叫網頁。
主頁(首頁) : 一個網站的起始頁面或者導航頁面。
標記： <p>稱為開始標記 ，</p>稱為結束標記，也叫標簽。每個標簽都規定好了特殊的含義。
元素：<p>內容</p>稱為元素.
屬性：給每一個標簽所做的輔助信息。
3.HTML的規范
- HTML是一個弱勢語言
- HTML不區分大小寫
- HTML頁面的后綴名是html或者htm(有一些系統不支持后綴名長度超過3個字符，比如dos系統)
- HTML的結構：
- 聲明部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標准。是HTML5標准。
- head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
- body部分：我們所寫的代碼必須放在此標簽內。
3-1 編寫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" />
3-2 HTML的基本語法特性
HTML對換行不敏感，對tab不敏感
HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。
也就是說，HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關系。但是，我們發現有良好的縮進，代碼更易讀。要求大家都正確縮進標簽。
空白折疊現象
HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。
標簽要嚴格封閉
<html></html>
<meta />
4.HTML結構詳細
1.除了語義沒有任何東西
2.標簽格式要嚴格封閉
# !+tab鍵補全出以下代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的標題</title>
</head>
<body>
顯示內容
</body>
</html>
4-1 文檔類型聲明
標准的HTML頁面，第一行一定是文檔類型聲明
開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范
<!doctype html>
4-2 頭標簽 head
head標簽都放在頭部分之間。這里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
<meta>：提供有關頁面的基本信息
<link>：定義文檔與外部資源的關系。
<style>: 定義內部樣式表與網頁的關系
Meta標簽
元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位於文檔的頭部，不包含任何內容。
提供的信息是用戶不可見的。 meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
http-equiv屬性：
<!--重定向 2秒后跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文檔的內容類型(mime文件類型)和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
name屬性：
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到。
只要設置Description頁面描述，那么百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO（search engine optimization，搜索引擎優化）。
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
顯示效果
title標簽和link標簽
<title>我的標題</title>
<link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico">
顯示效果
link外接資源關聯
rel：關聯關系
stylesheet：樣式腳本
href：鏈接資源位置；
css文件：靜態資源，作用是修飾標簽
<link rel="stylesheet" href="./index.css">
style標簽
<style type="text/css">
h2{
color: red
}
</style>
顯示效果
css修飾：h1為綠色，h2為紅色
