HTML 基礎重點（1）

LeoYao發表於2020-05-18
HTML

什麼是 HTML？

HTML 全名是「超文字標記語言」（HyperText Markup Language），最初是歐洲核子研究中心為了即時分享研究成果而發明了 www 全球資訊網和 HTML。

網頁開發，涉及三種技術：HTML、CSS 和 JS。其中 HTML 是用於定義「網頁的結構和內容」，CSS 是用於定義網頁展示樣式，JS 用於定義網頁與使用者的互動行為。

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello world</title>
</head>
<body>
    <p>Hello world</p>
</body>
</html>

標籤

HTML 之所以是標記語言，就是與之由不同的標籤（tag）構成相關。

<title>網頁標題</title>

上面程式碼中，<title></title>就是一對標籤。
標籤是用於告訴瀏覽器，如何處理這段程式碼。標籤的內容就是瀏覽器所要「渲染的、展示在網頁上的內容」。
大多數標籤都是成對出現，但也有的只有開始標籤，沒有結束標籤，例如<meta>標籤。

<meta charset="utf-8">

meta標籤主要是用於提示瀏覽器，用於做一些特殊處理。

元素

元素和標籤，實質是同義詞，只是使用場景不同。從原始碼角度來看是標籤，從編碼角度來看是元素。HTML 所有的元素分為塊級（block）元素和行內元素（inline）。

  • 塊級元素：獨佔區域，另起一行；
  • 行內元素：預設與其他元素同行

屬性

屬性（attribute）是標籤的額外資訊，使用空格與標籤名和其他屬性分隔。

<img src="demo.jpg" width="500">

注意，屬性名是大小寫不敏感的，onclick 和 onClick 是同一個屬性。

網頁的基本標籤

符合語法標準的網頁，應該滿足下面的基本結構。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
</html>

不管多複雜的網頁，都是從上面這個基本結構衍生出來的。

<!DOCTYPE> 標籤

網頁的第一個標籤通常是 <!doctype>，表示文件型別，告訴瀏覽器如何解析網頁。

<!doctype html>

一般來說，只要像上面一樣簡單生命，瀏覽器就會按照 HTML 5 的規則處理網頁。
有時，該標籤會採用完全大寫的形式，以便區別於正常的 HTML 標籤，因為 <!doctype> 本質上不是標籤，更像一個處理指令。

<!DOCTYPE html>

<html> 標籤

<html> 標籤是網頁的頂層容器，也稱為根元素（root element），其他元素都是它的子元素，一個網頁只能有一個 <html> 標籤。

該標籤的 lang 屬性，表示網頁內容預設的語言。

<html lang="en">

<head> 標籤

<head> 標籤是一個容器標籤，用於放置網頁的元資訊。它的內容不會出現在網頁上，而是為網頁渲染準備。
<head> 是 <html> 的第一個子元素。如果網頁不包含 <head>，瀏覽器會自動建立一個。
<head> 的子元素一般有下面七個：

  • <meta>：設定網頁的後設資料；
  • <link>：連線外部樣式表；
  • <style>：放置內嵌的樣式表；
  • <script>：引入指令碼；
  • <noscript>：瀏覽器不支援指令碼時，所要顯示的內容；
  • <base>：設定網頁內部相對 URL 的計算基準。
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章