朝花夕拾《精通CSS》1、HTML & CSS 的基礎

時間 2019-12-02

標籤朝花夕拾精通CSS html css 基礎欄目 HTML 简体版

原文原文鏈接

1、背景

翻出我4年前看的《精通CSS》一書，惋惜當初沒有整理讀書筆記的習慣，最近又不多寫前端，遂不少東西、知識點遺忘了，恰且如今 css 也有些變化和進步，遂一塊兒打包整理，輸出成幾篇 blog 系列，以犒本身。css

2、HTML

一、什麼是 HTML？

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。html

超文本(Hypertext)是用超連接的方法，將各類不一樣空間的文字信息組織在一塊兒的網狀文本。前端

二、HTML 歷史

1980年，物理學家蒂姆·伯納斯-李在歐洲核子研究中心（CERN）在承包工程期間，爲使CERN的研究人員使用並共享文檔，他提出並建立原型系統ENQUIRE。html5

ENQUIRE 即最先的雛形。css3

1993年中期，互聯網工程任務組（IETF）發佈首個HTML規範的提案：超文本標記語言（HTML）互聯網草案，由伯納斯-李與丹·康納利撰寫。瀏覽器

1995年11月24日，HTML 2.0做爲IETF RFC 1866發佈。ide

2000年，HTML成爲國際標準（ISO/ IEC15445：2000）。測試

1997年12月18日，HTML 4.0做爲W3C推薦標準發佈。字體

1999年12月24日，HTML 4.01做爲W3C推薦標準發佈。動畫

HTML 4.01 又稱 XHTML1.0，

2014年10月28日，HTML 5做爲W3C推薦標準發佈。

三、微格式

因爲 HTML 中缺乏相應的元素，很難突出顯示人、地點或日期等類型的信息。爲了解決這個問題，有一組開發人員決定開發一套標準的命名約定和標記模式來表示這些數據。這些命名約定基於 vcard 和 icalendar 等現有的數據格式，如今稱爲微格式（microformat）。

當前有 9 個正式的微格式，還有 14 個格式草案。例如一些：

ロ用於日期、日曆和事件的 hCalendar

ロ用於人和組織的 hcard

ロ用於人之間的關係的 XFN

口用於產品說明的 hproduct（草案）

口用於原料和烹調步驟的 hrecipe（草案）

ロ用於產品和事件審查的 hreview（草案）

口用於博客帖子等片斷式內容的 hatom（草案）

四、什麼是 XML ？

可擴展標記語言（英語：Extensible Markup Language ，XML ）。

一、跟 HTML 的共同點：

都是標記語言，爲了標記數據的含義。

二、跟 HTML 的不一樣點：

HTML 只是用來描述網頁數據，而是 XML 能夠用來描述幾乎全部數據。

HTML 的標籤是 W3C 制定好的，但 XML 徹底能夠自定義標籤，創造本身的規範。

題外話，筆者以前用到 Web service 技術，用到的數據傳輸格式就是 XML。

五、什麼是 XHTML？

可擴展超文本標記語言（英語：eXtensible HyperText Markup Language，XHTML）

爲了約束 HTML 鬆散的語法，把嚴格的 XML 套在了 HTML 身上，即誕生了 XHTML。

XHTML 就是以 XML 的語法形式來寫 HTML。

語法的嚴格體如今——例如：

一、元素名稱和屬性必須小寫

二、全部元素必須是封閉的，即要有結束標籤。而空元素的話可用/>來結束。

正確：<br />

錯誤：<br>

三、全部 XHTML 屬性必須包含引號

正確：<td rowspan="3">

錯誤：<td rowspan=3>

四、禁止屬性簡化

正確：<dl compact="compact">

錯誤：<dl compact>

五、必須包含一個文件頭聲明 <!DOCTYPE>

文檔標記類型<!DOCTYPE html>用於HTML5

六、語義化HTML

（1）語義化HTML做用

一、利於 SEO (搜索引擎)

二、利於爬蟲

三、方便無障礙瀏覽

（2）例1：strong / em / i / b幾個標籤的區別

strong 標籤表示很強的強調，表現爲字體變粗。

em 標籤表示稍強的強調，表現爲斜體。

i 標籤表示由於某種緣由和正常文本不一樣的文本，例如專業術語、外語短語等。

b 標籤沒有語義，建議用 css 的 font-weight:bold。

（3）例2：語義化HTML 實例 demo

