零基礎(chǔ)入門前端HTML知識(shí)整理

成	語(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)簽的屬性寫(xiě)在開(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è)編碼完整寫(xiě)法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設(shè)置網(wǎng)頁(yè)編碼簡(jiǎn)寫(xiě)寫(xiě)法 -->
    <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)樣式寫(xiě)這里 */
    </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)寫(xiě)JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫(xiě)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的縮寫(xiě)

<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的縮寫(xiě)

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

特點(diǎn)：

1、獨(dú)占一行

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

5.3 換行標(biāo)簽

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

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

特點(diǎn)：

1、強(qiáng)制換行

2、單標(biāo)簽

5.4 水平線標(biāo)簽

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

<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è)單詞的縮寫(xiě)

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

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

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

<!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	小寫(xiě)英文字母，a,b,c......
A	大寫(xiě)英文字母，A,B,C......
i	小寫(xiě)羅馬數(shù)字,i,ii,iii......
I	大寫(xiě)羅馬數(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)容

著現(xiàn)代 Web 開(kāi)發(fā)，我們要么使用 require 要么使用 import 引用 JavaScript 依賴項(xiàng)。有時(shí)，我們將兩者結(jié)合使用。

但是，你知道為什么這兩者都存在嗎？使用一種或另一種時(shí)的最佳實(shí)踐是什么？

在本文中，我將討論使用 require 和 import 并回答其中一些常見(jiàn)問(wèn)題。

背景——JavaScript 模塊類型

在討論 require 和 import 之前，有必要對(duì) JavaScript 模塊有一定的了解。那么，讓我們看看有哪些不同類型的 JavaScript 模塊可用。

1. AMD——異步模塊定義

引入了 AMD 模塊以使模塊更加前端友好。它們不需要任何打包器，并且所有依賴項(xiàng)都是動(dòng)態(tài)解析的。

AMD使用 require 函數(shù)用于加載外部模塊，并且能夠充當(dāng) CommonJS 模塊的包裝器。

