前端 HTML：如何創(chuàng)建網(wǎng)頁(yè) 01

.HTML 介紹

是網(wǎng)頁(yè)的后綴，txt 后綴是文本，py 后綴是 python ，html 后綴就是網(wǎng)頁(yè)的意思。我們?nèi)绻雱?chuàng)建一個(gè)網(wǎng)頁(yè)的話，可以直接將文本的后綴改為 html 。HTMLSHI 超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)記標(biāo)簽，通過這些標(biāo)記標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。

1.html 的介紹

頁(yè)面整體分為兩部分：

一部分是head部分，主要是頁(yè)面的整體信息和配置，內(nèi)容不會(huì)出現(xiàn)在瀏覽器內(nèi)部。

一部分是body部分，這部分內(nèi)容則會(huì)在瀏覽器中展示出來

我們使用 pycharm 創(chuàng)建一個(gè) html ，打開后就是下圖模樣。

（1）文檔類型聲明（默認(rèn)的可以不用設(shè)置）

<!DOCTYPE html>

（2）開始標(biāo)簽和結(jié)束標(biāo)簽

一般的標(biāo)簽是成對(duì)出現(xiàn)的，一般稱第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)是結(jié)束標(biāo)簽。開始和結(jié)束標(biāo)簽也稱為開放標(biāo)簽和閉合標(biāo)簽。

開始標(biāo)簽：

<html lang="en">

其中的 html 為根元素，是所有元素的基礎(chǔ)。lang 表示語言，en 表示英文。

結(jié)束標(biāo)簽：

</html>

（3）頭部標(biāo)簽

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

其中 utf-8 表示字符編碼格式，如果沒有寫這個(gè)就會(huì)發(fā)生亂碼。Title 表示文檔的標(biāo)題。

（4）身體標(biāo)簽

<body>

</body>

身體標(biāo)簽是文檔的主題，可視化區(qū)域，所有的音頻，視頻，圖片，文字都可在其中搭建，相當(dāng)于我們打開網(wǎng)頁(yè)時(shí)所看到內(nèi)容。

（5）標(biāo)簽的特點(diǎn)

標(biāo)簽是由一對(duì)尖括號(hào)包裹單詞構(gòu)成的，標(biāo)簽要使用小寫。一般的標(biāo)簽是成對(duì)出現(xiàn)的，一般稱第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)是結(jié)束標(biāo)簽。開始和結(jié)束標(biāo)簽也稱為開放標(biāo)簽和閉合標(biāo)簽。

二.標(biāo)簽

標(biāo)簽分為塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽（運(yùn)行時(shí)點(diǎn)擊右上角的谷歌模式的小圓圈就可以）

1.內(nèi)容的書寫

（1）塊級(jí)標(biāo)簽（p）

兩個(gè) p 中間可隨意書寫內(nèi)容

<p>故事和酒，淘寶都有</p>

（2）內(nèi)聯(lián)標(biāo)簽（span）

<span>故事和酒，淘寶都有</span>

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 塊級(jí)標(biāo)簽--> 
<p>故事和酒，淘寶都有</p>
<!--內(nèi)聯(lián)標(biāo)簽-->
<span>故事和酒，淘寶都有</span>
</body>
</html>

運(yùn)行后：

運(yùn)行后看不出塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽的區(qū)別，所有我們使用檢查。右擊后點(diǎn)擊檢查

在點(diǎn)擊下圖中左上角的方框箭頭，變成藍(lán)色說明正在運(yùn)行，之后就可以查看有關(guān)的數(shù)據(jù)了

無需點(diǎn)擊，只要將箭頭放在文字上就會(huì)出現(xiàn)相關(guān)內(nèi)容

上面兩圖可以明顯看出兩句話的寬度不相同。

塊級(jí)標(biāo)簽：在不設(shè)置寬度的情況下，寬度始終和瀏覽器寬度保持一致。

內(nèi)聯(lián)標(biāo)簽：寬度和內(nèi)容有關(guān)

2.設(shè)置高度寬度

<p style="width: 500px;height: 50px;">故事和酒，淘寶都有</p>

<span style="width: 500px;height: 50px;">故事和酒，淘寶都有</span>

如圖所示，只有塊級(jí)標(biāo)簽寬高改變了，內(nèi)聯(lián)標(biāo)簽不改變。由此可得，塊級(jí)標(biāo)簽設(shè)置寬高有效，內(nèi)聯(lián)標(biāo)簽設(shè)置寬高無效。

