了解網(wǎng)頁結(jié)構(gòu)
時間：2023-09-29 09:42:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-29 09:42:01 來源：網(wǎng)站運(yùn)營
了解網(wǎng)頁結(jié)構(gòu)：寫在前面:
推薦用谷歌瀏覽器,并且學(xué)會使用各種插件,用來工作效率比較高.
要學(xué)會翻墻,因?yàn)橹形牡氖澜缣×?墻外有很多好東西.
推薦教程:小甲魚《python入門》里面爬蟲部分前2集,講解比較通俗易懂.
要增強(qiáng)信息搜集能力,搜索可以解決80%~90%的問題,學(xué)會獨(dú)立思考
目錄:一 網(wǎng)頁結(jié)構(gòu)知識
1 網(wǎng)頁組成元素
（1）導(dǎo)航欄
（2）欄目
（3）正文內(nèi)容
2 網(wǎng)頁結(jié)構(gòu)類型
二 什么是HTML?
三 了解CSS和JS
一 網(wǎng)頁結(jié)構(gòu)知識
網(wǎng)頁組成元素
從頁面結(jié)構(gòu)的角度上看，網(wǎng)頁主要由導(dǎo)航欄、欄目、及正文內(nèi)容這三大要素組成。網(wǎng)頁結(jié)構(gòu)的創(chuàng)建、網(wǎng)頁內(nèi)容布局的規(guī)劃實(shí)際也是圍繞這三大組成要素展開的。
（1）導(dǎo)航欄
導(dǎo)航欄是構(gòu)成網(wǎng)頁的重要元素之一，是網(wǎng)站頻道入口的集合區(qū)域，相當(dāng)于網(wǎng)站的菜單。
（2）欄目
欄目是指網(wǎng)頁中存放相同性質(zhì)內(nèi)容的區(qū)域。在對頁面內(nèi)容進(jìn)行布局時，把性質(zhì)相同的內(nèi)容安排在網(wǎng)頁的相同區(qū)域，可以幫助用戶快速獲取所需信息，對網(wǎng)站內(nèi)容起到非常好的導(dǎo)航作用。
（3）正文內(nèi)容
正文內(nèi)容是指頁面中的主體內(nèi)容。例如一個文章類頁面，正文內(nèi)容就是文章本身；而對于展示產(chǎn)品的網(wǎng)站，正文內(nèi)容就是產(chǎn)品信息
網(wǎng)頁結(jié)構(gòu)類型
創(chuàng)建網(wǎng)頁結(jié)構(gòu)實(shí)際就是對導(dǎo)航欄、欄目、及正文內(nèi)容這三大頁面基本組成元素進(jìn)行組織布局。根據(jù)頁面內(nèi)容側(cè)重點(diǎn)的不同，我們可以把網(wǎng)頁分為導(dǎo)航型、內(nèi)容型及導(dǎo)航內(nèi)容結(jié)合型三種。 [1]
網(wǎng)頁欄目結(jié)構(gòu)一般來說，一個企業(yè)網(wǎng)站的一級欄目不應(yīng)超過8個，而欄目層次以三層以內(nèi)比較合適。網(wǎng)站欄目設(shè)置是一個網(wǎng)站結(jié)構(gòu)的基礎(chǔ)，也是網(wǎng)站導(dǎo)航系統(tǒng)的基礎(chǔ)，應(yīng)做到設(shè)置合理、層次分明。對網(wǎng)站欄目結(jié)構(gòu)的研究室網(wǎng)絡(luò)營銷導(dǎo)向網(wǎng)站建設(shè)的基礎(chǔ)。
還有網(wǎng)頁的布局，傳統(tǒng)的基于HTML的網(wǎng)站設(shè)計(jì)中，網(wǎng)頁結(jié)構(gòu)定位通常有表格定位和框架結(jié)構(gòu)，現(xiàn)在主流是采用表格定位；基于XHTML語言的網(wǎng)站設(shè)計(jì)中，典型的定位方式采用層。
網(wǎng)頁的信息排放一般要注意：重要信息放在首頁顯著位置；企業(yè)網(wǎng)站頁面內(nèi)容不宜太繁雜，與網(wǎng)絡(luò)營銷無關(guān)的信息盡量不要放置在主要頁面；在頁面左上角放置企業(yè)LOGO,這是網(wǎng)絡(luò)品牌展示的一種表現(xiàn)方式；為每個網(wǎng)頁預(yù)留一定的廣告位置；在網(wǎng)站首頁等主要頁面預(yù)留一個合作伙伴鏈接區(qū)，這是開展網(wǎng)站合作的基本需要；公司介紹、聯(lián)系信息、網(wǎng)站地圖等網(wǎng)站公共菜單一般放置在網(wǎng)頁最下方；站內(nèi)檢索、會員注冊/登陸等服務(wù)放置在右側(cè)或中上方顯眼位置。
二 什么是HTML?#“HTML是用來做網(wǎng)頁的”這句話是不太正確的,“
HTML是用于描述超文本的，網(wǎng)頁是一個超文本資源節(jié)點(diǎn)”。
HTML和網(wǎng)頁本無聯(lián)系。
從前有個少年,總沉溺于關(guān)雎之事,渴望與女神一直建立聯(lián)系
首先要建立向女神寢室的信息通信
為了簡化你對復(fù)雜的Internet的理解，我們暫時把復(fù)雜的Internet抽象成：你向女生宿舍發(fā)送信號。
為了能夠在斷網(wǎng)后繼續(xù)聯(lián)絡(luò)女神，你買來了電池和開關(guān)，然后拉了普通電線連到女神的寢室。
你的女神把小燈泡接在了電線的另一端。
那么，你只需要開閉開關(guān)，就可以控制女神屋里的燈泡了。
發(fā)送信號
關(guān)閉著小燈泡1秒鐘，代表發(fā)送一個0。
打開了小燈泡1秒鐘，代表發(fā)送一個1。
此時你可以向女神發(fā)送任意二進(jìn)制內(nèi)容了。
發(fā)送文本
你只希望發(fā)送一個“Good Night”。
所以你必須想辦法對“Good Night”進(jìn)行編碼。
'G','o','o','d'的ASCII編碼是：071，111，111，100
把ASCII編碼轉(zhuǎn)換成二進(jìn)制就是： 0100 0001 0110 1111 0110 1111 0110 0100
使用發(fā)送二進(jìn)制信號的方法發(fā)過去，你的女神需要自己解碼來閱讀出“Good”。
發(fā)送富文本
(#富文本就是比窮文本有錢的文本,簡單點(diǎn)說就是它相對普通文本可以帶有豐富的格式設(shè)置，使文本的可讀性更強(qiáng)。)
有一天，你希望發(fā)送“I miss you”。
為了表達(dá)心意，你希望加粗“you”，并使用紅色的字體發(fā)送“miss”。
而……這一根簡陋的電線似乎很難理解“加粗”和“紅色”……
不過這難不倒你的。
于是機(jī)智你發(fā)送了：I <red>miss</red> <b>you</b>
同樣機(jī)智的女神理解了這件事情。
你發(fā)明了一種語言
你很喜歡這種編碼格式。
這是一種標(biāo)記語言，于是你稱其為：TGML （To Girl Markup Language 為女孩標(biāo)記的語言）
平時你使用TGML來和你的女神通信。
TGML可以非常好的解決富文本的傳輸問題。
表白
終于你決定表白了。
你繪制了很美麗的心形圖片，還有兩個按鈕：接受、拒絕。
兩個按鈕分別會鏈接到 "接受.tgml"和"拒絕.tgml"
為了描述圖片，你使用了<img src="pic">
為了描述按鈕，你使用了<a href="接受.tgml">
(#<img src="路徑"> <a href="
URL">,image圖片 source源文件 abbr. horizontal reference水平參考)
現(xiàn)在你發(fā)送給女神的內(nèi)容，已經(jīng)不只是帶格式的富文本，而是帶鏈接的富文本。
如果把帶鏈接的富文本叫超文本。那么……
于是在這個世界上，擁有了一種能夠描述超文本的語言，叫做TGML
超文本
描述超文本的方式有很多，例如：HTML，TGML，還有markdown。
HTML的誕生是為了描述超文本。
超文本的用途也很多，例如：描述一個網(wǎng)頁，或者描述一個Word文檔。
HTML文件是超文本文件。但是超文本未必是HTML( HTML文件 ? 超文本 )。
Microsoft Word
Microsoft Word是Office的一個組件。它同樣代表一個超文本資源。
如果你解壓一個docx文件并仔細(xì)翻一翻，你能找到你剛才寫的作業(yè)，是以HTML方式記載著。
當(dāng)然，描述超文本還有markdown。所以你可以使用一些工具，比如pandoc，把markdown轉(zhuǎn)換成word。
故事的結(jié)局
你的女神有一個名字，叫瀏覽器。
你的名字叫Web服務(wù)器。
你們中間的那根線，叫HTTP。
總結(jié)
HTML用于描述超文本。描述超文本的語言有很多種。
超文本的用途很多。做網(wǎng)頁只是其中一種。
HTML最初設(shè)計(jì)時確實(shí)是為了做網(wǎng)頁考慮的。但HTML不是做網(wǎng)頁的唯一工具。
探索HTML是如何呈現(xiàn)、渲染還有它強(qiáng)大的功能時，你只是在探索你的瀏覽器的解碼能力而已。
#html一般不是ASCII編碼，而是utf-8
#HTTP除了要傳輸內(nèi)容，還要傳輸狀態(tài)碼，頭，地址等很多信息。上面的文字只是簡化了這個模型。
#<Red>不是合法的html標(biāo)簽
#去菜鳥教程速成HTML:
https://www.runoob.com/html/html-tutorial.html./n
或者去慕課網(wǎng)系統(tǒng)學(xué)習(xí)HTML:
https://www.imooc.com/learn/9
三 了解CSS和JS上面講的
HTML(超文本標(biāo)記語言, 標(biāo)記標(biāo)簽) 我們可以把它說成是靜態(tài)代碼。
“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
CSS（層疊樣式表）
使用CSS制作網(wǎng)頁時，可以有效地對頁面的布局、邊框、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。
JavaScript (是世界上最流行的網(wǎng)上最流行的腳本語言)
使用JavaScript代碼可以讓前臺變的有交互(點(diǎn)擊事件)
html5可以說還是來布局，然后用CSS樣式來規(guī)定它的皮膚，然后用JS代碼或jQuery代碼來完成對它們的控制，以達(dá)到對網(wǎng)站前臺動畫或交互的實(shí)現(xiàn)。
區(qū)別: HTML定義了網(wǎng)頁的內(nèi)容
CSS描述了網(wǎng)頁的布局
JavaScript網(wǎng)頁的行為
比喻式區(qū)別:一個人，他有頭，有手，有腳，有身體,規(guī)定他怎么說話，怎么走路這些是“html"
給這個人穿上衣服，打扮一下，這是"CSS"
讓這個人變得更漂亮一點(diǎn),扔掉過時的衣服，買一些新化妝品，這是css3
這個人還要為了生活,去工作,上班,這是”JS”
在線咨詢