html の第一天（上）-----適合新手入門前端
學習目標:
- 瞭解瀏覽器的核心
- 知道web標準的三大結構組成
- 標籤的分類與關係標籤的分類與關係
- p標籤的使用p標籤的使用
- h系列標籤的使用.h系列標籤的使用
- 文字格式化標籤熟記文字格式化標籤熟記
- 標籤的屬性標籤的屬性
- img標籤的使用img標籤的使用
- a標籤的掌握a標籤的掌握
- 相對路徑的掌握 相對路徑的掌握
認識網頁(基本功)
網頁主要由文字、影象和超連結等元素構成。當然，除了這些元素，網頁中還可以包含音訊、視訊以及Flash等。
常見瀏覽器介紹
瀏覽器是網頁執行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。
檢視瀏覽器佔有的市場份額（知曉）
瀏覽器核心（瞭解）
瀏覽器核心又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎 它負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。 JS 引擎 則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。
最開始渲染引擎和 JS 引擎並沒有區分的很明確，後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。有一個網頁標準計劃小組製作了一個 ACID 來測試引擎的相容性和效能。核心的種類很多，如加上沒什麼人使用的非商業的免費核心，可能會有10多種，但是常見的瀏覽器核心
（1）Trident(IE核心)
國內很多的雙核瀏覽器的其中一核便是 Trident，美其名曰 “相容模式”。 代表： IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。
Window10 釋出後，IE 將其內建瀏覽器命名為 Edge，Edge 最顯著的特點就是新核心 EdgeHTML。
（2）Gecko(firefox)
Gecko(Firefox 核心)： Mozilla FireFox(火狐瀏覽器) 採用該核心，Gecko 的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。 可惜這幾年已經沒落了， 比如 開啟速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。
（3） webkit(Safari)
Safari 是蘋果公司開發的瀏覽器，所用瀏覽器核心的名稱是大名鼎鼎的 WebKit。 現在很多人錯誤地把 webkit 叫做 chrome核心（即使 chrome核心已經是 blink 了），蘋果感覺像被別人搶了媳婦，都哭暈再廁所裡面了。
代表瀏覽器：傲遊瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 預設瀏覽器，
（4） Chromium/Bink(chrome)
在 Chromium 專案中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。
大部分國產瀏覽器最新版都採用Blink核心。
瞭解一點：移動端的瀏覽器核心主要說的是系統內建瀏覽器的核心。
目前移動裝置瀏覽器上常用的核心有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit，Android 4.4 之前的 Android 系統瀏覽器核心是 WebKit，Android4.4 系統瀏覽器切換到了Chromium，核心是 Webkit 的分支 Blink，Windows Phone 8 系統瀏覽器核心是 Trident。
Web標準（重點）W3C
通過以上瀏覽器的核心不同，我們知道他們工作原理、解析肯定不同，顯示就會有差別。
問： 哪個語言再全國基本都可以聽得懂？
廣東話：嗨佬！
河南話：弄啥嘞！
東北話：你瞅啥！
Web 標準的好處（知曉）程式設計師一份程式碼可以執行在所有的瀏覽器
- 讓Web的發展前景更廣闊
- 內容能被更廣泛的裝置訪問內容能被更廣泛的裝置訪問
- 更容易被搜尋引擎搜尋更容易被搜尋引擎搜尋
- 降低網站流量費用降低網站流量費用
- 使網站更易於維護使網站更易於維護
- 提高頁面瀏覽速度提高頁面瀏覽速度
Web 標準構成(重點)
Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。（三層分離原則）
結構標準：結構用於對網頁元素進行整理和分類，主要包括XML和XHTML兩個部分。
樣式標準：表現用於設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：行為是指網頁模型的定義及互動的編寫，主要包括DOM和ECMAScript兩個部分
理想狀態我們的原始碼： .HTML .css .js do onething（三層分離原則）
專業的人，寫專業的程式碼
直觀感受：
總結WEB標準：
- 結構標準： 決定你是否有個好天然身體，身體好，你好我好他也好
- 樣式標準： 決定你是否打扮的美麗外觀，長得醜沒關係，主要想得美
- 行為標準： 決定你是否有吸引人的行為，上帝關了你的門，放心，那門連縫都沒留
結構層：html 表現層：css 行為層：js
HTML 初識
一般先學習HTML+CSS， 這裡我們先定一個小目標，先學HTML,後學習CSS。
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文字標籤語言/超文字標記語言”，主要是通過HTML標籤對網頁中的文字、圖片、聲音等內容進行描述。
<strong> 我是加粗的字型 </strong>
注意：文字 標籤 語言 幾個詞語
**HTML骨架格式(固定結構程式碼)** 日常生活的書信，我們要遵循共同的約定。
同理：HTML 有自己的語言語法骨架格式：固定結構程式碼
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
❤ 課堂練習1： 書寫我們的第一個HTML 頁面！ 1、 新建一個demo 的 TXT 檔案。 2、裡面寫入剛才的HTML 骨架。 3、把字尾名改為 .HTML。 4、右擊–谷歌瀏覽器開啟。
1 HTML標籤：
作用所有HTML中標籤的一個根節點。
2 head標籤：
作用：用於存放頭部標籤：
title,meta,base,style,script,link
注意在head標籤中我們必須要設定的標籤是title
3.title標籤：
作用：讓頁面擁有一個屬於自己的標題。
4.body標籤：
作用：頁面在的主體部分，用於存放所有的HTML標籤：
p,h,a,b,u,i,s,em,del,ins,strong,img
為了便於記憶，我們請出剛才要辭職回家養豬的二師兄來幫忙， 我稱之為 豬八戒記憶法
HTML標籤分類
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標籤，如上面提到的 HTML、head、body都是HTML標籤。所謂標籤就是放在“< >” 標籤符中表示某個功能的編碼命令，也稱為HTML標籤或 HTML元素（人類看不懂，但是，計算機認識）
1. 雙標籤
<標籤名> 內容 </標籤名>
該語法中“<標籤名>”表示該標籤的作用開始，一般稱為“開始標籤（start tag）”，“</標籤名>” 表示該標籤的作用結束，一般稱為“結束標籤（end tag）”。和開始標籤相比，結束標籤只是在前面加了一個關閉符“/”。
比如 <body>我是文字 </body>
2. 單標籤
<標籤名 />
單標籤也稱空標籤，是指用一個標籤符號即可完整地描述某個功能的標籤。
比如 <br /> <br>
HTML標籤關係
標籤的相互關係就分為兩種：
1.巢狀關係
<head>
<title>
<hr>
</title>
</head>
<head></head>
<body></body>
測試題：
請問下列哪個標籤是錯誤的？
A <head></head><body></body>
B <strong><div></div></strong>
C <head><title></head></title>
D <body><div></div></body>
倡議： 如果兩個標籤之間的關係是巢狀關係，子元素最好縮排一個tab鍵的身位。如果是並列關係，最好上下對齊。（必須要養成良好的縮排習慣，不然那絕對吃大虧）