對HTML5標籤的認識(三)

時間 2019-12-07

標籤 html5 html 標籤認識欄目 HTML5 简体版

原文原文鏈接

這篇隨筆繼續來認識HTML標籤。此次隨筆主要是對<table>標籤的認識和最近我學習到的一些標籤來和你們分享。html

1、<table>標籤ide

<table>標籤的做用主要是定義HTML表格,<table>內也分頭<thead>和主體<tbody>,而簡單的HTML表格由table元素以及一個或者多個tr，th或者td元素組成學習

tr元素定義表格的行，th元素定義列頭，td元素定義表格單元。也有更復雜的HTML表格可能包括<caption>定義表格標題，<thead> 標籤用於組合 HTML 表格的表頭內容。編碼

具體怎麼用呢，一個最簡單的HTML表格代碼以下：spa

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>HTML5標籤的認識</title>
 5     </head>
 6     <body>
 7         <table border="1">
 8             <tr>
 9                 <td>姓名</td>
10                 <td>年齡</td>
11             </tr>
12             <tr>
13                 <td>小明</td>
14                 <td>20</td>
15             </tr>
16         </table>
17     </body>
18 </html>

同樣的方法在body裏面定義<table>標籤（有頭就要有尾），上面說過tr是定義錶行因此先先一個<tr>元素再把<td>表單元包在裏面，這就成爲了表格的第一行。一樣在寫一個同樣的成爲了表格的第二行3d

寫完還之後運行看效果會發現並無表格的存在:code

這裏面還要補充一個屬性，就是border屬性做用是規定表格邊框的寬度，若是沒有規定那天然會沒有表格的出現。視頻

border屬性和<table>元素放在一塊兒。邊框寬度設置爲1.看效果htm

那爲何沒有運用到<th>標籤呢?blog

th元素內部的文本一般會呈現爲居中的粗體文本，而td元素內的文本一般是左對齊的普通文本。

能夠看到效果

對比用td的

<caption>標籤

做用是定義表格的標題，<caption>標籤必須放置到<table>標籤以後。每一個表格最多規定一個標題。他通常都會顯示在表格上方。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>HTML5標籤的認識</title>
 5     </head>
 6     <body>
 7         <table border="1">
 8             <caption>學生信息</caption>
 9             <tr>
10                 <th>姓名</th>
11                 <th>年齡</th>
12             </tr>
13             <tr>
14                 <td>小明</td>
15                 <td>20</td>
16             </tr>
17         </table>
18     </body>
19 </html>

運行效果：

注：若是須要將內容縱橫跨多個行或列，請使用rowspan和colspan屬性。

例如：

我作了一個學生信息表，要獲取姓名和性別還有一張學生照片。但這張圖佔了表格的三列，使用使用colspan屬性來合併

代碼以下：

 1 <!DOTYPE html>
 2 <html>
 3     <head>
 4         <title>colspan的使用</title>
 5     </head>
 6     
 7     <body>
 8         <table border="1" align="center" width="600" style="border:3px dotted blue">
 9         <caption>我的信息</caption>
10         <tr>
11             <td width="150" height="50x" align="center">姓名</td>
12             <td width="150" height="50px" align="center">Mary</td>
13             <td width="150" height="50px" align="center">年齡</td>
14             <td width="150" height="50px" align="center">5</td>
15         </tr>    
16         <tr>
17             <td align="center">照片</td>
18             <td colspan="3">
19                 <img src="C:\Users\XYM\Desktop\圖\頭像.jpg" width="200" height="200">
20         </tr>
21     </body>
22 </html>

運行效果：

2、<audio>標籤

<audio> 標籤訂義聲音，好比音樂或其餘音頻流。

目前，<audio> 元素支持的3種文件格式：MP三、Wav、Ogg。是HTML5中的新的標籤。

 1 <!DOTYPE html>
 2 <html>
 3     <head>
 4         <title>簡單的音頻</title>
 5     </head>
 6     <body>
 7         <audio src="01.mp3" controls="controls"></audio>
 8         
 9     </body>
10 </html>

src裏是寫音頻的路徑。

controls屬性供添加音頻播放，暫停和音量的控件

運行效果:

這就是一首音頻音樂了。

3、<video>標籤

定義視頻

<video>標籤和<audio>b標籤類似，都是HTML5中的新標籤，解決一些網頁播放的問題。

video有支持三種視頻格式：

　　一、ogg = 帶有Theora視頻的編碼和Vorbis音頻編碼的Ogg文件。

　　二、MPEG4 = 帶有H.264視頻編碼和AAC音頻編碼的MPEG 4 文件。

　　三、WebM = 帶有 VP8視頻編碼和Vorbis音頻編碼的WebM文件

簡單代碼

<!DOTYPE html>
<html>
    <head>
        <title>簡單的Video</title>
    </head>
    <body>
        
        <video src="02.mp4" controls="controls" ></video>
    </body>
</html>

運行效果：

這篇筆記的重點是掌握列表標籤的運用和掌握網頁中的音頻和視頻的運用。但願你們能掌握運用，爲之後的學習打下基礎。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。