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