認識html標籤

最後更新：2017-07-15 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：建立標記單選結構 input footer controls 說明字元

1.!DOCTYPE 文檔結構類型

2.<html>開始標記
</html>閉合標記

3.charset 字元編碼集

常用字元集：UTF-8、GB2312、GBK等

4.<meta>單標記

5.<h1>h1到h6的標題

<h1>標題1</h1><h2>標題2</h2><h3>標題3</h3><h4>標題4</h4><h5>標題5</h5>

6.<p>段落

7.<ul>無序列表

不要獨自駕車去山區
不要跟別人的男朋友駕車去山區
不要跟別人的老婆駕車去山區
不要跟帶別人的狗駕車去山區

    <ul>        <li>不要獨自駕車去山區</li>        <li>不要跟別人的男朋友駕車去山區</li>        <li>不要跟別人的老婆駕車去山區</li>        <li>不要跟帶別人的狗駕車去山區</li>    </ul>

8.<ol>有序列表

不要獨自駕車去山區
不要跟別人的男朋友駕車去山區
不要跟別人的老婆駕車去山區
不要跟帶別人的狗駕車去山區

<ol>    <li>不要獨自駕車去山區</li>    <li>不要跟別人的男朋友駕車去山區</li>    <li>不要跟別人的老婆駕車去山區</li>    <li>不要跟帶別人的狗駕車去山區</li></ol>

9.<dl>定義列表

名字: 是一個人的標識

<dl>    <dt>名字</dt>    <dd>是一個人的標識</dd></dl>

10.<pre>預格式

11.<blockquote>大引用

這是一個大引用

<blockquote>這是一個大引用</blockquote>

12.<q>小引用

這是一個小引用

<q>這是一個小引用</q>

13.<span>跨越多個字元

這是一個紅色的詞

<p>這是一個<span style="color:blue;">紅色</span>的詞</p>

14.<a>超連結

<a href="連結" target="_blank">

15.<img>圖片

<img src="" alt="提示" />

16.<div>區塊

17.<strong><b>加粗

加粗

<strong>加粗</strong>

18.<em><i>斜體

斜體

<em>斜體</em>

19.<sup>上標

2<sup>2</sup>

20.<sub>下標

log2

log<sub>2</sub>

21.<abbr>縮寫

DOTA

<abbr title="Defend Of Ancient">DOTA</abbr>

22.<figure>定義說明

圖片

<figure>    <img src="XXX" alt="圖片">    <figcaption>圖片</figcaption></figure>

23.<audio>音頻

<audio src="XXX" controls autoplay></audio>

controls使可控 autoplay自動播放

24.<video>視頻支援格式：MP4 webm ogg

<video src="" controls autoplay loop></video>

loop迴圈播放

25.<table>表格

1-1		1-2
2-1	2-2	2-3
2-1	3-2	3-3

<table border="1">    <tr>        <td colspan="2">1-1</td>        <td>1-2</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>

tr表示表格行，td表示表格式資料，table-row，border設定邊框線粗細，

colspan合并行，rowspan合并列

th表頭，加粗 caption大表頭

26.<style>樣式控制置於head標籤中

table{    border-collapse: collapse;}

為表格添加上邊框

27.<form>表單

<form action="XXX" method="get">    <input type="text" placeholder="請輸入帳號" />    <input type="password" maxlength="6" />    <input type="button" value="點擊我" />    <input type="reset" value="清空" />    <input type="submit" value="提交" />    <button>新的提交按鈕</button>    <label for="male">男</label>    <input type="radio" name="sex" id="male" />    <label for="female">女</label>       <input type="radio" name="sex" id="female" />    班長<input type="checkbox" />    學委<input type="checkbox" checked />    紀委<input type="checkbox" />    <select name="" id="">        <option value="">北京</option>        <option value="">南京</option>        <option value="">東京</option>        <option value="">西京</option>    </select>    <textarea name="" id=""></textarea></form>

action提交外部連結 method提交方式：get post

input類型：文字框(text)，密碼框(password)；點擊按鈕(button)，重設按鈕(reset)，提交按鈕(submit)；單選(radio)；多選(checkbox)

placeholder：預定義文字框內容；maxlength:最大輸入限制；value：文字內容；name：命名，用於表單提交資料；for：ID選擇；checked：預設選擇

<lable>可以增強使用者體驗

<select>建立下拉欄，使用<option>編輯選項

<textarea>一個可以多行輸入的文字框

28.<mark>高亮

<p>我是<mark>中國人</mark></p>

29.<nav>導覽列

科技體育軍事

<nav>    <a href="XX">科技</a>    <a href="XX">體育</a>    <a href="XX">軍事</a></nav>

30.<header><footer><article><section><aside>等h5新語義標籤

header頁首 footer頁尾 article內容 section區塊 aside側邊欄

31.行內元素，區塊層級元素

行內：

塊級：

inline-block行內塊

認識html標籤

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More