瀏覽器處理空格的規(guī)則無(wú)非就這兩個(gè)

擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識(shí)，搞懂一個(gè)問(wèn)題！

由于HTML代碼的空格通常會(huì)被瀏覽器忽略，所以我們很有必要對(duì)瀏覽器處理空格的一些規(guī)則有個(gè)詳細(xì)的認(rèn)識(shí)，這樣我們后面才能詳述它的解決辦法。

一、默認(rèn)規(guī)則

效果是這樣的：

由此可此可以知道瀏覽器的默認(rèn)處理規(guī)則一：文字的前后空格都會(huì)忽略，內(nèi)部連續(xù)空格只有自作一個(gè)。

原樣輸出可能是我們這樣寫代碼的本意，要讓這段代碼原樣輸出的方法有兩個(gè)（使用標(biāo)簽/使用表示空格的實(shí)體代碼）：

方法一：<pre> 小鄭搞碼 </pre>

方法二： 小鄭搞碼

二、另一個(gè)規(guī)則

關(guān)于規(guī)則部分還有一點(diǎn)，來(lái)看一段代碼：

效果是：

表示，瀏覽器對(duì)字符的處理不僅限于空格，還有制表符（\t），換行符（\r和\n）。

同樣讓這段代碼換行可能是我們寫的本意，讓這段代碼換行的方法有兩個(gè)：

方法一：套一個(gè)pre標(biāo)簽

方法二：小鄭 搞碼

最后總結(jié)一下：

HTML語(yǔ)言的空格處理，基本上就是直接過(guò)濾。這樣的處理過(guò)于粗糙，完全忽視了原始文本內(nèi)部的空格可能是有意義的。所以CSS提供了一個(gè)屬性white-space屬性來(lái)靈活控制空格。下篇詳述。

成	語(yǔ)言	描述
結(jié)構(gòu)	HTML	網(wǎng)頁(yè)元素和內(nèi)容
表現(xiàn)	CSS	網(wǎng)頁(yè)元素頁(yè)面樣式
行為	JavaScript	網(wǎng)頁(yè)交互

1 HTML概念

HTML，超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language），是一門描述性語(yǔ)言。標(biāo)記，標(biāo)簽，元素，叫法不同，意思相同。HTML超文本標(biāo)記語(yǔ)言主要通過(guò)標(biāo)簽的方式，對(duì)網(wǎng)頁(yè)頁(yè)面的文本、圖片、音頻、視頻等內(nèi)容進(jìn)行描述。學(xué)習(xí)HTML，就是學(xué)習(xí)各種標(biāo)簽，來(lái)搭建網(wǎng)頁(yè)的結(jié)構(gòu)。

2 HTML結(jié)構(gòu)

結(jié)構(gòu)：!DOCTYPE

說(shuō)明：作用是告訴瀏覽器用哪個(gè)文檔規(guī)范來(lái)解析文檔

標(biāo)簽：html

說(shuō)明：用于搭建HTML網(wǎng)頁(yè)文檔結(jié)構(gòu)和網(wǎng)頁(yè)布局

?標(biāo)簽：head

說(shuō)明：用于定義HTML網(wǎng)頁(yè)文檔的頭部,它是所有頭部元素的容器?

?標(biāo)簽：body

說(shuō)明：用來(lái)定義HTML網(wǎng)頁(yè)文檔的主體區(qū)域?

?標(biāo)簽：meta

說(shuō)明：用來(lái)描述HTML網(wǎng)頁(yè)文檔的屬性?

?標(biāo)簽：title

說(shuō)明：用來(lái)放到HTML網(wǎng)頁(yè)文檔的頭部，是搜索引擎首要抓取的目標(biāo)代碼?

?2.1 標(biāo)簽

標(biāo)簽，也叫作標(biāo)記，是由一對(duì)尖括號(hào)<>，里面包含單詞組成

2.1.1 雙標(biāo)簽

<html></html>

2.1.2 單標(biāo)簽

<br>

2.1.3 標(biāo)簽關(guān)系

嵌套關(guān)系

<html>
    <head>
    </head>
</html>

并列關(guān)系

<head>
</head>
<body>    
</body>

3 注釋

注釋用來(lái)幫助程序員記錄程序設(shè)計(jì)方法，輔助程序閱讀

