第01階段.前端基礎(chǔ).認識WEB
HTML 第一天目標
能夠?qū)懗龌镜膆tml頁面（里面包含圖片、鏈接、文字等網(wǎng)頁元素標簽）
認識WEB
1. 認識網(wǎng)頁
網(wǎng)頁主要由文字、圖像和超鏈接等元素構(gòu)成。當然，除了這些元素，網(wǎng)頁中還可以包含音頻、視頻以及Flash等。
<img src="media/mi.png"alt="">
思考：
網(wǎng)頁是如何形成的呢?
總結(jié)
網(wǎng)頁有圖片、鏈接、文字等元素組成，我們后面的任務(wù)就是要把這部分網(wǎng)頁元素用代碼寫出來。。。
2. 瀏覽器（顯示代碼）
瀏覽器是網(wǎng)頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。
可能你最熟悉的是 IE瀏覽器，但是。。。
2.1 查看瀏覽器占有的市場份額
查看網(wǎng)站： http://#baidu.com/data/browser
2008年，大名鼎鼎的互聯(lián)網(wǎng)巨頭Google公司發(fā)布了它的首款瀏覽器Chrome瀏覽器。?
跟王思聰一樣，沒辦法，生下來人家就是富二代官二代啊，后臺太強，而且確實先天能力得天獨厚。
pink老師 一句話說出他們:
出自谷歌，唯我不??；一統(tǒng)江湖，千秋萬代。
2.2 常見瀏覽器內(nèi)核（了解）
首先解釋一下瀏覽器內(nèi)核是什么東西。英文叫做：Rendering Engine，中文翻譯很多，排版引擎、解釋引擎、渲染引擎，現(xiàn)在流行稱為瀏覽器內(nèi)核.
負責讀取網(wǎng)頁內(nèi)容，整理訊息，計算網(wǎng)頁的顯示方式并顯示頁面.
因為瀏覽器太多啦， 但是現(xiàn)在主要流行的就是下面幾個：
瀏覽器內(nèi)核備注
IETridentIE、獵豹安全、360極速瀏覽器、百度瀏覽器
firefoxGecko可惜這幾年已經(jīng)沒落了，打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。
Safariwebkit現(xiàn)在很多人錯誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）。蘋果感覺像被別人搶了媳婦，都哭暈再廁所里面了。
chromeChromium/Blink在 Chromium 項目中研發(fā) Blink 渲染引擎（即瀏覽器核心），內(nèi)置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。大部分國產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。二次開發(fā)
Operablink現(xiàn)在跟隨chrome用blink內(nèi)核。
拓展閱讀：
移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
?
Android手機而言，使用率最高的就是Webkit內(nèi)核，大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核，基本上也是屬于webkit二次開發(fā)。
?
iOS以及WP7平臺上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的
3. Web標準（重點）
Web標準不是某一個標準，而是由W3C組織和其他標準化組織制定的一系列標準的集合。
W3C 萬維網(wǎng)聯(lián)盟是國際最著名的標準化組織。1994年成立后，至今已發(fā)布近百項相關(guān)萬維網(wǎng)的標準，對萬維網(wǎng)發(fā)展做出了杰出的貢獻。
w3c就類似于現(xiàn)實世界中的聯(lián)合國。
3.1 為什么要遵循WEB標準呢？
通過以上瀏覽器不同內(nèi)核不同，我們知道他們顯示頁面或者排版就有些許差異。
3.2 Web 標準的好處
遵循web標準可以讓不同我們寫的頁面更標準更統(tǒng)一外，還有許多優(yōu)點
1、讓Web的發(fā)展前景更廣闊 2、內(nèi)容能被更廣泛的設(shè)備訪問3、更容易被搜尋引擎搜索4、降低網(wǎng)站流量費用5、使網(wǎng)站更易于維護6、提高頁面瀏覽速度
3.3 Web 標準構(gòu)成
構(gòu)成： 主要包括結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三個方面。
標準說明備注
結(jié)構(gòu)結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類，咱們主要學的是HTML。
表現(xiàn)表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS
行為行為是指網(wǎng)頁模型的定義及交互的編寫，咱們主要學的是 Javascript
理想狀態(tài)我們的源碼： .HTML? ? ? .css? ? ? .js
結(jié)合人來記憶web標準：
結(jié)構(gòu)標準：? 是你天然的身體
表現(xiàn)標準：? ? 決定你是否打扮的美麗外觀(衣服？化妝？)
行為標準：? ? 決定你是否有吸引人的行為(動作)
web標準小結(jié)
web標準有三層結(jié)構(gòu)，分別是結(jié)構(gòu)（html）、表現(xiàn)（css）和行為（javascript）?
結(jié)構(gòu)類似人的身體， 表現(xiàn)類似人的著裝， 行為類似人的行為動作
理想狀態(tài)下，他們?nèi)龑佣际仟毩⒌模?放到不同的文件里面
4. 拓展@
介紹一下你對瀏覽器內(nèi)核的理解？常見的瀏覽器內(nèi)核有哪些？
瀏覽器內(nèi)核包括兩部分，渲染引擎和js引擎。渲染引擎負責讀取網(wǎng)頁內(nèi)容，整理訊息，計算網(wǎng)頁的顯示方式并顯示頁面，js引擎是解析執(zhí)行js獲取網(wǎng)頁的動態(tài)效果。 后來 JS 引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。IE：Trident firefox：Gecko chrom、safari：webkit Opera：Presto Microsoft Edge：EdgeHTML
深度閱讀：五大主流瀏覽器內(nèi)核的源起以及國內(nèi)各大瀏覽器內(nèi)核總結(jié)
第01階段.前端基礎(chǔ).認識HTML
學習目標
理解
HTML的概念
HTML標簽的分類
HTML標簽的關(guān)系
HTML標簽的語義化
應(yīng)用
HTML骨架格式
sublime基本使用
1. HTML 初識
HTML 指的是超文本標記語言 (Hyper Text Markup Language)是用來描述網(wǎng)頁的一種語言。
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)
pink老師 一句話說出html作用:
網(wǎng)頁是由網(wǎng)頁元素組成的 ， 這些元素是利用html標簽描述出來，然后通過瀏覽器解析，就可以顯示給用戶了。
所謂超文本，有2層含義：
因為它可以加入圖片、聲音、動畫、多媒體等內(nèi)容（超越文本限制 ）
不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件，與世界各地主機的文件連接（超級鏈接文本 ）。
<imgsrc="timg.jpg"/>
門外漢眼中的效果頁面
我們要做的html頁面
html 總結(jié):
html 是超文本標記(標簽)語言
我們學習html 主要學習html標簽
我們用html標簽描述網(wǎng)頁元素。 比如 圖片標簽 、文字標簽、鏈接標簽等等
標簽有自己的語法規(guī)范，所有的html標簽都是用 <> 表示的
H（很）T（甜）M（蜜）L（啦） 是很快樂的一件事情
1.1 HTML骨架標簽
日常生活的書信，我們要遵循共同的約定。
同理：HTML 有自己的語言語法骨架格式：（要遵循，要專業(yè)） 要求務(wù)必非常流暢的默寫下來。。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
html骨架標簽總結(jié)
標簽名定義說明
<html></html>HTML標簽頁面中最大的標簽，我們成為? 根標簽
<head></head>文檔的頭部注意在head標簽中我們必須要設(shè)置的標簽是title
<titile></title>文檔的標題讓頁面擁有一個屬于自己的網(wǎng)頁標題
<body></body>文檔的主體元素包含文檔的所有內(nèi)容，頁面內(nèi)容 基本都是放到body里面的
課堂練習1： ?
書寫我們的第一個HTML 頁面。
新建一個 01-html骨架標簽? 的 TXT 文件。
里面寫入剛才的HTML 骨架。?
把后綴名改為 .HTML。
右擊--谷歌瀏覽器打開。
<html>
<head>
<title>我的第一個頁面</title>
</head>
<body>
? ? ? ? ? 你我之間 黑馬洗練 月薪過萬 ? 一飛沖天 ?
</body>
</html>
為了便于記憶，我們請出剛才要辭職回家養(yǎng)豬的二師兄來幫忙， 我稱之為? 豬八戒記憶法
團隊約定大小寫
HTML標簽名、類名、標簽屬性和大部分屬性值統(tǒng)一用小寫
推薦：
<head> ? ?
? ? ?? <title>我的第一個頁面</title>
</head>
不推薦：
<HEAD> ? ?
? ? ?? <TITLE>我的第一個頁面</TITLE>
</HEAD>
1.2 HTML元素標簽分類
標簽：
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <html>、<head>、<body>都是HTML骨架結(jié)構(gòu)標簽。
分類：
常規(guī)元素（雙標簽）
<標簽名>內(nèi)容</標簽名>比如<body>我是文字</body>
該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結(jié)束，一般稱為“結(jié)束標簽（end tag）”。
和開始標簽相比，結(jié)束標簽只是在前面加了一個關(guān)閉符“/”。
我們以后接觸的基本都是雙標簽
空元素（單標簽）
<標簽名/>比如<br/>
空元素 用單標簽來表示， 簡單點說，就是里面不需要包含內(nèi)容， 只有一個開始標簽不需要關(guān)閉。
這種單身狗標簽非常少，一共沒多少，我們多記憶就好
pink老師 一句話說出他們:
世界上單身狗畢竟是少數(shù)的， 大部分還是喜歡成雙成對，不要拉下你的另外一半，對待一個雙標簽要有始有終。
1.3 HTML標簽關(guān)系
主要針對于雙標簽 的相互關(guān)系分為兩種：? 請大家務(wù)必熟悉記住這種標簽關(guān)系，因為后面我們標簽嵌套特別多，很容易弄混他們的關(guān)系。
嵌套關(guān)系
<head>
? ? <title></title>
</head>
2.并列關(guān)系
<head></head>
<body></body>
倡議：
如果兩個標簽之間的關(guān)系是嵌套關(guān)系，子元素最好縮進一個tab鍵的身位（一個tab是4個空格）。如果是并列關(guān)系，最好上下對齊。
pink老師 一句話說出他們:
html雙標簽 可以分為? 有 一種是 父子級 包含關(guān)系的標簽? ? ? 一種是 兄弟級 并列關(guān)系的標簽
1.4 課堂一練
請問下列哪組標簽關(guān)系是錯誤的？
<head> </head><body> </body>
?
?
<head> <title></head> </title>
<body> <div></div> </body>
2. 代碼開發(fā)工具（書寫代碼）
為了提高我們的開發(fā)效率
減少代碼的出錯我們不提倡用記事本開發(fā)，我們有更好的犀利哥。
Dreamweaver
SublimeText
WebStorm
HBuilder
VScode
有人說：
? 普通青年? ? Dreamweaver
? 文藝青年? ? sublime
? 高手和傻子? 用記事本
? 其實。。。。
sublime有非常多的優(yōu)點， 最開心的就是非常輕量級，打開速度超快，后面更高的功能，后面再接觸。
sublime生成html骨架小技巧
雙擊打開軟件
新建文件（ctrl+n）
保存（ctrl+s）,保存為：文件名.html （ 注意 后綴名必須是 .html )
放大縮小代碼? 按住 ctrl? 在 滾動鼠標滾輪? 或者? ctrl+ 加號 鍵? ? 和 ctrl +? 減號鍵? ?
生成頁面骨架結(jié)構(gòu)
html: 5? ? 按下tab鍵? ? 或者?
!? ? 按下tab鍵
在瀏覽器中預(yù)覽頁面
右鍵在? 瀏覽器中打開
3. 文檔類型<!DOCTYPE>
用法：
<!DOCTYPE html>
作用：
聲明位于文檔中的最前面的位置，處于 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
pink老師 一句話說出他們:
就是告訴瀏覽器按照HTML5 規(guī)范解析頁面.
團隊約定：
HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明
4. 頁面語言lang
<html lang="en">? 指定html 語言種類
最常見的2個：
en定義語言為英語
zh-CN定義語言為中文
pink老師 一句話說出他們:
<html lang="zh-CN">? 指定該html標簽 內(nèi)容 所用的語言為中文
團隊約定：
考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值
@拓展閱讀：
簡單來說，可能對于程序來說沒有太大的作用，但是它可以告訴瀏覽器，搜索引擎，一些處理Html的程序?qū)撁嬲Z言內(nèi)容來做一些對應(yīng)的處理或者事情。比如可以
根據(jù)根據(jù)lang屬性來設(shè)定不同語言的css樣式，或者字體
告訴搜索引擎做精確的識別
讓語法檢查程序做語言識別
幫助翻譯工具做識別
幫助網(wǎng)頁閱讀程序做識別等等
5. 字符集
<meta charset="UTF-8" />
字符集(Character set)是多個字符的集合。
計算機要準確的處理各種字符集文字，需要進行字符編碼，以便計算機能夠識別和存儲各種文字。
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有g(shù)bk和gb2312。
gb2312 簡單中文? 包括6763個漢字? GUO BIAO
BIG5? 繁體中文 港澳臺等用
GBK包含全部中文字符? ? 是GB2312的擴展，加入對繁體字的支持，兼容GB2312
UTF-8則基本包含全世界所有國家需要用到的字符
這句代碼非常關(guān)鍵， 是必須要寫的代碼，否則可能引起亂碼的情況。
pink老師 一句話說出他們:
這句話是讓 html 文件是以 UTF-8 編碼保存的， 瀏覽器根據(jù)編碼去解碼對應(yīng)的html內(nèi)容。
團隊約定：
一般情況下統(tǒng)一使用 "UTF-8" 編碼, 請盡量統(tǒng)一寫成標準的 "UTF-8"，不要寫成 "utf-8" 或 "utf8" 或 "UTF8"。
6. HTML標簽的語義化
白話： 所謂標簽語義化，就是指標簽的含義。
pink老師 一句話說出語義化目的:
根據(jù)標簽的語義，在合適的地方給一個最為合理的標簽，讓結(jié)構(gòu)更清晰。
方便代碼的閱讀和維護
同時讓瀏覽器或是網(wǎng)絡(luò)爬蟲可以很好地解析，從而更好分析其中的內(nèi)容
使用語義化標簽會具有更好地搜索引擎優(yōu)化
語義是否良好： 當我們?nèi)サ鬋SS之后，網(wǎng)頁結(jié)構(gòu)依然組織有序，并且有良好的可讀性。(? 裸奔起來一樣好看 )
遵循的原則：先確定語義的HTML ，再選合適的CSS。所以，我們接下來學習html標簽，要根據(jù)語義去記憶。 HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標簽。
7. 拓展閱讀@
單身狗的由來
單身狗一詞最早是出自網(wǎng)絡(luò)社區(qū)，起源與大話西游有關(guān)。
大話西游之大圣娶親最后一幕“他好像一條狗”由來。
第01階段.前端基礎(chǔ).HTML常用標簽
學習目標
理解：
相對路徑三種形式
應(yīng)用
排版標簽
文本格式化標簽
圖像標簽
鏈接
相對路徑，絕對路徑的使用
1. HTML常用標簽
首先 HTML和CSS是兩種完全不同的語言，我們學的是結(jié)構(gòu)，就只寫HTML標簽，認識標簽就可以了。 不會再給結(jié)構(gòu)標簽指定樣式了。
HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。
1.1 排版標簽
排版標簽主要和css搭配使用，顯示網(wǎng)頁結(jié)構(gòu)的標簽，是網(wǎng)頁布局最常用的標簽。
1）標題標簽h (熟記)
單詞縮寫：? head? 頭部. 標題? ? ? title? 文檔標題
為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
標題標簽語義：? 作為標題使用，并且依據(jù)重要性遞減
其基本語法格式如下：
<h1>? 標題文本? </h1>
<h2>? 標題文本? </h2>
<h3>? 標題文本? </h3>
<h4>? 標題文本? </h4>
<h5>? 標題文本? </h5>
<h6>? 標題文本? </h6>
顯示效果如下：
小結(jié) :
加了標題的文字會變的加粗，字號也會依次變大
一行是只能放一個標題的
? ? 傳智播客學前端，
前端入門亦簡單。
簡單知識簡單看，
重點勤練寫三遍。
標題一共六級選，
具體效果刷新見。
? ? ? ? ------pink老師
2）段落標簽p ( 熟記)
單詞縮寫：? paragraph? 段落? [?p?r?gr?f]? ? 無須記這個單詞
作用語義：
可以把 HTML 文檔分割為若干段落
在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標簽就是
<p>? 文本內(nèi)容? </p>
是HTML文檔中最常見的標簽，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。
3）水平線標簽hr(認識)
單詞縮寫：? horizontal? 橫線? ? [?h?r??zɑntl]? ? 同上
在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標簽來完成，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標簽。其基本語法格式如下：
<hr />是單標簽
在網(wǎng)頁中顯示默認樣式的水平線。
課堂練習:新聞頁面
4）換行標簽br (熟記)
單詞縮寫：? break? 打斷 ,換行
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽
<br />
這時如果還像在word中直接敲回車鍵換行就不起作用了。
此處有練習題
5）div 和? span標簽(重點)
div? span? ? 是沒有語義的? ? 是我們網(wǎng)頁布局主要的2個盒子? 想必你聽過? css+div
div 就是? division? 的縮寫? 分割， 分區(qū)的意思? 其實有很多div 來組合網(wǎng)頁。
span? 跨度，跨距；范圍? ?
語法格式：
<div> 這是頭部 </div>? ? <span>今日價格</span>
他們兩個都是盒子，用來裝我們網(wǎng)頁元素的， 只不過他們有區(qū)別，現(xiàn)在我們主要記住使用方法和特點就好了
div標簽? 用來布局的，但是現(xiàn)在一行只能放一個div
span標簽? 用來布局的，一行上可以放好多個span
后面后面講顯示模式的時候，會告訴大家
排版標簽總結(jié)
標簽名定義說明
<hx></hx>標題標簽作為標題使用，并且依據(jù)重要性遞減
<p></p>段落標簽可以把 HTML 文檔分割為若干段落
<hr />水平線標簽沒啥可說的，就是一條線
換行標簽
<div></div>div標簽用來布局的，但是現(xiàn)在一行只能放一個div
<span></span>span標簽用來布局的，一行上可以放好多個span
1.2 文本格式化標簽(熟記)
在網(wǎng)頁中，有時需要為文字設(shè)置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
區(qū)別：
b? 只是加粗? ? ? ? ? strong? 除了可以加粗還有 強調(diào)的意思，? 語義更強烈。
剩下的同理...? ?
請同學們重點記住 前兩組? 加粗 和 傾斜? 后面兩組沒記住回來查
1.3 標簽屬性
所謂屬性就是外在特性? 比如 手機的顏色 手機的尺寸 ，總結(jié)就是手機的。。
手機的顏色是黑色?
手機的尺寸是 8寸
水平線的長度是 200?
圖片的寬度 是? 300? ?
使用HTML制作網(wǎng)頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設(shè)置。其基本語法格式如下：
<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標簽名>
<手機 顏色="紅色" 大小="5寸">? </手機>
1.4 圖像標簽img (重點)
單詞縮寫：? image? 圖像
要想在網(wǎng)頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和他相關(guān)的屬性。（它是一個單身狗）
語法如下：
<img src="圖像URL" />
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。
border 后面我們會用css來做，這里童鞋們就記住這個border 單詞就好了
注意:
標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。
屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
采取? 鍵值對 的格式? key="value"? 的格式?
比如:?
正常的<br />
? ? <img src="cz.jpg" width="300" height="300" /><br />
? ? 帶有邊框的<br />
? ? <img src="cz.jpg" width="300" height="300" border="3" /><br />
有提示文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" title="這是個小蒲公英" /><br />
有替換文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" alt="圖片不存在" />
此處有練習題
重點掌握點：
請說出 圖像標簽?zāi)莻€屬性是必須要寫的？
請說出 圖像標簽中 alt 和? title 屬性區(qū)別？
1.5 鏈接標簽(重點)
單詞縮寫：? anchor 的縮寫? [???k?(r)] 。基本解釋 錨, 鐵錨 的
在HTML中創(chuàng)建超鏈接非常簡單，只需用標簽把文字包括起來就好。
語法格式：
<a href="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>
屬性作用
href用于指定鏈接目標的url地址，（必須屬性）當為標簽應(yīng)用href屬性時，它就具有了超鏈接的功能
target用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中_self為默認值，__blank為在新窗口中打開方式。
注意：
外部鏈接 需要添加 http:// www.baidu.com
內(nèi)部鏈接 直接鏈接內(nèi)部頁面名稱即可 比如 < a href="index.html"> 首頁 </a >
如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。
不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
重點掌握點：
請說出 鏈接標簽?zāi)莻€屬性是必須要寫的？?
請說出 如何新窗口打開這個一個鏈接網(wǎng)頁的？
1.6 注釋標簽
在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。
簡單解釋：
注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。
語法格式：
? ? <!-- 注釋語句 -->? ? 快捷鍵是：? ? ctrl + /? ? ? 或者 ctrl +shift + /
注釋重要性：
pink老師 一句話說出他們:
注釋是給人看的，目的是為了更好的解釋這部分代碼是干啥的， 程序是不執(zhí)行這個代碼的
團隊約定
一般用于簡單的描述，如某些狀態(tài)描述、屬性描述等
注釋內(nèi)容前后各一個空格字符，注釋位于要注釋代碼的上面，單獨占一行
推薦：
<!-- Comment Text -->
<div>...</div>
不推薦：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
? ? ...
</div>
2. 路徑(重點、難點)
實際工作中，我們的文件不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個文件夾來管理他們。
目錄文件夾：
就是普通文件夾，里面只不過存放了我們做頁面所需要的 相關(guān)素材，比如 html文件， 圖片 等等。
根目錄 ?
打開目錄文件夾的第一層? 就是 根目錄
頁面中的圖片會非常多， 通常我們再新建一個文件夾專門用于存放圖像文件（images），這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。路徑可以分為： 相對路徑和絕對路徑
相對路徑
以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當保存于不同目錄的網(wǎng)頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。
路徑分類符號說明
同一級路徑只需輸入圖像文件的名稱即可，如<img src="baidu.gif" />。
下一級路徑“/”圖像文件位于HTML文件同級文件夾下（例如文件夾名稱為：images）? ? ? ? ? ? ? ? ? ? ? ? 如<img src="images/baidu.gif" />。?
上一級路徑“../”在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，? ? ? ? ? ? ? ? ? ? 如<img src="../baidu.gif" />。
pink老師 一句話說出他們:
相對路徑，是從代碼所在的這個文件出發(fā)， 去尋找我們的目標文件的，而 我們所說的 上一級 下一級 同一級? 簡單說，就是 圖片 位于 HTML 頁面的位置
絕對路徑
絕對路徑以Web站點根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對，意指當所有網(wǎng)頁引用同一個文件時，所使用的路徑都是一樣的。
“D:\web\img\logo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.itcast.cn/images/logo.gif”。
注意：
絕對路徑用的較少，我們理解下就可以了。? 但是要注意，它的寫法 特別是符號? \? 并不是 相對路徑的? /? ?
3. 今日總結(jié)
? 每一天都有一個主題 我們HTML第一天的主題就是 <認識標簽>? 能用常用標簽，寫出最簡單的頁面
學HTML 之前 覺得 很神秘?
等你學完之后忽然發(fā)現(xiàn)
總結(jié)今天的思路貫穿線：
4. 綜合案例：? 圣誕
5. @拓展閱讀
5.1 錨點定位 （難點）
通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。
創(chuàng)建錨點鏈接分為兩步：
1. 使用相應(yīng)的id名標注跳轉(zhuǎn)目標的位置。 (找目標)
? <h3 id="two">第2集</h3>
2. 使用<a href="#id名">鏈接文本</a>創(chuàng)建鏈接文本（被點擊的） （拉關(guān)系）? 我也有一個姓畢的姥爺..
? <a href="#two">?
快速記憶法：
好比找個人辦事，? 首先找到他，然后拉關(guān)系，最后看效果。
5.2 base 標簽
語法：
<base target="_blank" />
總結(jié)：
base 可以設(shè)置整體鏈接的打開狀態(tài)?
base 寫到? ? ? 之間
把所有的連接 都默認添加 target="_blank"
pink老師 一句話說出他們:
全體鏈接~ 到 ~? 全體集合? 所有鏈接 以新窗口打開頁面? ~? 是
5.3 預(yù)格式化文本pre標簽
?
標簽可定義預(yù)格式化的文本。
?
被包圍在 <pre> 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。
<pre>
? 此例演示如何使用 pre 標簽
? 對空行和 空格
? 進行控制
</pre>
pink老師 一句話說出他們:
所謂的預(yù)格式化文本就是 ，按照我們預(yù)先寫好的文字格式來顯示頁面， 保留空格和換行等。
有了這個標簽，里面的文字，會按照我們書寫的模式顯示，不需要段落和換行標簽了。但是，比較少用，因為不好整體控制。
5.4 特殊字符 （理解）
一些特殊的符號，我們再html 里面很難或者 不方便直接 使用， 我們此時可以使用下面的替代代碼。
雖然有很多，但是我們平時用的比較較少， 大家重點記住? 空格? ? 大于號 小于號? 就可以了，剩下的回來查閱。
總結(jié)：
是以運算符&開頭,以分號運算符;結(jié)尾。
他們不是標簽，而是符號。
HTML 中不能使用小于號 “<” 和大于號 “>”特殊字符，瀏覽器會將它們作為標簽解析，若要正確顯示，在 HTML 源代碼中使用字符實體
團隊約定
? 推薦：
? <a href="#">more >></a>
? 不推薦：
? <a href="#">more >> </a>
5.5 html5發(fā)展之路
5.6 什么是XHTML
XHTML 是更嚴格更純凈的 HTML 代碼。
XHTML 指可擴展超文本標簽語言（EXtensible HyperText Markup Language）。
XHTML 的目標是取代 HTML。
XHTML 與 HTML 4.01 幾乎是相同的。
XHTML 是更嚴格更純凈的 HTML 版本。
XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML。
XHTML 是一個 W3C 標準。
5.7 HTML和 XHTML之間有什么區(qū)別?
XHTML 指的是可擴展超文本標記語言
XHTML 與 HTML 4.01 幾乎是相同的
XHTML 是更嚴格更純凈的 HTML 版本
XHTML 是以 XML 應(yīng)用的方式定義的 HTML
XHTML 是 2001 年 1 月發(fā)布的 W3C 推薦標準
XHTML 得到所有主流瀏覽器的支持
XHTML 元素是以 XML 格式編寫的 HTML 元素。XHTML是嚴格版本的HTML，例如它要求標簽必須小寫，標簽必須被正確關(guān)閉，標簽順序必須正確排列，對于屬性都必須使用雙引號等。
6. @深入閱讀
7. 預(yù)習內(nèi)容
表格標簽
能夠通過表格標簽?zāi)軌驅(qū)懗鲆粋€簡版表格數(shù)據(jù)展示
例如：
? 可以把你今天學習的內(nèi)容放在表格內(nèi)，再次作為總結(jié)
