整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
得剛接觸HTML的時候，有一些元素只會寫但是不明白其含義，這情況真是很尷尬。本節將來解析一下HTML文檔的主要的骨架標簽的含義。
一、Hello World
編寫第一段HTML代碼，在頁面上輸出文本Hello World代碼如下：
<!--聲明文檔內容為html--> <!DOCTYPE html> <!--設置語言為英文--> <html lang="en"> <head> <!--設置文檔默認編碼--> <meta charset="UTF-8"> <!--網頁的title--> <title>系統首頁</title> </head> <body> <p>Hello World</p> </body> </html>
這是一段最簡單HTML代碼，但是其骨架完整。在瀏覽器中瀏覽效果如圖：
二、讀懂每一個標簽
一個符合規范的HTML文檔會包含DOCTYPE、html、head、body這些基本的文檔元素。當然即使沒有顯式的元素標簽，網頁也是可以顯示，但是不建議這么去做。
1、HTML5基本文檔結構
<!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元素和其他的元數據元素，也可以在head中引用js、css和定義js、css。
<body></body> body元素（容器）中是文檔的展示內容。
PS：小伙伴們真棒，已經寫出了第一個網頁。加油！
如果覺得我的文章對您有用，請點贊收藏。您的支持將鼓勵我繼續創作。
知識分享到這里就結束了，學習web前端的可以來我的群
群里每天都有對應資料學習：675498134
歡迎初學和進階中的小伙伴,一起學習，一起進步。
的：
TEAMWISE PUBLISHER 發布器
特征：
TEAMWISE Publisher 電子出版：快速簡單
在 Word 轉換前，如下圖示
轉換后, 如下圖示:
在 Word 轉換前，如下圖示
轉換后, 如下圖示:
在 Word 轉換前（高級版），如下圖示
轉換后（高級版）, 如下圖示:
TEAMWISE PUBLISHER 電子出版：負擔得起
2020年6/24日-2020年7/24日, 有格式的 Word 文檔不限量轉換，免費提供6個H5皮膚樣式（可以定制 LOGO, 公司頁腳和顏色）僅需人民幣2000元/月免費提供云端上線（不加密，不承諾永久保存數據）。
好處：
價值：
關于我們
北京鐳內容技術公司成立于2019年，其前身是2014年成立的上海迪臣信息科技有限公司。本公司使命是通過人工智能技術為企業內容實踐不斷賦能。
公司定位是解決內容 ”寫、管、用“三個方面的挑戰。
為此我們與知名的Oxygen產品廠家羅馬尼亞 SyncSoft 公司，比利時 InfoMapping 國際公司等結成合作伙伴并代理銷售：Oxygen XML 產品系列，FS Pro Word 產品等。與此同時，我們研發、交付和銷售 AI 技術產品，如機器翻譯 TEAMWISE 等。
基于 AI 行業的挑戰，我們也被主要的 AI 技術公司委托提供高性價比人工翻譯服務。
產品和服務咨詢，請聯系我們：
.HTML 介紹
是網頁的后綴，txt 后綴是文本 ，py 后綴是 python ，html 后綴就是網頁的意思。我們如果想創建一個網頁的話，可以直接將文本的后綴改為 html 。HTMLSHI 超文本標記語言，是一種標識性的語言。它包括一系列標記標簽，通過這些標記標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。
1.html 的介紹
頁面整體分為兩部分：
一部分是head部分，主要是頁面的整體信息和配置，內容不會出現在瀏覽器內部。
一部分是body部分，這部分內容則會在瀏覽器中展示出來
我們使用 pycharm 創建一個 html ，打開后就是下圖模樣。
（1）文檔類型聲明（默認的可以不用設置）
<!DOCTYPE html>（2）開始標簽和結束標簽
一般的標簽是成對出現的，一般稱第一個標簽是開始標簽，第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。
開始標簽：
<html lang="en">其中的 html 為根元素，是所有元素的基礎。lang 表示語言，en 表示英文。
結束標簽：
</html>（3）頭部標簽
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>其中 utf-8 表示字符編碼格式，如果沒有寫這個就會發生亂碼。Title 表示文檔的標題。
（4）身體標簽
<body>
</body>身體標簽是文檔的主題，可視化區域，所有的音頻，視頻，圖片，文字都可在其中搭建，相當于我們打開網頁時所看到內容。
（5）標簽的特點
標簽是由一對尖括號包裹單詞構成的，標簽要使用小寫。 一般的標簽是成對出現的，一般稱第一個標簽是開始標簽，第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。
二.標簽
標簽分為塊級標簽和內聯標簽（運行時點擊右上角的谷歌模式的小圓圈就可以）
1.內容的書寫
（1）塊級標簽（p）
兩個 p 中間可隨意書寫內容
<p>故事和酒，淘寶都有</p>（2）內聯標簽（span）
<span>故事和酒，淘寶都有</span>完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有</span>
</body>
</html>運行后：
運行后看不出塊級標簽和內聯標簽的區別，所有我們使用檢查。右擊后點擊檢查
在點擊下圖中左上角的方框箭頭，變成藍色說明正在運行，之后就可以查看有關的數據了
無需點擊，只要將箭頭放在文字上就會出現相關內容
上面兩圖可以明顯看出兩句話的寬度不相同。
塊級標簽：在不設置寬度的情況下，寬度始終和瀏覽器寬度保持一致。
內聯標簽：寬度和內容有關
2.設置高度寬度
<p style="width: 500px;height: 50px;">故事和酒，淘寶都有</p>
<span style="width: 500px;height: 50px;">故事和酒，淘寶都有</span>
如圖所示，只有塊級標簽寬高改變了，內聯標簽不改變。由此可得，塊級標簽設置寬高有效，內聯標簽設置寬高無效。
3.多個標簽同時存在
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<p>故事和酒，淘寶都有</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有22</span>
<span>故事和酒，淘寶都有22</span>
</body>
多個塊級標簽同時存在的情況下，排列方式從上往下
多個內聯標簽同時存在的情況下，排列方式從左往右
4.是否包含
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有
<span>故事和酒，淘寶都有22</span>
</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有22
<p>故事和酒，淘寶都有</p>
</span>
</body>
由此可知，塊級標簽可以包含內聯標簽，但內聯標簽不可以包含塊級標簽，只可以包含內聯標簽。
5.塊級標簽與內聯標簽相互轉換
（1）塊級轉內聯
<body>
<!--將塊級標簽轉化成內聯標簽-->
<p style="display: inline">故事和酒，淘寶都有</p>
<p style="display: inline">故事和酒，淘寶都有</p>
</body>
（2）內聯轉塊級（display: block）
內聯轉為塊級之后，具有了塊級的性質。
<span style="display: block">故事和酒，淘寶都有222</span>
<span style="display: block">故事和酒，淘寶都有222</span>
（3）內聯塊元素（display: inline-block）
內聯塊元素包含了內聯標簽和塊級標簽的部分特性。
<span style="display: inline-block">故事和酒，淘寶都有333</span>
<span style="display: inline-block;height: 50px">故事和酒，淘寶都有333</span>
（4）段落標簽（p）
<!--段落標簽-->
<p></p>（5）標題標簽（h）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
