01-HTML+CSS/03-編寫樣式-CSS屬性-Chrome調(diào)試-瀏覽器渲染

編寫樣式-CSS屬性-Chrome調(diào)試-瀏覽器渲染

元素的語義化

用正確的元素做正確的事情
理論上來說沐兵，所有的HTML元素，我們都能實現(xiàn)相同的事情
標簽語義化的好處
- 方便代碼維護
- 減少讓開發(fā)者之間的溝通成本
- 能讓語音合成工具正確識別網(wǎng)頁元素的用途擦秽，以便做出正確的反應
- 有利于SEO

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: block;
      }

      .box {
        display: block;
        font-size: 2em;
        margin-block-start: 0.67em;
        margin-block-end: 0.67em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>我是h1元素</h1>
    <p>我是p元素</p>
    <div>我是div元素</div>
    <span>我是span元素</span>
    <!-- 用div來模擬h1元素 -->
    <div class="box">我也是div元素</div>
  </body>
</html>

SEO

搜索引擎優(yōu)化
- 概念剖析
  - 通過了解搜索引擎的運作規(guī)則調(diào)整來調(diào)整網(wǎng)站，以提高網(wǎng)站在有關搜索引擎內(nèi)排名的方式
- 蛋糕網(wǎng)站為例
  - 推薦使用h1~h6魁兼，但是不要強制大量使用

字符編碼

統(tǒng)一的件甥，標準的轉(zhuǎn)換規(guī)則
UTF-8

課題總結(jié)

字符實體
- 空格
- 小于
- 大于
URL
元素的語義化
SEO
字符編碼

邂逅CSS

CSS
- 層疊樣式表
- 串聯(lián)樣式表
- 級聯(lián)樣式表
- 串接樣式表
- 階層式樣式表
- 是為網(wǎng)頁添加樣式的代碼
CSS是一種語言？
- CSS也不是真正的編程語言孽锥，甚至不是標記語言嚼黔，它是一門樣式表語言
- 是一種計算機語言，但不算是一種編程語言
CSS的歷史
- 漸漸采用 modules發(fā)展
CSS
- CSS的出現(xiàn)是為了美化HTML的惜辑，并且讓結(jié)構(gòu)與樣式分離

CSS書寫

屬性 + 屬性的值
Property name + Property value

CSS的書寫方式

行內(nèi)樣式表
內(nèi)聯(lián)樣式表
外聯(lián)樣式表

行內(nèi)樣式

存在于HTML元素的style屬性之中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="color: red; font-size: 30px">我是div元素</div>
    <h1 style="font-size: 100px">我是標題</h1>
  </body>
</html>

內(nèi)聯(lián)樣式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .div-one {
        color: red;
        font-size: 30px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="div-one">我是div元素</div>
    <div>我也是div元素</div>
    <p>我是段落</p>
    <h1>我是標題</h1>
  </body>
</html>

外聯(lián)樣式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="title">我是01中的title</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="title">我是02中的title</div>
  </body>
</html>

.title {
  font-size: 30px;
  color: red;
  background-color: purple;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles/index.css">
  </head>
  <body>
    <h1>我是h1元素</h1>
    <div class="title">我是01中的title</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles/index.css">
  </head>
  <body>
    <div class="title">我是02中的title</div>
  </body>
</html>

index.css

@import url(./style.css);
@import url(./test.css);

style.css

.title {
  font-size: 30px;
  color: red;
  background-color: purple;
}

test.css

h1 {
  color: orange;
}

CSS注釋

/* 注釋 */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* css的注釋 */
      .box {
        font-size: 30px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">我是盒子</div>
  </body>
</html>

CSS的常見屬性

font-size

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="title">Hello World</div>
</body>
</html>

color

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      font-size: 24px;
      color: chocolate;
    }
  </style>
</head>
<body>
  <div class="title">Hello World</div>
</body>
</html>

background-color

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        font-size: 24px;
        color: chocolate;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="title">Hello World</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        font-size: 24px;
        color: chocolate;
        background-color: black;
      }

      span {
        display: block;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="title">Hello World</div>
    <span>Hello World</span>
  </body>
</html>

width/height

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        width: 200px;
        height: 200px;
        font-size: 24px;
        color: chocolate;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="title">Hello World</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        width: 200px;
        height: 200px;
        font-size: 24px;
        color: chocolate;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="title">Hello World</div>
    <span>Hello World</span>
  </body>
</html>

星球介紹案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        width: 500px;
        background-color: skyblue;
        /* 方案一 */
        /* display: inline-block;
        vertical-align: top; */
        /* 方案二 */
        float: left;
      }

      .album {
        width: 500px;
      }

      .keyword {
        font-size: 30px;
        color: #ffffff;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <h1>星球介紹</h1>
    <div class="item">
      <h2>木星</h2>
      <img class="album" src="../images/muxing.jpg" alt="木星" />
      <p>
        <span class="keyword">木星(Jupiter)</span
        >是太陽系八大行星中體積最大唬涧、自轉(zhuǎn)最快的行星，從內(nèi)向外的第五顆行星盛撑。它的質(zhì)量為太陽的千分之一碎节，是太陽系中其它七大行星質(zhì)量總和的2.5倍。由于木星與土星抵卫、天王星狮荔、海王星皆屬氣體行星，因此四者又合稱類木行星（木星和土星合稱氣態(tài)巨行星）介粘。木星是一個氣態(tài)巨行星殖氏，占所有太陽系行星質(zhì)量的70%，主要由氫組成姻采，占其總質(zhì)量的75%雅采，其次為氦，占總質(zhì)量的25%慨亲，巖核則含有其他較重的元素婚瓜。人類所看到的通常是大氣中云層的頂端，壓強比1個大氣壓略高刑棵。
      </p>
    </div>
    <div class="item">
      <h2>地球</h2>
      <img class="album" src="../images/diqiu.jpg" alt="" />
      <p>
        <span class="keyword">地球(Earth)</span
        >是太陽系八大行星之一闰渔，按離太陽由近及遠的次序排為第三顆，也是太陽系中直徑铐望、質(zhì)量和密度最大的類地行星冈涧，距離太陽1.5億公里茂附。地球自西向東自轉(zhuǎn)，同時圍繞太陽公轉(zhuǎn)《焦現(xiàn)有40~46億歲营曼，
        [1]
        它有一個天然衛(wèi)星——月球，二者組成一個天體系統(tǒng)——地月系統(tǒng)愚隧。46億年以前起源于原始太陽星云蒂阱。
      </p>
    </div>
  </body>
</html>

額外補充2

link元素

外部資源鏈接元素，規(guī)范了文檔與外部資源的關系
link元素通常是在head元素中
最常用的鏈接是樣式表
- 站點圖標 favicon圖標
link元素最常見的屬性
- href 此屬性指定被鏈接資源的URL
- ref 指定鏈接類型
  - icon 站點圖標
  - stylesheet CSS樣式
  - dns-prefetch

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>京東</title>
    <link rel="stylesheet" href="./style/style.css">
    <link rel="icon" href="../images/favicon.ico">
  </head>
  <body></body>
</html>

body {
  background-color: skyblue;
}

進制

進位制是一種計數(shù)方式狂塘，亦稱進位計數(shù)法或位值記數(shù)法
當數(shù)字達到某個值時录煤，進一位
十進制
- 當數(shù)字到9的時候，用一位已經(jīng)表示不了荞胡，那么就進一位變成2位
- 在東北沒有什么是一頓燒烤不能解決的妈踊，如果有，那就兩頓
二進制
- 0b開頭
八進制
- 0o開頭
十六進制
- 0x開頭
如果520情人節(jié)忘記了泪漂，給大家一個建議廊营，在522那天過，因為十六進制的522萝勤，對應的十進制1314

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(99);
      console.log(0b11000001);
    </script>
  </body>
</html>

CSS顏色

表示方法
- 顏色關鍵字
- RGB
- RGBA
- #FF0000 #F00

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        /* 顏色關鍵字 */
        /* color: red;
        background-color: black; */
        /* rgb */
        /* background-color: rgb(255, 0, 0); */
        /* #000000 */
        /* background-color: #000000; */
        /* #000 */
        /* background-color: #000; */
        /* rgba */
        background-color: rgba(255, 0, 0, 1);
      }
    </style>
  </head>
  <body>
    <div class="box">哈哈哈</div>
  </body>
</html>

內(nèi)容回顧

一露筒、知識點補充

1.1.元素語義化

用正確的元素去做正確的事情

1.2.SEO優(yōu)化

SEO原理
過程/流程

1.3.字符串編碼

計算機的本質(zhì) 010101
編碼/解碼
歷史

二、邂逅css

2.1.認識CSS

css的概念
作用
- 美化網(wǎng)頁
歷史
- css3 -》 Modules

2.2.css規(guī)則

屬性名：屬性值

2.3.三種編寫規(guī)則

行內(nèi)樣式
內(nèi)部樣式
外部樣式
- link
- @import url("")

2.4.css的注釋

/* 注釋 */

2.5.常見的CSS

常見的CSS
- font-size
- color
- background-color
- width
- height

2.6.案例練習

星球介紹

三敌卓、知識點補充

3.1.link元素

link鏈接站點圖標
dns-prefetch

3.2.進制

人類
- 十進制
計算機
- 二進制
- 八進制
- 十六進制

3.3.顏色表示方法

顏色表示法
rgb
rgba
#aabbcc

3.4.Chrome調(diào)試工具

3.5.瀏覽器的渲染流程

課后作業(yè)

一. 說說你對元素語義化的理解

元素語義化就是用正確的元素做正確的事情慎式。雖然在理論上，所有的html元素都可以通過css樣式實現(xiàn)同樣的事情趟径，但是這么做會使事情復雜化瞬捕，所以我們需要元素語義化來降低復雜度

元素語義化在我們實際的開發(fā)重有很多好處，比如

提高代碼的閱讀性和可維護性
減少程序員之間的溝通成本
能讓語音合成工具正確識別網(wǎng)頁的用途舵抹，以便做出正確的反應
有利于seo

二. 說說你對SEO的理解

SEO就是搜索引擎優(yōu)化
SEO通過了解搜索引擎的運行規(guī)則來調(diào)整網(wǎng)站肪虎，以提高網(wǎng)站的曝光度，以及網(wǎng)站的排名

三. 什么是字符編碼惧蛹？

計算機只認識0和1扇救，但我們各個國家的人都需要在計算機上使用各自的文字，為了在計算機上也能表示香嗓，存儲和處理像文字迅腔、符號等等之類的字符，就必須將這些字符轉(zhuǎn)換為二進制

于是就出現(xiàn)了字符編碼靠娱，字符編碼將我們的自然語言編碼成二進制給計算機看沧烈，然后再把這些二進制解碼為自然語言給我們看

四. CSS編寫樣式的方式以及應用場景

最常見的css樣式有：

font-size: 設置文字字體大小
color：設置前景色(顏色)
background-color：設置背景色
width：設置寬度
height：設置高度

五. 最常見的CSS樣式以及作用

六. 自行查找2個案例練習

根據(jù)之前學習的HTML元素和CSS樣式找2個案例練習

七. 顏色的表示方式

每個同學自己總結(jié);
- 顏色關鍵字
- rgb()
- rgba();
- #aabbcc

最后編輯于：2022.04.10 23:57:06

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市像云，隨后出現(xiàn)的幾起案子锌雀，更是在濱河造成了極大的恐慌蚂夕，老刑警劉巖，帶你破解...
沈念sama閱讀 206,013評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件腋逆，死亡現(xiàn)場離奇詭異婿牍，居然都是意外死亡，警方通過查閱死者的電腦和手機惩歉，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,205評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門等脂，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人撑蚌，你說我怎么就攤上這事上遥。” “怎么了争涌？”我有些...
開封第一講書人閱讀 152,370評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵粉楚，是天一觀的道長。經(jīng)常有香客問我第煮，道長，這世上最難降的妖魔是什么抑党？我笑而不...
開封第一講書人閱讀 55,168評論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任包警，我火速辦了婚禮，結(jié)果婚禮上底靠，老公的妹妹穿的比我還像新娘害晦。我一直安慰自己，他們只是感情好暑中，可當我...
茶點故事閱讀 64,153評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布壹瘟。她就那樣靜靜地躺著，像睡著了一般鳄逾。火紅的嫁衣襯著肌膚如雪稻轨。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 48,954評論 1贊 283
城市分裂傳說
那天雕凹，我揣著相機與錄音殴俱，去河邊找鬼。笑死枚抵，一個胖子當著我的面吹牛线欲，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播汽摹，決...
沈念sama閱讀 38,271評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼李丰，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了逼泣？” 一聲冷哼從身側(cè)響起趴泌，我...
開封第一講書人閱讀 36,916評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤舟舒，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后踱讨，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體魏蔗，經(jīng)...
沈念sama閱讀 43,382評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,877評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年痹筛，在試婚紗的時候發(fā)現(xiàn)自己被綠了莺治。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 37,989評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡帚稠，死狀恐怖谣旁，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情滋早，我是刑警寧澤榄审，帶...
沈念sama閱讀 33,624評論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站杆麸，受9級特大地震影響搁进，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜昔头，卻給世界環(huán)境...
茶點故事閱讀 39,209評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一饼问、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧揭斧，春花似錦莱革、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,199評論 0贊 19
一樁弒父案盅视，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至旦万，卻和暖如春闹击，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背成艘。一陣腳步聲響...
開封第一講書人閱讀 31,418評論 1贊 260
情欲美人皮
我被黑心中介騙來泰國打工拇砰，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人狰腌。一個月前我還...
沈念sama閱讀 45,401評論 2贊 352
代替公主和親
正文我出身青樓除破，卻偏偏與公主長得像，于是被迫代替她去往敵國和親琼腔。傳聞我的和親對象是個殘疾皇子瑰枫，可洞房花燭夜當晚...
茶點故事閱讀 42,700評論 2贊 345