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

2022-06-09 07:51:11 字數 3147 閱讀 9825

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

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

今天我們就帶來一門適合前端初學者的課程,可以帶你從零入門 html、css、js、react 等前端核心技能,並建立乙個待辦事項的管理應用~

專案效果:

課程從最基礎的 html/ css/js講起,還包含了typescript/react/fabric等常用技能的講解。由淺入深,層層遞進,如果你想快速上手react 框架,這門課會是你非常好的選擇。

點選「從 0 到 1 構建待辦事項應用」就能學習全部課程內容。

以下是課程第一節的內容 —— 「html 簡介」,帶你快速入門html,讓我們一起進入前端的大門看看吧:

「html 簡介」

本實驗是對 html 進行學習,並且較詳細的說明了 web 是如何工作的。主要內容有:html 常見標籤、html 文件結構、html **和表單、html 有序列表和無序列表。通過本節學習,可以構建簡單的 html 網頁。

html(超文字標記語言)是一種用於建立網頁的標準標記語言。html 不需要編譯,可以直接由瀏覽器執行,它的解析依賴於瀏覽器的核心。它不是一種程式語言,而是一種標記語言。

下面我們來演示使用者是如何看到乙個網頁顯示的。

具體來講:

當使用者通過瀏覽器輸入**後,瀏覽器先在 dns 伺服器上找到它,然後對它進行解析。

解析完成後,瀏覽器給伺服器傳送 http 請求。

伺服器同意這個請求,就把 html 檔案傳送回瀏覽器。

瀏覽器拿到 html 檔案,對其解析執行,顯示在使用者螢幕上。

首先我們來看乙個例子:

這是乙個 html 的基本骨架,我們將逐步介紹這些是什麼意思。

文件型別宣告

是我們的文件宣告頭。他告訴了瀏覽器,本文件處理的是 html 文件。

html 標籤

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

head 元素

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

title 標籤

作用:設定文件的標題或者名稱。瀏覽器通常將該標籤的內容顯示在視窗頂部或者標籤頁上。每個 html 文件只能有乙個,必須有乙個 title 標籤。

meta 標籤

宣告字元的編碼格式為 utf-8。

body 標籤

body 標籤定義文件的主體,也就是我們的主要內容(比如文字、超連結、影象、**和列表等)。

1.h 系類標籤

h 標籤有六種 h1,h2,h3,h4,h5,h6,它代表著我們的標題。

我是四級標題

我是五級標題

我是六級標題

為了大家能更有效的學習,請使用實驗樓的環境。首先我們新建乙個檔案,點選 file,然後 new file,命名為 index.html。

然後輸入上面的**。

讓我們來看一下執行效果吧。滑鼠右鍵 index.html 檔案,點選 open with,然後點選 preview。

最終效果為:

2.p 標籤

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

我是第一段文字,實驗樓,做實驗,學程式設計

我是第二段文字,實驗樓,做實驗,學程式設計

3. 標籤

html 的影象是通過標籤

來定義的。語法: 刪掉上段** 標籤裡的內容,把下面的內容放到 標籤裡面去。

實驗樓:

4.a 標籤

標籤是超連結標籤,意思就是我們點選它可以跳轉到乙個網頁。刪掉上段** 標籤裡的內容,把下面的內容放到 標籤裡面去。

實驗樓
點選文字:

跳轉到指定網頁:

篇幅有限,後續的課程內容,點選

「從 0 到 1 構建待辦事項應用」就能繼續學習。

十分鐘零基礎了解Async

async function testasync const result testasync console.log result 輸出的是乙個 promise 物件。c var test node harmony async await promiseawait 可以理解為是 async wai...

零基礎 極星量化入門十一 遠端遙控的簡單辦法

一 前言 於是我就想了個比較 土 但也比較容易實現的辦法。簡單來說 1 你得有個部落格,或者任何你可以修改編輯的 網頁 2 在極星量化中,通過requests模組,依然是get上面說的 你可以修改的頁面 3 現在你就可以在極星量化中使用requests讀取到 你可以修改的頁面 內容,你可以寫個 啟動...

零基礎 極星量化入門八 簡單的boll實盤

一 前言 前一篇已經講了boll的回測,那這裡為啥又要說實盤呢?因為實盤執行與回測還是有些區別的。這裡說的實盤是包括實盤模擬和實盤交易的,二者都是利用最新的 做交易,這篇就講一下最近關於實盤的心得。二 修改 整體上實盤的 與回測是差不多的,但是有幾個要點注意和修改。1 成交 在回測時我們使用的是 價...