HTML與CSS基礎總結

時間  2020-06-14
標籤 html css 基礎 總結 欄目 HTML 简体版
原文   原文鏈接

HTML與CSS基礎總結

一. 認識WEB

網頁主要由文字、圖像和超連接等元素構成。固然，除了這些元素，網頁中還能夠包含音頻、視頻以及Flash等html

1.瀏覽器的分類和內核

五大常見瀏覽器介紹：web

  1. IE （edge）（Trident） 👉 (blink)
  2. 火狐（firefox）（Gecko）
  3. 谷歌（chrome）（blink）
  4. 蘋果（safari）（webkit）
  5. 歐朋（Opera）（blink 早期：presto ）

瀏覽器的內核至關於汽車的發動機，是最核心的存在,它負責將代碼轉換成用戶眼中的界面chrome

查看統計網站瀏覽器

2.圖解web標準

  • 添加入了 JS



二. HTML基礎

1.文檔類型<!DOCTYPE>

做用: 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。編輯器

2.頁面語言lang

<html lang="en">  指定html 語言種類
複製代碼

最多見的2個：ide

  1. en定義語言爲英語
  2. zh-CN定義語言爲中文

3. 字符集

<meta charset="UTF-8" />
複製代碼

utf-8是目前最經常使用的字符集編碼方式，經常使用的字符集編碼方式還有gbk和gb2312。佈局

  • gb2312 簡單中文 包括6763個漢字 GUO BIAO
  • BIG5 繁體中文 港澳臺等用
  • GBK包含所有中文字符 是GB2312的擴展，加入對繁體字的支持，兼容GB2312
  • UTF-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" />
複製代碼

**總結： **

  1. base 能夠設置總體連接的打開狀態
  2. base 寫到 <head> </head> 之間
  3. 把全部的鏈接 都默認添加 target="_blank"

7.特殊符號

一些特殊的符號，咱們再html 裏面很難或者 不方便直接 使用， 咱們此時可使用下面的替代代碼

顯示結果 描述 實體名稱
空格 &nbsp;
< 小於號 &lt;
> 大於號 &gt;
× 乘號 &times;
¥ 元（yen） &yen;
© 版權（copyright） &copy;
™ 商標 &trade;
® 註冊商標 &reg;



三. CSS選擇器

1.三種樣式表總結

樣式表 優勢 缺點 使用狀況 控制範圍
行內樣式表 書寫方便，權重高 沒有實現樣式和結構相分離 較少 控制一個標籤（少）
內部樣式表 部分結構和樣式相分離 沒有完全分離 較多 控制一個頁面（中）
外部樣式表 徹底實現結構和樣式相分離 須要引入 最多，強烈推薦 控制整個站點（多）

2.CSS基礎選擇器

①標籤選擇器

②類選擇器

③id選擇器

④通配符選擇器

基礎選擇器總結

選擇器 做用 缺點 使用狀況 用法
標籤選擇器 能夠選出全部相同的標籤，好比p 不能差別化選擇 較多 p { color：red;}
類選擇器 能夠選出1個或者多個標籤 能夠根據需求選擇 很是多 .nav { color: red; }
id選擇器 一次只能選擇器1個標籤 只能使用一次 不推薦使用 #nav {color: red;}
通配符選擇器 選擇全部的標籤 選擇的太多，有部分不須要 不推薦使用 * {color: red;}

3.font字體

屬性 表示 注意點
font-size 字號 咱們一般用的單位是px 像素，必定要跟上單位
font-family 字體 實際工做中按照團隊約定來寫字體
font-weight 字體粗細 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位
font-style 字體樣式 記住傾斜是 italic 不傾斜 是 normal 工做中咱們最經常使用 normal
font 字體連寫 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號 和 字體 必須同時出現

4.CSS外觀屬性總結

屬性 表示 注意點
color 顏色 咱們一般用 十六進制 好比 並且是簡寫形式 #fff
line-height 行高 控制行與行之間的距離
text-align 水平對齊 能夠設定文字水平的對齊方式
text-indent 首行縮進 一般咱們用於段落首行縮進2個字的距離 text-indent: 2em;
text-decoration 文本修飾 記住 添加 下劃線 underline 取消下劃線 none

5.連接僞類選擇器

  • a:link /* 未訪問的連接 */
  • a:visited /* 已訪問的連接 */
  • a:hover /* 鼠標移動到連接上 */
  • a:active /* 選定的連接 */

6.複合選擇器總結

①後代選擇器

②子元素選擇器

③交集選擇器

④並集選擇器

複合選擇器總結

選擇器 做用 特徵 使用狀況 隔開符號及用法
後代選擇器 用來選擇元素後代 是選擇全部的子孫後代 較多 符號是空格 .nav a
子代選擇器 選擇 最近一級元素 只選親兒子 較少 符號是**>** .nav>p
交集選擇器 選擇兩個標籤交集的部分 既是 又是 較少 沒有符號 p.one
並集選擇器 選擇某些相一樣式的選擇器 能夠用於集體聲明 較多 符號是逗號 .nav, .header
相鄰元素選擇器 選擇相鄰兄弟元素的下一個元素 相鄰兄弟後的下一個元素 較少 ul+h2
同輩元素選擇器 選擇相鄰兄弟的全部元素 相鄰兄弟的全部元素 較少 prev~sibings
連接僞類選擇器 給連接更改狀態 較多 重點記住 a{} 和 a:hover 實際開發的寫法

7.背景總結

屬性 做用 值
background-color 背景顏色 預約義的顏色值/十六進制/RGB代碼
background-image 背景圖片 url(圖片路徑)
background-repeat 是否平鋪 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 x和y座標
background-attachment 背景附着 fixed(背景固定)
背景簡寫 書寫更簡單 背景顏色,背景圖片地址,背景平鋪,背景滾動,背景位置
背景色半透明 背景顏色半透明 background:rgba-(0,0,0,0.3);後面必須是4個值



四. 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.優先級

選擇器 選擇器權重
繼承 或者 * 0，0，0，0
元素選擇器 0，0，0，1
類選擇器，僞類選擇器 0，0，1，0
ID選擇器 0，1，0，0
行內樣式style="" 1，0，0，0
!important 重要的 無窮大

若是盒子裏的圖片大於盒子寬高, 那麼設置圖片的寬爲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中,新增了盒子陰影,這樣咱們的盒子就能夠添加陰影。image-20200610093824503

語法:

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 14px rgba(0,0,0,.3) 複製代碼
值 描述
h-shadow 必需。水平陰影的位置。容許負值
v-shadow 必需。垂直陰影的位置。容許負值
blur 可選。陰影的尺寸,虛影
color 可選。陰影的顏色
inset 可選。將外部陰影改成內部陰影,不經常使用!

注意：

  • 默認的是外陰影(outset),可是不能夠寫這個單詞,不然致使陰影無效
  • 盒子陰影 不佔用空間，不會影響其餘盒子排列

②文字陰影

在CSS3中,咱們可使用text-shadow屬性應用於文本

語法:

text-shadow: h-shadow v-shadow blur color;
複製代碼
值 描述
h-shadow 必需。水平陰影的位置。容許負值
v-shadow 必需。垂直陰影的位置。容許負值
blur 可選。模糊的距離。
color 可選。陰影的顏色
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程