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

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

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

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

0 小常識

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)元素富腊，但不可以容納塊元素坏逢，不然會出現(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 特殊符號

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

h——header
<h1></h1>

一般一個頁面只能有一個<h1>，而<h2>~<h6>可以有多個是整。
<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 大小字號標(biāo)簽

<big></big>
<small></small>

實(shí)際開發(fā)中用CSS的字號來控制：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 特殊符號

空格——&nbsp
其他如貨幣等特殊符號楚堤，可直接輸入疫蔓，也可寫它們對應(yīng)的代碼。
<pre>
§ 分節(jié)符 &sect;
? 版權(quán)符 &copy;
? 注冊商標(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>該名詞的具體解釋/會顯示文本縮進(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——合并行茄唐，將其它行的單元格向右方擠了一個格息裸。

4 圖片標(biāo)簽

4.1 圖像img標(biāo)簽

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

4.2 相對路徑&絕對路徑

相對路徑

/image/icon1.png
../image/icon1.png
絕對路徑
c:/webpage/image/icon1.png
做網(wǎng)站時蝇更，采用相對路徑。

4.3 圖片的格式

4.3.1 位圖

位圖簡介
- 位圖呼盆，又稱“點(diǎn)陣圖像”年扩；
- 通常分為8位/2⁸（即256）、16位访圃、24位（又稱“真彩色”厨幻，基本是人眼可分辨顏色的極限；常用）和32位（也是2²⁴種顏色腿时，只是增加了2⁸階顏色的灰階况脆，即8位透明度）
位圖格式——3種格式：“.jpg”、“.png”批糟、“.gif”
- JPG可以很好處理大面積色調(diào)的圖像格了，如照片、圖畫等徽鼎；
- PNG支持透明信息盛末，可用來處理一些logo、banner否淤、簡單線條構(gòu)圖悄但；
- GIF只支持256色以內(nèi)的圖像，通常只適合表達(dá)動畫效果/或者用SVG動畫或CSS3來實(shí)現(xiàn)石抡。

4.3.2 矢量圖

矢量圖簡介
- 矢量圖檐嚣，又稱“向量圖”；以一種數(shù)學(xué)描述的方式來記錄圖像內(nèi)容啰扛；
- 放大縮小不會失真嚎京；難以表現(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)部頁面鏈接
使用相對路徑厢漩；
錨點(diǎn)鏈接
指向當(dāng)前頁面某部分的鏈接。
<a href="#music">推薦音樂</a>
#music是某個元素的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 表單（重要９瓤邸）

6.1 form標(biāo)簽

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

表單對象土全，即放在<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="文本框長度/以字符為單位" maxlength="最多輸入字符數(shù)"/>  
====================================================
賬號：<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)情況下已被選中，可以有多個選項(xiàng)被選中
HTML中的復(fù)選框是沒有文本的奥此，需要加入label標(biāo)簽弧哎，并且用label標(biāo)簽的for屬性指向復(fù)選框的id。

6.2.4 button——普通按鈕

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

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

6.2.5 submit & reset——提交&重置按鈕

<input type="submit/reset" value="顯示在按鈕上的文字"/>

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

6.2.6 image——圖像域

<input type="image" src="圖像的路徑"/>
====================================
    賬號：<input type="text"/><br/>
    密碼：<input type="text"/><br/>
          <!--3個牛逼SP-->
    <input type="image" src="images/登陸按鈕.jpg"/>

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

6.2.7 hidden——隱藏域

 <input type="hidden" value="10"/>

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

6.2.8 file——文件域

<input type="file"/>

當(dāng)使用文件域file時会放，必須在form的標(biāo)簽中說明編碼方式enctype=“multipart/form-data”。這樣灾搏，服務(wù)器才能接收到正確的信息。
文件域file在HTML入門沒有太多東西要講的蒙挑，在后端技術(shù)教程（即ASP.NET入門教程）中我們會詳細(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)簽的兩個屬性

multiple屬性
可選屬性忆蚀，只有一個屬性值"multiple"；
默認(rèn)情況下下拉列表只能選擇一項(xiàng)姑裂，當(dāng)設(shè)置multiple=“multiple”時馋袜，下拉列表可以選擇多項(xiàng)；
想要選取多項(xiàng)舶斧，使用“Ctrl+鼠標(biāo)左鍵”即可欣鳖。//？茴厉？泽台？
size屬性
用來定義下拉列表展開之后可見選項(xiàng)的數(shù)目，有些瀏覽器只支持4以上的數(shù)矾缓。

6.4.2 option標(biāo)簽的兩個屬性

value屬性
用來向后端傳數(shù)據(jù)怀酷。
selected屬性
只有一個屬性值"selected"；
表示這個列表項(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>這是一個按鈕</button><br/>
表單標(biāo)簽按鈕：<input type="button" value="這是一個按鈕"/>

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

7 多媒體

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

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

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

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

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

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

8 浮動框架iframe

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

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

scrolling屬性的取值

auto 默認(rèn)辱揭，左對齊
yes 總是顯示滾動條
no 總是不顯示滾動條

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)題

最后編輯于：2017.12.04 05:46:12

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末问窃，一起剝皮案震驚了整個濱河市亥鬓，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌域庇，老刑警劉巖嵌戈，帶你破解...
沈念sama閱讀 211,948評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異听皿，居然都是意外死亡熟呛，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,371評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門写穴，熙熙樓的掌柜王于貴愁眉苦臉地迎上來惰拱，“玉大人，你說我怎么就攤上這事啊送〕ザ蹋” “怎么了？”我有些...
開封第一講書人閱讀 157,490評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵馋没，是天一觀的道長昔逗。經(jīng)常有香客問我，道長篷朵，這世上最難降的妖魔是什么勾怒？我笑而不...
開封第一講書人閱讀 56,521評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮声旺，結(jié)果婚禮上笔链，老公的妹妹穿的比我還像新娘。我一直安慰自己腮猖，他們只是感情好鉴扫，可當(dāng)我...
茶點(diǎn)故事閱讀 65,627評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著澈缺，像睡著了一般坪创。火紅的嫁衣襯著肌膚如雪炕婶。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,842評論 1贊 290
城市分裂傳說
那天莱预，我揣著相機(jī)與錄音柠掂，去河邊找鬼。笑死依沮，一個胖子當(dāng)著我的面吹牛涯贞，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播危喉，決...
沈念sama閱讀 38,997評論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼肩狂，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了姥饰？” 一聲冷哼從身側(cè)響起傻谁，我...
開封第一講書人閱讀 37,741評論 0贊 268
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎列粪，沒想到半個月后审磁，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,203評論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡岂座，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,534評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年态蒂，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片费什。...
茶點(diǎn)故事閱讀 38,673評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡钾恢，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出鸳址，到底是詐尸還是另有隱情瘩蚪，我是刑警寧澤，帶...
沈念sama閱讀 34,339評論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布稿黍，位于F島的核電站疹瘦，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏巡球。R本人自食惡果不足惜言沐，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,955評論 3贊 313
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望酣栈。院中可真熱鬧险胰，春花似錦、人聲如沸矿筝。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,770評論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至缨睡，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間陈辱，已是汗流浹背奖年。一陣腳步聲響...
開封第一講書人閱讀 32,000評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留沛贪，地道東北人陋守。一個月前我還...
沈念sama閱讀 46,394評論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長得像利赋，于是被迫代替她去往敵國和親水评。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,562評論 2贊 349