HTML與CSS基礎總結
一. 認識WEB
1.浏覽器的分類和核心
2.圖解web标準
二. HTML基礎
1.文檔類型
2.頁面語言lang
3. 字元集
4.标簽語義化
5.錨點定位
6.base 标簽
7.特殊符号
三. CSS選擇器
1.三種樣式表總結
2.CSS基礎選擇器
3.font字型
4.CSS外觀屬性總結
5.連結僞類選擇器
6.複合選擇器總結
7.背景總結
四. CSS的三大特性
1.層疊性
2.繼承性
3.優先級
五. CSS布局問題與邊框陰影樣式
1.外邊距合并
2.圓角邊框
3.盒子陰影和文字陰影
一. 認識WEB
網頁主要由文字、圖像和超連結等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視訊以及Flash等
1.浏覽器的分類和核心
五大常見浏覽器介紹：
IE （edge）（Trident） 👉 (blink)火狐（firefox）（Gecko）谷歌（chrome）（blink）蘋果（safari）（webkit）歐朋（Opera）（blink 早期：presto ）
本次給大家推薦一個免費的學習蔻qun，前面603 中間985最後993，
裡面概括應用網站開發，css，html，JavaScript，jQuery，Vue、Ajax，node，
angular等。對web前端開發技術感興趣的同學，
不管你是小白還是大牛我都歡迎，每天技術分享。
浏覽器的核心相當于汽車的發動機，是最核心的存在,它負責将代碼轉換成使用者眼中的界面
檢視統計網站
2.圖解web标準
添加入了JS
二. HTML基礎
1.文檔類型<!DOCTYPE>
作用: 聲明位于文檔中的最前面的位置，處于 标簽之前。此标簽可告知浏覽器文檔使用哪種 HTML 或 XHTML 規範。
2.頁面語言lang
<html lang="en"> 指定html 語言種類
最常見的2個：
en定義語言為英語
zh-CN定義語言為中文
3. 字元集
<meta charset="UTF-8" />
utf-8是目前最常用的字元集編碼方式，常用的字元集編碼方式還有gbk和gb2312。
gb2312 簡單中文 包括6763個漢字 GUO BIAOBIG5 繁體中文 港澳台等用GBK包含全部中文字元 是GB2312的擴充，加入對繁體字的支援，相容GB2312UTF-8則基本包含全世界所有國家需要用到的字元這句代碼非常關鍵， 是必須要寫的，否則可能引起亂碼的情況
作用: 這句話是讓 html 檔案是以 UTF-8 編碼儲存的, 浏覽器根據編碼去解碼對應的html内容
4.标簽語義化
一個需求可以用不同的标簽來完成，那麼這之間有什麼差別呢？一個是标簽語義強，起強調作用。一個是沒有語義，沒有強調作用
語義好的網頁更受SEO的喜歡，在搜尋引擎裡面的排名會更靠前
SEO優化 ===> 在輸入關鍵字的時候，搜尋引擎會羅列很多很多的網頁出來，而使用者基本習慣都是點前面的網頁，不會去點後面的網頁，是以如果網頁在搜尋引擎中的排名更加靠前，那麼自然而然會帶來更多的使用者點選通路。
如何優化（了解）：
1.花錢買關鍵字 見效快，花錢多
2.讓頁面更加規範，語義更加明确（在合适的地方使用合适的标簽）
作用: 根據标簽的語義，在合适的地方給一個最為合理的标簽，讓結構更清晰。
5.錨點定位
通過建立錨點連結，使用者能夠快速定位到目标内容。
建立錨點連結分為兩步：
<!--1.使用<a href="#id名">連結文本</a>點選,錨點到對應的位置 -->
<a href="#two"> 點選進行錨點跳轉 </a>
<!-- 2.使用相應的id名标注跳轉目标的位置 -->
<h3 id="two">錨點目标</h3>
6.base 标簽
<base target="_blank" />
**總結： **
base 可以設定整體連結的打開狀态
base 寫到 之間
把所有的連接配接 都預設添加 target="_blank"
7.特殊符号
一些特殊的符号，我們再html 裡面很難或者 不友善直接 使用， 我們此時可以使用下面的替代代碼
三. CSS選擇器
在這裡插入圖檔描述
1.三種樣式表總結
2.CSS基礎選擇器
①标簽選擇器
②類選擇器
③id選擇器
④通配符選擇器
基礎選擇器總結
3.font字型
4.CSS外觀屬性總結
5.連結僞類選擇器
a:link /* 未通路的連結 /
a:visited / 已通路的連結 /
a:hover / 滑鼠移動到連結上 /
a:active / 標明的連結 */
6.複合選擇器總結
①後代選擇器
②子元素選擇器
③交集選擇器
④并集選擇器
複合選擇器總結
7.背景總結
四. CSS的三大特性
CSS有三個非常重要的三個特性：層疊性、繼承性、優先級
1.層疊性
相同選擇器給設定相同的樣式，此時一個樣式就會覆寫(層疊) 另一個沖突的樣式, 層疊行主要解決沖突的問題
層疊性原則：
樣式沖突, 遵循的原則就是就近原則, 哪個樣式離結構進, 就執行哪個樣式樣式不沖突, 不會層疊
2.繼承性
CSS中的繼承：子标簽會繼承父标簽的某些樣式, 如文本顔色和字号。
簡單的了解就是：子承父業
恰當地使用繼承可以簡化代碼，降低CSS樣式的複雜性子元素可以繼承父元素的樣式( text- ,font- , line- 這些元素的開頭可以繼承,以及color屬性)
行高的繼承性
body {
font:12px/1.5 Microsoft YaHei;
}
如果子元素沒有設定行高，則會繼承父元素的行高為1.5
此時子元素的行高是：目前元素文字大小 * 1.5
body行高 1.5 這樣最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高
3.優先級
如果盒子裡的圖檔大于盒子寬高, 那麼設定圖檔的寬為100%
五. CSS布局問題與邊框陰影樣式
1.外邊距合并
1.1相鄰元素垂直外邊距的合并
當上下相鄰的兩個塊元素(兄弟關系)相遇時,如果上面元素有下邊距margin-bottom下面的元素有上外邊距margin-top，則他們呢的垂直間距不是margin-bottom與margin-top之和。取兩個值中的較大者這種現象被稱為,相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）
解決方案：盡量隻給一個盒子添加margin值。
1.2 嵌套塊元素垂直外邊距的合并（塌陷）
對于兩個嵌套關系(父子關系)的塊元素，父元素有上外邊距同時子元素也有上外邊距
父元素和子元素的上外邊距和發生合并
合并後的外邊距為: 取兩者外邊距較大者
解決方案：
①、可以為父元素定義上邊框
②、可以為外父元素定義上内邊距
③、可以為父元素添加 overflow:hidden
2.圓角邊框
在CSS3中,新增了圓角邊框樣式,這樣我們的盒子就可以變圓角了。
border-radius屬性用于設定元素的外邊框圓角
border-radius:length;
參數可以為數值或百分比如果是正方形,想要按設定為一個圓,把數值修改為高度或者寬度的一半即可,或者直接寫50%如果是個矩形，設定高度的一般就可以做該屬性是一個簡寫屬性，可以跟四個值，分别是左上角、右上角、右下角、左下角分開寫：border-top-left-radius、border-top-right-radius·····
3.盒子陰影和文字陰影
①.盒子陰影
在CSS3中,新增了盒子陰影,這樣我們的盒子就可以添加陰影。
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 14px rgba(0,0,0,.3)
注意：
預設的是外陰影(outset),但是不可以寫這個單詞,否則導緻陰影無效
盒子陰影不占用空間，不會影響其他盒子排列
②文字陰影
在CSS3中,我們可以使用text-shadow屬性應用于文本
文法:
text-shadow: h-shadow v-shadow blur color;