HTML學(xué)習(xí)筆記（二）body標(biāo)簽

本系列適合作為HTML的復(fù)習(xí)文檔。

本章為body標(biāo)簽下的各種內(nèi)容，主要參考來源：

綠葉學(xué)習(xí)網(wǎng) - HTML入門教程
W3C - HTML5 Tutorial

0 小常識(shí)

0.1 塊元素&行內(nèi)元素

  • 塊元素（block）；
    （1）獨(dú)占一行，排斥其他元素跟其位于同一行，包括塊元素和行內(nèi)元素；
    （2）塊元素內(nèi)部可以容納其他塊元素或行元素；

  • 行內(nèi)元素（inline）；
    （1）可以與其他行內(nèi)元素位于同一行；
    （2）行內(nèi)內(nèi)部可以容納其他行內(nèi)元素，但不可以容納塊元素，不然會(huì)出現(xiàn)無法預(yù)知的效果；

1 段落&文本

1.1 標(biāo)題標(biāo)簽
1.2 段落標(biāo)簽
1.3 文本標(biāo)簽
1.4 換行標(biāo)簽
1.5 水平線標(biāo)簽
1.6 特殊符號(hào)

1.1 標(biāo)題標(biāo)簽

h——header
<h1></h1>

一般一個(gè)頁面只能有一個(gè)<h1>，而<h2>~<h6>可以有多個(gè)。
<h1>代表的就是本頁面的題目。

1.2 段落標(biāo)簽

p——paragraph
<p></p>
br——break
<br />

<br />是自閉和標(biāo)簽，用于段落內(nèi)的換行。

1.3 文本格式標(biāo)簽

1.3.1 加粗標(biāo)簽
<b></b>
strong——strong/加強(qiáng)——強(qiáng)調(diào)語氣
<strong></strong>

二者表現(xiàn)效果相同，但實(shí)際開發(fā)中，盡量使用 <strong>標(biāo)簽，它比<b>標(biāo)簽更有語義性。
不過，一般更愛用CSS的font-weight:bold。

1.3.2 斜體標(biāo)簽
<i></i>
cite——cite/塊引用
<cite></cite>
em——emphasized/強(qiáng)調(diào)
<em></em>

表現(xiàn)效果實(shí)際也并無區(qū)別，要用的話，盡量用<em>。
不過，一般更愛用CSS的font-style:italic。

1.3.3 上標(biāo)和下標(biāo)標(biāo)簽
sup——superscripted/上標(biāo)
<sup></sup>
sub——subscripted/下標(biāo)
<sub></sub>
1.3.4 大小字號(hào)標(biāo)簽
<big></big>
<small></small>

實(shí)際開發(fā)中用CSS的字號(hào)來控制：font-size:18px。

1.3.5 刪除線標(biāo)簽
<s></s>

常用CSS的text-decoration:line-through

1.3.6 下劃線標(biāo)簽
<u></u>

常用CSS的text-decoration:underline。

1.4 水平線標(biāo)簽

hr——horizon
<hr />

1.5 div標(biāo)簽

div——division

div標(biāo)簽，又稱為“區(qū)隔標(biāo)簽”，用來為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景。標(biāo)簽內(nèi)可放入<body>標(biāo)簽的任何內(nèi)部標(biāo)簽。

1.6 特殊符號(hào)

空格——&nbsp
其他如貨幣等特殊符號(hào)，可直接輸入，也可寫它們對(duì)應(yīng)的代碼。
<pre>
§ 分節(jié)符 &sect;
? 版權(quán)符 &copy;
? 注冊(cè)商標(biāo) &reg;
? 商標(biāo) &trade;
€ 歐元 &euro;
￡ 英鎊 &pound;
￥ 日元 &yen;
° 度 &deg;</pre>

2 列表

2.1 有序列表；
2.2 無序列表；
2.3 定義列表；

2.1 有序列表

ol——ordered list
li——list
<ol type=“a/A/i/I”>
    <li></li>
    <li></li>
    <li></li>
</ol>

