零基礎入門 HTML 的 8 分鐘極簡教程

時間 2020-03-26

標籤零基礎入門 html 分鐘教程欄目 HTML 简体版

原文原文鏈接

在今天，前端工程師已經成爲研發體系中的重要崗位之一。html

但是與此相對的是，極少大學的計算機專業願意開設前端課程，大部分前端工程師的知識，也都是在實踐和工做中不斷學習的。前端

最近收到不少同窗的後臺留言，說但願多推出一些前端方向的教程。web

今天咱們就帶來一門適合前端初學者的課程，能夠帶你從零入門 HTML、CSS、JS、React 等前端核心技能，並建立一個待辦事項的管理應用～編程

項目效果：瀏覽器

課程從最基礎的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等經常使用技能的講解。由淺入深，層層遞進，若是你想快速上手 React 框架，這門課會是你很是好的選擇。服務器

點擊 「從 0 到 1 構建待辦事項應用」 就能學習所有課程內容。前端工程師

如下是課程第一節的內容 —— 「HTML 簡介」，帶你快速入門HTML，讓咱們一塊兒進入前端的大門看看吧：框架

「HTML 簡介」frontend

實驗介紹

本實驗是對 HTML 進行學習，而且較詳細的說明了 Web 是如何工做的。主要內容有：HTML 常見標籤、HTML 文檔結構、HTML 表格和表單、HTML 有序列表和無序列表。經過本節學習，能夠構建簡單的 HTML 網頁。編程語言

知識點

什麼是 HTML
Web 是如何工做的
文檔結構
常見標籤
表格
表單
有序列表和無序列表

什麼是 HTML

HTML（超文本標記語言）是一種用於建立網頁的標準標記語言。HTML 不須要編譯，能夠直接由瀏覽器執行，它的解析依賴於瀏覽器的內核。它不是一種編程語言，而是一種標記語言。

Web 是如何工做的

下面咱們來演示用戶是如何看到一個網頁顯示的。

具體來說：

當用戶經過瀏覽器輸入網址後，瀏覽器先在 DNS 服務器上找到它，而後對它進行解析。
解析完成後，瀏覽器給服務器發送 http 請求。
服務器贊成這個請求，就把 HTML 文件發送回瀏覽器。
瀏覽器拿到 HTML 文件，對其解析執行，顯示在用戶屏幕上。

HTML 文檔結構

首先咱們來看一個例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

這是一個 HTML 的基本骨架，咱們將逐步介紹這些是什麼意思。

文檔類型聲明

是咱們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。

html 標籤

html 標籤即根元素，此處表示文檔的開始，該標籤包含兩個子標籤：head 和 body。

head 元素

head 標籤下面所包含的標籤由 title、meta、link、style、script 等（後面會講到）。

title 標籤

做用：設置文檔的標題或者名稱。瀏覽器一般將該標籤的內容顯示在窗口頂部或者標籤頁上。每一個 HTML 文檔只能有一個，必須有一個 title 標籤。

meta 標籤

<metacharset="UTF-8"> 聲明字符的編碼格式爲 utf-8。

body 標籤

body 標籤訂義文檔的主體，也就是咱們的主要內容（好比文本、超連接、圖像、表格和列表等）。

常見標籤

1.h 系類標籤

h 標籤有六種 h1，h2，h3，h4，h5，h6，它表明着咱們的標題。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
  </body>
</html>

爲了你們能更有效的學習，請使用實驗樓的環境。首先咱們新建一個文件，點擊 File，而後 New File，命名爲 index.html。

而後輸入上面的代碼。

讓咱們來看一下運行效果吧。鼠標右鍵 index.html 文件，點擊 Open With，而後點擊 Preview。

最終效果爲：

2.p 標籤

p 標籤是咱們的文本標籤，p 標籤會自動在其兩個標籤之間建立一些空白。刪掉上段代碼標籤裏的內容，把下面的內容放到標籤裏面去。

<p>我是第一段文字，實驗樓，作實驗，學編程</p>
<p>我是第二段文字，實驗樓，作實驗，學編程</p>

3. 圖片標籤

HTML 的圖像是經過標籤來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼標籤裏的內容，把下面的內容放到標籤裏面去。

<p>實驗樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 標籤

標籤是超連接標籤，意思就是咱們點擊它能夠跳轉到一個網頁。刪掉上段代碼標籤裏的內容，把下面的內容放到標籤裏面去。

<a href="https://www.shiyanlou.com/">實驗樓</a>

點擊文字：

跳轉到指定網頁：

篇幅有限，後續的課程內容，點擊 「從 0 到 1 構建待辦事項應用」 就能繼續學習。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。