最全HTML與CSS基礎總結,不進來看看嗎?

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;

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章