HTML簡介：想成為前端開發者？先從掌握HTML開始

HTML簡介：想成為前端開發者？先從掌握HTML開始！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

誰見過風呢

勿論你和我

但當樹木俯首

風正經過

- 2024.03.05 -

在這個數字化的時代，我們每天都在與網頁打交道。你是否曾經好奇過，這些充滿魔力的網頁是如何誕生的呢？今天，我們就來揭開構成這些網頁的神秘面紗——HTML（超文本標記語言）。

一、什么是HTML

網頁的基本組成

網頁是構成網站的基本元素，通常由圖片、鏈接、文字、聲音、視頻等元素組成，通常我們看見的網頁都是.htm和.html后綴結尾的文件，因為都稱為HTML文件。

什么是HTML

HTML 英文全稱是 Hyper Text Markup Language，中文譯為“超文本標記語言”，專門用來設計和編輯網頁。

使用 HTML 編寫的文件稱為“HTML 文檔”，一般后綴為.html（也可以使用.htm，不過比較少見）。HTML 文檔是一種純文本文件，您可以使用 Windows 記事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本編輯來打開或者創建。

每個網頁都是一個 HTML 文檔，使用瀏覽器訪問一個鏈接（URL），實際上就是下載、解析和顯示 HTML 文檔的過程。將眾多 HTML 文檔放在一個文件夾中，然后提供對外訪問權限，就構成了一個網站。

二、HTML的歷史

HTML的故事始于1989年，當時蒂姆·伯納斯-李在歐洲核子研究中心（CERN）提出了一個名為“萬維網”的概念。

為了實現這一概念，他發明了HTML，并隨后與羅伯特·卡里奧一起發明了HTTP協議。從那時起，HTML就成為了互聯網不可或缺的一部分。

上圖簡單羅列了HTML的發展歷史，大家可以簡單了解一下。

三、HTML相關概念

什么是標簽

HTML 標記通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如<html/>。

封閉類型標記（也叫雙標記），必須成對出現,如<p></p> 。

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽，開始和結束標簽也被稱為開放標簽和閉合標簽。

非封閉類型標記，也叫作空標記，或者單標記，如<br/>

<標簽>內容<標簽/>

什么是元素

"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思。但是嚴格來講，一個HTML 元素包含了開始標簽與結束標簽，如下實例。

HTML 元素：

<p>這是一個段落</p>

web瀏覽器

Web 瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取 HTML 文件，并將其作為網頁顯示。瀏覽器并不是直接顯示的 HTML 標簽，但可以使用標簽來決定如何展現 HTML頁面的內容給用戶：

HTML 屬性

屬性是用來修飾元素的，屬性必須位于開始標簽里，一個元素的屬性可能不止一個，多個屬性之間用空格隔開，多個屬性之間不區分先后順序。

每個屬性都有值，屬性和屬性的值之間用等號鏈接，屬性的值包含在引號當中，屬性總是以名稱/值對的形式出現。

四、HTML的基本結構

一個典型的HTML文檔由以下幾個基本元素構成：

<!DOCTYPE html>

這是文檔類型聲明，告訴瀏覽器這個文檔使用的是HTML5標準。

<html>

這是整個HTML文檔的根元素，其他所有元素都包含在這個標簽內。

<head>

這個部分包含了所有關于網頁的元信息，如標題、字符集聲明、引入的CSS樣式表和JavaScript文件等。

<title>

這個標簽定義了網頁的標題，它顯示在瀏覽器的標題欄或標簽頁上。

<body>

這個部分包含了網頁的所有內容，如文本、圖片、鏈接、表格、列表等。

HTML的結構示例

讓我們通過一個簡單的例子來具體了解HTML的結構：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個HTML頁面</title>
</head>
<body>
<h1>歡迎來到我的網頁！</h1>
<p>這是一個簡單的段落。</p>
<a href="https://www.example.com">點擊這里訪問示例網站</a>
</body>
</html>

在這個例子中，我們可以看到一個完整的HTML文檔結構，從<!DOCTYPE html>開始，到最后一個</html>結束。

