HTML與CSS基礎day1

soug發表於2020-04-01
HTMLCSS

術語

  1. web：網際網路。
  2. w3c：全球資訊網聯盟，非盈利組織，官網：w3.org。為網際網路提供各種標準。
    1. 代替網址：MDN：Mozilla Development Network。Mozilla開發者社群。有中文。
  3. ISO：國際標準組織。
  4. XML： 可擴充套件的標記語言（extension markup language）用於定義文件結構。

HTML

  1. HTML是 w3c組織定義的語言標準。HTML是用於描述頁面結構的語言。

  2. HTML全稱：Hyper Text Markup Language。超文字標記語言。

  3. 書寫一個一級標題：

    <h1>一級標題</h1>

CSS

  1. CSS也是w3c定義的語言標準。CSS是用於描述頁面展示的語言。（字型顏色，大小，佈局等等。）

  2. CSS決定頁面長什麼樣子。

  3. 執行HTML與CSS：用瀏覽器 核心執行。

    1. 瀏覽器由兩部分組成：
      1. shell：外殼。
      2. core：核心（JS執行引擎、渲染引擎）。
    2. 世界上主流的瀏覽器（擁有自己的核心）：
      1. IE：Trident核心。
      2. Firefox：Gecko核心。
      3. Chrome：之前為Webkit核心現在是Blink核心。
      4. Opera：Blink核心。
      5. Safari：Webkit核心。

    版本和相容性

    1. HTLM5:2014出版。
      1. XHTML:可以認為是HTML的一個版本，完全符合XML的規範。但現在基本不用。
    2. CSS3：目前還沒有制定完成。

開發環境的準備

  1. 顯示副檔名（不懂可百度）。大部分檔案：檔名+副檔名（字尾名）。

    1. 副檔名決定了檔案被什麼開啟。

  2. 安裝瀏覽器：推薦安裝谷歌瀏覽器（推薦百度搜尋Chrome，進入官網安裝，以免安裝有病毒）

    1. 谷歌瀏覽器始終與w3c標準同步。
    2. 將谷歌瀏覽器設定為預設瀏覽器

  3. 安裝專業編輯器：

    1. Sublime

    2. ATom

    3. Dreamweaver

    4. vscode（推薦）
      目錄：

      目錄

  4. Emmet外掛：自動生成html程式碼片段

HTML

  1. 註釋方法：Ctrl+?
<!-- 註釋內容 -->
  1. 元素(標籤、標記，但官方稱之為element（元素）)
    1. 元素 = 起始標記（begin tag）+ 結束標記（end tag）+ 元素內容（element content）+ 元素屬性（非必選）
      屬性 = 屬性名（href)+屬性值
      1. 區域性屬性：某些元素特有的屬性。
      2. 全域性屬性：所有的元素同用。
    <title>text</title>
    <a href="百度官網">百度</a>
    <h1 title="這是全域性屬性">
        這是全域性屬性    </h1>
    <!-- <a>: 起始標記，表示a元素
        </a>：結束標記，
        百度：元素內容。
        :-->
  1. 有些元素沒有結束標記（故沒有元素內容），叫做空元素
    <meta charset="UTF-8">
    空元素的兩種寫法：
    1.    <meta charset="UTF-8">
    2.    <meta charset="UTF-8"/>   /:表示閉合標記，表示結束。
  1. 元素的巢狀：元素不能相互巢狀；父元素；子元素；祖先元素；後代元素；兄弟元素（擁有同一個 父元素的兩個元素）
  2. 標準的文件結構
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie+edge">
    <title>Document</title></head><body>
    </body></html>
<!-- 文件宣告：告訴瀏覽器當前文件使用的HTNL標準是HTML5，不寫文件宣告將導致瀏覽器進入怪異渲染模式 --><!DOCTYPE html><!-- 根元素：一個頁面最多隻能有一個，並且該元素是其他所有元素的父元素或者祖先元素,HTML5可以不寫 
    lang屬性（可以用在任意元素中）：language,全域性屬性，表示該元素內部使用的文字是哪一種自然語言書寫而成的；en:English，zh-CN:簡體中文，但已過時，現在用cmn-hans:簡體中國官方語言--><html lang="cmn-hans"></html><!-- 必須作為子元素出現,表示文件頭，文件頭內部的內容不會顯示在頁面上。
    <meta>元素：文件的原資料，文件的附加資訊。
    charset：指定網頁內部編碼，計算機中，低壓電（0~2V）來表示0，高壓電（2~5V）表示1。計算機中只能儲存數字，只能將文字和數字進行對應，相當於一個字典，改字典就叫做字元編碼表。 
    name、content：適配手機端的
    <meta http-equiv="X-UA-Compatible" content="ie+edge">：如果瀏覽器是IE則告訴瀏覽器使用edge核心，即更換瀏覽器的核心-->
    <!-- <title>Document</title>：網頁標題。 --><head></head><!-- 文件體: 頁面上所有要參與顯示的元素--><body></body>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69966782/viewspace-2683891/，如需轉載，請註明出處，否則將追究法律責任。

相關文章