嵌入式新聞早班車-第26期
- 1.前言&Web標準
- 2.認識HTML
- 3.HTML常用標籤
- 5. 路徑(重點、難點)
- 6.連結標籤(錨點)
- 7.表格table(會使用)
- 8.列表
- 10.H5新增標籤
- 9.表單(掌握)
- 10. 查文件
- 11.Emmet語法生成HTML
1.前言&Web標準
1.1.常見瀏覽器核心
| 名稱 | 核心 | 備註 |
|---|---|---|
| Google Chrome | Chromium/Blink | 在 Chromium 專案中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。大部分國產瀏覽器最新版都採用Blink核心。二次開發 |
| Firefox | Gecko | 俗稱Firefox核心；可惜這幾年已經沒落了，開啟速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。 |
| Safari | Webkit | Webkit核心；現在很多人錯誤地把 webkit 叫做 chrome核心（即使 chrome核心已經是 blink 了）。蘋果感覺像被別人搶了媳婦，都哭暈再廁所裡面了。 |
| Edge | Blink | |
| IE | Trident | 俗稱IE核心；IE、獵豹安全、360極速瀏覽器、百度瀏覽器 |
| Opera | Blink | 現在跟隨chrome用blink核心。 |
拓展閱讀：
移動端的瀏覽器核心主要說的是系統內建瀏覽器的核心。
Android手機而言，使用率最高的就是Webkit核心，大部分國產瀏覽器宣稱的自己的核心，基本上也是屬於webkit二次開發。
iOS以及WP7平臺上，由於系統原因，系統大部分自帶瀏覽器核心，一般是Safari或者IE核心Trident的
介紹一下你對瀏覽器核心的理解？常見的瀏覽器核心有哪些？
瀏覽器核心包括兩部分，渲染引擎和js引擎。渲染引擎負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示頁面;js引擎是解析執行js獲取網頁的動態效果。 後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。
IE：Trident
firefox：Gecko
chrome、safari：webkit
Opera：Presto
Microsoft Edge：EdgeHTML
深度閱讀：五大主流瀏覽器核心的源起以及國內各大瀏覽器核心總結
1.2.web標準
Web標準不是某一個標準，而是由W3C組織和其他標準化組織制定的一系列標準的集合。
W3C 全球資訊網聯盟是國際最著名的標準化組織。1994年成立後，至今已釋出近百項相關全球資訊網的標準，對全球資訊網發展做出了傑出的貢獻。
w3c就類似於現實世界中的聯合國。
1.2.1為什麼要遵循WEB標準呢？
通過以上瀏覽器不同核心不同，我們知道他們顯示頁面或者排版就有些許差異。
1.2.2 Web 標準的好處
遵循web標準可以讓不同我們寫的頁面更標準更統一外，還有許多優點
1、讓Web的發展前景更廣闊
2、內容能被更廣泛的裝置訪問
3、更容易被搜尋引擎搜尋
4、降低網站流量費用
5、使網站更易於維護
6、提高頁面瀏覽速度
1.2.3 Web 標準構成
構成： 主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。
| 標準 | 說明 | 備註 |
|---|---|---|
| 結構 | 結構用於對網頁元素進行整理和分類，咱們主要學的是HTML。 | |
| 表現 | 表現用於設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS | |
| 行為 | 行為是指網頁模型的定義及互動的編寫，咱們主要學的是 Javascript |
理想狀態我們的原始碼： .HTML .css .js
1.2.4web標準小結
- web標準有三層結構，分別是結構（html）、表現（css）和行為（javascript）
- 結構類似人的身體， 表現類似人的著裝， 行為類似人的行為動作
- 理想狀態下，他們三層都是獨立的， 放到不同的檔案裡面
2.認識HTML
- HTML 指的是超文字標記語言 (Hyper Text Markup Language)是用來描述網頁的一種語言。
- HTML 不是一種程式語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標籤 (markup tag)
pink老師 一句話說出html作用:
網頁是由網頁元素組成的 ， 這些元素是利用html標籤描述出來，然後通過瀏覽器解析，就可以顯示給使用者了。
所謂超文字，有2層含義：
- 因為它可以加入圖片、聲音、動畫、多媒體等內容（**超越文字限制 **）
- 不僅如此，它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連線（**超級連結文字 **）。
<img src="timg.jpg" />
門外漢眼中的效果頁面
我們要做的html頁面
html 總結:
- html 是超文字標記(標籤)語言
- 我們學習html 主要學習html標籤
- 我們用html標籤描述網頁元素。 比如 圖片標籤 、文字標籤、連結標籤等等
- 標籤有自己的語法規範，所有的html標籤都是用 <> 表示的
2.1 HTML骨架標籤
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.1.1html骨架標籤總結
| 標籤名 | 定義 | 說明 |
|---|---|---|
| HTML標籤 | 頁面中最大的標籤，我們稱為根標籤，是文件開始和結束的標記,在它們之間是文件的頭部（head）和主體（body); | |
| 文件的頭部 | 定義HTML文件開頭部分,內容不會在瀏覽器視窗顯示,包含文件元（meta）資料，配置資訊等，是給瀏覽器看的;注意在head標籤中我們必須要設定的標籤是title | |
| 文件的標題 | 讓頁面擁有一個屬於自己的網頁標題 | |
| 文件的主體 | 元素包含可見的網頁主體內容;，頁面內容 基本都是放到body裡面的 | |
| <!doctype html> | 文件型別宣告 | <!DOCTYPE> 宣告位於文件中的最前面的位置，處於 標籤之前。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。它不是一個html標籤只是一個文件宣告型別;( 就是告訴瀏覽器按照HTML5 規範解析頁面) |
| lang="zh-CN“ | 指定html 語言種類 | zh-CN中文的意思，整個文件的內容以中文為主，如果以英文為主，就寫成lang='en' |
| charset="UTF-8" | 字符集 | 字符集( Character set))是多個字元的集合。以便計算機能夠識別儲存各種文字。 在標籤內，可以通過標籤的 charset屬性來規定HTML文件應該使用哪種字元編碼；charset常用的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被稱為萬國碼，基本包含了全世界所有國家需要用到的字元；一般情況下，統一使用UTF-8”編碼，儘量統一寫成標準的"UTF-8",不要寫成"utf-8"或"UTF8"。中文網頁需要使用 <meta charset="UTF-8"> 宣告編碼，否則會出現亂碼;有些瀏覽器是gbk，需手動設定為 <meta charset="gbk"> |
2.1.2 html標籤格式
1.html標籤是由尖括號包圍的關鍵字，如：<html>,<div>,<span>等;
2.html標籤通常是成對出現，如：<div></div>,第一個是開始，第二個有斜線的是結束；
3.有些標籤是單獨呈現的，如：<hr/>、<br/>、<img src="222.png"/>;
4.標籤裡面帶有若干屬性，也有不帶的；
2.1.3 HTML標籤的語義化
白話： 所謂標籤語義化，就是指標籤的含義。
pink老師 一句話說出語義化目的:
根據標籤的語義，在合適的地方給一個最為合理的標籤，讓結構更清晰。
- 方便程式碼的閱讀和維護
- 同時讓瀏覽器或是網路爬蟲可以很好地解析，從而更好分析其中的內容
- 使用語義化標籤會具有更好地搜尋引擎優化
語義是否良好： 當我們去掉CSS之後，網頁結構依然組織有序，並且有良好的可讀性。( 裸奔起來一樣好看 )
遵循的原則：先確定語義的HTML ，再選合適的CSS。所以，我們接下來學習html標籤，要根據語義去記憶。 HTML網頁中任何元素的實現都要依靠HTML標籤。
3.HTML常用標籤
首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標籤，認識標籤就可以了。 不會再給結構標籤指定樣式了。
HTML標籤有很多，這裡我們學習最為常用的，後面有些較少用的，我們可以查下手冊就可以了。
3.1排版標籤
排版標籤主要和css搭配使用，顯示網頁結構的標籤，是網頁佈局最常用的標籤。
3.1.1標題標籤h (熟記)
單詞縮寫： head 頭部. 標題 title 文件標題
為了使網頁更具有語義化，我們經常會在頁面中用到標題標籤，HTML提供了6個等級的標題，即
標題標籤語義： 作為標題使用，並且依據重要性遞減
其基本語法格式如下：
<h1> 標題文字 </h1>
<h2> 標題文字 </h2>
<h3> 標題文字 </h3>
<h4> 標題文字 </h4>
<h5> 標題文字 </h5>
<h6> 標題文字 </h6>
顯示效果如下：
小結 :
- 加了標題的文字會變的加粗，字號也會依次變大
- 一行是隻能放一個標題的
3.1.2段落標籤p ( 熟記)
單詞縮寫： paragraph 段落 [ˈpærəgræf] 無須記這個單詞
作用語義：
可以把 HTML 文件分割為若干段落
在網頁中要把文字有條理地顯示出來，離不開段落標籤，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，而段落的標籤就是
<p> 文字內容 </p>
是HTML文件中最常見的標籤，預設情況下，文字在一個段落中會根據瀏覽器視窗的大小自動換行。
3.1.3水平線標籤hr(認識)
單詞縮寫： horizontal 橫線 [ˌhɔrəˈzɑntl] 同上
在網頁中常常看到一些水平線將段落與段落之間隔開，使得文件結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標籤來完成，
就是建立橫跨網頁水平線的標籤。其基本語法格式如下：
<hr />是單標籤
在網頁中顯示預設樣式的水平線。(基本不用，開發中使用樣式border-bottom)
3.1.4換行標籤br (熟記)
單詞縮寫： break 打斷 ,換行
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然後自動換行。如果希望某段文字強制換行顯示，就需要使用換行標籤
<br />
這時如果還像在word中直接敲回車鍵換行就不起作用了。
3.1.5div 和 span標籤(重點)
div span 是沒有語義的 是我們網頁佈局主要的2個盒子 想必你聽過 css+div
div 就是 division 的縮寫 分割， 分割槽的意思 其實有很多div 來組合網頁。
span 跨度，跨距；範圍
語法格式：
<div> 這是頭部 </div> <span>今日價格</span>
他們兩個都是盒子，用來裝我們網頁元素的， 只不過他們有區別，現在我們主要記住使用方法和特點就好了
- div標籤 用來佈局的，但是現在一行只能放一個div
- span標籤 用來佈局的，一行上可以放好多個span
後面後面講顯示模式的時候，會告訴大家
排版標籤總結
| 標籤名 | 定義 | 說明 |
|---|---|---|
| 標題標籤 | 作為標題使用，並且依據重要性遞減 | |
| 段落標籤 | 可以把 HTML 文件分割為若干段落 | |
| 水平線標籤 | 沒啥可說的，就是一條線 | |
| 換行標籤 | ||
| div標籤 | 用來佈局的，但是現在一行只能放一個div | |
| span標籤 | 用來佈局的，一行上可以放好多個span |
3.2文字格式化標籤(熟記)
在網頁中，有時需要為文字設定粗體、斜體或下劃線效果，這時就需要用到HTML中的文字格式化標籤，使文字以特殊的方式顯示。
區別：
b 只是加粗 strong 除了可以加粗還有 強調的意思， 語義更強烈。
剩下的同理...
請同學們重點記住 前兩組 加粗 和 傾斜 後面兩組沒記住回來查
3.3標籤屬性
所謂屬性就是外在特性 比如 手機的顏色 手機的尺寸 ，總結就是手機的。。
- 手機的顏色是黑色
- 手機的尺寸是 8寸
- 水平線的長度是 200
- 圖片的寬度 是 300
使用HTML製作網頁時，如果想讓HTML標籤提供更多的資訊，可以使用HTML標籤的屬性加以設定。其基本語法格式如下：
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>
<手機 顏色="紅色" 大小="5寸"> </手機>
3.4 註釋標籤
在HTML中還有一種特殊的標籤——註釋標籤。如果需要在HTML文件中新增一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字，就需要使用註釋標籤。
簡單解釋：
註釋內容不會顯示在瀏覽器視窗中，但是作為HTML文件內容的一部分，也會被下載到使用者的計算機上，檢視原始碼時就可以看到。
語法格式：
<!-- 註釋語句 --> 快捷鍵是： ctrl + / 或者 ctrl +shift + /
註釋重要性：
pink老師 一句話說出他們:
註釋是給人看的，目的是為了更好的解釋這部分程式碼是幹啥的， 程式是不執行這個程式碼的
3.4.1團隊約定
一般用於簡單的描述，如某些狀態描述、屬性描述等
註釋內容前後各一個空格字元，註釋位於要註釋程式碼的上面，單獨佔一行
推薦：
<!-- Comment Text -->
<div>...</div>
不推薦：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
3.5預格式化文字pre標籤
標籤可定義預格式化的文字。 被包圍在標籤 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。 ```html此例演示如何使用 pre 標籤 對空行和 空格 進行控制**pink老師 一句話說出他們:** > 所謂的預格式化文字就是 ，按照我們預先寫好的文字格式來顯示頁面， 保留空格和換行等。 有了這個標籤，裡面的文字，會按照我們書寫的模式顯示，不需要段落和換行標籤了。但是，比較少用，因為不好整體控制。 ## 3.6特殊字元 （理解） 一些特殊的符號，我們再html 裡面很難或者 不方便直接 使用， 我們此時可以使用下面的替代程式碼。 <img src="media/zifu.png" /> **雖然有很多，但是我們平時用的比較較少， 大家重點記住 空格 大於號 小於號 就可以了，剩下的回來查閱。** **總結：** 1. 是以**運算子**`&`開頭,以**分號運算子**`;`結尾。 2. 他們不是標籤，而是符號。 3. HTML 中不能使用小於號 “<” 和大於號 “>”特殊字元，瀏覽器會將它們作為標籤解析，若要正確顯示，在 HTML 原始碼中使用字元實體 #### 3.6.1團隊約定 *推薦：**不推薦：*## 3.7 html5發展之路 <img src="media/html5.png" width="600"/> ## 3.8 什麼是XHTML XHTML 是更嚴格更純淨的 HTML 程式碼。 - XHTML 指**可擴充套件超文字標籤語言**（EXtensible HyperText Markup Language）。 - XHTML 的目標是取代 HTML。 - XHTML 與 HTML 4.01 幾乎是相同的。 - XHTML 是更嚴格更純淨的 HTML 版本。 - XHTML 是作為一種 XML 應用被重新定義的 HTML。 - XHTML 是一個 W3C 標準。 #### 5.7 HTML和 XHTML之間有什麼區別? - XHTML 指的是可擴充套件超文字標記語言 - XHTML 與 HTML 4.01 幾乎是相同的 - XHTML 是更嚴格更純淨的 HTML 版本 - XHTML 是以 XML 應用的方式定義的 HTML - XHTML 是 2001 年 1 月釋出的 W3C 推薦標準 - XHTML 得到所有主流瀏覽器的支援 - XHTML 元素是以 XML 格式編寫的 HTML 元素。XHTML是嚴格版本的HTML，例如它要求標籤必須小寫，標籤必須被正確關閉，標籤順序必須正確排列，對於屬性都必須使用雙引號等。 # 4.影象 ## 4.1影象標籤img (重點) 單詞縮寫： image 影象 要想在網頁中顯示影象就需要使用影象標籤，接下來將詳細介紹影象標籤<img />以及和他相關的屬性。（它是一個單身狗） 語法如下： ```html <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="圖片不存在" />重點掌握點：
-
[ ] 請說出 影象標籤那個屬性是必須要寫的？src
-
[ ] 請說出 影象標籤中 alt 和 title 屬性區別？
alt:圖片不能顯示時的替換文字；title:滑鼠懸停時提示的內容
5. 路徑(重點、難點)
實際工作中，我們的檔案不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個資料夾來管理他們。
**目錄資料夾： **
就是普通資料夾，裡面只不過存放了我們做頁面所需要的 相關素材，比如 html檔案， 圖片 等等。
**根目錄 **
開啟目錄資料夾的第一層 就是 根目錄
頁面中的圖片會非常多， 通常我們再新建一個資料夾專門用於存放影象檔案（images），這時再插入影象，就需要採用“路徑”的方式來指定影象檔案的位置。路徑可以分為： 相對路徑和絕對路徑
5.1相對路徑
以引用檔案之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存於不同目錄的網頁引用同一個檔案時，所使用的路徑將不相同，故稱之為相對路徑。
| 路徑分類 | 符號 | 說明 |
|---|---|---|
| 同一級路徑 | 只需輸入影象檔案的名稱即可，如。 | |
| 下一級路徑 | “/” | 影象檔案位於HTML檔案同級資料夾下（例如資料夾名稱為：images） 如。 |
| 上一級路徑 | “../” | 在檔名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推， 如。 |
**pink老師 一句話說出他們: **
相對路徑，是從程式碼所在的這個檔案出發， 去尋找我們的目標檔案的，而 我們所說的 上一級 下一級 同一級 簡單說，就是 圖片 位於 HTML 頁面的位置
5.2絕對路徑
絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個檔案時，所使用的路徑都是一樣的。
“D:\web\img\logo.gif”，或完整的網路地址，例如“http://www.itcast.cn/images/logo.gif”。
注意：
絕對路徑用的較少，我們理解下就可以了。 但是要注意，它的寫法 特別是符號 \ 並不是 相對路徑的 /
6.連結標籤(錨點)
6.1 連結標籤(重點)
單詞縮寫： anchor 的縮寫 [ˈæŋkə(r)] 。基本解釋 錨, 鐵錨 的
在HTML中建立超連結非常簡單，只需用標籤把文字包括起來就好。
語法格式：
<a href="跳轉目標" target="目標視窗的彈出方式">文字或影象</a>
| 屬性 | 作用 |
|---|---|
| href（必須屬性） | 用於指定連結目標的url地址，當為標籤應用href屬性時，它就具有了超連結的功能 |
| target | 用於指定連結頁面的開啟方式，其取值有_self和_blank兩種，其中_self為預設值，__blank為在新視窗中開啟方式。 |
6.2常用連結
- 外部連結:單擊該超連結連線到其他網站上的某一個頁面
<a href="http://www.baidu.com">百度</a>
- 內部連結:單擊該超連結連線到同一網站的另外一個頁面,直接連結內部頁面名稱即可
< a href=" index.html">首頁</a>
- 錨點連結:我們點選連結，可以快速定位到頁面中的某個位置在連結文字的href屬性中
<p>
<a href="#C4">檢視關於我們。</a>
</p>
<h2>首頁</h2>
<p>首頁</p>
<h2>新聞</h2>
<p>新聞</p>
<h2>產品</h2>
<p>產品</p>
<h2><a name="C4">關於我們</a></h2>
<p>關於我們</p>
6.3其他連結
使用物件的不同，網頁中的連結可以分為:
- 空連結:如果當時沒有確定連結目標時,設定為空連結
< a href="#">首頁</a>
- 下載連結:如果href裡面地址是一個檔案或者壓縮包，會下載這個檔案,
<a href="/images/myw3schoolimage.jpg" download="w3logo">下載</a>
- 網頁元素連結: 在網頁中的各種網頁元素，如文字、影象、表格、音訊、視訊等都可以新增超連結
<a href="../example/html/lastpage.html">
<img border="0" src="../i/eg_buttonnext.gif" />
</a>
重點掌握點：
- [x] 請說出 連結標籤那個屬性是必須要寫的？ href
- [x] 請說出 如何新視窗開啟這個一個連結網頁的？ 屬性新增target="__blank"
6.4 base 標籤
語法：
<base target="_blank" />
**總結： **
- base 可以設定整體連結的開啟狀態
- base 寫到 之間
- 把所有的連線 都預設新增 target="_blank"
pink老師 一句話說出他們:
全體連結~ 到 ~ 全體集合 所有連結 以新視窗開啟頁面 ~ 是
7.表格table(會使用)
為了讓我們頁面顯示的更加整齊，我們需要學習三個表（表格、表單、列表）
目標：
- 理解：
- 能說出表格用來做什麼的
- 表格的基本結構組成
- 應用：
- 能夠熟練寫出n行n列的表格
- 能簡單的合併單元格
表格作用：
存在即是合理的。 表格的現在還是較為常用的一種標籤，但不是用來佈局，常見顯示、展示表格式資料。
因為它可以讓資料顯示的非常的規整，可讀性非常好。
特別是後臺展示資料的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的資料表現得很有條理，雖然 div 佈局也可以做到，但是總沒有表格來得方便。
ps: 這些地方用表格，你會覺得生活還是那麼美好。。。。忍不住想說 PPAP i hava a pen
7.1.建立表格
在HTML網頁中，要想建立表格，就需要使用表格相關的標籤。
建立表格的基本語法：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
要深刻體會表格、行、單元格他們的構成。
在上面的語法中包含基本的三對HTML標籤，分別為 table、tr、td，他們是建立表格的基本標籤，缺一不可，下面對他們進行具體地解釋
-
table用於定義一個表格標籤。
-
tr標籤 用於定義表格中的行，必須巢狀在 table標籤中。
-
td 用於定義表格中的單元格，必須巢狀在標籤中。
-
字母 td 指表格資料（table data），即資料單元格的內容，現在我們明白，表格最合適的地方就是用來儲存資料的。
**總結： **
- 表格的主要目的是用來顯示特殊資料的
- 一個完整的表格有表格標籤（table），行標籤（tr），單元格標籤（td）組成，沒有列的標籤
- 中只能巢狀 類的單元格
- 標籤，他就像一個容器，可以容納所有的元素
7.2.表格屬性
表格有部分屬性我們不常用，這裡重點記住 cellspacing 、 cellpadding。
我們經常有個說法，是三參為0， 平時開發的我們這三個引數 border cellpadding cellspacing 為 0
案例1：
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>劉德華</td> <td>男</td> <td>55</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>52</td> </tr>
<tr> <td>張學友</td> <td>男</td> <td>58</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>18</td> </tr>
<tr> <td>劉曉慶</td> <td>女</td> <td>63</td> </tr>
</table>
7.3表頭單元格標籤th
- 作用：
- 一般表頭單元格位於表格的第一行或第一列，並且文字加粗居中
- 語法：
- 只需用表頭標籤替代相應的單元格標籤即可。
案例2：
效果圖
程式碼：
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性別</th>
<th>電話</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>120</td>
</tr>
</table>
pink老師 一句話說出他們:
th 也是一個單元格 只不過和普通的 td單元格不一樣，它會讓自己裡面的文字居中且加粗
7.4 表格標題caption
定義和用法
<table>
<caption>我是表格標題</caption>
</table>
**注意： **
- caption 元素定義表格標題，通常這個標題會被居中且顯示於表格之上。
- caption 標籤必須緊隨 table 標籤之後。
- 這個標籤只存在 表格裡面才有意義。你是風兒我是沙
7.5合併單元格(難點)
合併單元格是我們比較常用的一個操作，但是不會合並的很複雜。
7.5.1 合併單元格2種方式
- 跨行合併：rowspan="合併單元格的個數"
- 跨列合併：colspan="合併單元格的個數"
1. 目標單元格：（寫合併程式碼)
- 跨行：最上側單元格為目標單元格，寫合併程式碼
- 跨列：最左側單元格為目標單元格，寫合併程式碼
2.合併單元格三步曲
- 先確定是跨行還是跨列合併。
- 找到目標單元格。寫上合併方式=合併的單元格數量。比如：
< td colspan="2"></td> - 刪除多餘的單元格。
7.6. 總結表格
| 標籤名 | 定義 | 說明 | |
|---|---|---|---|
| 表格標籤 | 就是一個四方的盒子 | ||
| 表格行標籤 | 行標籤要再table標籤內部才有意義 | ||
| 單元格標籤 | 單元格標籤是個容器級元素，可以放任何東西 | ||
| 表頭單元格標籤 | 它還是一個單元格，但是裡面的文字會居中且加粗 | ||
| 表格標題標籤 | 表格的標題，跟著表格一起走，和表格居中對齊 | ||
| clospan 和 rowspan | 合併屬性 | 用來合併單元格的 |
- 表格提供了HTML 中定義表格式資料的方法。
- 表格中由行中的單元格組成。
- 表格中沒有列元素，列的個數取決於行的單元格個數。
- 表格不要糾結於外觀，那是CSS 的作用。
- 表格的學習要求： 能手寫表格結構，並且能簡單合併單元格。
7.6.1表格劃分結構（瞭解）
對於比較複雜的表格，表格的結構也就相對的複雜了，所以又將表格分割成三個部分：題頭、正文和腳註。而這三部分分別用:thead,tbody,tfoot來標註， 這樣更好的分清表格結構
注意：
內部必須擁有 標籤！| 標籤 | 描述 |
|---|---|
| 用於定義表格的頭部。用來放標題之類的東西。 | |
| 用於定義表格的主體。放資料本體 。 | |
| 放表格的腳註之類。 | |
| 定義用於表格列的屬性 | |
| 定義表格列的組 |
以上標籤都是放到table標籤
8.列表
- 理解
- 無序列表的應用場景
- 自定義列表的應用場景
- 應用
- 無序列表語法
- 自定義列表語法
問？
前面我們知道表格一般用於資料展示的，但是網頁中還是有很多跟表格類似的佈局，如下圖~~ 我們用什麼做呢？
答：
答案是列表， 那什麼是列表？ 表格是用來顯示資料的，那麼列表就是用來佈局的。 因為非常整齊和自由
-
概念：
容器裡面裝載著結構，樣式一致的文字或圖表的一種形式，叫列表
-
特點：
列表最大的特點就是 整齊 、整潔、 有序，跟表格類似，但是他可組合自由度會更高。
8.1 無序列表 ul （重點）
<ul>標籤表示HTML頁面中專案的無序列表，一般會以專案符號呈現列表項，而列表項使用<li>標籤定義無序列表的基本語法格式如下:
<u1>
<1i>列表項1</1i>
<1i>列表項2</1i>
<1i>列表項3</1i>
</u1>
- 無序列表的各個列表項之間沒有順序級別之分，是並列的。
<ul></ul>中只能巢狀<li></li>,直接在<ul></ul>標籤中輸入其他標籤或者文字的法是不被允許的。<li>與</li>之間相當於一個容器，可以容納所有元素。- 無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS來設定。
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
比如下面這些，新聞是沒有順序的，不用排隊，先到先得，後釋出先顯示。
8.2 有序列表 ol （瞭解）
在HTML標籤中，``- ``標籤用於定義有序列表，列表排序以數字來顯示，並且使用``
- ``標籤來定義列表項
有序列表的基本語法格式如下:
<ol> <1i>列表項1</1i> <1i>列表項2</1i> <1i>列表項3</1i> </ol>所有特性基本與ul 一致。 但是實際中比 無序列表 用的少很多。
8.3 自定義列表（理解）
在HTML標籤中，
<dl>標籤用於定義描述列表（或定義列表），該標籤會與<dt>(定義專案/名字)和
<dd>(描述每一個專案/名字)一起使用。
其基本語法如下：<dl> <dt>名詞1</at> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> </dl><dl></dl>裡面只能包含<dt>和<dd>。<dt>和<dd>個數沒有限制，經常是一個<dt>對應多個<dd>。
用的還可以：
8.4 列表總結
標籤名 定義 說明 <ul></ul>**無序列表 ** 無序標籤裡面只能包含li 沒有順序，使用較多。li理面可以包含任何標籤 <ol></ol>有序列表 有序標籤裡面只能包含li有順序，使用相對較少。li裡面可以包含任何標籤 <dl></dl>自定義列表 自定義列表裡面只能包含dd和dt。dd和dt裡面可以放任何標籤 我們現在還沒有學佈局，現在只要保證2個點：
- 學會什麼時候用無序列表， 學會什麼時候用自定義列表
- 無序列表和自定義列表程式碼怎麼寫？
- 具體的我們剛才看的佈局，等我們學了css 在來全面佈局。
10.H5新增標籤
9.表單(掌握)
目標：
- 能寫出最常用的註冊類表單
- 能說出input表單常見屬性
現實中的表單，類似我們去銀行辦理信用卡填寫的單子。 如下圖
**作用： **
表單目的是為了收集使用者資訊。
在我們網頁中， 我們也需要跟使用者進行互動，收集使用者資料，此時也需要表單。
在HTML中，一個完整的表單通常由表單控制元件（也稱為表單元素）、提示資訊和表單域3個部分構成。
**表單控制元件： **
包含了具體的表單功能項，如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示資訊：
一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作。
表單域：
他相當於一個容器，用來容納所有的表單控制元件和提示資訊，可以通過他定義處理表單資料所用程式的url地址，以及資料提交到伺服器的方法。如果不定義表單域，表單中的資料就無法傳送到後臺伺服器。
9.1form表單域
-
收集的使用者資訊怎麼傳遞給伺服器？
通過form表單域
-
目的：
在HTML中，form標籤被用於定義表單域，以實現使用者資訊的收集和傳遞，form中的所有內容都會被提交給伺服器。
**語法: **
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控制元件 </form>常用屬性：
屬性 屬性值 作用 action url地址 用於指定接收並處理表單資料的伺服器程式的url地址。 method get/post 用於設定表單資料的提交方式，其取值為get或post。 name 名稱 用於指定表單的名稱，以區分同一個頁面中的多個表單。 注意:
每個表單都應該有自己表單域。我們現在做頁面，不寫看不到效果，但是 如果後面學 ajax 後臺互動的時候，必須需要 form表單域。
9.2 input 控制元件(重點)
-
語法：
<input type="屬性值" value="你好">- input 輸入的意思
- 標籤為單標籤
- type屬性設定不同的屬性值用來指定不同的控制元件型別
- 除了type屬性還有別的屬性
-
常用屬性：
1. type 屬性
- 這個屬性通過改變值，可以決定了你屬於那種input表單。
- 比如 type = 'text' 就表示 文字框 可以做 使用者名稱， 暱稱等。
- 比如 type = 'password' 就是表示密碼框 使用者輸入的內容 是不可見的。
使用者名稱: <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主要作用就是用於區別不同的表單。
-
name屬性後面的值，是我們自己定義的。
-
radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女- name屬性，我們現在用的較少， 但是，當我們學ajax 和後臺的時候，是必須的。
4. checked屬性
- 表示預設選中狀態。 較常見於 單選按鈕和複選按鈕。
性 別: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女上面這個，表示就預設選中了 男 這個單選按鈕
5. input 屬性小結
屬性 說明 作用 type 表單型別 用來指定不同的控制元件型別 value 表單值 表單裡面預設顯示的文字 name 表單名字 頁面中的表單很多，name主要作用就是用於區別不同的表單。 checked 預設選中 表示那個單選或者複選按鈕一開始就被選中了 注意
- radio和checkbox必須設定name屬性，並且所有的radio或者checkbox的name屬性要保持一致。
- 如果使用預設值，新增標籤checked="checked"。
9.3 label標籤(理解)
目標：
label標籤主要目的是為了提高使用者體驗。 為使用者提高最優秀的服務。
概念：
label 標籤為 input 元素定義標註（標籤）。
作用：
用於繫結一個表單元素, 當點選label標籤的時候, 被繫結的表單元素就會獲得輸入焦點。
如何繫結元素呢？
- 第一種用法就是用label直接包括input表單。
<label> 使用者名稱： <input type="radio" name="usename" value="請輸入使用者名稱"> </label>適合單個表單選擇
- 第二種用法 for 屬性規定 label 與哪個表單元素(id)繫結。
<label for="sex">男</label> <input type="radio" name="sex" id="sex">pink老師 一句話說出他們:
當我們滑鼠點選 label標籤裡面的文字時， 游標會定位到指定的表單裡面
9.4 textarea控制元件(文字域)
- 語法：
<textarea > 文字內容 </textarea>-
作用：
通過textarea控制元件可以輕鬆地建立多行文字輸入框.
cols="每行中的字元數" rows="顯示的行數" 我們實際開發不用
文字框和文字域區別
表單 名稱 區別 預設值顯示 用於場景 input type="text" 文字框 只能顯示一行文字 單標籤，通過value顯示預設值 使用者名稱、暱稱、密碼等 textarea 文字域 可以顯示多行文字 雙標籤，預設值寫到標籤中間 留言板 9.5 select下拉列表
目的：
如果有多個選項讓使用者選擇，為了節約空間，我們可以使用select控制元件定義下拉列表.
語法：
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>- 注意：