前端 HTML：如何創建網頁 01

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

、認識WEB

網頁主要是由文字、圖像和超鏈接等元素構成，除了這些基本的元素以外，還包含一些多媒體元素等，比如音頻、視頻等。

比如我們常見的有小米商城、京東商城、以及淘寶等，都屬于我們的大型的購物平臺網站，而這些網站都包含了網頁中基本的元素。那么網頁是怎么形成的呢？

其實網頁的形參很簡單，當我們前端小姐姐將頁面通過代碼構建好以后，再通過瀏覽器（IE、谷歌等瀏覽器）將其渲染成為用戶眼中所能看得到的各種樣式的頁面。

既然我們的網頁是通過瀏覽器的渲染而顯示不同的頁面，那么常見的瀏覽器有哪一些呢？如常見的五大瀏覽器，分別是IE、火狐、谷歌、Safari以及Opera等。

五大瀏覽器

但是在開發過程中，谷歌和火狐用得比較多，可以更好地幫助開發人員進行調試。IE瀏覽器相對來說存在兼容性問題，所以很少去使用。

為什么網頁代碼通過瀏覽器的渲染就能顯示出各種不同的樣式的頁面呢？此處就不得不提到瀏覽器的內核，通常瀏覽器的內核分為如下幾種：

排版引擎
解釋引擎
渲染引擎

而五大瀏覽器之間的內核都是什么呢？如下圖所示：

五大瀏覽器的內核

二、Web標準

什么是Web標準？Web標準是由W3C組織和其它標準化組織，制定的一系列標準的集合。

W3C萬維網聯盟是國際最著名的標準化組織。他是1994年成立后，至今已發布了近百項相關萬維網的標準。

w3c組織

那為什么要制定Web標準呢？

作用：由于市場上誕生了許多不同類型的瀏覽器，而這些瀏覽器都存在不同的內核，導致前端小姐姐開發的頁面在不同的瀏覽器上顯示會存在不同的差異，這樣就會給前端開發者帶來了許多麻煩。而通過Web標準就會降低這種頁面之間的差異化，讓瀏覽器在解析前端代碼的時候，轉向W3C的標準，呈現出統一的效果。

優點：

遵循Web標準，讓頁面更標準統一。
同時讓Web的發展變得越來越好。
內容更容易被多種設備訪問。
還容易被搜索引擎搜索。
降低網站流量費用和提高頁面的加載速度。
也讓頁面變得易維護。

那么一個漂亮的頁面是怎樣構成的呢？它的構成分別是如下幾種類型：

結構（Structure）：通常在頁面中HTML就是一個頁面的結構，好比剛孵出來的小鳥寶寶。
表現（Presentation）：通常在頁面中CSS就是對一個頁面進行美化的，好比小鳥寶寶慢慢地長出了漂亮的羽毛。
行文（Behavior）：通常在頁面中會使用JavaScript（或JQuery）來完成行文，好比小鳥寶寶長大了，可以進行飛行、捕食等。

漂亮頁面的構成

好啦！[微笑]本節就分享到這兒哦！對前端感興趣的小伙伴，可以關注我的，我會繼續給大家分享前端以及其它開發內容的知識，也歡迎大家給我在評論區留言[作揖]。

天教大家制作一個淘寶首頁右側浮動的導航話不多說，看圖片

打開編輯工具Editplus新建一個html網頁

建好后就開始制作

在body里添加下面內容

</div>

然后在title下面添加css樣式

添加好后按鍵盤上的ctrl+s建保存，

保存好后鼠標雙擊打開就OK啦！

如果需要源碼的可以關注我后私信我，也可以加咱們的交流群309073798，每天都會分享最新的網站前端技術

歡迎大家轉載收藏，最后又不對的地方大家可以在留言區吐槽

在線咨詢

上一篇：HTML中的定位
下一篇：javascript反轉字符串的方法有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端 HTML：如何創建網頁 01

您的項目需求