<ol>內(nèi)部不能存在任何其它標(biāo)簽。
<ol>與<li>標(biāo)簽配合使用，不能單獨(dú)使用。<li>標(biāo)簽數(shù)量不限。
列表在HTML中有type屬性，但實(shí)際中是用CSS如ol{list-style-type: lower-roman ;}來控制的。

2.2 無序列表

ul——unordered list
li——list
<ul type="disc/circle/square">
    <li></li>
</ul>

無序列表的使用極其廣泛，基本上凡是列表型展示信息的地方都用到了它。
配合CSS樣式使用。

2.3 定義列表

dl——definition list
dt——definition term
dd——definition description
<dl>
    <dt>要解釋的名詞</dt>
    <dd>該名詞的具體解釋/會(huì)顯示文本縮進(jìn)效果</dd>
</dl>

3 表格

3.1 基本結(jié)構(gòu)/必備

table——table/表格
tr——table row/表格行
td——table data cell/表格單元格
==================================
<table>
<tr>
    <td>行1單元格1</td>
    <td>行1單元格2</td>
</tr>
<tr>
    <td>行2單元格1</td>
    <td>行2單元格2</td>
</tr>
</table>

3.2 完整結(jié)構(gòu)

caption——caption/表格標(biāo)題
th——table header/表頭單元格
<!--以下為單純?yōu)檎Z義化而設(shè)的標(biāo)簽-->
thead——表頭
tbody——表身
tfoot——表腳
=======================================
<table>
    <caption>標(biāo)題</caption>
    <thead>
        <tr>
            <th>表頭單元格</th>
        </tr>
    <tbody>
        <tr>
            <td>標(biāo)準(zhǔn)單元格1</td>
            <td>標(biāo)準(zhǔn)單元格2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>標(biāo)準(zhǔn)單元格1</td>
            <td>標(biāo)準(zhǔn)單元格2</td>
        </tr>
    </tfoot>
</table>

3.3 合并行&和并列

rowspan屬性//合并行
colspan屬性//和并列
<td rowsoan="合并的行數(shù)"> //td——標(biāo)準(zhǔn)單元格
<td colspan="合并的列數(shù)">

rowspan——合并行，將其它行的單元格向右方擠了一個(gè)格。

4 圖片標(biāo)簽

4.1 圖像img標(biāo)簽

    img——
    src——source/源文件 - 圖像路徑
    alt——
    title——
    ====================================
    <img src="路徑" alt="圖片描述/給搜索引擎看" title="圖片描述/給用戶看"/>

4.2 相對(duì)路徑&絕對(duì)路徑

相對(duì)路徑

  • /image/icon1.png
  • ../image/icon1.png
    絕對(duì)路徑
  • c:/webpage/image/icon1.png
    做網(wǎng)站時(shí)，采用相對(duì)路徑。

4.3 圖片的格式

4.3.1 位圖
  • 位圖簡(jiǎn)介
    • 位圖，又稱“點(diǎn)陣圖像”；
    • 通常分為8位/28（即256）、16位、24位（又稱“真彩色”，基本是人眼可分辨顏色的極限；常用）和32位（也是224種顏色，只是增加了28階顏色的灰階，即8位透明度）
  • 位圖格式——3種格式：“.jpg”、“.png”、“.gif”
    • JPG可以很好處理大面積色調(diào)的圖像，如照片、圖畫等；
    • PNG支持透明信息，可用來處理一些logo、banner、簡(jiǎn)單線條構(gòu)圖；
    • GIF只支持256色以內(nèi)的圖像，通常只適合表達(dá)動(dòng)畫效果/或者用SVG動(dòng)畫或CSS3來實(shí)現(xiàn)。
4.3.2 矢量圖
  • 矢量圖簡(jiǎn)介
    • 矢量圖，又稱“向量圖”；以一種數(shù)學(xué)描述的方式來記錄圖像內(nèi)容；
    • 放大縮小不會(huì)失真；難以表現(xiàn)色彩層次豐富的圖像
  • 矢量圖格式——“.ai”、“.cdf”、“.fh”、“.swf”等
    • “.ai” 靜幀的矢量文件格式；
    • “.cdf” 常見于工程圖
    • “.swf” 指的其實(shí)是flash

