html總結（二）

表格 table （會使用）

表格由 <table> 標籤來定義。每個表格均有若干行（由<tr> 標籤定義），每行被分割爲若干單元格（由 <td>標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

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

注意：tr標籤只能放td標籤，td標籤可以放其他元素
表格屬性

屬性名	含義	常用屬性值
border	設置表格的邊框（默認border=”0”無邊框）	像素值
cellspacing	設置單元格與單元格之間的空白間距	像素值（默認爲2像素）
cellpadding	設置單元格內容與單元格邊框之間的空白距離	像素值（默認爲1像素）
width	設置表格的寬度	像素值
height	設置表格的高度	像素值
align	設置表格在網頁中的水平對齊方式	left、right、center

表頭標籤
表頭一般位於表格的第一行或第一列，其文本加粗居中

表格結構
表格可以劃分爲表頭和主體，所以有<thead></thead>標籤和<tbody></tbody>

表格標題標籤
caption

<table>
   <caption>標題</caption>
</table>

合併單元格
跨行合併：rowspan
跨列合併：colspan

 <tr> 
    <td>吳亦凡</td>
    <td rowspan="2">男</td>
    <td>27</td>
  </tr>
   <tr>
    <td>張磊</td>

    <td>37</td>
  </tr>

<tr>
    <td>張磊</td>
    <td colspan="2">男</td>
  </tr>

表單標籤（掌握）

用於蒐集不同類型的用戶輸入
由表單域、提示文本和表單控件組成

input控件
<input>元素是最重要的表單元素。
<input>元素有很多形態，根據不同的 type 屬性。

屬性	屬性值	描述
type	text	單行文本輸入框
password	密碼輸入框
radio	單選按鈕
checkbox	複選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像形式的提交按鈕
file	文件域
name	由用戶自定義	控件的名稱
value	由用戶自定義	input控件中默認文本值
size	正整數	input控件在頁面中的顯示寬度
checked	checked	定義選擇控件默認被選中的項
maxlength	正整數	控件允許輸入的最多字符數

如果是一組單選框，通過相同name值來實現

lable標籤
作用：用於綁定一個表單元素，當點擊label標籤的時候，被綁定的表單元素就會獲得輸入焦點

1. 用label直接包裹input
2. 如果label裏面有多個表單，想定位到某個 可以通過 for id 的格式來進行

<label>輸入賬號：<input  type="text"/></label>

當鼠標點擊輸入賬號時，光標也會在表單中顯示

<label>輸入賬號：<input  type="text"/></label><br />
<label for="2">輸入賬號：<input  type="text"/><input  type="text" id="2"/></label>

第二個光標定位在id=2的表單上

textareal控件（文本域）
用於輸入大量的信息

留言板
<textarea>請輸入留言</textarea>

下拉菜單
<select></select>中至少含一對<option></option>
在<option></option>中定義select=selected時，當前選項爲默認選中項

籍貫
<select>
   <option>北京</option>
   <option>上海</option>
   <option>廣州</option>
   <option>深圳</option>
</select>

表單域
<form>元素定義 HTML 表單，及創建一個表單，以實現用戶信息的收集和傳通，form中的所有內容都會被提交給服務器

<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>

action 屬性定義在提交表單時執行的動作。向服務器提交表單的通常做法是使用提交按鈕。通常，表單會被提交到 web 服務器上的網頁。
method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）。
name 屬性如果要正確地被提交，每個輸入字段必須設置一個 name 屬性。以區分同一個頁面的多個表單。

HTML5新標籤與特性

文檔類型設定

document

• HTML: sublime 輸入 html:4s
• XHTML:sublime 輸入 html:xt
• HTML5:sublime 輸入 html:5 <!DOCTPYE html>

常用新標籤

• header：定義文檔的頁眉 頭部
• nav：定義導航鏈接的部分
• footer：定義文檔或節的頁腳 底部
• article：定義文章
• section：定義文檔的節（section、區段）
• aside：定義其所處內容之處的內容 側邊
• datalist：標籤定義選項列表，與input配合使用

<input  type="text" list="star"/>
<datalist id="star">
<option>劉德華</option>
<option>劉若英</option>
<option>劉曉慶</option>
<option>張學友</option>
</datalist>

• fieldset：元素可將表單內的相關元素分組打包

<fieldset>
<legend>用戶登錄</legend>
    用戶名：<input  type="text"/><br />
    密&nbsp;&nbsp;碼：<input  type="password"/>
</fieldset>

新增的input type屬性值

屬性	使用示例	含義
email	input type=”email”	輸入郵箱格式
tel	input type=”tel”	輸入手機號碼格式
url	input type=”url”	輸入url格式
number	input type=”numbers”	輸入數字格式
search	input type=”search”	搜索框
range	input type=”range”	自動拖動滑塊
time	input type=”time”	小時分鐘
date	input type=”date”	年月日
datetime	input type=”datetime”	時間
month	input type=”month”	月份
week	input type=”week”	星期

<fieldset>
<legend>HTML新增input type屬性值</legend>
   <form action="">
   郵箱：<input type="email" /><br />
   手機：<input type="tel" /><br />
   數字：<input type="number" /><br />
   url ：<input type="url" /><br />
   搜索：<input type="search" /><br />
   區域：<input type="range" /><br />
   時間：<input  type="time"/><br />
   年月日：<input  type="date"/><br />
   月份：<input  type="month"/><br />
   星期：<input  type="week"/><br />
   <input  type="submit"/>
   </form>
</fieldset>

新增新屬性

屬性	使用示例	含義
placeholder	input type=”text” placeholder=”請輸入用戶名”	佔位符，當用戶輸入的時候，裏面文字消失，刪除所有文字自動顯示
autofocus	input type=”text” autofocus=”autofocus”	自動獲得焦點
multiple/td>	input type=”file” multiple=”multiple”	多文件上傳
autocomplete	input type=”text” autocomplete	自動記錄完成 autocomplete使用方式 1.必須有提交按鈕 2.表單需要name名字
required	input type=”text” required	必須填
accesskey	input type=”text” accesskey=”s”	是元素獲得焦點

<form action="">
用戶名：<input  type="text" placeholder="請輸入用戶名" autofocus="autofocus"  autocomplete name="username"/><br /><br /><br /><br />
上傳圖片：<input  type="file"  multiple="multiple"/>
<input  type="submit"/>
</form>

多媒體標籤

• embed:標籤定義嵌入內容
• audio：播放音頻
• video：播放視頻

多媒體embed
<embed src="url"></embed>
先上傳再分享
音頻audio

<audio src="C語言/吳亦凡個人簡歷/網頁製作/Lullaby——吳亦凡 & Kevin .mp3" autoplay controls loop="loop" ></audio>1

autoplay 自動播放
controls 是否顯示播放控件
loop 循環播放 loop=”-1”無限播放 loop=”2”播放兩次
爲了瀏覽器兼容，需要三種聲音文件 ogg mp3 wav

<audio autoplay controls>
<source  src="xxx.mp3"/>
<source  src="xxx.ogg"/>
您的瀏覽器不支持播放聲音
</audio>

視頻video

<video src="xxx .mp4" autoplay controls ></video>1

autoplay 自動播放
controls 是否顯示播放控件
loop 循環播放
width設置播放窗口的寬度
height 設置播放窗口的高度
爲了瀏覽器兼容，需要三種聲音文件 ogg mp4 WebM

<video controls autoplay="autoplay">
<source  src="xxx.mp4"/>
<source  src="xxx.ogg"/>
您的瀏覽器不支持HTML視頻播放
</video>