define("exampleModule", [], () => {
   return {
     print: () => console.log("Hello World!");
   }
}
define("main", ["require", "exampleModule"], (require) => {
  const exampleModule= require("exampleModule");
  exampleModule.print(); 
});

但是，隨著 ES 模塊的引入，AMD 的使用量急劇減少。

2. CommonJS 模塊

CommonJS 是 NodeJS 用來(lái)在模塊中封裝 JavaScript 的標(biāo)準(zhǔn)。 module.exports用于導(dǎo)出 CommonJS 模塊，以及 import 函數(shù)用于將模塊包含到單獨(dú)的文件中。

盡管 CommonJS 模塊在 NodeJS 中被廣泛使用，但在前端開(kāi)發(fā)中并沒(méi)有使用它們。這背后的主要原因是require函數(shù)的同步行為。

但是，NodeJS 從 v13 開(kāi)始才開(kāi)始支持 ES 模塊。在那之前，大多數(shù) NodeJS 模塊，包括 NPM 庫(kù)，都是使用 CommonJS 模塊開(kāi)發(fā)的。

因此，CommonJS 模塊仍然在開(kāi)發(fā)人員中廣泛使用。

而且，CommonJS 模塊與 ES 模塊同樣重要，我將在本文接下來(lái)的部分中討論更多。

3.UMD——通用模塊定義

UMD 是 AMD 和 CommonJS 的組合。它使用了 AMD 的 CommonJS 語(yǔ)法和異步加載技術(shù)，使其適用于服務(wù)器端和客戶端。

UMD 在 Webpack 等打包器中用作回退模塊，下面顯示了一個(gè)簡(jiǎn)單的 UMD 模塊示例：

(function (root, factory) {
        if (typeof define === "function" && define.amd) {
            define(["jquery"], factory); // AMD } else if (typeof exports === "object" ) { module.exports = factory(require("jquery")); //CommonJS } else { root.returnExports = factory(root.jQuery); } 
        })(this, function ($) {
        function exampleFunction() {}
        return exampleFunction;
    });

4. ESM — ES 模塊

ES Modules (ECMAScript Modules) 是 JavaScript 中使用的官方標(biāo)準(zhǔn)。 ES 模塊使用 import和 export 處理模塊的語(yǔ)句。它解決了 CommonJS 的最大限制之一，即同步加載。

在引入 ES Modules 之后，開(kāi)發(fā)者之間有很多爭(zhēng)論，考慮到與 CommonJS 的兼容性。但是，開(kāi)發(fā)人員已經(jīng)適應(yīng)使用這兩種方法，我們將在接下來(lái)的部分中討論更多詳細(xì)信息。

已經(jīng)了解了 JavaScript 模塊的背景，那么讓我們繼續(xù)討論 require 和 import.

“Require” 是 NodeJS 內(nèi)置的

require通常與 NodeJS 一起使用來(lái)讀取和執(zhí)行 CommonJS 模塊。

這些模塊可以是內(nèi)置模塊，如 http或自定義編寫(xiě)的模塊。使用 require，可以將它們包含在 JavaScript 文件中并使用它們的函數(shù)和變量。

// 內(nèi)置模塊 
const http= require('http'); 
// 本地模塊 
const getBlogName = require('./blogDetails.js')

但是，如果要使用 require 要獲取本地模塊，首先需要使用 module.exports 導(dǎo)出它們.

例如，假設(shè)您有一個(gè)名為 blogDetails.js，并且您需要使用該文件中的函數(shù) index.js文件。

// blogDetails.js
const getBlogTitle = (name, author) => {
    return name + " by " + author;
 }
 modules.export = getBlogTitle;

// index.js
const getBlogTitle = require('./blogDetails.js');

var title = getBlogTitle ('Require vs Import in JavaScript', 'Chameera Dulanga');

還可以使用一次導(dǎo)出多個(gè)模塊 modules.export 如下：

const getBlogTitle = (name, author) => { 
   return name + " by " + author;
}
const getBlogContent = () => { 
   return content
}
modules.export = {
  getBlogTitle,
  getBlogContent,
};

注意：如果最后不是使用 modules.export，可以附加 exports 。例如： exports.getBlogContent = () => {};

我想現(xiàn)在你明白什么時(shí)候應(yīng)該使用 require以及它是如何工作的。接下來(lái)讓我們看看如何 import 。然后我們將能夠以更深層次的理解來(lái)比較和對(duì)比它們。

“import”是在 ES6 模塊中引入的

import 是一個(gè) ES 模塊，并帶有 export，它們被稱為 ES6 import 和 export.

我們不能用 import 或?qū)С龅?ES 模塊之外。

試圖 import ES 模塊之外是一個(gè)常見(jiàn)的開(kāi)發(fā)人員錯(cuò)誤。

如果我舉同樣的例子，我需要做的唯一改變就是修改 modules.export到 export default.

const getBlogTitle = (name, author) => { 
   return name + " by " + author;
}

export default getBlogTitle;

然后我們可以使用 import 將此文件包含在我們的 index.js文件。

import getBlogTitle from "./blogDetails.js";

var title = getBlogTitle ('Require vs Import in JavaScript', 'Chameera Dulanga');

注意：類似于 require，還可以通過(guò)將導(dǎo)出附加到每個(gè)函數(shù)定義來(lái)單獨(dú)導(dǎo)出每個(gè)函數(shù)。
例如： export const = getBlogContent = () => {};

所以，我想你現(xiàn)在明白應(yīng)該如何以及何時(shí)使用 require和 import。但是，這還不是全部；它們的功能和用法存在一些顯著差異。是時(shí)候進(jìn)行比較了。

require Vs import

require 和 import 都用于包含模塊。但是它們有幾個(gè)應(yīng)該注意的重要功能。

1. require 語(yǔ)句可以在代碼的任何地方調(diào)用

import 語(yǔ)句只能在文件的開(kāi)頭定義。定義一個(gè) import 其他地方的語(yǔ)句會(huì)給你一個(gè)錯(cuò)誤或自動(dòng)轉(zhuǎn)移到文件的開(kāi)頭。

2. require 可以有條件地調(diào)用

聲明 require 時(shí)，當(dāng)加載的模塊名稱未預(yù)定義時(shí)，允許有條件地或動(dòng)態(tài)地加載模塊。

例如，你可以調(diào)用 require 在函數(shù)或 if 條件中，如下所示：

if(articleCount>0){
   const getBlogTitle = require(‘./blogDetails.js’);
}

require語(yǔ)句具有這種靈活性，因?yàn)樗鼈儽灰暈楹瘮?shù)。它們?cè)谶\(yùn)行時(shí)被調(diào)用，在此之前沒(méi)有辦法知道任何事情。但， import 語(yǔ)句是靜態(tài)的，我們不能有條件地或動(dòng)態(tài)地使用它們。

注意：由于 import 語(yǔ)句是靜態(tài)的，所以可以在運(yùn)行應(yīng)用程序之前檢測(cè)到任何錯(cuò)誤

3. import 語(yǔ)句是異步的

在小型應(yīng)用程序中，同步或異步可能不會(huì)發(fā)揮主要作用。但是，如果我們考慮大型應(yīng)用程序，則會(huì)使用數(shù)百個(gè)模塊。所以，如果你使用 require, 模塊將被一一加載和處理。

而 import 語(yǔ)句通過(guò)異步工作解決了這個(gè)問(wèn)題，這比 require 在大規(guī)模應(yīng)用中更能發(fā)揮作用。

4. ES 模塊是未來(lái)