5 超鏈接/hyperlink

a——
<a href="鏈接地址" target="窗口打開方式">超鏈接文字</a>

5.1 href

5.1.1 內(nèi)部鏈接&外部鏈接
  • 內(nèi)部頁面鏈接
    使用相對(duì)路徑；
  • 錨點(diǎn)鏈接
    指向當(dāng)前頁面某部分的鏈接。
    <a href="#music">推薦音樂</a>
    #music是某個(gè)元素的id名。
    name是HTML中的標(biāo)準(zhǔn)，id是XHTML中的標(biāo)準(zhǔn)；
    在web2.0的網(wǎng)頁中使用id屬性，極少使用name屬性。
5.1.2 外部鏈接

指外部頁面鏈接

5.2 target

target屬性值

  • _self 默認(rèn)；在當(dāng)前窗口打開
  • _blank 在新窗口打開
  • _top
  • _parent

6 表單（重要?。?/h2>

6.1 form標(biāo)簽

<form name="表單名稱" action="表單提交地址" method="提交方法 - get/post" target="顯示方式 - 同a標(biāo)簽里的target屬性"  enctype="編碼方式 - 默認(rèn)即可 不需設(shè)置">
    <input type="text" value="這是一個(gè)文本框"/><br/>
    <textarea></textarea><br/>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>
</form>

表單對(duì)象，即放在<form>標(biāo)簽內(nèi)的各種標(biāo)簽；
有3種：① input；②textarea；③select和option。

6.1.1 name屬性
6.1.2 action屬性
  • 郵件形式
    action="mailto:xxx@xxx.com"
6.1.3 method屬性
  • get
    默認(rèn)值，安全性較差，所有表單域的值直接顯示出來
  • post
    實(shí)際開發(fā)常用，除可見的處理腳本程序外，所有信息都可以隱藏
6.1.4 target屬性
6.1.5 enctype屬性
application/x-www-form-urlencoded
multipart/form-data         MIME編碼，“上傳文件”選擇該值。

一般采用默認(rèn)值就可以，enctype屬性不需要設(shè)置。

6.2 input標(biāo)簽

<input type="表單類型" />   //自閉合標(biāo)簽
6.2.1 text & password——單行&密碼文本框
<input type="text/password" value="文本框內(nèi)默認(rèn)文字" size="文本框長(zhǎng)度/以字符為單位" maxlength="最多輸入字符數(shù)"/>  
====================================================
賬號(hào)：<input type="text" size="15"  maxlength="10"/><br/>
密碼：<input type="password" size="15" maxlength="10"/>

value size maxlengh是可選的

6.2.2 radio——單選按鈕
<input type="radio" name="單選按鈕所在的組名" value="單選按鈕的取值"/>
================================================
實(shí)例
        你是：
    <input type="radio" name="Question2" value="90"/>90后
    <input type="radio" name="Question2" value="00"/>00后
    <input  type="radio" name="Question2" value="else"/>其他

name和value屬性必寫；
name值不同，則不在同一組別中；
value用來向后端傳數(shù)據(jù)；

6.2.3 checkbox——復(fù)選框
<input type="checkbox" value="復(fù)選框取值" checked="checked"/>
==============================
實(shí)例
    你喜歡的水果：<br />
    <input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">蘋果</label><br />
    <input id="checkbox2" type="checkbox" /><label for="checkbox2">香蕉</label><br />
    <input id="checkbox3" type="checkbox" /><label for="checkbox3">西瓜</label><br />
    <input id="checkbox4" type="checkbox" /><label for="checkbox4">鳳梨</label>

checked屬性表示該選項(xiàng)在默認(rèn)情況下已被選中，可以有多個(gè)選項(xiàng)被選中
HTML中的復(fù)選框是沒有文本的，需要加入label標(biāo)簽，并且用label標(biāo)簽的for屬性指向復(fù)選框的id。