3.多個(gè)標(biāo)簽同時(shí)存在

<body>
<!-- 塊級(jí)標(biāo)簽-->
<p>故事和酒，淘寶都有</p>
<p>故事和酒，淘寶都有</p>
<!--內(nèi)聯(lián)標(biāo)簽-->
<span>故事和酒，淘寶都有22</span>
<span>故事和酒，淘寶都有22</span>
</body>

多個(gè)塊級(jí)標(biāo)簽同時(shí)存在的情況下，排列方式從上往下
多個(gè)內(nèi)聯(lián)標(biāo)簽同時(shí)存在的情況下，排列方式從左往右

4.是否包含

<body>
<!-- 塊級(jí)標(biāo)簽-->
<p>故事和酒，淘寶都有
    <span>故事和酒，淘寶都有22</span>
</p>

<!--內(nèi)聯(lián)標(biāo)簽-->
<span>故事和酒，淘寶都有22
    <p>故事和酒，淘寶都有</p>
</span>

</body>

由此可知，塊級(jí)標(biāo)簽可以包含內(nèi)聯(lián)標(biāo)簽，但內(nèi)聯(lián)標(biāo)簽不可以包含塊級(jí)標(biāo)簽，只可以包含內(nèi)聯(lián)標(biāo)簽。

5.塊級(jí)標(biāo)簽與內(nèi)聯(lián)標(biāo)簽相互轉(zhuǎn)換

（1）塊級(jí)轉(zhuǎn)內(nèi)聯(lián)

<body>
<!--將塊級(jí)標(biāo)簽轉(zhuǎn)化成內(nèi)聯(lián)標(biāo)簽-->
<p style="display: inline">故事和酒，淘寶都有</p>
<p style="display: inline">故事和酒，淘寶都有</p>

</body>

（2）內(nèi)聯(lián)轉(zhuǎn)塊級(jí)（display: block）

內(nèi)聯(lián)轉(zhuǎn)為塊級(jí)之后，具有了塊級(jí)的性質(zhì)。

<span style="display: block">故事和酒，淘寶都有222</span>
<span style="display: block">故事和酒，淘寶都有222</span>

（3）內(nèi)聯(lián)塊元素（display: inline-block）

內(nèi)聯(lián)塊元素包含了內(nèi)聯(lián)標(biāo)簽和塊級(jí)標(biāo)簽的部分特性。

<span style="display: inline-block">故事和酒，淘寶都有333</span>
<span style="display: inline-block;height: 50px">故事和酒，淘寶都有333</span>

（4）段落標(biāo)簽（p）

<!--段落標(biāo)簽-->
<p></p>

（5）標(biāo)題標(biāo)簽（h）

例

上標(biāo)文本：

這個(gè)文本包含 上標(biāo) 文本。

瀏覽器支持

所有主流瀏覽器都支持 標(biāo)簽。

標(biāo)簽定義及使用說明

標(biāo)簽定義上標(biāo)文本。上標(biāo)文本將會(huì)顯示在當(dāng)前文本流中字符高度的一半為基準(zhǔn)線的上方，但是與當(dāng)前文本流中文字的字體和字號(hào)都是一樣的。上標(biāo)文本能用來添加腳注，比如 WWW[1]。

提示：請(qǐng)使用 標(biāo)簽定義下標(biāo)文本。

HTML 4.01 與 HTML5之間的差異

無。

全局屬性

標(biāo)簽支持 HTML 的全局屬性。

事件屬性

標(biāo)簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

TML <base> 元素

指定用于一個(gè)文檔中包含的所有相對(duì) URL 的根 URL。一份中只能有一個(gè) <base> 元素。

包含屬性href 和

target 可以指定a 標(biāo)簽的默認(rèn)窗口打開行為

<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默認(rèn)就打開新的窗口 <a href="aaa">123</a>

使用

雖然在codepen 的代碼上編寫的但是能夠正確的通過base url + img 的src 定位顯示出圖片

content 標(biāo)簽

HTML <aside> 元素

表示一個(gè)和其余頁(yè)面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分并且可以被單獨(dú)的拆分出來而不會(huì)使整體受影響。

HTML <blockquote> 元素

