在今天,前端工程師已經成為研發體系中的重要崗位之一。
可是與此相對的是,極少大學的計算機專業願意開設前端課程,大部分前端工程師的知識,也都是在實踐和工作中不斷學習的。
最近收到很多同學的後臺留言,說希望多推出一些前端方向的教程。
今天我們就帶來一門適合前端初學者的課程,可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能,並創建一個待辦事項的管理應用~
項目效果:
課程從最基礎的 HTML/ CSS/JS 講起,還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深,層層遞進,如果你想快速上手 React 框架,這門課會是你非常好的選擇。
訪問“實驗樓”官網,搜索“從 0 到 1 構建待辦事項應用”就能學習全部課程內容。
以下是課程第一節的內容 —— 「HTML 簡介」,帶你快速入門HTML,讓我們一起進入前端的大門看看吧:
「HTML 簡介」
實驗介紹
本實驗是對 HTML 進行學習,並且較詳細的說明了 Web 是如何工作的。主要內容有:HTML 常見標籤、HTML 文檔結構、HTML 表格和表單、HTML 有序列表和無序列表。通過本節學習,可以構建簡單的 HTML 網頁。
知識點
- 什麼是 HTML
- Web 是如何工作的
- 文檔結構
- 常見標籤
- 表格
- 表單
- 有序列表和無序列表
什麼是 HTML
HTML(超文本標記語言)是一種用於創建網頁的標準標記語言。HTML 不需要編譯,可以直接由瀏覽器執行,它的解析依賴於瀏覽器的內核。它不是一種編程語言,而是一種標記語言。
Web 是如何工作的
下面我們來演示用戶是如何看到一個網頁顯示的。
具體來講:
- 當用戶通過瀏覽器輸入網址後,瀏覽器先在 DNS 服務器上找到它,然後對它進行解析。
- 解析完成後,瀏覽器給服務器發送 http 請求。
- 服務器同意這個請求,就把 HTML 文件發送回瀏覽器。
- 瀏覽器拿到 HTML 文件,對其解析執行,顯示在用戶屏幕上。
HTML 文檔結構
首先我們來看一個例子:
<code>
<title>HTML 簡介/<title>
/<code>
這是一個 HTML 的基本骨架,我們將逐步介紹這些是什麼意思。
是我們的文檔聲明頭。他告訴了瀏覽器,本文檔處理的是 HTML 文檔。
html 標籤
html 標籤即根元素,此處表示文檔的開始,該標籤包含兩個子標籤:head 和 body。
head 元素
head 標籤下面所包含的標籤由 title、meta、link、style、script 等(後面會講到)。
title 標籤
作用:設置文檔的標題或者名稱。瀏覽器通常將該標籤的內容顯示在窗口頂部或者標籤頁上。每個 HTML 文檔只能有一個,必須有一個 title 標籤。
meta 標籤
body 標籤
body 標籤定義文檔的主體,也就是我們的主要內容(比如文本、超鏈接、圖像、表格和列表等)。
常見標籤
1.h 系類標籤
h 標籤有六種 h1,h2,h3,h4,h5,h6,它代表著我們的標題。
<code>
<title>HTML 簡介/<title>
我是一級標題
我是二級標題
我是三級標題
我是四級標題
我是五級標題
我是六級標題
/<code>
為了大家能更有效的學習,請使用實驗樓的環境。首先我們新建一個文件,點擊 File,然後 New File,命名為 index.html。
然後輸入上面的代碼。
讓我們來看一下運行效果吧。鼠標右鍵 index.html 文件,點擊 Open With,然後點擊 Preview。
最終效果為:
2.p 標籤
p 標籤是我們的文本標籤,p 標籤會自動在其兩個標籤之間創建一些空白。刪掉上段代碼
標籤裡的內容,把下面的內容放到 標籤裡面去。<code>我是第一段文字,實驗樓,做實驗,學編程
我是第二段文字,實驗樓,做實驗,學編程
/<code>
3. 圖片標籤
HTML 的圖像是通過標籤 來定義的。語法: <imgsrc> 刪掉上段代碼
標籤裡的內容,把下面的內容放到 標籤裡面去。<code>
/<code>
4.a 標籤
<code>
點擊文字:
跳轉到指定網頁:
篇幅有限,後續的課程內容,請在“實驗樓”邊敲代碼邊學習~
訪問“實驗樓”官網,搜索“從 0 到 1 構建待辦事項應用”,就能找到課程,繼續學習啦!
閱讀更多 實驗樓 的文章