6.2.4 button——普通按鈕
<input type="button" value="普通按鈕的取值" onclick="JavaScript腳本程序"/>
==========================
    單擊按鈕彈出對(duì)話框：<br/>
<input type="button" value="按鈕" onclick="alert('你點(diǎn)擊了按鈕！')">

一般配合JS來實(shí)現(xiàn)

6.2.5 submit & reset——提交&重置按鈕
<input type="submit/reset" value="顯示在按鈕上的文字"/>

均是對(duì)當(dāng)前所在form標(biāo)簽而言的；可以看做是具有特殊功能的普通按鈕。
submit：將表單內(nèi)容提交給服務(wù)器；
reset：清除用戶在表單中輸入的信息。

6.2.6 image——圖像域
<input type="image" src="圖像的路徑"/>
====================================
    賬號(hào)：<input type="text"/><br/>
    密碼：<input type="text"/><br/>
          <!--3個(gè)牛逼SP-->
    <input type="image" src="images/登陸按鈕.jpg"/>

但實(shí)際開發(fā)中，圖片往往傳輸數(shù)據(jù)大，要盡量少用圖片；更多用CSS3來實(shí)現(xiàn)。

6.2.7 hidden——隱藏域
 <input type="hidden" value="10"/>

有時(shí)候我們想要在頁面?zhèn)魉鸵恍?shù)據(jù)，但是又不想讓用戶看見，這個(gè)時(shí)候我們可以通過一個(gè)隱藏域來傳送這樣的數(shù)據(jù)。隱藏域包含那些要提交處理的數(shù)據(jù)，但這些數(shù)據(jù)并不顯示在瀏覽器中。
在動(dòng)態(tài)頁面（如ASP.NET入門）中，會(huì)看到它真正的用處。
盡量不要使用hidden來傳遞敏感信息，如密碼、手機(jī)號(hào)碼等。

6.2.8 file——文件域
<input type="file"/>

當(dāng)使用文件域file時(shí)，必須在form的標(biāo)簽中說明編碼方式enctype=“multipart/form-data”。這樣，服務(wù)器才能接收到正確的信息。
文件域file在HTML入門沒有太多東西要講的，在后端技術(shù)教程（即ASP.NET入門教程）中我們會(huì)詳細(xì)講解。

6.3 textarea標(biāo)簽

<textarea rows="行數(shù)" cols="列數(shù)">多行文本框默認(rèn)內(nèi)容</textarea>

不能使用value屬性來建立在文本域中顯示的初始值；

3種文本框總結(jié)

  • input標(biāo)簽下
  • 單行文本框text
  • 密碼文本框password
  • textarea標(biāo)簽下
  • 多行文本框textarea

6.4 select & option標(biāo)簽——下拉列表

<select multiple="multiple" size="可見列表項(xiàng)的數(shù)目">
    <option value="選項(xiàng)值" selected="selected">選項(xiàng)顯示的內(nèi)容</option>
    ……
    <option value="選項(xiàng)值">選項(xiàng)顯示的內(nèi)容</option>

</select>

6.4.1 select標(biāo)簽的兩個(gè)屬性
  • multiple屬性
    可選屬性，只有一個(gè)屬性值"multiple"；
    默認(rèn)情況下下拉列表只能選擇一項(xiàng)，當(dāng)設(shè)置multiple=“multiple”時(shí)，下拉列表可以選擇多項(xiàng)；
    想要選取多項(xiàng)，使用“Ctrl+鼠標(biāo)左鍵”即可。//？？？
  • size屬性
    用來定義下拉列表展開之后可見選項(xiàng)的數(shù)目，有些瀏覽器只支持4以上的數(shù)。
6.4.2 option標(biāo)簽的兩個(gè)屬性
  • value屬性
    用來向后端傳數(shù)據(jù)。
  • selected屬性
    只有一個(gè)屬性值"selected"；
    表示這個(gè)列表項(xiàng)是否選中，跟單選按鈕radio的checked是一樣的意思。

