HTML學習筆記1

Chi_cha發表於2020-11-14
HTML筆記

HTML學習筆記1

學習序章

  1. HTML是指超文字標記語言,它是用來描述網頁的一種語言.
  2. HTML不是一種程式語言,而是一種標記語言.
  3. 標記語言就是一套標記標籤.

關於瀏覽器

目前來說,世界上主流瀏覽器主要有:IE,火狐,谷歌,Edge,Safari,Opera.

瀏覽器核心(渲染引擎):負責讀取網頁內容,整理訊息,計算網頁的顯示方式並顯示頁面.

瀏覽器核心
IE,獵豹安全,360,百度Trident
firefoxGecko
SafariWebkit
chromeBlink(Blink實際是Webkit的分支)
  • 國內的瀏覽器通常採用Webkit/Blink核心,如360,UC,QQ,搜狗等.

web標準

Web標準是由W3C組織與其他標準制定的一系列標準的集合.

Web標準的構成

主要包括結構,表現,行為三方面.

標準說明
結構結構用於對網頁元素進行整理和分類
表現表現用於設定網頁元素的版式顏色,大小等外觀樣式
行為行為指網頁模型的定義及互動的編寫

Web標準提出的最佳體驗方案:結構,樣式,行為相分離.

HTML標籤

標籤可分別:單標籤和雙標籤.

雙標籤可分為兩類:包含關係和並列關係.’

HTML基本結構標籤

基本結構標籤也稱骨架標籤.

  1. < html> < \html>
    定義:HTML標籤-----根標籤.

  2. < head> < \head>
    定義:文件的頭部
    注意:在head標籤中我們必須要設定的標籤是title

  3. < title> < \title>
    定義:文件的標題-----讓頁面用於一個屬於自己的標題.

  4. < body> < \body>
    文件的主體
    元素包含:文件的所有內容,頁面內容. 這些基本都是放到body裡的.

  5. < !DOCTYPE>(< !DOCTYPE>不是一個HTML標籤,他就是文件型別宣告標籤)
    定義:文件型別宣告,對瀏覽器表明使用的HTML的版本.
    eg:< !DOCTYPE html>:當前頁面採取的是HTML5版本來顯示網頁
    注意:該宣告位於文件中最前面的位置,處於< html>標籤之前.

  6. < html long = xxxx>
    定義:用來定義當前文件顯示的語言

  • en 定義語言為英語
  • zh-CN 定義語言為中文
  • fn 定義語言為法語
  • …
    定義為英語的網頁可以顯示中文,定義中文的網頁也可以顯示英文.
  1. 字符集
    字符集是多個字元的集合.便於計算機對各種字元的文字,在< head>標籤內可以通過< meta>標籤的charset屬性來規定HTML文件應該使用哪種字元來編寫.

eg:< meta charset = “UTF-8”/>

  • charset 常用的值有:GB2312,BIG5,GBK和UTF-8,其中UTF-8也被稱為萬國碼,其中基本包含理全世界所有國家需要用到的字元.

  • 注意:上面的語法是必須要使用的程式碼,否則可能引起亂碼情況.一般情況下統一使用"UTF-8"編碼.

HTML常用標籤

  1. 標題標籤
    < h1 >~< h6 >共有6級 h1>h2>…>h6
    eg:< h1 > 一個一級標籤< /h1 >
    標籤語義:做標題使用,並依據重要性遞減.
    特點:
  • 加了表題的文字會變大變粗.
  • 一個標題獨佔一行.
  1. 段落和換行標籤
    段落:< p >標籤用於定義段落。
    eg:< p > 我是一個段落 < /p >
    特點:

  • 文字會在 一個段落中會根據瀏覽器的大小自動換行.

  • 段落與短落直接存有空隙.

    換行:對於段落的強制換行需要使用標籤< br/ >
    標籤語義:強制換行.
    eg: 在後面換行< br/ >

  1. 文字格式標籤
標籤語義說明
< strong >< /strong >或< b >< /b >加粗< strong>語義更加強烈
< em >< /em >或< i >< /i >傾斜< em >語義更加強烈
< del >< /del >或< s >< /s >刪除線< del > 語義更強烈
< ins>< /ins >或< u >< /u >下劃線< ins >語義更強烈
  1. < div >和< span >標籤
    < div >和 < span >標籤沒有實際語義，可以將他們比擬成一個盒子，裡面裝著內容。
    eg：< div > 一行只能放一個 < /div >
    < span > 一行可以放多個 < /span >
    特點：

  • < div >標籤一行只能放一個，< span >標籤一行可以有多個

    '!'可以快速生成骨架

骨架

  • 本篇部落格僅供自己參考使用 from chi_cha(qq:1317843829)

相關文章