整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
.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）
例
上標文本：
<p>這個文本包含 <sup>上標</sup> 文本。</p>
瀏覽器支持
所有主流瀏覽器都支持 <sup> 標簽。
標簽定義及使用說明
<sup> 標簽定義上標文本。上標文本將會顯示在當前文本流中字符高度的一半為基準線的上方，但是與當前文本流中文字的字體和字號都是一樣的。上標文本能用來添加腳注，比如 WWW[1]。
提示：請使用 <sub> 標簽定義下標文本。
HTML 4.01 與 HTML5之間的差異
無。
全局屬性
<sup> 標簽支持 HTML 的全局屬性。
事件屬性
<sup> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML <base> 元素
指定用于一個文檔中包含的所有相對 URL 的根 URL。一份中只能有一個 <base> 元素。
包含屬性href 和
target 可以指定a 標簽的默認窗口打開行為
<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默認就打開新的窗口 <a href="aaa">123</a>
使用
<base href="https://www.baidu.com/img/"></base> <img src="bd_logo1.png?where=super"></img>
雖然在codepen 的代碼上編寫的但是能夠正確的通過base url + img 的src 定位顯示出圖片
content 標簽
HTML <aside> 元素
表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響。
HTML <blockquote> 元素
（或者 HTML 塊級引用元素），代表其中的文字是引用內容。通常在渲染時，這部分的內容會有一定的縮進（注 中說明了如何更改）。若引文來源于網絡，則可以將原內容的出處 URL 地址設置到 cite 特性上，若要以文本的形式告知讀者引文的出處時，可以通過 <cite> 元素。
HTML <figure> 元素
代表一段獨立的內容, 經常與說明（caption） <figcaption> 配合使用, 并且作為一個獨立的引用單元。當它屬于主內容流（main flow）時，它的位置獨立于主體。這個標簽經常是在主文中引用的圖片，插圖，表格，代碼段等等，當這部分轉移到附錄中或者其他頁面時不會影響到主體。
Inline text semantics
HTML 縮寫元素（<abbr>）
用于展示縮寫，并且可以通過可選的 title 屬性提供完整的描述。
ps: 完整描述樣式貌似不能自定義
HTML鍵盤輸入元素(<kbd>)
用于表示用戶輸入，它將產生一個行內元素，以瀏覽器的默認monospace字體顯示。
HTML標記文本元素(< Mark >)
表示為引用或符號目的而標記或突出顯示的文本，這是由于標記的段落在封閉上下文中的相關性或重要性造成的。
ps:項目中大量使用span 標記的做法不符合html5 的語義化
HTML Ruby Base（<rb>）
元素用于分隔<ruby>注釋的基本文本組件（即正在注釋的文本）。一個<rb>元素應該包裝基本文本的每個單獨的原子段。
ps: 拼音注解
<samp> 元素
用于標識計算機程序輸出，通常使用瀏覽器缺省的 monotype 字體（例如 Lucida Console）。
HTML 中的<small>
元素將使文本的字體變小一號。(例如從大變成中等，從中等變成小，從小變成超小)。在HTML5中，除了它的樣式含義，這個元素被重新定義為表示邊注釋和附屬細則，包括版權和法律文本。
HTML <sub> 元素定義了一個文本區域，出于排版的原因，與主要的文本相比，應該展示得更低并且更小。
ps: 下腳標
HTML <sup> 元素定義了一個文本區域，出于排版的原因，與主要的文本相比，應該展示得更高并且更小。
ps: 上腳標
HTML <u> 元素
使文本在其內容的基線下的一行呈現下劃線。在HTML5中, 此元素表示具有未標注的文本跨度，顯示渲染，非文本注釋，例如將文本標記為中文文本中的專有名稱(一個正確的中文標記), 或 將文本標記為拼寫錯誤
HTML <map>
與 <area> 屬性一起使用來定義一個圖像映射(一個可點擊的鏈接區域).
HTML <track> 元素
被當作媒體元素—<audio> 和 <video>的子元素來使用。它允許指定計時字幕（或者基于時間的數據），例如自動處理字幕。
HTML <object> 元素
（或者稱作 HTML 嵌入對象元素）表示引入一個外部資源，這個資源可能是一張圖片，一個嵌入的瀏覽上下文，亦或是一個插件所使用的資源
ps: 支持引入的資源類型
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
關于支持資源類型的測試
http://joliclic.free.fr/html/object-tag/en/index.php
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