4 head標(biāo)簽

4.1 title標(biāo)簽

雙標(biāo)簽，定義網(wǎng)頁(yè)的標(biāo)題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta標(biāo)簽

是單標(biāo)簽，用來(lái)描述HTML網(wǎng)頁(yè)文檔的屬性

4.2.1 name屬性

屬性值	說(shuō)明
keywords	網(wǎng)頁(yè)關(guān)鍵字，多個(gè)逗號(hào)隔開(kāi)
description	網(wǎng)頁(yè)描述
author	作者
copyright	版權(quán)信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 網(wǎng)頁(yè)關(guān)鍵字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 網(wǎng)頁(yè)描述 -->
    <meta name="description" content="基礎(chǔ)前端知識(shí)">
    <!-- 網(wǎng)頁(yè)作者 -->
    <meta name="author" content="buddha">
    <!-- 網(wǎng)頁(yè)版權(quán)信息 -->
    <meta name="copyright" content="版權(quán)所有，翻版必究">
</head>
<body>

</body>
</html>

標(biāo)簽屬性：

1、標(biāo)簽的屬性寫在開(kāi)始標(biāo)簽內(nèi)部

2、標(biāo)簽名與屬性之間要有空格隔開(kāi)

3、一個(gè)標(biāo)簽可以同時(shí)存在多個(gè)屬性

4、屬性之間以空格隔開(kāi)

5、屬性沒(méi)有先后順序之分

4.2.2 http-equiv屬性

屬性值	說(shuō)明
Content-Type	定義網(wǎng)頁(yè)所使用編碼
refresh	定義網(wǎng)頁(yè)自動(dòng)刷新跳轉(zhuǎn)

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 設(shè)置網(wǎng)頁(yè)編碼完整寫法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設(shè)置網(wǎng)頁(yè)編碼簡(jiǎn)寫寫法 -->
    <meta charset="UTF-8">
    <!-- 網(wǎng)頁(yè)打開(kāi)3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style標(biāo)簽

是雙標(biāo)簽，用來(lái)定義標(biāo)簽的css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css內(nèi)聯(lián)樣式寫這里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link標(biāo)簽

是單標(biāo)簽，是用來(lái)引入外部css樣式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script標(biāo)簽

是雙標(biāo)簽，是用來(lái)寫JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫JavaScript代碼 */
    </script>

</head>
<body>

</body>
</html>

4.6 base標(biāo)簽

是單標(biāo)簽，是用來(lái)設(shè)置整個(gè)網(wǎng)頁(yè)的基礎(chǔ)路徑。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

開(kāi)發(fā)中很少用到，有人使用知道就行

上面所述標(biāo)簽是放在head標(biāo)簽里的，接下來(lái)接觸的標(biāo)簽都是放在body標(biāo)簽內(nèi)的

5 文本標(biāo)簽

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

是雙標(biāo)簽，h是header的縮寫

<h1>h1標(biāo)簽：一級(jí)標(biāo)題</h1>
<h2>h2標(biāo)簽：二級(jí)標(biāo)題</h2>
<h3>h3標(biāo)簽：三級(jí)標(biāo)題</h3>
<h4>h4標(biāo)簽：四級(jí)標(biāo)題</h4>
<h5>h5標(biāo)簽：五級(jí)標(biāo)題</h5>
<h6>h6標(biāo)簽：六級(jí)標(biāo)題</h6>

特點(diǎn)：

1、字體加粗

2、獨(dú)占一行

3、從h1到h6，字體逐漸減小

4、使用<h>標(biāo)簽的主要意義是告訴搜索引擎這是一段文字的標(biāo)題

5、<h1>在一個(gè)頁(yè)面最多只能有一個(gè)，不要用多個(gè)

5.2 段落標(biāo)簽

是雙標(biāo)簽，p是paragraph的縮寫

<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>

特點(diǎn)：

1、獨(dú)占一行

2、段落與段落之間，存在間隙

5.3 換行標(biāo)簽

是單標(biāo)簽，br是break的縮寫

<p>這是一段<br>文字</p>

特點(diǎn)：

1、強(qiáng)制換行

2、單標(biāo)簽

5.4 水平線標(biāo)簽

