前端 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)記語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(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 表示語(yǔ)言，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）

面制作技術(shù)詳解

演示視頻在文章底部

1.頁(yè)面內(nèi)容居中顯示方法

將這段代碼<div style="width:50%;margin:auto;">放置在<body>標(biāo)簽之下。

將</div>放置在</body>之上。

將全部?jī)?nèi)容包裹在這個(gè)div中，就可以實(shí)現(xiàn)整個(gè)頁(yè)面居中。

內(nèi)容顯示寬度為瀏覽器視窗寬度的50%。

margin（外邊距）是在CSS布局中經(jīng)常用到的屬性，它指定了該div元素距離四周的距離。使用“auto”值，可以實(shí)現(xiàn)居中。

2.導(dǎo)航欄懸停頂端方法

把四個(gè)a標(biāo)簽裝到一個(gè)div中。

將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進(jìn)程</a>之上。

將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評(píng)價(jià)</a>之下。

position是css布局中指定位置的屬性，“fixed”值是讓該div懸停于固定位置。

默認(rèn)下，該div距離視窗頂端有10px左右的距離，因此為了讓它與視窗頂部對(duì)齊，添加top：0px。

3.鼠標(biāo)滑過導(dǎo)航標(biāo)題或鏈接時(shí)改變背景色提示

這就要介紹關(guān)于css的寫法了。

簡(jiǎn)單來說，就是在<head></head>標(biāo)簽中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

學(xué)過HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作的小伙伴應(yīng)該知道，CSS腳本是可以添加在head元素中的。

其中，a:hover中的a指的是所有<a></a>標(biāo)簽。

hover指的是：當(dāng)鼠標(biāo)懸停在a上面時(shí)的狀態(tài)。

使用：連接。

這個(gè)狀態(tài)下要執(zhí)行的內(nèi)容在{}中。

background-color:#ffff00;即背景色為黃色。

3.隱藏滾動(dòng)條方法

首先，我們要明確一點(diǎn)，就是，滾動(dòng)條是在內(nèi)容長(zhǎng)度超過視窗高度時(shí)產(chǎn)生的。

如果要取消視窗最右側(cè)滾動(dòng)條，就要控制內(nèi)容高度。

把<p></p>和<img/><map></map>全部裝進(jìn)<div></div>中，控制該div的高度可以實(shí)現(xiàn)。

在<p>標(biāo)簽色上面添加<div>。

在</map>標(biāo)簽下面添加</div>。

下面，為div規(guī)定尺寸，添加style="width:610px; height:530px;"。

這樣，就不會(huì)超出視窗。但是代碼寫完后發(fā)現(xiàn)并不是，如圖：

多出的文字內(nèi)容超出div范圍，右側(cè)滾動(dòng)條依然存在。

這就要在div的style中再增加一條語(yǔ)句"overflow-y:scroll;"

這句話的意思是“overflow-y”（超出最大高度）就顯示滾動(dòng)條（scroll）。而不是讓內(nèi)容超出div的邊框。

如圖：

因?yàn)閳D片寬度的問題，下方的x軸的scroll也出現(xiàn)了，我們不想看到它，影響美觀。

添加“overflow-x：hidden”即可，hidden（隱藏）。

如圖：hidden之后，將無法滾動(dòng)或拖動(dòng)畫面。

最后，我們要把右側(cè)的scroll也隱藏掉，因?yàn)辄c(diǎn)擊鼠標(biāo)，滾動(dòng)滾輪就夠了，滾動(dòng)條實(shí)在礙眼。

從前面的例子可知，hidden是不行的，有沒有別的辦法？

那就是在蓋div的外部再添加一個(gè)div，讓這個(gè)div的寬度略小于里面div的寬度，小到剛剛擋住滾動(dòng)條既可以。如圖：

這個(gè)div這樣寫即可

</div>

同時(shí)還要給里面的div添加margin來讓它們對(duì)齊

</div>

完整代碼：用HTML制作一個(gè)簡(jiǎn)單頁(yè)面（代碼閱讀練習(xí)）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

頁(yè)就是一個(gè)HTML文件。

1、HTML結(jié)構(gòu)

<!doctype html>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

說明：

文檔類型<!DOCTYPE>

<!DOCTYPE html>

標(biāo)簽位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范.

HTML標(biāo)簽
標(biāo)識(shí)HTML文檔，是所有HTML中標(biāo)簽的一個(gè)根節(jié)點(diǎn)。
head標(biāo)簽
標(biāo)識(shí)頭部區(qū)域，用于存放：title,meta,base,style,script,link
title標(biāo)題
在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽，讓頁(yè)面擁有一個(gè)屬于自己的標(biāo)題。
body標(biāo)簽
標(biāo)識(shí)頁(yè)面的主體部分，用于存放所有的HTML標(biāo)簽，如p,h,a,b,u,i,s,em,del,ins,strong,img

2、HTML標(biāo)簽和屬性

寫HTML文檔時(shí)，必須遵循HTML語(yǔ)法規(guī)范。HTML文檔實(shí)際上就是一個(gè)文本文件，它由標(biāo)簽和信息組合而成，當(dāng)然標(biāo)簽和信息也不是隨便組合的，需要遵循一定規(guī)則，否則無法正常顯示。

標(biāo)簽分類
在HTML頁(yè)面中，帶有“< >”符號(hào)的元素被稱為HTML標(biāo)簽，如上面提到的 <html>、<head>、<body>都是HTML標(biāo)簽。根據(jù)出現(xiàn)個(gè)數(shù)不同，分為雙標(biāo)簽和單標(biāo)簽
雙標(biāo)簽
該語(yǔ)法中“<標(biāo)簽名>”表示該標(biāo)簽的作用開始，一般稱為“開始標(biāo)簽（start tag）”，“</標(biāo)簽名>” 表示該標(biāo)簽的作用結(jié)束，一般稱為“結(jié)束標(biāo)簽（end tag）”。和開始標(biāo)簽相比，結(jié)束標(biāo)簽只是在前面加了一個(gè)關(guān)閉符“/”。
<標(biāo)簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" ……> 內(nèi)容 </標(biāo)簽名>
單標(biāo)簽
單標(biāo)簽也稱空標(biāo)簽，是指用一個(gè)標(biāo)簽符號(hào)即可完整地描述某個(gè)功能的標(biāo)簽。
<標(biāo)簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" …… />

標(biāo)簽關(guān)系
嵌套關(guān)系
<head> <title> </title> </head>
并列關(guān)系
<head></head> <body></body>
標(biāo)簽語(yǔ)義化
所謂標(biāo)簽語(yǔ)義化，就是指標(biāo)簽的含義
作用：

方便代碼閱讀和維護(hù)
具有更好地搜索引擎優(yōu)化
更容易讓瀏覽器或是網(wǎng)絡(luò)爬蟲解析，從而更好地分析網(wǎng)頁(yè)的內(nèi)容

遵循原則：
合適的地方放一個(gè)最為合理的標(biāo)簽。當(dāng)我們?nèi)サ鬋SS之后，網(wǎng)頁(yè)結(jié)構(gòu)依然組織有序，并且有良好的可讀性

有一起學(xué)習(xí)的嗎？請(qǐng)點(diǎn)贊收藏+關(guān)注哦！

在線咨詢

上一篇：插電混動(dòng)汽車+html頁(yè)面中如何引入html
下一篇：HTML5(九)-超強(qiáng)的 SVG 動(dòng)畫

您的項(xiàng)目需求

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

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

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

面制作技術(shù)詳解

您的項(xiàng)目需求