HTML&CSS基礎
什麼是Web？
Web就是在Http協定基礎之上, 利用浏覽器進行通路的網站.
所謂網站(Website)，就是指在網際網路（網際網路）上，根據一定的規則，使用HTML等工具制作的用于展示特定内容的相關網頁的集合。簡單地說，網站是一種通訊工具，就像布告欄一樣，人們可以通過網站來釋出自己想要公開的資訊（資訊），或者利用網站來提供相關的網路服務（網絡服務），又或收集想要的資訊。人們可以通過網頁浏覽器來通路網站，擷取自己需要的資訊（資訊）或者享受網路服務。
什麼是網頁
在你眼前，出現在顯示器上的這個 “ 東西 ” ，就是一個網頁。網頁實際是一個檔案，它存放在世界某個角落的某一台計算機中，而這台計算機必須是與網際網路相連的。網頁經由網址（ URL ）來識别與存取，當我們在浏覽器輸入網址後，經過一段複雜而又快速的程式，網頁檔案會被傳送到你的計算機，然後再通過浏覽器解釋網頁的内容，再展示到你的眼前。
什麼是HTML：
HTML 是一種标記語言（markup language）。它告訴浏覽器如何顯示内容。HTML把内容（文字，圖檔，語言，影片等等）和「presentation」（這個内容是如何顯示，比如文字用什麼顔色顯示等等）分開。HTML使用預先定義的元素集合來識别内容形态。 元素包含一個以上的标記來包含或者表達内容。标記利用尖括号表示，而結束标記（用來訓示内容尾端）則在前面加上斜線。
HyperText Markup Language, commonly abbreviated as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology used to create web pages,[1] as well as to create user interfaces for mobile and web applications. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically and, before the advent of Cascading Style Sheets (CSS), included cues for the presentation or appearance of the document (web page), making it a markup language, rather than a programming language.
HTML簡史：
蒂姆·伯納斯-李，一名CERN（歐洲核子研究組織）的實體學家，在80年代後期設計了一種能在網路上分享文檔的方式。在這之前，網路上溝通的方式僅限于純文字傳遞，比如：電子郵件、FTP(檔案傳輸協定)和Usenet讨論版。HTML是利用内容檔案儲存至中央伺服器的方式，然後再将内容透過浏覽器傳遞至本機工作站。 它簡化了内容存取的方式，也讓更多豐富内容能夠顯示（諸如較複雜的文本格式與圖檔的顯示）。HTML 源自于SGML——它是一種複雜的文檔結構定義和内容描述（文本或圖像）文法；從HTML5起，HTML不再堅守SGML的文法。
什麼是CSS？：
Cascading Style Sheets (CSS) 是一門指定文檔該如何呈現給使用者的語言。
文檔 是資訊的集合，它使用一門 标記語言 作為結構。
将一篇文檔 呈現 給使用者是指将文檔轉換成你的聽衆能夠使用的一種形式。火狐、Chrome或IE等浏覽器，用于将文檔以可視的形式進行呈現，如在計算機螢幕、投影儀或列印機上。
CSS 如何工作
1.浏覽器先将标記語言和CSS轉換成DOM (文檔對象模型)結 構。這時DOM 就代表了電腦記憶體中的相應文檔，因為它已經 融 合了文檔内容和相應的樣式表。
2.最後浏覽器把 DOM的内容展示出來。
HTML5 中的一些有趣的新特性：
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支援
新的特殊内容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
HTML包含三個内容：
- 元素
- 如< img>表示圖檔,< p>表示段落，< a>表示超連結
- 标簽
HTML 為由一對尖括号（<>）所括起來的内容以特定含義. 這樣的辨別稱為一個 标簽（tag）. 例如:
< p>This is text within a paragraph.
- 屬性
- 特性名
- 特性值（CSS中定義)
一個完整的的文檔
關于CSS：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>A tiny document</title> </head> <body> <h1>Main heading in my document</h1> <!-- Note that it is "h" + "1", not "h" + the letter "one" --> <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p> </body> </html> - 選擇器
- .xxxx(類）
- #xxxx（ID）
- xxxx（僞類）
- xx>xxx(子選擇器）
- xx xxxx(包含後代選擇器）
- *｛｝全局選擇器
- 盒子模型
- padding
- width
- margin
- border
- 布局模型
- 流動模型：預設width：100%
- 浮動模型：設定并列
-
層模型
- absolute（脫離文檔流）
- relative（在文檔流）
- fixed（脫離文檔流）
- CSS樣式
- 背景
- 文本
- 字型
- 連結
- 清單
- 表格
- 輪廓
水準居中設定：
行内元素：如圖檔、文本可通過在父元素中設定
text-align：center
就能設定水準居中，包括标題元素也可以使用`text-align’設定水準居中
定寬塊元素：使用
margin: 0 auto
設定塊元素的水準居中
不定寬塊元素：
1.為元素外面增加< table>标簽，然後設定< table>标簽
margin: 0 auto
即可
2.将塊級元素設定為
display:inline
然後在父元素中設定
text-align:center
即可
3.通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:-50% 來實作水準居中。
垂直居中：
1.父元素高度确定的單行文本：
将父元素的line-high設定為和父元素的height相同的大小即可
2.父元素高度确定的多行文本“
父元素高度确定的多行文本、圖檔、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入 table (包括tbody、tr、td)标簽，同時設定 vertical-align：middle。
說到豎直居中，css 中有一個用于豎直居中的屬性 vertical-align，但這個樣式隻有在父元素為 td 或 th 時，才會生效。是以又要插入 table 标簽了。
方法二：在 chrome、firefox 及 IE8 以上的浏覽器下可以設定塊級元素的 display 為 table-cell，激活 vertical-align 屬性，但注意 IE6、7 并不支援這個樣式。即輸入：display：table-cell；vertical-align：middle；
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)