哈哈，這才是HTML5最正確的打開Hello World的方式！

得剛接觸HTML的時候，有一些元素只會寫但是不明白其含義，這情況真是很尷尬。本節(jié)將來解析一下HTML文檔的主要的骨架標簽的含義。

一、Hello World

編寫第一段HTML代碼，在頁面上輸出文本Hello World代碼如下：

<!--聲明文檔內(nèi)容為html--> 
<!DOCTYPE html> 
<!--設(shè)置語言為英文--> 
<html lang="en"> 
<head> 
 <!--設(shè)置文檔默認編碼--> 
 <meta charset="UTF-8"> 
 <!--網(wǎng)頁的title--> 
 <title>系統(tǒng)首頁</title> 
</head> 
<body> 
 <p>Hello World</p> 
 </body> 
 </html>

這是一段最簡單HTML代碼，但是其骨架完整。在瀏覽器中瀏覽效果如圖：

二、讀懂每一個標簽

一個符合規(guī)范的HTML文檔會包含DOCTYPE、html、head、body這些基本的文檔元素。當然即使沒有顯式的元素標簽，網(wǎng)頁也是可以顯示，但是不建議這么去做。

1、HTML5基本文檔結(jié)構(gòu)

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

上述示例演示了HTML文檔骨架的4種文檔元素的使用方法。接下來，將逐一解讀。

<!DOCTYPE HTML>

!DOCTYPE 元素主要有兩個作用第一是告訴瀏覽器，它即將處理的是一份HTML文檔；第二是用來標記HTML的版本。通常這樣的聲明都在文檔的第一行。

<html></html>

html元素是文檔的根元素。

head></head>

head元素是文檔的頭部（通俗的理解），

在head元素中可以使用title元素和其他的元數(shù)據(jù)元素，也可以在head中引用js、css和定義js、css。

<body></body>

body元素（容器）中是文檔的展示內(nèi)容。

PS：小伙伴們真棒，已經(jīng)寫出了第一個網(wǎng)頁。加油！

如果覺得我的文章對您有用，請點贊收藏。您的支持將鼓勵我繼續(xù)創(chuàng)作。

知識分享到這里就結(jié)束了，學習web前端的可以來我的群

群里每天都有對應(yīng)資料學習：675498134

歡迎初學和進階中的小伙伴,一起學習，一起進步。

的：

疫情條件下，您是否有每天刷新一下新冠疫情的最新進展？事實上，手機閱讀獲得動態(tài)更新的知識和消息已經(jīng)成為主流。如果您期望您產(chǎn)品和相關(guān)文檔的客戶（用戶）也可以及時，高效獲得HTML5互聯(lián)網(wǎng)閱讀的體驗，那么本文描述的 TEAMWISE Publisher 的 Word 轉(zhuǎn)換 HTML5 服務(wù)可以幫助您。

TEAMWISE PUBLISHER 發(fā)布器

特征：

TEAMWISE Publisher 電子出版：快速簡單

在 Word 轉(zhuǎn)換前，如下圖示

轉(zhuǎn)換后, 如下圖示:

在 Word 轉(zhuǎn)換前，如下圖示

轉(zhuǎn)換后, 如下圖示:

在 Word 轉(zhuǎn)換前（高級版），如下圖示

轉(zhuǎn)換后（高級版）, 如下圖示:

TEAMWISE PUBLISHER 電子出版：負擔得起

2020年6/24日-2020年7/24日, 有格式的 Word 文檔不限量轉(zhuǎn)換，免費提供6個H5皮膚樣式（可以定制 LOGO, 公司頁腳和顏色）僅需人民幣2000元/月免費提供云端上線（不加密，不承諾永久保存數(shù)據(jù)）。

好處：

WORD /PDF 無法提供流暢的閱讀體驗；對于大文檔， PDF 加載極其痛苦；
WORD/PDF 也不適應(yīng)移動端的當前主流閱讀習慣；
使用TEAMWISE Publisher 轉(zhuǎn)換器創(chuàng)建的HTML5文檔具有專業(yè)，優(yōu)雅和華麗的外觀，就像打印版本一樣。

價值：

如果您真正以客戶為中心，那么現(xiàn)在是時候把Word文檔轉(zhuǎn)換為HTML5，因為客戶和用戶都在習慣互聯(lián)網(wǎng)閱讀帶來的舒適體驗。

關(guān)于我們

北京鐳內(nèi)容技術(shù)公司成立于2019年，其前身是2014年成立的上海迪臣信息科技有限公司。本公司使命是通過人工智能技術(shù)為企業(yè)內(nèi)容實踐不斷賦能。

公司定位是解決內(nèi)容 ”寫、管、用“三個方面的挑戰(zhàn)。

為此我們與知名的Oxygen產(chǎn)品廠家羅馬尼亞 SyncSoft 公司，比利時 InfoMapping 國際公司等結(jié)成合作伙伴并代理銷售：Oxygen XML 產(chǎn)品系列，F(xiàn)S Pro Word 產(chǎn)品等。與此同時，我們研發(fā)、交付和銷售 AI 技術(shù)產(chǎn)品，如機器翻譯 TEAMWISE 等。

基于 AI 行業(yè)的挑戰(zhàn)，我們也被主要的 AI 技術(shù)公司委托提供高性價比人工翻譯服務(wù)。

產(chǎn)品和服務(wù)咨詢，請聯(lián)系我們：

.HTML 介紹

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

1.html 的介紹

頁面整體分為兩部分：

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

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

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

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

<!DOCTYPE html>

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

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

開始標簽：

<html lang="en">

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

結(jié)束標簽：

</html>

（3）頭部標簽

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

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

（4）身體標簽

<body>

</body>

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

（5）標簽的特點

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

二.標簽

標簽分為塊級標簽和內(nèi)聯(lián)標簽（運行時點擊右上角的谷歌模式的小圓圈就可以）

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

（1）塊級標簽（p）

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

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

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

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

完整代碼：

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

運行后：

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

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

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

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

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

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

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

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

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

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

3.多個標簽同時存在

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

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

4.是否包含

<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有
    <span>故事和酒，淘寶都有22</span>
</p>

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

</body>

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

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

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

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

</body>

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

內(nèi)聯(lián)轉(zhuǎn)為塊級之后，具有了塊級的性質(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)標簽和塊級標簽的部分特性。

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

（4）段落標簽（p）

<!--段落標簽-->
<p></p>

（5）標題標簽（h）

在線咨詢

上一篇：JS 鼠標框選（頁面選擇）時返回對應(yīng)的 HTML 或文本內(nèi)容
下一篇：Vue頁面數(shù)據(jù)不能動態(tài)刷新問題

您的項目需求

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

整合營銷服務(wù)商

哈哈，這才是HTML5最正確的打開Hello World的方式！

如果您真正以客戶為中心，那么現(xiàn)在是時候把Word文檔轉(zhuǎn)換為HTML5，因為客戶和用戶都在習慣互聯(lián)網(wǎng)閱讀帶來的舒適體驗。

您的項目需求