HTML中3種常見元素的詳細介紹-html教學-PHP中文網

HTML中3種常見元素的詳細介紹

零下一度

發布： 2017-05-09 14:17:57

原創

2104 人瀏覽過

<strong>內聯元素

#a - 錨點<br>abbr - 縮寫
```
the <abbr title="world wield web constium">W3C</abbr>is important;
```
登入後複製
HTML中3種常見元素的詳細介紹
b - 粗體（不建議）、strong - 粗體強調、em - 斜體重要{皆為雙標籤}
在沒有其他合適標籤更合適時，才應該把<b> 標籤當作最後的選項。 HTML5 規範聲明：應該使用<h1> - <h6> 來表示標題，使用<em>標籤來表示強調的文本，應該使用<strong> 標籤來表示重要文字。
這些也都可透過font-weight 屬性來設定。
bdo 定義文字方向
<br /> rtl: <bdo dir="rtl">here is some text</bdo> <br /> ltr: <bdo dir="ltr">here is some text</bdo>

HTML中3種常見元素的詳細介紹
# big - 較原字體大一號。 <big><big>12</big></big>
br - 換行<br> <br />clear屬性
cite - 引用，斜體顯示
code - 電腦程式碼(在引用原始碼的時候需要)
dfn - 定義欄位
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文字
samp - 定義範例電腦程式碼
var - 定義變數
q - 短引用
small - 小字體文字
span - 常用內聯容器，定義文字內區塊
label - 表格標籤
del-刪除部分
ins-新插入部分
select - 項目選擇
sub - 下標
sup - 上標
textarea - 多行文字輸入框
iframe-建立包含另一個文件的內聯框架
```
    <iframe src="block_elements.html" width="" height=""></iframe>
```
登入後複製

HTML中3種常見元素的詳細介紹

(map,area)-帶有可點擊區域的圖像映射

   < img src="../../LG/image/ff8080814aecc157014aecdf36aa002a.jpg" width="300px" border="0" usemap="#test" alt="test" />
   <map name="test" id="test">
    <area shape="circle" coords="20,20,50" href="block_elements.html" alt="" />
    </map>

登入後複製

叫法有內聯元素、內嵌元素、行內元素、直進式元素
一般都是基於語意級(semantic)的基本元素，它只能容納文字或其他內聯元素，通常被包含在塊元素中使用。
內聯元素有這些

<strong>區塊級元素

要注意：caption元素在表格中重複會折行，但是脫離表格，重複不會折行。
address - 定義文件或文章的作者的聯絡訊息，不要局限於地址，以斜體的形式展現。

Written by miss_du
.jpg
blockquote - 標籤定義區塊引用，左右兩邊會自動進行縮進
```
俗话说得好
<blockquote>
    笨鸟先飞
</blockquote>
```
登入後複製
HTML中3種常見元素的詳細介紹
dir - 目錄清單
```
<dir>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
</dir>
```
登入後複製
HTML中3種常見元素的詳細介紹
dl>dt+dd-定義列表，這個常用，就不距離啦
ul>li-定義無須列表
ol>li-定義有序列表
p常用的區塊級元素，用於css佈局。
（fieldest，legend）-組合表單中的相關元素
```
<fieldset id="">
    <legend>性别</legend>
    女:<input type="radio" name="" id="" value="" />
    男:<input type="radio" name="" id="" value="" />
</fieldset>
```
登入後複製
#HTML中3種常見元素的詳細介紹
　 form - 交互表单
　 h1 ~h6
　 hr - 水平分隔线
　 noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
　noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
　pre - 格式化文本,，主要用于显示源码。
```
<pre class="brush:php;toolbar:false">
    <a>
    显示源码了么？
    </a>            
```
登入後複製
HTML中3種常見元素的詳細介紹
　table - 表格
```
<table border="" cellspacing="" cellpadding="">
    <caption>hello</caption>
    <thead style="background: black;color: #fff;">
        <tr>
            <th>Header</th>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
```
登入後複製