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

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

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

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

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

項目效果:瀏覽器

image

課程從最基礎的 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 是如何工做的

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

image

具體來說:

  1. 當用戶經過瀏覽器輸入網址後,瀏覽器先在 DNS 服務器上找到它,而後對它進行解析。
  2. 解析完成後,瀏覽器給服務器發送 http 請求。
  3. 服務器贊成這個請求,就把 HTML 文件發送回瀏覽器。
  4. 瀏覽器拿到 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。

image

而後輸入上面的代碼。

image

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

image

最終效果爲:

image

2.p 標籤

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

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

image

image

3. 圖片標籤

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

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

image

image

4.a 標籤

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

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

image

點擊文字:

image

跳轉到指定網頁:

image

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

相關文章
相關標籤/搜索