天天看點
傳回

HTML5标簽清單标簽表格視訊和音頻頁面結構iframe内聯架構表單文法(重點)

HTML5标簽

  • 清單标簽
  • 表格
  • 視訊和音頻
  • 頁面結構
  • iframe内聯架構
  • 表單文法(重點)

清單标簽

什麼是清單

清單就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，并以清單的樣式顯示出來，以便浏覽者能更快捷地獲得相應的資訊。

清單的分類:
  • 無序清單 
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
  • 有序清單 
<ul><!--無序清單-->
    <li>123
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
</ul>

定義清單

<!--自定義清單
dl：标簽
dt：清單名稱
dd：清單内容-->
<dl>
    <dt>學科</dt>
    <dd>國文</dd>
    <dd>數學</dd>
    <dd>英語</dd>
    <dt>語言</dt>
    <dd>中文</dd>
    <dd>英語</dd>
    <dd>日語</dd>
</dl>

表格

表格的基本結構：

  • 單元格
  • 行
  • 列
  • 跨行
  • 跨列 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--表格table
    行 tr
    列 td
    -->
<table border="1px">
    <tr><!--跨列-->
        <td colspan="3">1-1</td>
    </tr>
    <tr><!--跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

視訊和音頻

  • video
  • audio 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒體元素</title>
</head>
<body>
<!--視訊
		src 資源路徑
        controls 控制台
        autoplay 自動播放
-->
<video src="xxx/xxx/xxx" controls autoplay></video>
<!--音頻-->
<audio src="xxx/xxx/xxx" controls autoplay></audio>
</body>
</html>

頁面結構

元素名 描述
header 标題頭部區域的内容（用于頁面或者頁面中的一塊區域）
footer 标記腳部區域的内容（用于整個頁面或頁面的一塊區域）
section Web頁面中的一塊獨立區域
article 獨立的文章内容
aside 相關内容或應用
nav 導航類輔助内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面結構</title>
</head>
<body>
<!--頁面頭部-->
<header>
    <h2>網頁頭部</h2>
</header>
<section>
    <h2>網頁主體</h2>
</section>
<footer>
    <h2>網頁腳部</h2>
</footer>
</body>
</html>

iframe内聯架構 

<iframe src="path" name="mainFrame" ></iframe>
  • ifram标簽，必須要有src屬性即引用頁面的位址
  • 給标簽加上name屬性後，可以做a标簽的target屬性，即在内聯視窗中打開連結

表單文法(重點)

from标簽，action屬性為所送出的目的位址，method選擇送出方式

可以選擇使用post或者get方式送出

  • get效率高，但在url中可以看到送出的内容，不安全，不能送出大檔案
  • post比較安全且可以送出大檔案
标簽 說明
input标簽 大部分表單元素對應的标簽有text、password、checkbox、radio、submit、reset、file、hidden、image和button，預設為text，可以送出使用者名、密碼等等
select标簽 下拉選擇框
textarea标簽 文本域
屬性 說明
type 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，預設為text
name 指定表單元素的名稱（送出時所對應的key）
value 元素的初始值，radio必須提供
size 指定表單元素的初始寬度。當type為text或者password時，以字元為機關；其他type以像素為機關
maxlength type為text或者password時，輸入的最大字元數
checked type為radio或者checkbox時，指定按鈕是否被選中
  • 一些其他的屬性
屬性 說明
readonly 隻讀，不可更改
disable 禁用
hidden 隐藏，雖然不可見但是會送出
id 辨別符，可以配合label的for屬性增加滑鼠的可用性
placehoder text 文字域等輸入框内的提示資訊
required 不能為空
patten 正規表達式驗證 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入注冊</title>
</head>
<body>
<h1>注冊</h1>
<!--表單from
        action：表單送出的動作，可以是交給一個網址，也可以是交給一個請求處理位址
        method：post get請求方式-->
<form action="xxx/xxx" method="get">
    <!--文本輸入框：input type="text"-->
    <p>使用者名：<input type="text" name="username" value="請輸入使用者名" maxlength="10" size="20"></p>
    <p>密&nbsp;&nbsp;&nbsp;碼：<input type="password" name="password" placeholder="請輸入密碼" required="required"></p>
    <!--    submit送出表單，reset清空-->
    <p><input type="submit"> <input type="reset">
    </p>
    <!--    radio單選框标簽 value即單選框的值，在送出時對應value
    name：單選框組名，在同一個組内的radio标簽同時隻能選中一個，name值在送出時對應key
    checked:預設被選中
    -->
    <p>性别：<input type="radio" value="boy" name="sex"/>
        <input type="radio" value="girl" name="sex"/>
    </p>
    <p>愛好：
        <input type="checkbox" value="b" name="hobby">打籃球
        <input type="checkbox" value="s" name="hobby">唱rap
        <input type="checkbox" value="d" name="hobby">跳舞
    </p>
    <p><input type="button" name="btn1" value="按鈕上文字"><!--按鈕-->

        <input type="image" src="xxx/xxx"><!--圖檔按鈕預設是送出：和submit類似-->
    </p>
    <p><!--下拉框：selected:預設選項-->
        你來自：
        <select name="location">
            <option value="china">中國</option>
            <option value="us" selected>美國</option>
            <option value="japan">日本</option>
        </select>
    </p>

    <p><!--文本域-->
        回報：
        <textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
    </p>
    <p><!--檔案域-->
        <input type="file" name="files">
        <input type="button" name="upload" value="上傳">
    </p>
    <!--郵件：會簡單驗證是否是郵箱位址
		url：會簡單驗證是否是網絡位址
        number：數字驗證-->
    <p>郵箱：<input type="email" name="email">
        url：<input type="url"></p>

    <!--數字驗證
           max最大數量
           min 最小數量
           step 每次點選增加或減少的數量-->
    <p>商品數量<input type="number" name="num" max="100" min="1" step="1"></p>
    <!--滑塊-->
    <p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p>
    <!--搜尋框-->
    <p>搜尋：<input type="search"></p>

    <p><!--增強滑鼠可用性-->
        <label for="mark">你點我試試</label>
        <input type="text" id="mark">
    </p>
</form>
</body>
</html>
# html5
上一篇: HTML5中input新增标簽詳解
下一篇: HTML5/HTML中input标簽用法解讀

繼續閱讀