這裏模仿一個文章詳情頁的網頁：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>文章詳情</title>
  </head>
  <body>
    <nav>
      <ul>
        <li>網站導航欄 - 1</li>
        <li>網站導航欄 - 2</li>
      </ul>
    </nav>
    <article>
      <header>
        <h1>文章標題</h1>
        <h2>文章副標題</h2>
      </header>

      <aside>
        <h1>文章做者</h1>
        <p>文章做者簡述</p>
        <time datetime="2019-07-26" pubdate>文章發佈日期</time>
      </aside>

      <figure>
        <img src="#" alt="文章配圖" />
        <figcaption>文章配圖說明</figcaption>
      </figure>

      <p>文章內容..</p>
      <p>文章內容..</p>
      <p>文章內容..</p>

      <section>
        文章互動區（點贊等）
      </section>

      <section>
        文章分享區
      </section>

      <article>
        <h2>評論區</h2>
        <article>
          <header>
            <h3>評論者: 專業水軍</h3>
            <p>
              <time pubdate datetime="2018-03-23T15:10-08:00">~1 min ago</time>
            </p>
          </header>
          <p>還行</p>
        </article>

        <article>
          <header>
            <h3>評論者: 大水怪</h3>
            <p>
              <time pubdate datetime="2018-03-23T15:10-08:00">~1 hour ago</time>
            </p>
          </header>
          <p>樓上說的對</p>
        </article>
      </article>

      <footer>
        文章版權說明
      </footer>
    </article>
  </body>
</html>

注意點：

一、header 和 footer 適用於 article 或者整個 body

二、acticle、nav、aside 能夠理解爲特殊的section，若是能夠用 article、nav、aside 就不要用section，實在沒有實際意義的就用 div。

（4）語義化HTML的市面使用狀況

我這裏隨便挑了幾家，

國外的 medium，支持的還不錯。

但國內的知乎、簡書，都是 div + span 黨，仍是不行。

更多的HTML5標籤參考：HTML5 標籤列表

七、ARIA

ARIA（Accessible Rich Internet Application 無障礙富互聯網應用），是可以讓殘障人士更加便利的訪問 Web 的一套機制。

主要經過role和aria-*來標識，例以下面用無語義的 div 實現的進度條：

<div id="percent-loaded" role="progressbar" aria-valuenow="75" 
     aria-valuemin="0" aria-valuemax="100" />

這裏平時的開發幾乎不會涉獵，故不作深究。

八、HTML5 的最簡格式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>文檔標題</title>
  </head>
  <body>
    文檔內容......
  </body>
</html>

3、CSS

一、什麼是 CSS ？

層疊樣式表（英語：Cascading Style Sheets，縮寫：CSS）

樣式和表很好理解，層疊是什麼意思呢？後面的文章我會有詳細的介紹。

一、CSS 屬於領域專用語言(DSL)

二、CSS區分大小寫

二、CSS 的最新版本？

CSS3 是最新的CSS 標準，由萬維網聯盟（W3C）定義和維護。

三、引入 CSS 的幾種方法

方法一直接外部樣式表 [推薦]

<link rel="stylesheet" type="text/css" href="my.css"/>

方法二間接外部樣式表

<style type="text/css">
    @import "mystyle.css";  
</style>

導入樣式表比連接樣式錶慢。

方法三內部樣式表

<style type="text/css"> 
    div{margin: 0;padding: 0;border:1px red solid;} 
</style>

方法四內聯樣式

<div style="border:1px red solid;">測試信息</div>

四、CSS 語義化

若是說HTML語義化標籤是給機器看的，那麼CSS命名的語義化就是給人看的。

五、CSS 書寫小技巧

(1) 能夠去掉小數點前的 0

font-size : .8em

(2) 0後面無需跟單位

.class{padding:0;}

(3) url()裏面的value不用加引號

url(images/logo.png)

(4) 有意義的註釋

爲了使註釋更有意義，可使用關鍵字來區分重要的註釋。我使用 @todo 來表示某些東西須要在之後進行修改、修復或複查，用 @bugfix 表示代碼或特定瀏覽器遇到的問題，用 @workaround 表示並不完普的權宜之計。

六、CSSDOC

貌似不多有人專門去用，暫略。

七、CSS3 新特性

2D、3D 轉化、過渡、動畫等略

1. 朝花夕拾
2. vuejs&electron-vue----朝花夕拾.
3. 朝花夕拾 - 2019 總結
4. 朝花夕拾 - 2020 1024
5. Android朝花夕拾之debug
6. 【朝花夕拾】Android Log篇
7. 朝花夕拾 - 2021 生日
8. TimeTraveler. - 朝花夕拾，拾了又拾
9. 朝花夕拾之April. 9th
10. 朝花夕拾：Java從入門到精通
更多相關文章...
• CSS 指南 - 網站建設指南
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• ☆基於Java Instrument的Agent實現
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。