6.5 表單按鈕 V.S button標(biāo)簽按鈕

<input type="button" value="普通按鈕的取值" onclick="JavaScript腳本程序"/>
<button>文本或img標(biāo)簽</button>
======================================================
實(shí)例（二者表示效果一樣）   
button標(biāo)簽按鈕：<button>這是一個(gè)按鈕</button><br/>
表單標(biāo)簽按鈕：<input type="button" value="這是一個(gè)按鈕"/>

在設(shè)計(jì)表單中，應(yīng)該使用表單按鈕<input type="button"/>，因?yàn)檫@涉及到提交數(shù)據(jù)到服務(wù)器。如果想讓按鈕設(shè)計(jì)得美觀一點(diǎn)，并且不是在表單提交數(shù)據(jù)的情況下，那就使用button標(biāo)簽按鈕。
真正的開發(fā)中，漂亮美觀的按鈕更多時(shí)候是用div標(biāo)簽來實(shí)現(xiàn)，并且結(jié)合CSS來修飾。
表單元素不一定都要放在form標(biāo)簽內(nèi)。對(duì)于要與服務(wù)器進(jìn)行交互（也可以說是跟網(wǎng)站后臺(tái)進(jìn)行交互）的表單元素就必須放在form標(biāo)簽內(nèi)才有效。然后，如果表單元素不需要跟服務(wù)器進(jìn)行交互，那就沒必要放在form標(biāo)簽內(nèi)。

7 多媒體

7.1 embed標(biāo)簽（HTML5新增）——插入音頻、視頻、動(dòng)畫

<embed src="多媒體文件地址" width="播放界面的寬度" height="播放界面的高度"/>

flash文件：.swf
width和height使用px作為單位。

7.2 bgsound標(biāo)簽——插入背景音樂

bgsound——background sound
<bgsound src="背景音樂的地址/相對(duì)路徑" loop="播放次數(shù) - 2... / infinite / -1" />

使用bgsound設(shè)置背景音樂，沒有操作界面;當(dāng)窗口最小化時(shí)就自動(dòng)暫停播放，窗口恢復(fù)時(shí)，繼續(xù)播放。
bgsound標(biāo)簽只適用于IE瀏覽器，在Firefox等瀏覽器中未必適用。
除了使用bgsound標(biāo)簽，還可使用embed標(biāo)簽和object標(biāo)簽。

8 浮動(dòng)框架iframe

<iframe src="浮動(dòng)框架的源文件" width="浮動(dòng)框架的寬" height="浮動(dòng)框架的高"  scrolling="取值"></iframe>

HTML5已經(jīng)舍棄了frameset標(biāo)簽（框架集標(biāo)簽）

scrolling屬性的取值

  • auto 默認(rèn)，左對(duì)齊
  • yes 總是顯示滾動(dòng)條
  • no 總是不顯示滾動(dòng)條

8 標(biāo)簽語義表

標(biāo)簽名 英文全稱 中文解釋
div division 分割（塊元素）
span span 區(qū)域（行內(nèi)元素）
hr horizontal rule 水平線
a anchor 錨點(diǎn)，超鏈接
strong strong 強(qiáng)調(diào)（粗體）
em emphasized 強(qiáng)調(diào)（斜體）
sup superscripted 上標(biāo)
sub subscripted 下標(biāo)
br break 換行
fieldset fieldset 域集
legend legend 圖例
caption caption （表格、圖像等）標(biāo)題

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,200評(píng)論 1贊 92
  • 國(guó)家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)（Q/GDW）- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿：20170802 前言： 排版 ...
    庭說閱讀 12,537評(píng)論 6贊 13
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,918評(píng)論 32贊 459
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,539評(píng)論 1贊 41
  • 多幸運(yùn)，在最美的年紀(jì)，遇見你沒有遺憾和可惜。喜歡一個(gè)人，沒有誰對(duì)誰錯(cuò)，有的人真的很幸運(yùn)，自己喜歡的人，也喜歡自己，...
    曾經(jīng)路過你的年華閱讀 248評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容