.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)
演示視頻在文章底部
1.頁面內容居中顯示方法
將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。
將</div>放置在</body>之上。
將全部內容包裹在這個div中,就可以實現整個頁面居中。
內容顯示寬度為瀏覽器視窗寬度的50%。
margin(外邊距)是在CSS布局中經常用到的屬性,它指定了該div元素距離四周的距離。使用“auto”值,可以實現居中。
2.導航欄懸停頂端方法
把四個a標簽裝到一個div中。
將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。
將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。
position是css布局中指定位置的屬性,“fixed”值是讓該div懸停于固定位置。
默認下,該div距離視窗頂端有10px左右的距離,因此為了讓它與視窗頂部對齊,添加top:0px。
3.鼠標滑過導航標題或鏈接時改變背景色提示
這就要介紹關于css的寫法了。
簡單來說,就是在<head></head>標簽中添加
<style>
a:hover
{
background-color:#ffff00;
}
</style>
學過HTML頁面中head標簽有啥用?——零基礎自學網頁制作的小伙伴應該知道,CSS腳本是可以添加在head元素中的。
其中,a:hover中的a指的是所有<a></a>標簽。
hover指的是:當鼠標懸停在a上面時的狀態。
使用:連接。
這個狀態下要執行的內容在{}中。
background-color:#ffff00;即背景色為黃色。
3.隱藏滾動條方法
首先,我們要明確一點,就是,滾動條是在內容長度超過視窗高度時產生的。
如果要取消視窗最右側滾動條,就要控制內容高度。
把<p></p>和<img/><map></map>全部裝進<div></div>中,控制該div的高度可以實現。
在<p>標簽色上面添加<div>。
在</map>標簽下面添加</div>。
下面,為div規定尺寸,添加style="width:610px; height:530px;"。
這樣,就不會超出視窗。但是代碼寫完后發現并不是,如圖:
多出的文字內容超出div范圍,右側滾動條依然存在。
這就要在div的style中再增加一條語句"overflow-y:scroll;"
這句話的意思是“overflow-y”(超出最大高度)就顯示滾動條(scroll)。而不是讓內容超出div的邊框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如圖:
因為圖片寬度的問題,下方的x軸的scroll也出現了,我們不想看到它,影響美觀。
添加“overflow-x:hidden”即可,hidden(隱藏)。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如圖:hidden之后,將無法滾動或拖動畫面。
最后,我們要把右側的scroll也隱藏掉,因為點擊鼠標,滾動滾輪就夠了,滾動條實在礙眼。
從前面的例子可知,hidden是不行的,有沒有別的辦法?
那就是在蓋div的外部再添加一個div,讓這個div的寬度略小于里面div的寬度,小到剛剛擋住滾動條既可以。如圖:
這個div這樣寫即可
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
</div>
同時還要給里面的div添加margin來讓它們對齊
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<!--省略了p img map 請自行腦補或參考源碼-->
</div>
</div>
完整代碼:用HTML制作一個簡單頁面(代碼閱讀練習)——零基礎自學網頁制作
頁就是一個HTML文件。
1、HTML結構
<!doctype html>
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
說明:
<!DOCTYPE html>
標簽位于文檔的最前面,用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范.
2、HTML標簽和屬性
寫HTML文檔時,必須遵循HTML語法規范。HTML文檔實際上就是一個文本文件,它由標簽和信息組合而成,當然標簽和信息也不是隨便組合的,需要遵循一定規則,否則無法正常顯示。
有一起學習的嗎?請點贊收藏+關注哦!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。