網頁基礎知識
網頁的構成
網頁由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節
本文由 EverFight 創作，採用 知識共享署名 3.0 中國大陸許可協議 進行許可。