整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
.HTML 介紹
是網(wǎng)頁的后綴，txt 后綴是文本 ，py 后綴是 python ，html 后綴就是網(wǎng)頁的意思。我們?nèi)绻雱?chuàng)建一個(gè)網(wǎng)頁的話，可以直接將文本的后綴改為 html 。HTMLSHI 超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)記標(biāo)簽，通過這些標(biāo)記標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。
1.html 的介紹
頁面整體分為兩部分：
一部分是head部分，主要是頁面的整體信息和配置，內(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)簽是成對出現(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 表示語言，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)頁時(shí)所看到內(nèi)容。
（5）標(biāo)簽的特點(diǎn)
標(biāo)簽是由一對尖括號包裹單詞構(gòu)成的，標(biāo)簽要使用小寫。 一般的標(biāo)簽是成對出現(xiàn)的，一般稱第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)是結(jié)束標(biāo)簽。開始和結(jié)束標(biāo)簽也稱為開放標(biāo)簽和閉合標(biāo)簽。
二.標(biāo)簽
標(biāo)簽分為塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽（運(yùn)行時(shí)點(diǎn)擊右上角的谷歌模式的小圓圈就可以）
1.內(nèi)容的書寫
（1）塊級標(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>
<!-- 塊級標(biāo)簽-->
<p>故事和酒，淘寶都有</p>
<!--內(nèi)聯(lián)標(biāo)簽-->
<span>故事和酒，淘寶都有</span>
</body>
</html>運(yùn)行后：
運(yùn)行后看不出塊級標(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)容
上面兩圖可以明顯看出兩句話的寬度不相同。
塊級標(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>
如圖所示，只有塊級標(biāo)簽寬高改變了，內(nèi)聯(lián)標(biāo)簽不改變。由此可得，塊級標(biāo)簽設(shè)置寬高有效，內(nèi)聯(lián)標(biāo)簽設(shè)置寬高無效。
3.多個(gè)標(biāo)簽同時(shí)存在
<body>
<!-- 塊級標(biāo)簽-->
<p>故事和酒，淘寶都有</p>
<p>故事和酒，淘寶都有</p>
<!--內(nèi)聯(lián)標(biāo)簽-->
<span>故事和酒，淘寶都有22</span>
<span>故事和酒，淘寶都有22</span>
</body>
多個(gè)塊級標(biāo)簽同時(shí)存在的情況下，排列方式從上往下
多個(gè)內(nèi)聯(lián)標(biāo)簽同時(shí)存在的情況下，排列方式從左往右
4.是否包含
<body>
<!-- 塊級標(biāo)簽-->
<p>故事和酒，淘寶都有
<span>故事和酒，淘寶都有22</span>
</p>
<!--內(nèi)聯(lián)標(biāo)簽-->
<span>故事和酒，淘寶都有22
<p>故事和酒，淘寶都有</p>
</span>
</body>
由此可知，塊級標(biāo)簽可以包含內(nèi)聯(lián)標(biāo)簽，但內(nèi)聯(lián)標(biāo)簽不可以包含塊級標(biāo)簽，只可以包含內(nèi)聯(lián)標(biāo)簽。
5.塊級標(biāo)簽與內(nèi)聯(lián)標(biāo)簽相互轉(zhuǎn)換
（1）塊級轉(zhuǎn)內(nèi)聯(lián)
<body>
<!--將塊級標(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)塊級（display: block）
內(nèi)聯(lián)轉(zhuǎn)為塊級之后，具有了塊級的性質(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)簽和塊級標(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）
、認(rèn)識(shí)WEB
網(wǎng)頁主要是由文字、圖像和超鏈接等元素構(gòu)成，除了這些基本的元素以外，還包含一些多媒體元素等，比如音頻、視頻等。
比如我們常見的有小米商城、京東商城、以及淘寶等，都屬于我們的大型的購物平臺(tái)網(wǎng)站，而這些網(wǎng)站都包含了網(wǎng)頁中基本的元素。那么網(wǎng)頁是怎么形成的呢？
其實(shí)網(wǎng)頁的形參很簡單，當(dāng)我們前端小姐姐將頁面通過代碼構(gòu)建好以后，再通過瀏覽器（IE、谷歌等瀏覽器）將其渲染成為用戶眼中所能看得到的各種樣式的頁面。
既然我們的網(wǎng)頁是通過瀏覽器的渲染而顯示不同的頁面，那么常見的瀏覽器有哪一些呢？如常見的五大瀏覽器，分別是IE、火狐、谷歌、Safari以及Opera等。
五大瀏覽器
但是在開發(fā)過程中，谷歌和火狐用得比較多，可以更好地幫助開發(fā)人員進(jìn)行調(diào)試。IE瀏覽器相對來說存在兼容性問題，所以很少去使用。
為什么網(wǎng)頁代碼通過瀏覽器的渲染就能顯示出各種不同的樣式的頁面呢？此處就不得不提到瀏覽器的內(nèi)核，通常瀏覽器的內(nèi)核分為如下幾種：
而五大瀏覽器之間的內(nèi)核都是什么呢？如下圖所示：
五大瀏覽器的內(nèi)核
二、Web標(biāo)準(zhǔn)
什么是Web標(biāo)準(zhǔn)？Web標(biāo)準(zhǔn)是由W3C組織和其它標(biāo)準(zhǔn)化組織，制定的一系列標(biāo)準(zhǔn)的集合。
W3C萬維網(wǎng)聯(lián)盟是國際最著名的標(biāo)準(zhǔn)化組織。他是1994年成立后，至今已發(fā)布了近百項(xiàng)相關(guān)萬維網(wǎng)的標(biāo)準(zhǔn)。
w3c組織
那為什么要制定Web標(biāo)準(zhǔn)呢？
作用：由于市場上誕生了許多不同類型的瀏覽器，而這些瀏覽器都存在不同的內(nèi)核，導(dǎo)致前端小姐姐開發(fā)的頁面在不同的瀏覽器上顯示會(huì)存在不同的差異，這樣就會(huì)給前端開發(fā)者帶來了許多麻煩。而通過Web標(biāo)準(zhǔn)就會(huì)降低這種頁面之間的差異化，讓瀏覽器在解析前端代碼的時(shí)候，轉(zhuǎn)向W3C的標(biāo)準(zhǔn)，呈現(xiàn)出統(tǒng)一的效果。
優(yōu)點(diǎn)：
那么一個(gè)漂亮的頁面是怎樣構(gòu)成的呢？它的構(gòu)成分別是如下幾種類型：
漂亮頁面的構(gòu)成
好啦！[微笑]本節(jié)就分享到這兒哦！對前端感興趣的小伙伴，可以關(guān)注我的，我會(huì)繼續(xù)給大家分享前端以及其它開發(fā)內(nèi)容的知識(shí)，也歡迎大家給我在評論區(qū)留言[作揖]。
天教大家制作一個(gè)淘寶首頁右側(cè)浮動(dòng)的導(dǎo)航話不多說，看圖片
打開編輯工具Editplus新建一個(gè)html網(wǎng)頁
建好后就開始制作
在body里添加下面內(nèi)容
<div class="dh">
<div class="tp"></div>
<div class="a"><a href="#">愛逛好貨</a></div>
<div class="b"><a href="#">好點(diǎn)直播</a></div>
<div class="c"><a href="#">品質(zhì)特色</a></div>
<div class="d"><a href="#">實(shí)惠熱賣</a></div>
<div class="e"><a href="#">猜你喜歡</a></div>
<div class="f"><a href="#">反饋</a></div>
<div class="g"><a href="#">暴恐舉報(bào)</a></div>
</div>
然后在title下面添加css樣式
添加好后按鍵盤上的ctrl+s建保存，
保存好后鼠標(biāo)雙擊打開就OK啦！
如果需要源碼的可以關(guān)注我后私信我，也可以加咱們的交流群309073798，每天都會(huì)分享最新的網(wǎng)站前端技術(shù)
歡迎大家轉(zhuǎn)載收藏，最后又不對的地方大家可以在留言區(qū)吐槽
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