是單標(biāo)簽，hr是horizon地平線的縮寫

<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>

特點(diǎn)：

1、在頁(yè)面中顯示一條水平線

2、單標(biāo)簽

6 文本格式化標(biāo)簽

標(biāo)簽1	標(biāo)簽2	說(shuō)明
b	strong	加粗
u	ins	下劃線
i	em	傾斜
s	del	刪除線

<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>

特點(diǎn)：

1、不會(huì)獨(dú)占一行

2、推薦使用標(biāo)簽2所在列標(biāo)簽

6.1 上標(biāo)標(biāo)簽

sup是superscripted這個(gè)單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下標(biāo)標(biāo)簽

sub是subscripted這個(gè)單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符實(shí)體

在網(wǎng)頁(yè)中展示特殊符號(hào)效果時(shí)，需要使用字符實(shí)體替代

顯示結(jié)果	描述	實(shí)體名稱
	空格
<	小于號(hào)	<
>	大于號(hào)	>
&	與	&
"	雙引號(hào)	"
x	乘號(hào)	×
÷	除號(hào)	÷
-	長(zhǎng)破折號(hào)	—
\|	豎線	\|
‘	左單引號(hào)	‘
‘	右單引號(hào)	’
?	版權(quán)符	©
?	注冊(cè)商標(biāo)	®
?	商標(biāo)	™
°	度	°

7 媒體標(biāo)簽

7.1 圖片標(biāo)簽

<img src="./001.jpg" alt="">

img標(biāo)簽常見(jiàn)屬性：

屬性名	說(shuō)明
src	圖片路徑（絕對(duì)路徑、相對(duì)路徑）
alt	圖片加載失敗時(shí)，顯示的文字
title	鼠標(biāo)懸停時(shí)，顯示的文字
width	圖片寬度
height	圖片高度

只設(shè)置寬或高，會(huì)自動(dòng)等比縮放，寬高只需要數(shù)字，不需要'px'

<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">

絕對(duì)路徑：指目錄下的絕對(duì)位置，比如從根目錄開(kāi)始的路徑，或完整的網(wǎng)絡(luò)地址
相對(duì)路徑：從當(dāng)前文件開(kāi)始出發(fā)找目標(biāo)文件的過(guò)程

7.2 音頻標(biāo)簽

<audio src="music.mp3" controls autoplay loop></audio>

audio標(biāo)簽常見(jiàn)屬性：

屬性名	說(shuō)明
src	音頻路徑
controls	顯示播放控件
autoplay	自動(dòng)播放
loop	循環(huán)播放

支持mp3、wav、ogg三種音頻格式

7.3 視頻標(biāo)簽

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

屬性名	說(shuō)明
src	視頻路徑
controls	顯示播放控件
autoplay	自動(dòng)播放
loop	循環(huán)播放

支持mp4、webm、ogg三種視頻格式

7.4 超鏈接標(biāo)簽

超鏈接，是雙標(biāo)簽，實(shí)現(xiàn)各個(gè)獨(dú)立頁(yè)面之間進(jìn)行跳轉(zhuǎn)，可以跳去站外也可以在站內(nèi)之間跳轉(zhuǎn)

<a href="鏈接地址">文本或圖片</a>

站外跳轉(zhuǎn)，采用絕對(duì)路徑

<a href="http://www.baidu.com" target="_blank">百度</a>

站內(nèi)跳轉(zhuǎn)，采用相對(duì)路徑

<!-- a頁(yè)面 -->
<a href="b.html">跳去b頁(yè)面</a>

<!-- b頁(yè)面 -->
<p>b頁(yè)面</p>

頁(yè)面內(nèi)跳轉(zhuǎn)

<a href="#ms">美食</a>
<a href="#jd">景點(diǎn)</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個(gè)br標(biāo)簽 -->
<br>
<h3 id="jd">推薦景點(diǎn)</h3>

屬性名	說(shuō)明
href	跳轉(zhuǎn)鏈接
target	鏈接打開(kāi)方式

target屬性值

屬性值	說(shuō)明
_self	默認(rèn)，原窗口打開(kāi)鏈接
_blank	在新窗口打開(kāi)鏈接
_parent	在父窗口打開(kāi)鏈接
_top	在頂層窗口打開(kāi)超鏈接