（或者 HTML 塊級(jí)引用元素），代表其中的文字是引用內(nèi)容。通常在渲染時(shí)，這部分的內(nèi)容會(huì)有一定的縮進(jìn)（注中說明了如何更改）。若引文來源于網(wǎng)絡(luò)，則可以將原內(nèi)容的出處 URL 地址設(shè)置到 cite 特性上，若要以文本的形式告知讀者引文的出處時(shí)，可以通過 <cite> 元素。

HTML <figure> 元素

代表一段獨(dú)立的內(nèi)容, 經(jīng)常與說明（caption） <figcaption> 配合使用, 并且作為一個(gè)獨(dú)立的引用單元。當(dāng)它屬于主內(nèi)容流（main flow）時(shí)，它的位置獨(dú)立于主體。這個(gè)標(biāo)簽經(jīng)常是在主文中引用的圖片，插圖，表格，代碼段等等，當(dāng)這部分轉(zhuǎn)移到附錄中或者其他頁(yè)面時(shí)不會(huì)影響到主體。

Inline text semantics

HTML 縮寫元素（<abbr>）

用于展示縮寫，并且可以通過可選的 title 屬性提供完整的描述。

ps: 完整描述樣式貌似不能自定義

HTML鍵盤輸入元素(<kbd>)

用于表示用戶輸入，它將產(chǎn)生一個(gè)行內(nèi)元素，以瀏覽器的默認(rèn)monospace字體顯示。

HTML標(biāo)記文本元素()

表示為引用或符號(hào)目的而標(biāo)記或突出顯示的文本，這是由于標(biāo)記的段落在封閉上下文中的相關(guān)性或重要性造成的。

ps:項(xiàng)目中大量使用span 標(biāo)記的做法不符合html5 的語義化

HTML Ruby Base（<rb>）

元素用于分隔<ruby>注釋的基本文本組件（即正在注釋的文本）。一個(gè)<rb>元素應(yīng)該包裝基本文本的每個(gè)單獨(dú)的原子段。

ps: 拼音注解

<samp> 元素

用于標(biāo)識(shí)計(jì)算機(jī)程序輸出，通常使用瀏覽器缺省的 monotype 字體（例如 Lucida Console）。

HTML 中的

元素將使文本的字體變小一號(hào)。(例如從大變成中等，從中等變成小，從小變成超小)。在HTML5中，除了它的樣式含義，這個(gè)元素被重新定義為表示邊注釋和附屬細(xì)則，包括版權(quán)和法律文本。

HTML 元素定義了一個(gè)文本區(qū)域，出于排版的原因，與主要的文本相比，應(yīng)該展示得更低并且更小。

ps: 下腳標(biāo)

HTML 元素定義了一個(gè)文本區(qū)域，出于排版的原因，與主要的文本相比，應(yīng)該展示得更高并且更小。

ps: 上腳標(biāo)

HTML 元素

使文本在其內(nèi)容的基線下的一行呈現(xiàn)下劃線。在HTML5中, 此元素表示具有未標(biāo)注的文本跨度，顯示渲染，非文本注釋，例如將文本標(biāo)記為中文文本中的專有名稱(一個(gè)正確的中文標(biāo)記), 或將文本標(biāo)記為拼寫錯(cuò)誤

HTML <map>

與 <area> 屬性一起使用來定義一個(gè)圖像映射(一個(gè)可點(diǎn)擊的鏈接區(qū)域).

HTML <track> 元素

被當(dāng)作媒體元素—<audio> 和 <video>的子元素來使用。它允許指定計(jì)時(shí)字幕（或者基于時(shí)間的數(shù)據(jù)），例如自動(dòng)處理字幕。

HTML <object> 元素

（或者稱作 HTML 嵌入對(duì)象元素）表示引入一個(gè)外部資源，這個(gè)資源可能是一張圖片，一個(gè)嵌入的瀏覽上下文，亦或是一個(gè)插件所使用的資源

ps: 支持引入的資源類型

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

關(guān)于支持資源類型的測(cè)試

http://joliclic.free.fr/html/object-tag/en/index.php

在線咨詢

上一篇：添加圖片HTML代碼及給圖片添加超鏈接的html代碼
下一篇：如何用 JavaScript 模擬點(diǎn)擊事件，簡(jiǎn)單實(shí)現(xiàn) x, y 坐標(biāo)點(diǎn)擊？

您的項(xiàng)目需求

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

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

前端 HTML：如何創(chuàng)建網(wǎng)頁(yè) 01

您的項(xiàng)目需求