1 認識WEB
1.1 網(wǎng)頁
網(wǎng)頁主要由文字档痪、圖像和超鏈接等元素構成字柠。當然探越，除了這些元素，網(wǎng)頁中還可以包含音頻募谎、視頻以及Flash等扶关。
1.2 瀏覽器
瀏覽器是網(wǎng)頁顯示、運行的平臺数冬，常用的瀏覽器有IE节槐、火狐（Firefox）、谷歌（Chrome）拐纱、Safari和Opera等铜异。我們平時稱為五大瀏覽器。
瀏覽器占有的市場份額
查看網(wǎng)站： http://#baidu.com/data/browser
2008年秸架，大名鼎鼎的互聯(lián)網(wǎng)巨頭Google公司發(fā)布了它的首款瀏覽器Chrome瀏覽器揍庄。
常見瀏覽器內(nèi)核
瀏覽器內(nèi)核：Rendering Engine，中文翻譯很多东抹，排版引擎蚂子、解釋引擎、渲染引擎缭黔，現(xiàn)在流行稱為瀏覽器內(nèi)核.
瀏覽器內(nèi)核負責讀取網(wǎng)頁內(nèi)容食茎，整理訊息，計算網(wǎng)頁的顯示方式并顯示頁面.
但是現(xiàn)在主要流行的就是下面幾個：
| 瀏覽器 | 內(nèi)核 | 備注 |
|---|---|---|
| IE | Trident | IE馏谨、獵豹安全别渔、360極速瀏覽器、百度瀏覽器 |
| firefox | Gecko | 可惜這幾年已經(jīng)沒落了惧互，打開速度慢哎媚、升級頻繁、豬一樣的隊友flash喊儡、神一樣的對手chrome拨与。 |
| Safari | webkit | 現(xiàn)在很多人錯誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）。蘋果感覺像被別人搶了媳婦艾猜，都哭暈再廁所里面了截珍。 |
| chrome | Chromium/Blink | 在 Chromium 項目中研發(fā) Blink 渲染引擎（即瀏覽器核心）攀甚，內(nèi)置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支岗喉。大部分國產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。二次開發(fā) |
| Opera | blink | 現(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的
1.3 Web標準
Web標準不是某一個標準绎橘，而是由W3C組織和其他標準化組織制定的一系列標準的集合胁孙。
W3C 萬維網(wǎng)聯(lián)盟是國際最著名的標準化組織。1994年成立后称鳞，至今已發(fā)布近百項相關萬維網(wǎng)的標準涮较，對萬維網(wǎng)發(fā)展做出了杰出的貢獻。
w3c就類似于現(xiàn)實世界中的聯(lián)合國冈止。
為什么要遵循WEB標準呢狂票？
通過以上瀏覽器不同內(nèi)核不同，我們知道他們顯示頁面或者排版就有些許差異熙暴。
1.3.2 Web 標準的好處
遵循web標準可以讓不同我們寫的頁面更標準更統(tǒng)一外闺属，還有許多優(yōu)點
1、讓Web的發(fā)展前景更廣闊
2周霉、內(nèi)容能被更廣泛的設備訪問
3掂器、更容易被搜尋引擎搜索
4、降低網(wǎng)站流量費用
5诗眨、使網(wǎng)站更易于維護
6唉匾、提高頁面瀏覽速度
1.3.3 Web 標準構成
構成： 主要包括結構（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三個方面匠楚。
| 標準 | 說明 | 備注 |
|---|---|---|
| 結構 | 結構用于對網(wǎng)頁元素進行整理和分類巍膘，咱們主要學的是HTML。 |  htmll.jpg
|
| 表現(xiàn) | 表現(xiàn)用于設置網(wǎng)頁元素的版式芋簿、顏色峡懈、大小等外觀樣式，主要指的是CSS |  css.jpg
|
| 行為 | 行為是指網(wǎng)頁模型的定義及交互的編寫与斤，咱們主要學的是 Javascript |  search.gif
|
web標準小結
- web標準有三層結構肪康，分別是結構（html）荚恶、表現(xiàn)（css）和行為（javascript）
- 結構類似人的身體， 表現(xiàn)類似人的著裝磷支， 行為類似人的行為動作
- 理想狀態(tài)下谒撼，他們?nèi)龑佣际仟毩⒌模?放到不同的文件里面
1.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)核總結
2 HTML 初識
2.1 HTML
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)是用來描述網(wǎng)頁的一種語言据途。
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標簽 (markup tag)
網(wǎng)頁是由網(wǎng)頁元素組成的 剑鞍， 這些元素是利用html標簽描述出來昨凡，然后通過瀏覽器解析，就可以顯示給用戶了蚁署。
所謂超文本便脊，有2層含義：
- 因為它可以加入圖片、聲音光戈、動畫哪痰、多媒體等內(nèi)容（**超越文本限制 **）
- 不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件久妆，與世界各地主機的文件連接（**超級鏈接文本 **）晌杰。
<img src="timg.jpg" />
html 總結:
- html 是超文本標記(標簽)語言
- 我們學習html 主要學習html標簽
- 我們用html標簽描述網(wǎng)頁元素。 比如 圖片標簽 筷弦、文字標簽肋演、鏈接標簽等等
- 標簽有自己的語法規(guī)范，所有的html標簽都是用 <> 表示的
2.1.1 HTML骨架標簽
日常生活的書信烂琴，我們要遵循共同的約定爹殊。
同理：HTML 有自己的語言語法骨架格式：（要遵循，要專業(yè)） 要求務必非常流暢的默寫下來奸绷。梗夸。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
html骨架標簽總結
| 標簽名 | 定義 | 說明 |
|---|---|---|
| <html></html> | HTML標簽 | 頁面中最大的標簽，我們成為 根標簽 |
| <head></head> | 文檔的頭部 | 注意在head標簽中我們必須要設置的標簽是title |
| <titile></title> | 文檔的標題 | 讓頁面擁有一個屬于自己的網(wǎng)頁標題 |
| <body></body> | 文檔的主體 | 元素包含文檔的所有內(nèi)容号醉，頁面內(nèi)容 基本都是放到body里面的 |
2.1.2 HTML元素標簽分類
標簽：
在HTML頁面中反症，帶有“< >”符號的元素被稱為HTML標簽辛块，如上面提到的 <html>、<head>铅碍、<body>都是HTML骨架結構標簽润绵。
分類：
- 常規(guī)元素（雙標簽）
<標簽名> 內(nèi)容 </標簽名> 比如 <body> 我是文字 </body>
- 該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”胞谈，“</標簽名>” 表示該標簽的作用結束授药，一般稱為“結束標簽（end tag）”。
- 和開始標簽相比呜魄，結束標簽只是在前面加了一個關閉符“/”。
- 我們以后接觸的基本都是雙標簽
- 空元素（單標簽）
<標簽名 /> 比如 <br />
- 空元素 用單標簽來表示莱衩， 簡單點說爵嗅，就是里面不需要包含內(nèi)容， 只有一個開始標簽不需要關閉笨蚁。
2.1.3 HTML標簽關系
主要針對于雙標簽 的相互關系分為兩種： 請大家務必熟悉記住這種標簽關系睹晒，因為后面我們標簽嵌套特別多，很容易弄混他們的關系括细。
- 嵌套關系
<head>
<title> </title>
</head>
2.并列關系
<head></head>
<body></body>
2.2 代碼開發(fā)工具（書寫代碼）
- Dreamweaver
- SublimeText
- WebStorm
- HBuilder
- VScode
2.3 文檔類型<!DOCTYPE>
用法：
<!DOCTYPE html>
作用：
<!DOCTYPE> 聲明位于文檔中的最前面的位置伪很，處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范奋单。
<!DOCTYPE html> 就是告訴瀏覽器按照HTML5 規(guī)范解析頁面.
2.4 頁面語言lang
<html lang="en"> 指定html 語言種類
最常見的2個：
-
en定義語言為英語 -
zh-CN定義語言為中文
<html lang="zh-CN"> 指定該html標簽 內(nèi)容 所用的語言為中文
考慮瀏覽器和操作系統(tǒng)的兼容性锉试，推薦使用 zh-CN 屬性值
拓展：
簡單來說，可能對于程序來說沒有太大的作用览濒，但是它可以告訴瀏覽器呆盖，搜索引擎，一些處理Html的程序?qū)撁嬲Z言內(nèi)容來做一些對應的處理或者事情贷笛。
比如可以
- 根據(jù)根據(jù)lang屬性來設定不同語言的css樣式应又，或者字體
- 告訴搜索引擎做精確的識別
- 讓語法檢查程序做語言識別
- 幫助翻譯工具做識別
- 幫助網(wǎng)頁閱讀程序做識別
等等
2.5 字符集
<meta charset="UTF-8" />
字符集(Character set)是多個字符的集合。
計算機要準確的處理各種字符集文字乏苦，需要進行字符編碼株扛，以便計算機能夠識別和存儲各種文字。
utf-8是目前最常用的字符集編碼方式汇荐，常用的字符集編碼方式還有gbk和gb2312洞就。
- gb2312 簡單中文 包括6763個漢字 GUO BIAO
- BIG5 繁體中文 港澳臺等用
- GBK包含全部中文字符 是GB2312的擴展，加入對繁體字的支持拢驾，兼容GB2312
- UTF-8則基本包含全世界所有國家需要用到的字符
- 這句代碼非常關鍵奖磁， 是必須要寫的代碼，否則可能引起亂碼的情況繁疤。
這句話是讓 html 文件是以 UTF-8 編碼保存的咖为， 瀏覽器根據(jù)編碼去解碼對應的html內(nèi)容秕狰。
一般情況下統(tǒng)一使用 "UTF-8" 編碼, 請盡量統(tǒng)一寫成標準的 "UTF-8"，不要寫成 "utf-8" 或 "utf8" 或 "UTF8"躁染。
2.6 HTML標簽的語義化
所謂標簽語義化鸣哀，就是指標簽的含義。
根據(jù)標簽的語義吞彤，在合適的地方給一個最為合理的標簽我衬，讓結構更清晰。
- 方便代碼的閱讀和維護
- 同時讓瀏覽器或是網(wǎng)絡爬蟲可以很好地解析饰恕，從而更好分析其中的內(nèi)容
- 使用語義化標簽會具有更好地搜索引擎優(yōu)化
語義是否良好： 當我們?nèi)サ鬋SS之后挠羔，網(wǎng)頁結構依然組織有序，并且有良好的可讀性埋嵌。
遵循的原則：先確定語義的HTML 破加，再選合適的CSS。 HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標簽雹嗦。
3 HTML常用標簽
3.1 常用標簽
3.1.1 排版標簽
排版標簽主要和css搭配使用范舀，顯示網(wǎng)頁結構的標簽，是網(wǎng)頁布局最常用的標簽了罪。
標題標簽 h
單詞縮寫： head 頭部. 標題 title 文檔標題
為了使網(wǎng)頁更具有語義化锭环，我們經(jīng)常會在頁面中用到標題標簽，HTML提供了6個等級的標題泊藕，即
標題標簽語義： 作為標題使用辅辩，并且依據(jù)重要性遞減
其基本語法格式如下：
<h1> 標題文本 </h1>
<h2> 標題文本 </h2>
<h3> 標題文本 </h3>
<h4> 標題文本 </h4>
<h5> 標題文本 </h5>
<h6> 標題文本 </h6>
顯示效果如下：
小結 :
- 加了標題的文字會變的加粗，字號也會依次變大
- 一行是只能放一個標題的
段落標簽 p
單詞縮寫： paragraph 段落 [?p?r?gr?f]
作用語義：
可以把 HTML 文檔分割為若干段落
在網(wǎng)頁中要把文字有條理地顯示出來吱七，離不開段落標簽汽久，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落踊餐，而段落的標簽就是
<p> 文本內(nèi)容 </p>
是HTML文檔中最常見的標簽景醇，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行吝岭。
水平線標簽 hr
單詞縮寫： horizontal 橫線 [?h?r??zɑntl] 同上
在網(wǎng)頁中常橙担看到一些水平線將段落與段落之間隔開，使得文檔結構清晰窜管，層次分明散劫。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標簽來完成幕帆，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標簽获搏。其基本語法格式如下：
<hr />是單標簽
在網(wǎng)頁中顯示默認樣式的水平線。
換行標簽 br
單詞縮寫： break 打斷 ,換行
在HTML中失乾，一個段落中的文字會從左到右依次排列常熙，直到瀏覽器窗口的右端纬乍，然后自動換行。如果希望某段文本強制換行顯示裸卫，就需要使用換行標簽
<br />
這時如果還像在word中直接敲回車鍵換行就不起作用了仿贬。
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
排版標簽總結
| 標簽名 | 定義 | 說明 |
|---|---|---|
| <hx></hx> | 標題標簽 | 作為標題使用，并且依據(jù)重要性遞減 |
| <p></p> | 段落標簽 | 可以把 HTML 文檔分割為若干段落 |
| <hr /> | 水平線標簽 | 沒啥可說的代嗤，就是一條線 |
| <br /> | 換行標簽 | |
| <div></div> | div標簽 | 用來布局的，但是現(xiàn)在一行只能放一個div |
| <span></span> | span標簽 | 用來布局的缠借，一行上可以放好多個span |
3.1.2 文本格式化標簽
在網(wǎng)頁中干毅，有時需要為文字設置粗體、斜體或下劃線效果泼返，這時就需要用到HTML中的文本格式化標簽硝逢，使文字以特殊的方式顯示。
區(qū)別：
b 只是加粗 strong 除了可以加粗還有 強調(diào)的意思绅喉， 語義更強烈渠鸽。
3.1.3 標簽屬性
所謂屬性就是外在特性
使用HTML制作網(wǎng)頁時，如果想讓HTML標簽提供更多的信息柴罐，可以使用HTML標簽的屬性加以設置徽缚。
3.1.4 圖像標簽img
單詞縮寫： image 圖像
要想在網(wǎng)頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和他相關的屬性革屠。
語法如下：
<img src="圖像URL" />
該語法中src屬性用于指定圖像文件的路徑和文件名凿试，他是img標簽的必需屬性。
border 通常用css來做似芝。
**注意: **
- 標簽可以擁有多個屬性那婉，必須寫在開始標簽中，位于標簽名后面党瓮。
- 屬性之間不分先后順序详炬，標簽名與屬性、屬性與屬性之間均以空格分開寞奸。
- 采取 鍵值對 的格式 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="圖片不存在" />
3.1.5 鏈接標簽
單詞縮寫： anchor 的縮寫 [???k?(r)] 呛谜≡谔基本解釋 錨, 鐵錨 的
在HTML中創(chuàng)建超鏈接非常簡單，只需用標簽把文字包括起來就好呻率。
語法格式：
<a href="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>
| 屬性 | 作用 |
|---|---|
| href | 用于指定鏈接目標的url地址硬毕，（必須屬性）當為標簽應用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)頁元素，如圖像象浑、表格蔫饰、音頻、視頻等都可以添加超鏈接愉豺。
3.1.6 注釋標簽
在HTML中還有一種特殊的標簽——注釋標簽篓吁。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽蚪拦。
簡單解釋：
注釋內(nèi)容不會顯示在瀏覽器窗口中杖剪，但是作為HTML文檔內(nèi)容的一部分，也會被下載到用戶的計算機上驰贷，查看源代碼時就可以看到盛嘿。
語法格式：
<!-- 注釋語句 -->
注釋是給人看的，目的是為了更好的解釋這部分代碼是干啥的括袒， 程序是不執(zhí)行這個代碼的
3.2 路徑
實際工作中次兆，我們的文件不能隨便亂放，否則用起來很難快速的找到他們锹锰，因此我們需要一個文件夾來管理他們嚣镜。
**目錄文件夾： **
就是普通文件夾仗谆，里面只不過存放了我們做頁面所需要的 相關素材岛都，比如 html文件凹蜈， 圖片 等等。
**根目錄 **
打開目錄文件夾的第一層 就是 根目錄
頁面中的圖片會非常多糕伐， 通常我們再新建一個文件夾專門用于存放圖像文件（images）砰琢，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。路徑可以分為： 相對路徑和絕對路徑
相對路徑
以引用文件之網(wǎng)頁所在位置為參考基礎陪汽，而建立出的目錄路徑训唱。因此，當保存于不同目錄的網(wǎng)頁引用同一個文件時挚冤，所使用的路徑將不相同况增，故稱之為相對路徑。
| 路徑分類 | 符號 | 說明 |
|---|---|---|
| 同一級路徑 | 只需輸入圖像文件的名稱即可训挡，如<img src="baidu.gif" />澳骤。 04路徑同目錄.jpg
|
|
| 下一級路徑 | “/” | 圖像文件位于HTML文件同級文件夾下（例如文件夾名稱為：images） 如<img src="images/baidu.gif" />。  05路徑不同.jpg
|
| 上一級路徑 | “../” | 在文件名之前加入“../” 澜薄，如果是上兩級为肮，則需要使用 “../ ../”，以此類推肤京，如<img src="../baidu.gif" />颊艳。 06路徑不同.jpg
|
相對路徑，是從代碼所在的這個文件出發(fā)忘分， 去尋找我們的目標文件的棋枕，而 我們所說的 上一級 下一級 同一級 簡單說，就是 圖片 位于 HTML 頁面的位置
絕對路徑
絕對路徑以Web站點根目錄為參考基礎的目錄路徑妒峦。之所以稱為絕對戒悠，意指當所有網(wǎng)頁引用同一個文件時，所使用的路徑都是一樣的舟山。
“D:\web\img\logo.gif”，或完整的網(wǎng)絡地址卤恳，例如“http://www.itcast.cn/images/logo.gif”累盗。
注意：
絕對路徑用的較少，理解即可突琳。 但是要注意若债，它的寫法 特別是符號 \ 并不是 相對路徑的 /
3.3 拓展閱讀
3.3.1 錨點定位
通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容拆融。
創(chuàng)建錨點鏈接分為兩步：
1. 使用相應的id名標注跳轉(zhuǎn)目標的位置蠢琳。 (找目標)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">鏈接文本</a>創(chuàng)建鏈接文本（被點擊的） （拉關系） 我也有一個姓畢的姥爺..
<a href="#two">
3.3.2 base 標簽
<base target="_blank" />
- base 可以設置整體鏈接的打開狀態(tài)
- base 寫到 <head> </head> 之間
- 把所有的連接 都默認添加 target="_blank"
3.3.3 預格式化文本pre標簽
<pre> 標簽可定義預格式化的文本。
被包圍在 <pre> 標簽 元素中的文本通常會保留空格和換行符镜豹。而文本也會呈現(xiàn)為等寬字體傲须。
<pre>
此例演示如何使用 pre 標簽
對空行和 空格
進行控制
</pre>
所謂的預格式化文本就是 ，按照我們預先寫好的文字格式來顯示頁面趟脂， 保留空格和換行等泰讽。
有了這個標簽，里面的文字，會按照我們書寫的模式顯示已卸，不需要段落和換行標簽了佛玄。但是，比較少用累澡，因為不好整體控制梦抢。
3.3.4 特殊字符
一些特殊的符號，我們再html 里面很難或者 不方便直接 使用愧哟， 我們此時可以使用下面的替代代碼奥吩。
重點：空格、大于號翅雏、小于號
- 是以運算符
&開頭,以分號運算符;結尾圈驼。 - 不是標簽，而是符號望几。
- HTML 中不能使用小于號 “<” 和大于號 “>”特殊字符绩脆，瀏覽器會將它們作為標簽解析，若要正確顯示橄抹，在 HTML 源代碼中使用字符實體
3.3.5 html5發(fā)展之路
3.3.6 什么是XHTML
XHTML 是更嚴格更純凈的 HTML 代碼靴迫。
- XHTML 指可擴展超文本標簽語言（EXtensible HyperText Markup Language）。
- XHTML 的目標是取代 HTML楼誓。
- XHTML 與 HTML 4.01 幾乎是相同的玉锌。
- XHTML 是更嚴格更純凈的 HTML 版本。
- XHTML 是作為一種 XML 應用被重新定義的 HTML疟羹。
- XHTML 是一個 W3C 標準主守。
3.3.7 HTML和 XHTML之間有什么區(qū)別?
- XHTML 指的是可擴展超文本標記語言
- XHTML 與 HTML 4.01 幾乎是相同的
- XHTML 是更嚴格更純凈的 HTML 版本
- XHTML 是以 XML 應用的方式定義的 HTML
- XHTML 是 2001 年 1 月發(fā)布的 W3C 推薦標準
- XHTML 得到所有主流瀏覽器的支持
- XHTML 元素是以 XML 格式編寫的 HTML 元素。XHTML是嚴格版本的HTML榄融，例如它要求標簽必須小寫参淫，標簽必須被正確關閉，標簽順序必須正確排列愧杯，對于屬性都必須使用雙引號等涎才。
3.4 深入閱讀
4 表格、表單力九、列表
4.1 表格 table
表格作用：
表格是較為常用的一種標簽耍铜，不是用來布局，常見顯示跌前、展示表格式數(shù)據(jù)棕兼。
因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好抵乓。
特別是后臺展示數(shù)據(jù)的時候表格運用是否熟練就顯得很重要程储，一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理蹭沛，雖然 div 布局也可以做到，但是總沒有表格來得方便章鲤。
4.1.1. 創(chuàng)建表格
在HTML網(wǎng)頁中摊灭，要想創(chuàng)建表格，就需要使用表格相關的標簽败徊。
創(chuàng)建表格的基本語法：
<table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table>
在上面的語法中包含基本的三對HTML標簽帚呼，分別為 table、tr皱蹦、td煤杀，他們是創(chuàng)建表格的基本標簽，缺一不可
table用于定義一個表格標簽沪哺。
tr標簽 用于定義表格中的行沈自，必須嵌套在 table標簽中。
td 用于定義表格中的單元格辜妓，必須嵌套在<tr></tr>標簽中枯途。
字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容籍滴，現(xiàn)在我們明白酪夷，表格最合適的地方就是用來存儲數(shù)據(jù)的。
總結：
- 表格的主要目的是用來顯示特殊數(shù)據(jù)的
- 一個完整的表格有表格標簽（table）孽惰，行標簽（tr）晚岭，單元格標簽（td）組成，沒有列的標簽
- <tr></tr>中只能嵌套<td></td> 類的單元格
- <td></td>標簽勋功，他就像一個容器坦报，可以容納所有的元素
4.1.2 表格屬性
表格有部分屬性我們不常用，這里重點記住 cellspacing 狂鞋、 cellpadding片择。
我們經(jīng)常有個說法，是三參為0要销， 平時開發(fā)的我們這三個參數(shù) border cellpadding cellspacing 為 0
4.1.3 表頭單元格標簽th
- 作用：
- 一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中
- 語法：
-
只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可夏块。
th.png
-
th 也是一個單元格 只不過和普通的 td單元格不一樣疏咐，它會讓自己里面的文字居中且加粗
4.1.4 表格標題caption
定義和用法
<table>
<caption>我是表格標題</caption>
</table>
**注意： **
- caption 元素定義表格標題，通常這個標題會被居中且顯示于表格之上脐供。
- caption 標簽必須緊隨 table 標簽之后浑塞。
- 這個標簽只存在 表格里面才有意義。
4.1.5 合并單元格
合并單元格是我們比較常用的一個操作政己，但是不會合并的很復雜酌壕。
合并單元格2種方式
- 跨行合并：rowspan="合并單元格的個數(shù)"
-
跨列合并：colspan="合并單元格的個數(shù)"
08table合并單元格.jpg
合并單元格順序
合并的順序我們按照 先上 后下 先左 后右 的順序
合并單元格三步曲
- 先確定是跨行還是跨列合并
- 根據(jù) 先上 后下 先左 后右的原則找到目標單元格 然后寫上 合并方式 還有 要合并的單元格數(shù)量 比如 ： <td colspan="3"> </td>
- 刪除多余的單元格 單元格
4.1.6 表格總結
| 標簽名 | 定義 | 說明 |
|---|---|---|
| <table></table> | 表格標簽 | 就是一個四方的盒子 |
| <tr></tr> | 表格行標簽 | 行標簽要再table標簽內(nèi)部才有意義 |
| <td></td> | 單元格標簽 | 單元格標簽是個容器級元素，可以放任何東西 |
| <th></th> | 表頭單元格標簽 | 它還是一個單元格，但是里面的文字會居中且加粗 |
| <caption></caption> | 表格標題標簽 | 表格的標題卵牍，跟著表格一起走果港，和表格居中對齊 |
| clospan 和 rowspan | 合并屬性 | 用來合并單元格的 |
- 表格提供了HTML 中定義表格式數(shù)據(jù)的方法。
- 表格中由行中的單元格組成糊昙。
- 表格中沒有列元素辛掠，列的個數(shù)取決于行的單元格個數(shù)。
- 表格不要糾結于外觀释牺，那是CSS 的作用萝衩。
- 表格的學習要求： 能手寫表格結構，并且能簡單合并單元格没咙。
4.1.7 拓展閱讀
表格劃分結構
對于比較復雜的表格猩谊，表格的結構也就相對的復雜了，所以又將表格分割成三個部分：題頭祭刚、正文和腳注牌捷。而這三部分分別用:thead,tbody,tfoot來標注， 這樣更好的分清表格結構
注意：
- <thead></thead>：用于定義表格的頭部袁梗。用來放標題之類的東西宜鸯。<thead> 內(nèi)部必須擁有 <tr> 標簽！
- <tbody></tbody>：用于定義表格的主體遮怜。放數(shù)據(jù)本體 淋袖。
- <tfoot></tfoot>放表格的腳注之類。
- 以上標簽都是放到table標簽中锯梁。
4.2 列表
-
概念：
容器里面裝載著結構即碗，樣式一致的文字或圖表的一種形式，叫列表
-
特點：
列表最大的特點就是 整齊 陌凳、整潔剥懒、 有序，跟表格類似合敦，但是他可組合自由度會更高初橘。
4.2.1 無序列表 ul
無序列表的各個列表項之間沒有順序級別之分，是并列的充岛。其基本語法格式如下：
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
比如新聞是沒有順序的保檐，不用排隊，先到先得崔梗，后發(fā)布先顯示夜只。
注意：
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的蒜魄。
2. <li>與</li>之間相當于一個容器扔亥，可以容納所有元素场躯。
3. 無序列表會帶有自己樣式屬性，不用這個旅挤，用CSS踢关！
4.2.2 有序列表 ol
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義谦铃，有序列表的基本語法格式如下：
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ol>
所有特性基本與ul 一致耘成。 但是實際中比 無序列表 用的少很多。
4.2.3 自定義列表
定義列表常用于對術語或名詞進行解釋和描述驹闰，定義列表的列表項前沒有任何項目符號瘪菌。其基本語法如下：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
...
</dl>
4.2.4 列表總結
| 標簽名 | 定義 | 說明 |
|---|---|---|
| <ul></ul> | 無序標簽 | 里面只能包含li 沒有順序，我們以后布局中最常用的列表 |
| <ol></ol> | 有序標簽 | 里面只能包含li 有順序嘹朗， 使用情況較少 |
| <dl></dl> | 自定義列表 | 里面有2個兄弟师妙， dt 和 dd |
4.3. 表單
表單目的是為了收集用戶信息。
在HTML中屹培，一個完整的表單通常由表單控件（也稱為表單元素）默穴、提示信息和表單域3個部分構成。
表單控件：包含了具體的表單功能項褪秀，如單行文本輸入框蓄诽、密碼輸入框、復選框媒吗、提交按鈕仑氛、重置按鈕等。
提示信息：一個表單中通常還需要包含一些說明性的文字闸英，提示用戶進行填寫和操作锯岖。
表單域：他相當于一個容器，用來容納所有的表單控件和提示信息甫何，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址出吹，以及數(shù)據(jù)提交到服務器的方法。如果不定義表單域辙喂，表單中的數(shù)據(jù)就無法傳送到后臺服務器捶牢。
4.3.1 input 控件
<input type="屬性值" value="你好">
<input />標簽為單標簽
type屬性設置不同的屬性值用來指定不同的控件類型
除了type屬性還有別的屬性
-
常用屬性：
input.png
1. type 屬性
- 這個屬性通過改變值，可以決定了你屬于那種input表單巍耗。
- 比如 type = 'text' 就表示 文本框 可以做 用戶名秋麸， 昵稱等。
- 比如 type = 'password' 就是表示密碼框 用戶輸入的內(nèi)容 是不可見的芍锦。
用戶名: <input type="text" />
密 碼：<input type="password" />
2. value屬性 值
用戶名:<input type="text" name="username" value="請輸入用戶名">
- value 默認的文本值竹勉。 有些表單想剛打開頁面就默認顯示幾個文字飞盆，就可以通過這個value 來設置娄琉。
3. name屬性
用戶名:<input type="text" name=“username” />
name表單的名字次乓， 這樣，后臺可以通過這個name屬性找到這個表單孽水。 頁面中的表單很多票腰，name主要作用就是用于區(qū)別不同的表單。
- name屬性后面的值女气，是我們自己定義的杏慰。
- radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
- name屬性炼鞠，我們現(xiàn)在用的較少缘滥， 但是，當我們學ajax 和后臺的時候谒主，是必須的朝扼。
4. checked屬性
- 表示默認選中狀態(tài)。 較常見于 單選按鈕和復選按鈕霎肯。
性 別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
上面這個擎颖，表示就默認選中了 男 這個單選按鈕
5. input 屬性小結
| 屬性 | 說明 | 作用 |
|---|---|---|
| type | 表單類型 | 用來指定不同的控件類型 |
| value | 表單值 | 表單里面默認顯示的文本 |
| name | 表單名字 | 頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單观游。 |
| checked | 默認選中 | 表示那個單選或者復選按鈕一開始就被選中了 |
4.3.2 label標簽
label 標簽為 input 元素定義標注（標簽）搂捧。
用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。
如何綁定元素呢懂缕？
- 第一種用法就是用label直接包括input表單允跑。
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label>
適合單個表單選擇
- 第二種用法 for 屬性規(guī)定 label 與哪個表單元素綁定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
當我們鼠標點擊 label標簽里面的文字時提佣， 光標會定位到指定的表單里面
4.3.3 textarea控件(文本域)
- 語法：
<textarea >
文本內(nèi)容
</textarea>
-
作用：
通過textarea控件可以輕松地創(chuàng)建多行文本輸入框.
cols="每行中的字符數(shù)" rows="顯示的行數(shù)" 我們實際開發(fā)不用
文本框和文本域區(qū)別
| 表單 | 名稱 | 區(qū)別 | 默認值顯示 | 用于場景 |
|---|---|---|---|---|
| input type="text" | 文本框 | 只能顯示一行文本 | 單標簽吮蛹，通過value顯示默認值 | 用戶名、昵稱拌屏、密碼等 |
| textarea | 文本域 | 可以顯示多行文本 | 雙標簽潮针，默認值寫到標簽中間 | 留言板 |
2.4 select下拉列表
如果有多個選項讓用戶選擇，為了節(jié)約空間倚喂，我們可以使用select控件定義下拉列表.
語法：
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
- 注意：
- <select> 中至少包含一對 option
- 在option 中定義selected =" selected "時每篷，當前項即為默認選中項。
- 但是我們實際開發(fā)會用的比較少
4.4 form表單域
-
收集的用戶信息怎么傳遞給服務器端圈？
通過form表單域
在HTML中焦读，form標簽被用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞舱权，form中的所有內(nèi)容都會被提交給服務器矗晃。
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
常用屬性：
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。 |
| method | get/post | 用于設置表單數(shù)據(jù)的提交方式宴倍，其取值為get或post张症。 |
| name | 名稱 | 用于指定表單的名稱仓技，以區(qū)分同一個頁面中的多個表單。 |
注意:
每個表單都應該有自己表單域俗他。我們現(xiàn)在做頁面脖捻，不寫看不到效果，但是 如果后面學 ajax 后臺交互的時候兆衅，必須需要 form表單域地沮。
常用文檔
經(jīng)常查閱文檔是一個非常好的學習習慣。