想象一下，如果HTML是一棵樹，那么<html>就是樹干，<head>和<body>就像是樹的兩個主要分支。<head>中的標簽好比是樹葉，它們雖然不起眼，但卻至關重要，為樹木提供營養。而<body>中的標簽則像是樹枝和果實，它們構成了樹的主體，吸引人們的目光。

想要快速入門HTML嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！搜索【云端源想】前往學習哦！

五、HTML的特點

HTML的特點主要包括簡易性、可擴展性、平臺無關性和通用性等。具體如下：

1、簡易性：

HTML是一種相對容易學習和使用的語言，它的版本升級通常采用超集方式，使得新版本能夠兼容舊版本的標簽和功能，這樣既保持了向后兼容性，又能夠靈活方便地引入新的功能。

2、可擴展性：

隨著互聯網的發展，HTML也在不斷增加新的元素和屬性來滿足新的需求，如支持多媒體內容的嵌入、更豐富的表單控件等。這種設計使得HTML能夠適應不斷變化的網絡環境。

3、平臺無關性：

HTML編寫的網頁可以在不同的操作系統和瀏覽器上顯示，這是因為HTML是一種與平臺無關的語言。這意味著無論用戶使用什么設備或瀏覽器，都能夠訪問和瀏覽HTML頁面。

4、通用性：

HTML是網絡的通用語言，它是一種簡單的標記語言，用于創建和結構化網頁內容。由于其廣泛的支持和普及，幾乎所有的設備和瀏覽器都能夠解析和顯示HTML內容。

5、支持多種媒體格式：

HTML不僅支持文本內容，還能夠嵌入圖片、音頻、視頻等多種媒體格式，這使得網頁可以提供豐富的用戶體驗。

6、標準化：

HTML遵循萬維網聯盟（W3C）制定的國際標準，這意味著網頁開發者可以根據這些標準來創建網頁，確保網頁的互操作性和可訪問性。

7、標簽豐富：

HTML提供了一系列的標簽，如標題、列表、鏈接、表格等，這些標簽使得開發者能夠創建出結構清晰、功能豐富的網頁。

綜上所述，HTML作為一種基礎的網頁開發語言，因其易學易用、跨平臺、多功能和高度標準化的特點，成為了構建現代網絡內容的核心工具。

HTML作為連接世界的紐帶，其重要性不言而喻。它是數字世界的基石，也是每個想要進入互聯網領域的人必須掌握的技能。無論你是夢想成為前端開發者，還是僅僅想要更好地理解這個由代碼構成的世界，學習HTML都是一個不錯的開始。

今天就先講到這里了，

更多前端開發基礎知識點擊文末閱讀原文查看哦！

記得關注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

嘍，大家好，我是雷工！

最近有項目用到KingFusion軟件，由于KingFusion是B/S架構的客戶端組態軟件，因此在學習KingFusion產品時會涉及許多前端的知識。

像JavaScript語言就是需要用的，俗話說：活到老學到老。今天學習JavaScript基礎語法知識，并記錄筆記方便回顧。

1、JavaScript概念

JavaScript是一種具有函數優先的輕量級，即時編譯型，運行在客戶端（瀏覽器）的腳本語言，用于實現人機交互的效果。

2、JavaScript特點

2.1、代碼不進行預編譯：其源代碼在發往客戶端運行之前不需要進行編譯，而是將文本格式的字符代碼發送給瀏覽器，由瀏覽器解釋運行。

2.2、JavaScript中，如果一行運行不了，那么下面的語句也無法運行。

3、JavaScript優點

3.1、使用范圍廣。

3.2、入門簡單，容錯性強。

3.3、開元學習資料豐富。

4、JavaScript作用

4.1、網頁特效：監聽用戶的一些動作讓網頁做出相應的反饋。

4.2、表單驗證：可以針對表單數據的合法性進行判斷。

4.3、數據交互：獲取后臺的數據，渲染到頁面前端。

4.4、服務端編程：Node.js。

5、JavaScript的構成

5.1、ECMAScript:規定了JavaScript基礎語法的核心知識。

例如：變量，分支語句，循環語句、對象等等。

5.2、Web APIs:

5.2.1、DOM 操作文檔。

例如：對界面元素進行移動、大小、添加刪除等操作。