target屬性值一般使用_self（默認(rèn)）和_blank

8 列表標(biāo)簽

8.1 無(wú)序列表

<ul type="屬性值">
    <li>列表項(xiàng)</li>
    <li>列表項(xiàng)</li>
    <li>列表項(xiàng)</li>
</ul>

解釋：

1、ul，unordered lists，無(wú)序列表，li，list item，列表項(xiàng)

2、ul標(biāo)簽子標(biāo)簽只允許是li標(biāo)簽

3、li標(biāo)簽可以包含任意內(nèi)容

type屬性值

屬性值	說(shuō)明
disc	默認(rèn)，實(shí)心圓
circle	空心圓
square	實(shí)心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="屬性值">
    <li>列表項(xiàng)</li>
    <li>列表項(xiàng)</li>
    <li>列表項(xiàng)</li>
</ol>

解釋：

1、ol，ordered lists，有序列表，li，list item，列表項(xiàng)

2、ol標(biāo)簽子標(biāo)簽只允許是li標(biāo)簽

3、li標(biāo)簽可以包含任意內(nèi)容

type屬性值

屬性值	說(shuō)明
1	默認(rèn)，阿拉伯?dāng)?shù)字，1,2,3......
a	小寫英文字母，a,b,c......
A	大寫英文字母，A,B,C......
i	小寫羅馬數(shù)字,i,ii,iii......
I	大寫羅馬數(shù)字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定義列表

<dl>
    <dt>名詞</dt>
    <dd>描述</dd>
    ……
</dl>

解釋：

1、dl，definition lists，自定義列表；dt，definition term，自定義列表組；dd，definition description，自定義列表描述

<dl>
    <dt>稱呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格標(biāo)簽

9.1 表格基本結(jié)構(gòu)

<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格3</td>
        <td>單元格4</td>
    </tr>
</table>

解釋：

1、tr，table row，表格行；td，table data cell，表行單元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格標(biāo)簽屬性

屬性名	屬性值	描述
border	數(shù)字	邊框?qū)挾?/span>
width	數(shù)字	表格寬度
height	數(shù)字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格標(biāo)題標(biāo)簽

<caption>標(biāo)題內(nèi)容</caption>，位于表格內(nèi)第一行

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表頭單元格標(biāo)簽

<th></th>，th，table header cell，表頭單元格

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <tr>
        <th>序號(hào)</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格語(yǔ)義化結(jié)構(gòu)標(biāo)簽

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <thead>
        <tr>
            <th>序號(hào)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
        </tr>
    </tfoot>
</table>

9.6 合并單元格

屬性名	屬性值	說(shuō)明
rowspan	合并單元格個(gè)數(shù)	合并行，單元格垂直合并
colspan	合并單元格個(gè)數(shù)	合并列，單元格水平合并

<td rowspan="跨越的行數(shù)"></td>

<td colspan="跨越的列數(shù)"></td>

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <thead>
        <tr>
            <th>序號(hào)</th>
            <th>金額</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表單標(biāo)簽

10.1 form標(biāo)簽

雙標(biāo)簽，包裹其它表單標(biāo)簽

<form>
    // 表單
</form>

form標(biāo)簽的常用屬性

屬性	說(shuō)明
name	表單名稱
method	提交方式
action	提交地址
target	打開(kāi)方式
enctype	編碼方式

name屬性

一個(gè)頁(yè)面中，表單可能不止一個(gè)。name屬性，用來(lái)區(qū)分不同的表單

<form name="myForm"></form>

method屬性

用來(lái)指定表單數(shù)據(jù)使用哪種提交方式給后端

屬性值	說(shuō)明
get	get方式
post	post方式

<form method="get"></form>

action屬性

用來(lái)指定表單數(shù)據(jù)提交到哪個(gè)地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target屬性

該屬性跟a標(biāo)簽的target屬性一樣，其屬性值也是四個(gè)，一般情況只用到_blank屬性值，默認(rèn)也是這個(gè)值

<form target="_blank"></form>

enctype屬性

屬性值	說(shuō)明
application/x-www-form-urlencoded	在發(fā)送前編碼所有字符（默認(rèn)）
multipart/form-data	不對(duì)字符編碼，在使用包含文件上傳控件的表單時(shí)，必須使用該值
text/plain	空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼

<form enctype="multipart/form-data"></form>

10.2 input標(biāo)簽

input是單標(biāo)簽

<input type="表單類型">

屬性值	說(shuō)明
text	單行文本框
password	密碼文本框
radio	單選框
checkbox	多選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
file	文件上傳

單行文本框常用屬性

屬性	說(shuō)明
value	設(shè)置文本框的默認(rèn)值
size	設(shè)置文本框的長(zhǎng)度
maxlength	設(shè)置最多可輸入字符

<form>
    <input type="text" value="默認(rèn)值" size="長(zhǎng)度" maxlength="可輸入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密碼文本框常用屬性

密碼文本框常用屬性和單行文本框常用屬性相同

<input type="password" value="默認(rèn)值" size="長(zhǎng)度" maxlength="可輸入字符">

<form>
    <label>密碼：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

單選框

屬性	說(shuō)明
name	組名，同組單選框，組名要相同，必要屬性
value	單選框選項(xiàng)取值，必要屬性
checked	默認(rèn)選中項(xiàng)，同組單選框，可以有一個(gè)默認(rèn)選中項(xiàng)

<input type="radio" name="組名" value="取值" checked="checked">

<form>
    性別：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

復(fù)選框

復(fù)選框和單選框的屬性都相同，區(qū)別復(fù)選框可以多選

<form>
    愛(ài)好：
    <input type="checkbox" name="hobby" value="籃球" checked>籃球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="臺(tái)球">臺(tái)球
</form>

普通按鈕

<input type="button" value="取值">

<form>
    <input type="button" value="普通按鈕">
</form>

<button>普通按鈕</button>

區(qū)別：

1、input是單標(biāo)簽，button是雙標(biāo)簽

2、button標(biāo)簽的信息除了文本，還可以是圖像、其它標(biāo)簽等

3、button有type屬性，屬性值可以是button、submit、reset等

提交按鈕

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把對(duì)應(yīng)表單數(shù)據(jù)提交給后端服務(wù)器

重置按鈕

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

點(diǎn)擊重置后，所在form表單里所有內(nèi)容被清空了

文件上傳

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名稱" cols="列數(shù)" rows="行數(shù)"></textarea>

<form>
    <textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>選項(xiàng)內(nèi)容</option>
    <option>選項(xiàng)內(nèi)容</option>
</select>

下拉列表標(biāo)簽是為了節(jié)省頁(yè)面空間

select標(biāo)簽屬性

屬性名	說(shuō)明
name	數(shù)據(jù)提交后端所需字段
size	下拉選項(xiàng)顯示個(gè)數(shù)
multiple	默認(rèn)只允許選一個(gè)，選多個(gè)得加這個(gè)屬性
disabled	所有下拉選項(xiàng)禁止選中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18歲以下</option>
        <option>18-28歲</option>
        <option>28-38歲</option>
        <option>38歲以上</option>
    </select>
</form>

option標(biāo)簽屬性

屬性名	說(shuō)明
selected	默認(rèn)選中
value	被選中，數(shù)據(jù)提交后端的值
disabled	該下拉選項(xiàng)禁止選中

<form>
    <select name="age" size="5">
        <option value="1">18歲以下</option>
        <option value="2" disabled="disabled">18-28歲</option>
        <option value="3" selected="selected">28-38歲</option>
        <option value="4">38歲以上</option>
    </select>
</form>

11 框架標(biāo)簽

<iframe src="URL" width="數(shù)值" height="數(shù)值"></iframe>

框架標(biāo)簽常用屬性

屬性名	說(shuō)明
src	嵌入的文檔地址
width	標(biāo)簽寬度
height	標(biāo)簽高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文檔禁止被嵌入

12 標(biāo)簽類型

HTML標(biāo)簽分為三種，行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽和行內(nèi)塊級(jí)標(biāo)簽。

12.1 行內(nèi)標(biāo)簽

特點(diǎn)：

1、在頁(yè)面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間

2、沒(méi)有寬高，內(nèi)容多大就多大，行內(nèi)標(biāo)簽不能嵌套塊級(jí)標(biāo)簽（a標(biāo)簽除外）