正如我們所討論的，ES 模塊系統(tǒng)是作為維護(hù)客戶端 JavaScript 模塊的標(biāo)準(zhǔn)引入的。 TypeScript 也采用了它，并添加了用于定義 Type 的內(nèi)容。因此，我不認(rèn)為 require可以再次取代 ES，因?yàn)樗殉蔀殚_(kāi)發(fā)人員中廣泛使用的標(biāo)準(zhǔn)。

但是由于有大量的 NodeJS 模塊和庫(kù)是用 CommonJS 編寫(xiě)的，我們不能保留 require完全放在一邊。所以我們必須相應(yīng)地使用它們。

如果你使用的是 TypeScript，則可以通過(guò)配置 tsconfig.json文件。例如，假設(shè)我們需要輸出一個(gè)使用 CommonJS 的代碼版本。

需要做的就是創(chuàng)建一個(gè)新的 tsconfig 通過(guò)擴(kuò)展原始文件用于 CommonJS 輸出 tsconfig文件并修改 module下參數(shù) CompilerOptions.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./lib/cjs"
  },
}

注意：還可以使用 Webpack 等構(gòu)建工具將 ES 模塊轉(zhuǎn)換為 CommonJS 模塊。

以下表格為比較兩者

特征	require	import
語(yǔ)法	const x=require()	import x from './'
模塊	CommonJS	ES
異步	不支持	支持

HTML文檔中的任何地方可包括JavaScript代碼。但也有以下的最佳方法來(lái)包含JavaScript在HTML文件。

在 <head>...</head> 部分。

在 <body>...</body> 部分。

在<body>...</body> 和<head>...</head> 部分。

腳本和外部文件，然后包括在<head>... </ head>部分。

在下面的章節(jié)中，我們將看到如何可以包含JavaScript方式的不同：

在JavaScript的<head>... </ head>部分：

如果你想在一些事件上運(yùn)行一個(gè)腳本，當(dāng)用戶點(diǎn)擊某個(gè)地方，如，那么應(yīng)該腳本的頭部，如下所示：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
123456789101112131415復(fù)制代碼類型：[javascript]

這將產(chǎn)生以下結(jié)果：

JavaScript在<body>... </ body>部分：

如果需要一個(gè)腳本的頁(yè)面加載，以便腳本生成頁(yè)面內(nèi)容來(lái)運(yùn)行，該腳本在文檔的<body>部分。在這種情況下，就不必使用JavaScript定義的所有功能：

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
12345678910111213復(fù)制代碼類型：[javascript]

JavaScript 在<body> 和 <head> 部分:

你可以把JavaScript代碼在<head>和<body>部分完全如下：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>12345678910111213141516171819復(fù)制代碼類型：[javascript]

在JavaScript外部文件：

當(dāng)開(kāi)始工作，更廣泛地使用JavaScript，可能會(huì)發(fā)現(xiàn)有情況下，在站點(diǎn)的多個(gè)頁(yè)面重用相同的JavaScript代碼。

你并不局限于將保持在多個(gè)HTML文件相同的代碼。 script標(biāo)簽提供了一種機(jī)制，允許存儲(chǔ)JavaScript在外部文件中，然后將其包含到HTML文件。

下面是一個(gè)例子來(lái)說(shuō)明如何使用腳本標(biāo)記和src屬性包含在HTML代碼的外部JavaScript文件：

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

12345678910復(fù)制代碼類型：[javascript]

使用JavaScript從外部文件源，則需要使用擴(kuò)展寫(xiě)下所有的JavaScript代碼在一個(gè)簡(jiǎn)單的文本文件“.js”，然后包括文件，如上圖所示。

例如，你可以保持在以下文件filename.js的內(nèi)容，然后包括filename.js文件后，在HTML文件中使用sayHellofunction：

function sayHello() {
   alert("Hello World")
}

開(kāi)課吧廣場(chǎng)-人才學(xué)習(xí)交流平臺(tái)

在線咨詢

上一篇：實(shí)現(xiàn)div水平垂直居中的7種方式
下一篇：今日HTML小知識(shí)-2：設(shè)置顏色透明

您的項(xiàng)目需求

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

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

零基礎(chǔ)入門前端HTML知識(shí)整理

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

背景——JavaScript 模塊類型

1. AMD——異步模塊定義

2. CommonJS 模塊

3.UMD——通用模塊定義

4. ESM — ES 模塊

“Require” 是 NodeJS 內(nèi)置的

“import”是在 ES6 模塊中引入的

require Vs import

1. require 語(yǔ)句可以在代碼的任何地方調(diào)用

2. require 可以有條件地調(diào)用

3. import 語(yǔ)句是異步的

4. ES 模塊是未來(lái)

在JavaScript的<head>... </ head>部分：

JavaScript在<body>... </ body>部分：

JavaScript 在<body> 和 <head> 部分:

在JavaScript外部文件：

您的項(xiàng)目需求