. 獲取瀏覽器 Cookie 的值

使用 document.cookie 來(lái)獲取 Cookie 的值。

const cookie=name=> `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"

2. 將 RGB 轉(zhuǎn)換為十六進(jìn)制

const rgbToHex=(r, g, b)=> "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255);
// Result: #0033ff`

3. 復(fù)制到剪貼板

使用 navigator.clipboard.writeText 輕松將任何文本復(fù)制到剪貼板上。

const copyToClipboard=(text)=> navigator.clipboard.writeText(text);
copyToClipboard("Hello World");

4.檢查日期是否有效

使用以下代碼段檢查日期是否有效。

const isDateValid=(...val)=> !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");
// Result: true

5.找出一年中的某一天

查找日期中的某一天。

const dayOfYear=(date)=> Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());
// Result: 272

將6.字符串首字母大寫(xiě)

Javascript 沒(méi)有內(nèi)置的大寫(xiě)函數(shù)，因此我們可以使用以下代碼。

const capitalize=str=> str.charAt(0).toUpperCase() + str.slice(1)
capitalize("follow for more")
// Result: Follow for more

7.計(jì)算兩天之間相差的天數(shù)

使用以下代碼段查找給定 2 天之間相差的天數(shù)。

const dayDif=(date1, date2)=> Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Result: 366

8.清除所有 Cookie

通過(guò)使用 document.cookie 可以輕松清除存儲(chǔ)在網(wǎng)頁(yè)中的所有 cookie 。

const clearCookies=document.cookie.split(';').forEach(cookie=> document.cookie=cookie.replace(/^ +/, '').replace(/=.\*/, `=;expires=${new Date(0).toUTCString()};path=/`));

9. 生成隨機(jī)十六進(jìn)制

使用 Math.random 和 padEnd 屬性生成隨機(jī)的十六進(jìn)制。

const randomHex=()=> `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// Result: #92b008

10. 數(shù)組去重

使用 SetJavaScript 可以輕松地刪除重復(fù)項(xiàng)。超級(jí)有用！

const removeDuplicates=(arr)=> [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]

11. 從 URL 獲取查詢(xún)參數(shù)

通過(guò) window.location 或原始 URL 輕松查詢(xún) goole.com?search=easy&page=3 的參數(shù)。

const getParameters=(URL)=> { 
    URL=JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
    return JSON.stringify(URL);
};
getParameters(window.location)
// Result: { search : "easy", page : 3 }

/---------------or-------------/

Object.fromEntries(new URLSearchParams(window.location.search))

12. 從日期獲取“時(shí)分秒”格式的時(shí)間

我們可以從日期中，獲取到 hour : minutes : seconds 格式的時(shí)間：

const timeFromDate=date=> date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// Result: "17:30:00"

13. 確認(rèn)奇偶數(shù)

const isEven=num=> num % 2===0;
console.log(isEven(2));
// Result: True
/---------------------or----------------/
const isEven=num=> (num & 1)===0
console.log(isEven(2));
// Result: True

14. 求平均值

使用 reduce 方法找到多個(gè)數(shù)字的平均值。

const average=(...args)=> args.reduce((a, b)=> a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5

15. 回到頂部

使用 window.scrollTo(0, 0) 方法自動(dòng)回到頂部。將 x 和 y 都設(shè)置為 0。

const goToTop=()=> window.scrollTo(0, 0);
goToTop();

16. 翻轉(zhuǎn)字符串

使用split,reverse 和 join 方法輕松翻轉(zhuǎn)字符串。

const reverse=str=> str.split('').reverse().join('');
reverse('hello world');
// Result: 'dlrow olleh'

17. 檢查數(shù)組是否為空

檢查數(shù)組是否為空的簡(jiǎn)單代碼，結(jié)果將返回 true 或 false。

const isNotEmpty=arr=> Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);
// Result: true

18. 獲取用戶(hù)選定的文本

使用內(nèi)置 getSelection 屬性獲取用戶(hù)選擇的文本。

const getSelectedText=()=> window.getSelection().toString();
getSelectedText();

19. 打亂數(shù)組

使用 sort 和 random 方法對(duì)數(shù)組進(jìn)行打亂混合。

const shuffleArray=(arr)=> arr.sort(()=> 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]

20. 檢測(cè)用戶(hù)是否處于暗模式

使用以下代碼檢查用戶(hù)的設(shè)備是否處于暗模式。

const isDarkMode=window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) // Result: True or False

作者：拜小白
鏈接：https://juejin.cn/post/7298342976576323595

1 HTML概念

HTML，超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language），是一門(mén)描述性語(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屬性

<!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屬性

<!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 水平線(xiàn)標(biāo)簽

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

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

特點(diǎn)：

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

2、單標(biāo)簽

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

<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í)體替代

7 媒體標(biāo)簽

7.1 圖片標(biāo)簽

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

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

只設(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)屬性：

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

7.3 視頻標(biāo)簽

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

支持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>

target屬性值

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>

解釋?zhuān)?/span>

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屬性值

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

解釋?zhuān)?/span>

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屬性值

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

8.3 自定義列表

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

解釋?zhuān)?/span>

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

<dl>
    <dt>稱(chēng)呼</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>

解釋?zhuān)?/span>

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

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

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

<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 合并單元格

<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)簽的常用屬性

name屬性

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

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

method屬性

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

<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屬性

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

10.2 input標(biāo)簽

input是單標(biāo)簽

<input type="表單類(lèi)型">

單行文本框常用屬性

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

單選框

<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="文本名稱(chēng)" cols="列數(shù)" rows="行數(shù)"></textarea>

<form>
    <textarea name="文本名稱(chēng)" 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)簽屬性

<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)簽屬性

<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)簽常用屬性

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

有些文檔禁止被嵌入

12 標(biāo)簽類(lèi)型

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)簽，文本類(lèi)塊級(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)簽類(lèi)型轉(zhuǎn)換

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

寫(xiě)金額轉(zhuǎn)大寫(xiě)軟件是一款非常不錯(cuò)的數(shù)字轉(zhuǎn)換工具，該軟件能夠?qū)⒗當(dāng)?shù)字轉(zhuǎn)中文大寫(xiě)數(shù)字，能夠滿(mǎn)足很多財(cái)務(wù)工作的日常需求，是該行業(yè)從業(yè)人員的電腦必備軟件。

http://www.downxia.com/downinfo/291980.html