HTML與CSS基礎day1

時間  2020-04-05
標籤 html css 基礎 day1 day 欄目 HTML 简体版
原文   原文鏈接

目錄

術語

  1. web：互聯網。
  2. w3c：萬維網聯盟，非盈利組織，官網：w3.org。爲互聯網提供各類標準。
    1. 代替網址：MDN：Mozilla Development Network。Mozilla開發者社區。有中文。
  3. ISO：國際標準組織。
  4. XML：可擴展的標記語言（extension markup language）用於定義文檔結構。

HTML

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

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

  3. 書寫一個一級標題：web

    <h1>一級標題</h1>

CSS

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

  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. 顯示文件擴展名（不懂可百度）。大部分文件：文件名+擴展名（後綴名）。ide

    1. 擴展名決定了文件被什麼打開。

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

    1. 谷歌瀏覽器始終與w3c標準同步。
    2. 將谷歌瀏覽器設置爲默認瀏覽器

  3. 安裝專業編輯器：字體

    1. Sublimeui

    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="http://baidu.com" title = "百度官網">百度</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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程