網(wǎng)頁基礎(chǔ)知識

網(wǎng)頁的構(gòu)成

網(wǎng)頁由html、css和Javascript構(gòu)成，html是框架，CSS是樣式和裝飾，JS則是各項功能實現(xiàn)。我們把網(wǎng)頁的組成類比成一棟房子，Html相當(dāng)于房子的結(jié)構(gòu)，CSS相當(dāng)于房子的裝修裝飾，JavaScript相當(dāng)于房子的水電通信等使用功能。

HTML基礎(chǔ)知識

HTML(Hyper Text Markup Language)：超文本標(biāo)記語言，通過各種標(biāo)簽來表示網(wǎng)頁的骨架。大概有100種以上的標(biāo)簽。

標(biāo)簽

常用的標(biāo)簽大概有10種左右。

如：

div標(biāo)簽用于組合其他HTML元素，本身無實在意義。

ul, li, ol, dl, dt, dd此類標(biāo)簽用于設(shè)置帶有列表內(nèi)容的。

form表單相關(guān)。

table表格相關(guān)。

img 用于圖像顯示。

a標(biāo)簽用于打開鏈接。

標(biāo)簽屬性

id與class的區(qū)別

只有在絕對確定這個元素只會出現(xiàn)一次的情況下，才應(yīng)該使用Id。如果你認(rèn)為以后可能需要相似的元素，就使用Class。

樣式：

.css5_class{ background:#FFF;} /* 背景白色 class用‘.’標(biāo)記*/

#css5_id{ background:#FF0000;} /* 背景紅色 id用‘#’標(biāo)記*/

HTML:

我在瀏覽器下瀏覽，內(nèi)容背景將是白色我在瀏覽器下瀏覽，內(nèi)容背景將是紅色

標(biāo)簽的嵌套

網(wǎng)頁實際上就是由各類標(biāo)簽嵌套構(gòu)成，所謂嵌套，就是在成對的標(biāo)簽里加入另一組成對或不成對的標(biāo)簽。外層的標(biāo)簽相對里層的是父級關(guān)系，里層相對外層是子級關(guān)系。

嵌套可以理解成一種邏輯的關(guān)系，同樣的邏輯關(guān)系可以有多種表現(xiàn)樣式,好比產(chǎn)品功能流程一致的情況(HTML)，UI設(shè)計可以有多個風(fēng)格(CSS).

標(biāo)簽

是一個自閉標(biāo)簽，沒有結(jié)束。

src 指 "source",圖像的URL地址,在hmtl同一文件夾下的圖片1.jpg，alt是圖片的文字描述，在1.jpg無法顯示的時候，就會顯示pic的文字。在如鼠標(biāo)放在圖片上，會有提示內(nèi)容，也就是pic.

常見的頁面結(jié)構(gòu)

header(頭部：標(biāo)簽欄，導(dǎo)航欄，banner)；

content(內(nèi)容：文章博客，內(nèi)容列表)；

footer(腳部：網(wǎng)站信息，聯(lián)系方式等)這三部分組成的。

專題研究

css的樣式引用由3種方式：內(nèi)聯(lián)定義、鏈入內(nèi)部CSS和鏈入外部CSS。

三者優(yōu)先級筆記：內(nèi)聯(lián)定義最高、內(nèi)部CSS次之、外部CSS優(yōu)先級最低。

區(qū)別：

內(nèi)容上看：一般情況下，行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。而塊級元素可以包含行內(nèi)元素和其他塊級元素。這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)。

格式上看：默認(rèn)情況下，行內(nèi)元素不會以新行開始，而塊級元素會新起一行。

常見的自閉標(biāo)簽有：
、

---

、、、、

會判斷相對引用的位置及寫法。

其他補充

Atom編輯器快捷鍵

ctrl + D 同時修改多個詞

ctrl + \ 開啟/關(guān)閉目錄樹

ctrl + alt + C 調(diào)用顏色插件

ctrl + / 注釋

作業(yè)知識點補充

Visit W3School!

href參數(shù)表示連接轉(zhuǎn)向的地址，可分為內(nèi)部書簽鏈接和外部網(wǎng)址連接。

內(nèi)部書簽鏈接：錨

首先，我們在 HTML 文檔中對錨進行命名(創(chuàng)建一個書簽)：

基本的注意事項 - 有用的提示

然后，我們在同一個文檔中創(chuàng)建指向該錨的鏈接：

有用的提示

您也可以在其他頁面中創(chuàng)建指向該錨的鏈接：

有用的提示

target參數(shù)表示鏈接打開的方式。

_parent ：在上一級窗口中打開。

_blank：在新窗口中打開。

_self：在同一窗口中打開。(默認(rèn))

_top ：在瀏覽器的整個窗口中打開，忽略任何框架。

備注

該筆記源自網(wǎng)易微專業(yè)《Python web開發(fā)》1.1節(jié)

總結(jié)

以上是生活随笔為你收集整理的python notebook右侧网页_《Python web开发》笔记 一：网页开发基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。