html基础（全）
文章目錄
- day 1
- 1. HTML 初識
- 1.1 HTML骨架標簽
- html骨架標簽總結
- 團隊約定大小寫
- 1.2 HTML元素標簽分類
- 1.3 HTML標簽關系
- 2. 代碼開發工具（書寫代碼）
- 3. 文檔類型
- 4. 頁面語言lang
- 5. 字符集
- 6. HTML標簽的語義化
- 1. HTML常用標簽
- 1.1 排版標簽
- 1）標題標簽h (熟記)
- 2）段落標簽p ( 熟記)
- 3）水平線標簽hr(認識)
- 4）換行標簽br (熟記)
- 5）div 和 span標簽(重點)
- 排版標簽總結
- 1.2 文本格式化標簽(熟記)
- 1.3 標簽屬性
- 1.4 圖像標簽img (重點)
- 1.5 鏈接標簽(重點)
- 1.6 注釋標簽
- 團隊約定
- 2. 路徑(重點、難點)
- 相對路徑
- 絕對路徑
- 3. 今日總結
- 4. @拓展閱讀
- 4.1 錨點定位 （難點）
- 4.2 base 標簽
- 4.3 預格式化文本pre標簽
- 4.4特殊字符
- 4.5 html5發展之路
- 4.6 什么是XHTML
- 5.7 HTML和 XHTML之間有什么區別?
- 5. @深入閱讀
- 6. 預習內容
- day2
- 表格 table(會使用)
- 1. 創建表格
- 2. 表格屬性
- 3. 表頭單元格標簽th
- 4. 表格標題caption
- 5. 合并單元格(難點)
- 5.1 合并單元格2種方式
- 5.2 合并單元格順序
- 5.3 合并單元格三步曲
- 6. 總結表格
- 7. 拓展閱讀@
- 表格劃分結構（了解）
- 學習目標
- 1.1 無序列表 ul （重點）
- 1.2 有序列表 ol （了解）
- 1.3 自定義列表（理解）
- 1.4 列表總結
- 2. 表單標簽(掌握)
- 2.1 input 控件(重點)
- 1. type 屬性
- 2. value屬性 值
- 3. name屬性
- 4. checked屬性
- 5. input 屬性小結
- 2.2 label標簽(理解)
- 2.3 textarea控件(文本域)
- 文本框和文本域區別
- 2.4 select下拉列表
- 3. form表單域
- 2.6 團隊約定
- 元素屬性
- 4.綜合案例（注冊頁面）
- 5. 查文檔
- 6. 總結
day 1
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.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>1.2 HTML元素標簽分類
標簽：
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <html>、<head>、<body>都是HTML骨架結構標簽。
分類：
- 該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。
- 和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。
- 我們以后接觸的基本都是雙標簽
- 空元素 用單標簽來表示， 簡單點說，就是里面不需要包含內容， 只有一個開始標簽不需要關閉。
- 這種單身狗標簽非常少，一共沒多少，我們多記憶就好
pink老師 一句話說出他們:
世界上單身狗畢竟是少數的， 大部分還是喜歡成雙成對，不要拉下你的另外一半，對待一個雙標簽要有始有終。
1.3 HTML標簽關系
主要針對于雙標簽 的相互關系分為兩種： 請大家務必熟悉記住這種標簽關系，因為后面我們標簽嵌套特別多，很容易弄混他們的關系。
2.并列關系
<head></head> <body></body>倡議：
如果兩個標簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位（一個tab是4個空格）。如果是并列關系，最好上下對齊。pink老師 一句話說出他們:
html雙標簽 可以分為 有 一種是 父子級 包含關系的標簽 一種是 兄弟級 并列關系的標簽
2. 代碼開發工具（書寫代碼）
-
為了提高我們的開發效率
-
減少代碼的出錯我們不提倡用記事本開發，我們有更好的犀利哥。
-
Dreamweaver
-
SublimeText
-
WebStorm
-
HBuilder
-
VScode
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標簽。
1. HTML常用標簽
首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標簽，認識標簽就可以了。 不會再給結構標簽指定樣式了。
HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。
1.1 排版標簽
排版標簽主要和css搭配使用，顯示網頁結構的標簽，是網頁布局最常用的標簽。
1）標題標簽h (熟記)
單詞縮寫： head 頭部. 標題 title 文檔標題
為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
標題標簽語義： 作為標題使用，并且依據重要性遞減
其基本語法格式如下：
<h1> 標題文本 </h1> <h2> 標題文本 </h2> <h3> 標題文本 </h3> <h4> 標題文本 </h4> <h5> 標題文本 </h5> <h6> 標題文本 </h6>顯示效果如下：
小結 :
- 加了標題的文字會變的加粗，字號也會依次變大
- 一行是只能放一個標題的
2）段落標簽p ( 熟記)
單詞縮寫： paragraph 段落 [?p?r?gr?f] 無須記這個單詞
作用語義：
可以把 HTML 文檔分割為若干段落
在網頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，而段落的標簽就是
<p> 文本內容 </p>是HTML文檔中最常見的標簽，默認情況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行。
3）水平線標簽hr(認識)
單詞縮寫： horizontal 橫線 [?h?r??zɑntl] 同上
在網頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標簽來完成，
就是創建橫跨網頁水平線的標簽。其基本語法格式如下： <hr />是單標簽
在網頁中顯示默認樣式的水平線。
課堂練習:新聞頁面
4）換行標簽br (熟記)
單詞縮寫： break 打斷 ,換行
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽
<br />這時如果還像在word中直接敲回車鍵換行就不起作用了。
此處有練習題
5）div 和 span標簽(重點)
div span 是沒有語義的 是我們網頁布局主要的2個盒子 想必你聽過 css+div
div 就是 division 的縮寫 分割， 分區的意思 其實有很多div 來組合網頁。
span 跨度，跨距；范圍
語法格式：
<div> 這是頭部 </div> <span>今日價格</span>他們兩個都是盒子，用來裝我們網頁元素的， 只不過他們有區別，現在我們主要記住使用方法和特點就好了
- div標簽 用來布局的，但是現在一行只能放一個div
- span標簽 用來布局的，一行上可以放好多個span
后面后面講顯示模式的時候，會告訴大家
排版標簽總結
| 標題標簽 | 作為標題使用，并且依據重要性遞減 | |
| 段落標簽 | 可以把 HTML 文檔分割為若干段落 | |
| 水平線標簽 | 沒啥可說的，就是一條線 | |
| 換行標簽 | ||
| div標簽 | 用來布局的，但是現在一行只能放一個div | |
| span標簽 | 用來布局的，一行上可以放好多個span |
1.2 文本格式化標簽(熟記)
在網頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
區別：
b 只是加粗 strong 除了可以加粗還有 強調的意思， 語義更強烈。
剩下的同理…
請同學們重點記住 前兩組 加粗 和 傾斜 后面兩組沒記住回來查
1.3 標簽屬性
所謂屬性就是外在特性 比如 手機的顏色 手機的尺寸 ，總結就是手機的。。
- 手機的顏色是黑色
- 手機的尺寸是 8寸
- 水平線的長度是 200
- 圖片的寬度 是 300
使用HTML制作網頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設置。其基本語法格式如下：
<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名> <手機 顏色="紅色" 大小="5寸"> </手機>1.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 屬性區別？
1.5 鏈接標簽(重點)
單詞縮寫： anchor 的縮寫 [???k??] 。基本解釋 錨, 鐵錨 的
在HTML中創建超鏈接非常簡單，只需用標簽把文字包括起來就好。
語法格式：
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>| href | 用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能 |
| target | 用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，__blank為在新窗口中打開方式。 |
注意：
重點掌握點：
- 請說出 鏈接標簽那個屬性是必須要寫的？
- 請說出 如何新窗口打開這個一個鏈接網頁的？
1.6 注釋標簽
在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。
簡單解釋：
注釋內容不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。
語法格式：
<!-- 注釋語句 --> 快捷鍵是： ctrl + / 或者 ctrl +shift + /pink老師 一句話說出他們:
注釋是給人看的，目的是為了更好的解釋這部分代碼是干啥的， 程序是不執行這個代碼的
團隊約定
一般用于簡單的描述，如某些狀態描述、屬性描述等
注釋內容前后各一個空格字符，注釋位于要注釋代碼的上面，單獨占一行
推薦：
<!-- Comment Text --> <div>...</div>不推薦：
<div>...</div><!-- Comment Text --> <div><!-- Comment Text -->... </div>2. 路徑(重點、難點)
實際工作中，我們的文件不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個文件夾來管理他們。
**目錄文件夾： **
就是普通文件夾，里面只不過存放了我們做頁面所需要的 相關素材，比如 html文件， 圖片 等等。
**根目錄 **
打開目錄文件夾的第一層 就是 根目錄
頁面中的圖片會非常多， 通常我們再新建一個文件夾專門用于存放圖像文件（images），這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。路徑可以分為： 相對路徑和絕對路徑
相對路徑
以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。
| 同一級路徑 | 只需輸入圖像文件的名稱即可，如<img src=“baidu.gif” />。 | |
| 下一級路徑 | “/” | 圖像文件位于HTML文件同級文件夾下（例如文件夾名稱為：images） 如<img src=“images/baidu.gif” />。 |
| 上一級路徑 | “…/” | 在文件名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推， 如<img src="…/baidu.gif" />。 |
**pink老師 一句話說出他們: **
相對路徑，是從代碼所在的這個文件出發， 去尋找我們的目標文件的，而 我們所說的 上一級 下一級 同一級 簡單說，就是 圖片 位于 HTML 頁面的位置
絕對路徑
絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的。
“D:\web\img\logo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/logo.gif”。
注意：
絕對路徑用的較少，我們理解下就可以了。 但是要注意，它的寫法 特別是符號 \ 并不是 相對路徑的 /
3. 今日總結
每一天都有一個主題 我們HTML第一天的主題就是 <認識標簽> 能用常用標簽，寫出最簡單的頁面
總結今天的思路貫穿線：
4. @拓展閱讀
4.1 錨點定位 （難點）
通過創建錨點鏈接，用戶能夠快速定位到目標內容。
創建錨點鏈接分為兩步：
1. 使用相應的id名標注跳轉目標的位置。 (找目標)<h3 id="two">第2集</h3> 2. 使用<a href="#id名">鏈接文本</a>創建鏈接文本（被點擊的） （拉關系） 我也有一個姓畢的姥爺..<a href="#two">快速記憶法：
好比找個人辦事， 首先找到他，然后拉關系，最后看效果。
4.2 base 標簽
語法：
<base target="_blank" />**總結： **
pink老師 一句話說出他們:
全體鏈接~ 到 ~ 全體集合 所有鏈接 以新窗口打開頁面 ~ 是
4.3 預格式化文本pre標簽
標簽可定義預格式化的文本。被包圍在 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。```html 此例演示如何使用 pre 標簽對空行和 空格進行控制 **pink老師 一句話說出他們:**> 所謂的預格式化文本就是 ，按照我們預先寫好的文字格式來顯示頁面， 保留空格和換行等。 有了這個標簽，里面的文字，會按照我們書寫的模式顯示，不需要段落和換行標簽了。但是，比較少用，因為不好整體控制。4.4特殊字符
一些特殊的符號，我們再html 里面很難或者 不方便直接 使用， 我們此時可以使用下面的替代代碼。
雖然有很多，但是我們平時用的比較較少， 大家重點記住 空格 大于號 小于號 就可以了，剩下的回來查閱。
總結：
4.5 html5發展之路
4.6 什么是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，例如它要求標簽必須小寫，標簽必須被正確關閉，標簽順序必須正確排列，對于屬性都必須使用雙引號等。
5. @深入閱讀
HTML5的崛起之路
6. 預習內容
-
表格標簽
-
能夠通過表格標簽能夠寫出一個簡版表格數據展示
例如：
可以把你今天學習的內容放在表格內，再次作為總結
day2
能夠利用表格、列表和表單完成注冊頁面的綜合案例
- 能出說表格用來做什么的
- 能說出列表用來做什么的
- 能說出表單用來做什么的
為了讓我們頁面顯示的更加整齊，我們需要學習三個表（表格、表單、列表）
表格 table(會使用)
目標：
- 理解：
- 能說出表格用來做什么的
- 表格的基本結構組成
- 應用：
- 能夠熟練寫出n行n列的表格
- 能簡單的合并單元格
?
表格作用：
存在即是合理的。 表格的現在還是較為常用的一種標簽，但不是用來布局，常見顯示、展示表格式數據。
因為它可以讓數據顯示的非常的規整，可讀性非常好。
特別是后臺展示數據的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數據表現得很有條理，雖然 div 布局也可以做到，但是總沒有表格來得方便。
1. 創建表格
在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。
創建表格的基本語法：
<table><tr><td>單元格內的文字</td>...</tr>... </table>要深刻體會表格、行、單元格他們的構成。
在上面的語法中包含基本的三對HTML標簽，分別為 table、tr、td，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體地解釋
table用于定義一個表格標簽。
tr標簽 用于定義表格中的行，必須嵌套在 table標簽中。
td 用于定義表格中的單元格，必須嵌套在標簽中。
字母 td 指表格數據（table data），即數據單元格的內容，現在我們明白，表格最合適的地方就是用來存儲數據的。
?
**總結： **
- 表格的主要目的是用來顯示特殊數據的
- 一個完整的表格有表格標簽（table），行標簽（tr），單元格標簽（td）組成，沒有列的標簽
- 中只能嵌套 類的單元格
- 標簽，他就像一個容器，可以容納所有的元素
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>3. 表頭單元格標簽th
- 作用：
- 一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中
- 語法：
- 只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可。
- 只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可。
案例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單元格不一樣，它會讓自己里面的文字居中且加粗
4. 表格標題caption
定義和用法
<table><caption>我是表格標題</caption> </table>**注意： **
5. 合并單元格(難點)
合并單元格是我們比較常用的一個操作，但是不會合并的很復雜。
5.1 合并單元格2種方式
- 跨行合并：rowspan=“合并單元格的個數”
- 跨列合并：colspan=“合并單元格的個數”
5.2 合并單元格順序
**合并的順序我們按照 先上 后下 先左 后右 的順序 **
跟我們以前學習漢字的書寫順序完全一致。
5.3 合并單元格三步曲
6. 總結表格
| 表格標簽 | 就是一個四方的盒子 | ||
| 表格行標簽 | 行標簽要再table標簽內部才有意義 | ||
| 單元格標簽 | 單元格標簽是個容器級元素，可以放任何東西 | ||
| 表頭單元格標簽 | 它還是一個單元格，但是里面的文字會居中且加粗 | ||
| 表格標題標簽 | 表格的標題，跟著表格一起走，和表格居中對齊 | ||
| clospan 和 rowspan | 合并屬性 | 用來合并單元格的 |
7. 拓展閱讀@
表格劃分結構（了解）
對于比較復雜的表格，表格的結構也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標注， 這樣更好的分清表格結構注意：
?# 1. 列表標簽（重點）
學習目標
- 理解
- 無序列表的應用場景
- 自定義列表的應用場景
- 應用
- 無序列表語法
- 自定義列表語法
問？
前面我們知道表格一般用于數據展示的，但是網頁中還是有很多跟表格類似的布局，如下圖~~ 我們用什么做呢？
答：
答案是列表， 那什么是列表？ 表格是用來顯示數據的，那么列表就是用來布局的。 因為非常整齊和自由
-
概念：
容器里面裝載著結構，樣式一致的文字或圖表的一種形式，叫列表
-
特點：
列表最大的特點就是 整齊 、整潔、 有序，跟表格類似，但是他可組合自由度會更高。
1.1 無序列表 ul （重點）
無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：
<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>...... </ul>比如下面這些，新聞是沒有順序的，不用排隊，先到先得，后發布先顯示。
腳下留心：
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。2. <li>與</li>之間相當于一個容器，可以容納所有元素。3. 無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！1.2 有序列表 ol （了解）
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>...... </ol>所有特性基本與ul 一致。 但是實際中比 無序列表 用的少很多。
1.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>用的還可以：
1.4 列表總結
| 無序標簽 | 里面只能包含li 沒有順序，我們以后布局中最常用的列表 | |
| 有序標簽 | 里面只能包含li 有順序， 使用情況較少 | |
| 自定義列表 | 里面有2個兄弟， dt 和 dd |
我們現在還沒有學布局，現在只要保證2個點：
2. 表單標簽(掌握)
目標：
- 能寫出最常用的注冊類表單
- 能說出input表單常見屬性
現實中的表單，類似我們去銀行辦理信用卡填寫的單子。 如下圖
**作用： **
表單目的是為了收集用戶信息。
在我們網頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時也需要表單。
在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。
**表單控件： **
? 包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息：
? 一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：
? 他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。
2.1 input 控件(重點)
-
語法：
<input type="屬性值" value="你好">- input 輸入的意思
- <input />標簽為單標簽
- type屬性設置不同的屬性值用來指定不同的控件類型
- 除了type屬性還有別的屬性
-
常用屬性：
1. type 屬性
- 這個屬性通過改變值，可以決定了你屬于那種input表單。
- 比如 type = ‘text’ 就表示 文本框 可以做 用戶名， 昵稱等。
- 比如 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 這樣就可以多個選其中的一個啦
- name屬性，我們現在用的較少， 但是，當我們學ajax 和后臺的時候，是必須的。
4. checked屬性
- 表示默認選中狀態。 較常見于 單選按鈕和復選按鈕。
上面這個，表示就默認選中了 男 這個單選按鈕
5. input 屬性小結
| type | 表單類型 | 用來指定不同的控件類型 |
| value | 表單值 | 表單里面默認顯示的文本 |
| name | 表單名字 | 頁面中的表單很多，name主要作用就是用于區別不同的表單。 |
| checked | 默認選中 | 表示那個單選或者復選按鈕一開始就被選中了 |
2.2 label標簽(理解)
目標：
label標簽主要目的是為了提高用戶體驗。 為用戶提高最優秀的服務。
概念：
label 標簽為 input 元素定義標注（標簽）。
作用：
用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。
如何綁定元素呢？
適合單個表單選擇
pink老師 一句話說出他們:
當我們鼠標點擊 label標簽里面的文字時， 光標會定位到指定的表單里面
2.3 textarea控件(文本域)
- 語法：
-
作用：
通過textarea控件可以輕松地創建多行文本輸入框.
cols=“每行中的字符數” rows=“顯示的行數” 我們實際開發不用
文本框和文本域區別
| input type=“text” | 文本框 | 只能顯示一行文本 | 單標簽，通過value顯示默認值 | 用戶名、昵稱、密碼等 |
| textarea | 文本域 | 可以顯示多行文本 | 雙標簽，默認值寫到標簽中間 | 留言板 |
2.4 select下拉列表
目的：
如果有多個選項讓用戶選擇，為了節約空間，我們可以使用select控件定義下拉列表.
語法：
<select><option>選項1</option><option>選項2</option><option>選項3</option>... </select>- 注意：
3. form表單域
-
收集的用戶信息怎么傳遞給服務器？
通過form表單域
-
目的：
在HTML中，form標簽被用于定義表單域，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。
**語法: **
<form action="url地址" method="提交方式" name="表單名稱">各種表單控件 </form>常用屬性：
| action | url地址 | 用于指定接收并處理表單數據的服務器程序的url地址。 |
| method | get/post | 用于設置表單數據的提交方式，其取值為get或post。 |
| name | 名稱 | 用于指定表單的名稱，以區分同一個頁面中的多個表單。 |
注意:
每個表單都應該有自己表單域。我們現在做頁面，不寫看不到效果，但是 如果后面學 ajax 后臺交互的時候，必須需要 form表單域。
2.6 團隊約定
元素屬性
- 元素屬性值使用雙引號語法
- 元素屬性值可以寫上的都寫上
推薦：
<input type="text" /> <input type="radio" name="name" checked="checked" />不推薦：
<input type=text /> <input type='text' /> <input type="radio" name="name" checked />4.綜合案例（注冊頁面）
5. 查文檔
經常查閱文檔是一個非常好的學習習慣。
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
6. 總結
總結
- 上一篇： IPV6安装及启用
- 下一篇： 2021CentOS7系统Gnome3桌