《Python web開發》筆記 一：網頁開發基礎

網頁基礎知識

網頁的構成

網頁由html、css和Javascript構成，html是框架，CSS是樣式和裝飾，JS則是各項功能實現。咱們把網頁的組成類比成一棟房子，Html至關於房子的結構，CSS至關於房子的裝修裝飾，JavaScript至關於房子的水電通訊等使用功能。

HTML基礎知識

HTML(Hyper Text Markup Language)：超文本標記語言，經過各類標籤來表示網頁的骨架。大概有100種以上的標籤。

標籤

經常使用的標籤大概有10種左右。

如：
div標籤用於組合其餘HTML元素，自己無實在乎義。
ul, li, ol, dl, dt, dd此類標籤用於設置帶有列表內容的。
form表單相關。
table表格相關。
img 用於圖像顯示。
a標籤用於打開連接。

標籤屬性

id與class的區別
只有在絕對肯定這個元素只會出現一次的狀況下，才應該使用Id。若是你認爲之後可能須要類似的元素，就使用Class。

樣式：

<style> 
.css5_class{ background:#FFF;} /* 背景白色 class用‘.’標記*/ 
#css5_id{ background:#FF0000;} /* 背景紅色 id用‘#’標記*/ 
</style>

HTML:

<div class="css5_class">我在瀏覽器下瀏覽，內容背景將是白色</div>  
<div id="css5_id">我在瀏覽器下瀏覽，內容背景將是紅色</div>

標籤的嵌套

網頁實際上就是由各種標籤嵌套構成，所謂嵌套，就是在成對的標籤里加入另外一組成對或不成對的標籤。外層的標籤相對裏層的是父級關係，裏層相對外層是子級關係。
嵌套能夠理解成一種邏輯的關係，一樣的邏輯關係能夠有多種表現樣式,比如產品功能流程一致的狀況(HTML)，UI設計能夠有多個風格(CSS).

<img>標籤

<img> 是一個自閉標籤，沒有結束</img>。
<img src= "1.jpg「 alt="pic"> src 指 "source",圖像的URL地址,在hmtl同一文件夾下的圖片1.jpg，alt是圖片的文字描述，在1.jpg沒法顯示的時候，就會顯示pic的文字。在如鼠標放在圖片上，會有提示內容，也就是pic.

常見的頁面結構

header（頭部：標籤欄，導航欄，banner）；
content（內容：文章博客，內容列表）；
footer（腳部：網站信息，聯繫方式等）這三部分組成的。

專題研究

HTML引入CSS樣式三種方法及優先級

css的樣式引用由3種方式：內聯定義、鏈入內部CSS和鏈入外部CSS。
三者優先級筆記：內聯定義最高、內部CSS次之、外部CSS優先級最低。

塊級元素與行內元素

區別：
內容上看：通常狀況下，行內元素只能包含數據和其餘行內元素。而塊級元素能夠包含行內元素和其餘塊級元素。這種結構上的包含繼承區別可使塊級元素建立比行內元素更」大型「的結構。
格式上看：默認狀況下，行內元素不會以新行開始，而塊級元素會新起一行。

自閉標籤

常見的自閉標籤有：<br />、<hr />、<img />、<input />、<link />、<meta />

相對引用和絕對引用

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

其餘補充

Atom編輯器快捷鍵

ctrl + D   同時修改多個詞 
ctrl + \   開啓/關閉目錄樹
ctrl + alt + C   調用顏色插件
ctrl + /   註釋

補充學習資料

做業知識點補充

標籤的用法

Visit W3School!
href參數表示鏈接轉向的地址，可分爲內部書籤連接和外部網址鏈接。

內部書籤連接：錨
首先，咱們在 HTML 文檔中對錨進行命名（建立一個書籤）：
基本的注意事項 - 有用的提示
而後，咱們在同一個文檔中建立指向該錨的連接：
有用的提示
您也能夠在其餘頁面中建立指向該錨的連接：
有用的提示

target參數表示連接打開的方式。

_parent ：在上一級窗口中打開。
_blank：在新窗口中打開。
_self：在同一窗口中打開。（默認）
_top ：在瀏覽器的整個窗口中打開，忽略任何框架。

備註

• 該筆記源自網易微專業《Python web開發》1.1節

• 同窗整理Python web開發 1.1節 課程大綱

---

本文由 EverFight 創做，採用 知識共享署名 3.0 中國大陸許可協議 進行許可。