上節課我們粗略的介紹了一下html的基本標簽，接下來我們開始進入表格標簽。
表格標簽：作用：用來給一堆數據添加表格語義
其實表格是一種數據的展現形式，當數據量非常大的時候，表格這種展現形式被認為是最為清晰的一種展現形式
格式：

<table><tr><td></td></tr></table>

表格標簽中的table代表整個表格，也就是一個table標簽就是一個表格
表格標簽中的tr標簽代表整個表格中的一行數據，也就是說一對tr標簽就是表格中的一行
表格標簽中的td標簽代表表格中一行的一個單元格，也就是說一對td標簽就是一行中的一個單元格
默認寬度為1，需要在table中添加屬性border
表格標簽的屬性：
1.寬度和高度屬性（table、td可用）width/weight=“××px”
默認按照內容自動調整，添加table標簽的width/height屬性指定寬高
給td標簽設置屬性，只修改當前單元格的寬高，整個表格不變
2.水平對齊和垂直對齊屬性（水平table tr td都可用，垂直只有tr td可用）
水平：align=“center,left,right"
垂直：valign=“top,center,borrom”
給table設置屬性，表格左中右移動
給tr設置屬性，當前行中所有單元格
給td設置屬性，該單元格移動
3.外邊距和內邊距屬性（只有table可用）
外邊距：單元格之間的距離
cellspacing=“a” (默認是2px）
內邊距：文字和單元格之間的距離
cellpadding+“a”(默認是1px)

細線表格的制作方式：
1.給table標簽設置bgcolor
2.給tr標簽設置bgcolor
3.給table標簽設置cellspacing=“1px”
注意點：
table標簽和tr標簽以及td標簽都支持bgcolor屬性

表格標題
在表格標簽中提供了一個專門用來設置表格的標題，這個標簽叫做caption。只要將標題寫在caption標簽中，那么標題就會自動相對于表格的寬度居中
注意點：
caption一定要寫在table標簽中，否則無效
caption一定要緊跟在table標簽后面
標題單元格標簽
在表格標簽照片那個提供了一個標簽專門用力存儲每一列的標題，這個標簽叫做th標簽，只要將當前的標題存儲在這個標簽中就會自動居中+加粗文字
到此為止我們就發現，其實表格中有兩種單元格，一種是td，一種是th。td是專門用來存儲數據的，th是專門用用來存儲當前的標題的
表格中存取的數據可以分為4類：
1.表格的標題 --caption
2.表格的表頭信息(每一列的標題)–thead
3.表格的主題信息–tbody
4.表格的頁業信息–tfoot

水平方向上的單元格合并
可以 給td標簽添加一個colspan屬性，來指定把某一個單元格當做多個單元格來看待
列如：<td colspan="2"></td>
含義：把當前單元格當做兩個單元格來看待
注意點：
1.由于把某一個單元格當做了多個單元來看到，所以就會多出一些單元格，所以需要刪掉一些單元格才能正常顯示
2.一定要記住單元格合并永遠都是向后或者向下合并（rowspan），而不能向前或向下合并

表單標簽：專門用來收集信息的標簽

格式：

<表單元素> 表單元素：HTML中的一些標簽，只不過這些標簽比較特殊，在瀏覽器中所有的表單標簽都有特殊的外觀和默認的功能。 常見的表單元素： input標簽：有type屬性，這個屬性有很多類型的取值，取值不同就決定了input標簽的功能和外觀。 <!--明文輸入框（可以看見）--> 帳號：<input type="text"> <!--暗文輸入框（看不見）--> 密碼：<input type="password"> <!--給輸入框設置默認值，在input標簽里加上value標簽。--> <input type="text" value="（想設置的默認值）“>

1.在默認情況下單選框不會互斥，要想單選框互斥那么必須給每一個單選框標簽都設置一個name屬性，然后name屬性還必須設置相同的值。
name中的取值是隨便填寫的，只需要一樣就行。
例如：

<input type="radio" name="gender">男 <input type="radio" name="gender">女

2.如果要讓單選框默認選中某一個框子，那么可以給input標簽添加一個checked屬性。
3.在HTML中如果屬性的取值和屬性的名稱一樣可以只寫一個（盡量不要忽略取值）

<input type="radio" name="xx" checked="checked">女 <!--多選框用法--> <input type="checkbox" checked="checked">唱歌 <input type="checkbox" checked="checked">跳舞 <input type="checkbox" checked="checked">繪畫 <input type="checkbox">籃球 <input type="checkbox">足球 則默認選中唱歌跳舞繪畫

表單標簽——按鈕：type=button（需要配合JS使用）
1.普通按鈕<input type="button" value="我是按鈕”>
2.圖片按鈕<input type="image" src="">
3.重置按鈕<input type="reset"> ：(清空表單中的內容）
可以添加value屬性改變標題
4.提交按鈕<input type="submit"> :將表單中的數據提交到遠程服務器
需要具備的條件：
給form標簽添加action屬性，通過其提交到指定服務器:action=“http//:…”
給需要提交的元素添加name元素
name=“username”（值可以隨便寫）
隱藏域——配合提交按鈕，在后臺提交一些數據，用戶看不到: <input type="hidden">

label標簽:1.默認情況下，文字和輸入框沒有關聯關系。添加該標簽，可以讓文字和輸入框聚焦，綁定在一起 （點擊文字也可輸入）
格式：
文字用label 標簽包裹起來
給輸入框添加id屬性 id=“aaa”
在label標簽中添加for屬性，for=“aaa”
datalist標簽，
作用：給輸入框綁定待選項
格式：

<datalist> <option>待選項內容</option> </datalist>

select標簽： — 下拉列表標簽（不能輸入內容，只可以選擇）
可以通過給option標簽添加selected屬性進行默認選中
<optgroup label = "北京">//分類：optgroup label=“xxxxx”，給標簽進行分類

<select><optgroup label = "北京">//分類<option>通州區</option><option>朝陽區 selected = "默認選中"</option></optgroup></select>

textarea標簽：定義多行輸入框
<textarea cols = "2列" row = "5行"> </textarea>
cols、row改變寬和高，但還是可以繼續輸入，用CSS resize屬性控制有無

video標簽：
video屬性:src：播放視頻的地址, <video src=" 播放視頻地址" autoplay=aotuplay(默認播放）
1.autoplay: 自動播放
2.controls: 控制條,Loop src=“ ” Loop =loop (循環播） autoplay=aotuplay 用于廣告視頻）

3.poster src=" " （視屏播放前的占位圖片）
4.loop: 廣告視頻循環播放
5.muted: 視屏靜音 width/height(寬高設置一個即可）
6.preload: 預加載視頻，和autoplay沖突
7.height: 800px
8.width: 300px
video播放視頻瀏覽器必須支持HTML5 用JS框架html5media

第二種格式 瀏覽器適配問題 三種適配格式

<video><source src = "" type = "video/webm"> </source><source src = "" type = "video/mp4"> </source><source src = "" type = "video/ogg"> </source></video>

三大主流格式，支持及所有瀏覽器

audio:播放音頻標簽，用法和video基本一樣 但是屬性height/width/poster不能用
音頻格式：
<audio src=“ ” 自動播放 autoplay=“autoplay” 控制按鈕 controls=“controls” >

通過JavaScript框架 html5media 實現

詳情和概要標簽：利用summary標簽來描述概要信息，利用details標簽來描述詳情信息
默認情況下是折疊展示，想看見詳情必須點擊
格式：

<details><summary>概要信息</summary>詳情信息 </details>

maquee標簽：跑馬燈
1、direction：設置方向 left、right、up、down
2、scrollamount：設置滾動屬性，值越大就越快
3、loop：設置滾動，默認是-1，無限滾動
4、behavior：設置滾動類型； slide滾動到邊界就停止
alternate滾動到邊界就彈回

字符實體：
1、在html中對空格/回車/tab不敏感，會把多個空格/回車/tab當做一個空格來處理
2、字符實體：將HTML中有特殊含義的不能直接在瀏覽器上顯示出來的要通過字符實體來顯示
3、分類
–?：空格（一個）
–<：小于符號<
–>：大于符號>
–?：版權符號

到了這里，我們對html的一些基本標簽就有了一定的了解，接下來我們將學習css，css被用于修飾文本，與html結合后我們就能做出一個漂亮的網頁了！

總結

以上是生活随笔為你收集整理的HTML学习日记-第二篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。