3、行內(nèi)標(biāo)簽設(shè)置寬高無(wú)效，可以對(duì)行高line-height進(jìn)行設(shè)置

4、可以設(shè)置外邊距margin和內(nèi)邊距padding，但只對(duì)左右邊距有效果，上下無(wú)效

5、常見(jiàn)行內(nèi)標(biāo)簽span、a、strong、ins、del、br等

span標(biāo)簽

雙標(biāo)簽，行內(nèi)標(biāo)簽，本身沒(méi)有固定樣式

<p>我是<span>中國(guó)人</span></p>

12.2 塊級(jí)標(biāo)簽

特點(diǎn)：

1、獨(dú)占一行

2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效

3、寬度默認(rèn)是父級(jí)寬度的100%

4、是一個(gè)容器盒子，可以嵌套多層子級(jí)行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽，文本類塊級(jí)標(biāo)簽除外

5、常見(jiàn)塊級(jí)標(biāo)簽div、p、h1~h6、ol、ul、li等

div標(biāo)簽

雙標(biāo)簽，塊級(jí)標(biāo)簽，本身沒(méi)有固定樣式

<!-- 頭部區(qū)域 -->
<div></div>
<!-- 內(nèi)容區(qū)域 -->
<div></div>

12.3 行內(nèi)塊級(jí)標(biāo)簽

特點(diǎn)

1、在頁(yè)面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間

2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效

3、常見(jiàn)塊級(jí)標(biāo)簽img、input、td

12.4 標(biāo)簽類型轉(zhuǎn)換

通過(guò)css樣式display屬性轉(zhuǎn)換，這是css的內(nèi)容

么是HTML

Hyper Text Markup Language, 超文本標(biāo)記語(yǔ)言

標(biāo)記又稱為標(biāo)簽(Tag), 一般語(yǔ)法:

它可以有屬性(Attribute):

<tagName attributeName="value">, 如:

標(biāo)簽也可以不成對(duì)地關(guān)閉:

HTML文檔由瀏覽器解釋并執(zhí)行。

HTML文檔基本結(jié)構(gòu)

<!DOCTYPE html> ----- 告訴瀏覽器用html5的標(biāo)準(zhǔn)來(lái)解釋和執(zhí)行該網(wǎng)頁(yè)
<html>
<head> ---- 頭部, 可包含meta, title等標(biāo)簽

</head>
<body> ---- 主體, 包含主要內(nèi)容

</body>
</html>

title

網(wǎng)頁(yè)標(biāo)題, 顯示在瀏覽器選項(xiàng)卡的標(biāo)題欄上!

文本排版標(biāo)簽

h1-h6: 內(nèi)容標(biāo)題標(biāo)簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無(wú)任何特殊樣式的文本
pre: 預(yù)格式標(biāo)簽,其中的內(nèi)容在頁(yè)面上帶格式渲染
small: 比當(dāng)前字體小的文本

html特殊字符/轉(zhuǎn)義字符

空格
< 小于
> 大于
? 版權(quán)符
" 雙引號(hào)

html注釋

圖像標(biāo)簽

<img
src="圖像地址"
title="鼠標(biāo)懸停提示"
alt="圖像加載錯(cuò)誤時(shí)的替代文本"
width="寬度"
height="高度"
/>

圖像地址分為2種:

1. 相對(duì)地址, 如: img/cc.jpg

2. 絕對(duì)地址, 如: http://img.bcd.com/2017/1644232421.jpg

超鏈接

<a href="鏈接地址" target="目標(biāo)窗口">文本|圖片</a>

目標(biāo)窗口:

_self: 目標(biāo)頁(yè)面在當(dāng)前窗口打開(kāi)

_blank: 目標(biāo)頁(yè)面在新窗口中打開(kāi)

如果是在頁(yè)面具有frameset/frame/iframe的場(chǎng)景下:

_top: 在頂級(jí)窗口中打開(kāi)

_parent: 在父級(jí)窗口中打開(kāi)

_自定義名稱: 在指定的特定窗口中打開(kāi)

三種用法:

1. 頁(yè)面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁(yè)面中一處id為help的標(biāo)簽, 如: 
或者:
help是通過(guò)a標(biāo)簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>

div標(biāo)簽