5.2.2、BOM 操作瀏覽器

例如：界面彈窗，檢查窗口寬度、存儲數據到瀏覽器等。

后記

在這知識大爆炸的時代，窮盡一生也不可能把所有知識學完，只能是跟現有工作相結合，缺什么補什么，用到什么學什么。如有不當描述歡迎指正。

末有福利

前端開發，入門簡單，有一臺可以運行多款瀏覽器的電腦，能聯網查詢資料即可。深入的部分，需要更多的理論知識、肯鉆研的精神。前端開發，需要入門了解的屈指可數，主要就是如下幾個大方面：

背景知識

軟件安裝

文本編輯器

vscode(推薦使用，功能強大)
Sublime Text
NodePad++

瀏覽器

Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

版本控制

Git GitHub

構建工具

Webpack
Gulp

Web standards

Web standards ，主要定義瀏覽器端，功能接口標準的，標準的具體實現，由不同的瀏覽器廠商完成。

當下使用的web技術

主流瀏覽器

Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

協議

協議，主要用于通信。前后端不是獨立的，彼此通過協議，互換信息，web系統才能運行正常

http
https
socket

HTML, CSS, and JavaScript

開發工具

各瀏覽的DevTool,便于調試
Linters插件
Minify工具
CDN等
測試工具
js庫和前端框架（站點構建的更快、更高效）

服務端語言

Python, NodeJS, Deno, Go, Rust

面臨的挑戰

瀏覽器兼容

Web standards，各實現廠商不同，支持力度不同，瀏覽器兼容問題自然存在

響應式設計

廠商的不同，展示場景的不同，意味著不能全篇一律敲定，需要動態變化展示內容

性能

天下站點，只有快，才能留住用戶

易用性

站點的訪問人群不同，要具備普適性，都能輕松使用。

國際化

國際語言眾多，需要盡可能的多支持

安全性

用戶隱私數據保護

HTML

html基礎概念

html元素

當然，也有例外，不是這種格式的

# Empty elements， or (void elements.) 
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
復制代碼

html元素嵌套

<p>My cat is <strong>very</strong> grumpy.</p>
復制代碼

塊元素和行內元素

塊元素，獨占一行；行內元素，按先后順序，排列這些與css的display不同，不影響元素能包含哪些元素，能被哪些元素包含

元素屬性

其中，也存在一種特殊的屬性：Boolean attributes

<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">
復制代碼

另外，也會存在一些特殊的寫法。推薦都是key="value"形式

<a href=https://www.mozilla.org/>favorite website</a>
復制代碼

html文檔結構

不管多少連續的空白，瀏覽器都會解析會一個空格

<!DOCTYPE html> # 定義解析格式
<html> # 文檔的root 
  <head> #定義源數據地方 
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body> # 文檔的可見內容部分
    <p>This is my page</p>
  </body>
</html>
復制代碼

元數據等請移步參考

html特殊字符

<, >,",' and &, 這是html自身使用的，如果用戶需要展示，那么需要轉義

html注釋

<!-- 
 <p>I am!</p> 
-->
復制代碼

html 多媒體

image

普通的圖片

alt描述圖片

# 推薦添加alt,而不是text子元素節點添加
<img src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
         it has a large head with long sharp teeth">
復制代碼

caption添加標題

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">
 <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
復制代碼

響應式圖片

根據展示設備尺寸的不同，加載不同的圖片

<img srcset="elva-fairy-480w.jpg 480w,
            elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy">
復制代碼

設備尺寸相同，但是分辨率不同

<img srcset="elva-fairy-320w.jpg,
            elva-fairy-480w.jpg 1.5x,
            elva-fairy-640w.jpg 2x"
    src="elva-fairy-640w.jpg"
    alt="Elva dressed as a fairy">
復制代碼

利用picture，不同設選擇加載不同的圖片

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
復制代碼

picture+svg

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
復制代碼

audio

單一url 瀏覽器廠商，針對音頻的支持格式不是不同的，譬如： MP3, MP4 and WebM

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
復制代碼

瀏覽器適配問題

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
復制代碼

video

單一url 瀏覽器廠商，針對視頻的支持格式不是不同的

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
復制代碼