div是一個(gè)容器, 常用于頁(yè)面的布局

標(biāo)簽的分類:

1. 塊級(jí)標(biāo)簽/塊級(jí)元素
如: div, h1-h6, p, hr
特征: 獨(dú)占容器中的一行, 其寬度是容器的100%
2. 行級(jí)標(biāo)簽/行級(jí)元素
如: span, img, strong, em, a

特征1: 多個(gè)行級(jí)元素可以同處一行, 其寬度由內(nèi)容來(lái)?yè)伍_(kāi)(auto)

特征2: 大部分行級(jí)元素設(shè)置其width/height無(wú)效

HBuilder常用快捷鍵

ctrl + D : 刪除當(dāng)前行
ctrl + PgUp : 當(dāng)前行上移
ctrl + PgDown : 當(dāng)前行下移
ctrl + / : 注釋 | 取消注釋
ctrl + shift + F : 整理代碼格式
ctrl + C : 復(fù)制當(dāng)前行
ctrl + X : 剪切當(dāng)前行
ctrl + V : 粘貼
ctrl + Z : 撤消上一步操作
ctrl + S : 保存當(dāng)前文件
ctrl + shift + S : 保存項(xiàng)目中全部文件
ctrl + Enter : 在當(dāng)前行的下方插入新行
ctrl + shift + Enter : 在當(dāng)前行的上方插入新行

以上知識(shí)能做的效果圖

部分效果

在線咨詢

上一篇：青雀移動(dòng)張翔：HTML5正在通過(guò)技術(shù)內(nèi)容重構(gòu)移動(dòng)互聯(lián)
下一篇：4行代碼再現(xiàn)《黑客帝國(guó)》數(shù)字雨，在終端實(shí)現(xiàn)的那種

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

瀏覽器處理空格的規(guī)則無(wú)非就這兩個(gè)

一、默認(rèn)規(guī)則

二、另一個(gè)規(guī)則

1 HTML概念

2 HTML結(jié)構(gòu)

?2.1 標(biāo)簽

2.1.1 雙標(biāo)簽

2.1.2 單標(biāo)簽

2.1.3 標(biāo)簽關(guān)系

3 注釋

4 head標(biāo)簽

4.1 title標(biāo)簽

4.2 meta標(biāo)簽

4.2.1 name屬性

4.2.2 http-equiv屬性

4.3 style標(biāo)簽

4.4 link標(biāo)簽

4.5 script標(biāo)簽

4.6 base標(biāo)簽

5 文本標(biāo)簽

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

5.2 段落標(biāo)簽

5.3 換行標(biāo)簽

5.4 水平線標(biāo)簽

6 文本格式化標(biāo)簽

6.1 上標(biāo)標(biāo)簽

6.2 下標(biāo)標(biāo)簽

6.3 字符實(shí)體

7 媒體標(biāo)簽

7.1 圖片標(biāo)簽

7.2 音頻標(biāo)簽

7.3 視頻標(biāo)簽

7.4 超鏈接標(biāo)簽

8 列表標(biāo)簽

8.1 無(wú)序列表

8.2 有序列表

8.3 自定義列表

9 表格標(biāo)簽

9.1 表格基本結(jié)構(gòu)

9.2 表格標(biāo)簽屬性

9.3 表格標(biāo)題標(biāo)簽

9.4 表格表頭單元格標(biāo)簽

9.5 表格語(yǔ)義化結(jié)構(gòu)標(biāo)簽

9.6 合并單元格

10 表單標(biāo)簽

10.1 form標(biāo)簽

10.2 input標(biāo)簽

10.3 多行文本框

10.4 下拉列表

11 框架標(biāo)簽

12 標(biāo)簽類型

12.1 行內(nèi)標(biāo)簽

12.2 塊級(jí)標(biāo)簽

12.3 行內(nèi)塊級(jí)標(biāo)簽

12.4 標(biāo)簽類型轉(zhuǎn)換

么是HTML

HTML文檔基本結(jié)構(gòu)

meta

title

文本排版標(biāo)簽

html特殊字符/轉(zhuǎn)義字符

html注釋

圖像標(biāo)簽

超鏈接

div標(biāo)簽

HBuilder常用快捷鍵

您的項(xiàng)目需求