HTML初學(xué)者入門視頻教程，簡(jiǎn)單明了，學(xué)html看這一篇就夠了

TML是制作網(wǎng)頁的基礎(chǔ)，我們?cè)诰W(wǎng)站建設(shè)中談?wù)摰撵o態(tài)網(wǎng)頁就是基于HTML的網(wǎng)頁。

早期的網(wǎng)頁直接用HTML代碼編寫，但現(xiàn)在有許多智能網(wǎng)頁制作軟件（常用的如frontpage，dream weaver等）通常不需要手動(dòng)編寫代碼，而是由這些軟件自動(dòng)生成。雖然不需要自己寫，但是理解HTML代碼仍然是非常重要的。

了解HTML是什么？它是學(xué)習(xí)網(wǎng)站建設(shè)的重要技術(shù)基礎(chǔ)知識(shí)

下面我們自己可以動(dòng)手創(chuàng)建一個(gè)非常簡(jiǎn)單的網(wǎng)頁，首先我們讓計(jì)算機(jī)顯示擴(kuò)展，方法是打開我的電腦，然后現(xiàn)在欄目工具》文件夾選項(xiàng)》查看》高級(jí)設(shè)置中找到《隱藏已知文件類型的擴(kuò)展名》將其不勾選，并單擊“應(yīng)用”以確認(rèn)設(shè)置。然后在桌面上創(chuàng)建一個(gè)新的TXT文件，將此文件命名為“xxx.html”（擴(kuò)展名也可以是htm），這樣你就可以用瀏覽器打開它，你就會(huì)看到自己制作的最簡(jiǎn)單的頁面。

進(jìn)一步的簡(jiǎn)單理解什么是html？

html是一種超文本標(biāo)記語言，即html（hypertext markup language），是一種用來描述網(wǎng)絡(luò)文檔的標(biāo)記語言。在頁面的開頭和結(jié)尾使用<html></html>標(biāo)簽。

總結(jié)：

1）HTML是我們常說的靜態(tài)網(wǎng)頁；

2）HTML是以Html或htm為擴(kuò)展名的文件；

3）HTML某些標(biāo)簽代碼規(guī)則，讓內(nèi)容在瀏覽器中呈現(xiàn)出我們所需要的樣式；

4）HTML可以使用記事本創(chuàng)建，并以.html或.htm為擴(kuò)展名保存。

html文件中的代碼由具有一定的規(guī)則規(guī)律標(biāo)簽與內(nèi)容組成。以指定的HTML結(jié)構(gòu)和內(nèi)容形成完整的html文件。我們可以直接使用瀏覽器來打開，查看網(wǎng)頁效果。

如果您想在瀏覽器中顯示各式各樣的網(wǎng)頁，我們就需要html文件（HTML基本結(jié)構(gòu)+內(nèi)容+標(biāo)簽）和css文件（css樣式）來實(shí)現(xiàn)我們需要的漂亮網(wǎng)頁。

HTML基礎(chǔ)學(xué)習(xí)教程

動(dòng)力節(jié)點(diǎn)老杜講解的html學(xué)習(xí)教程，非常詳細(xì)全面，完全適合小白入門

內(nèi)容：講解了HTML基礎(chǔ)語法、HTML概述、W3C概述、B/S架構(gòu)系統(tǒng)原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識(shí)點(diǎn)。

通過html教程的學(xué)習(xí)之后，不但可以開發(fā)基本的網(wǎng)頁，還可以看懂別人編寫的HTML頁面。

HTML完整資料下載：
http://www.bjpowernode.com/?toutiaoweb.chai

HTML課程目錄

1.HTML教程:課程內(nèi)容概述

2.HTML教程:BS結(jié)構(gòu)介紹

3.HTML教程:軟件環(huán)境準(zhǔn)備

4.HTML教程:HTML概述

5.HTML教程:我的第一個(gè)HTML

6.HTML教程:HTML的基本標(biāo)簽

7.HTML教程:HTML的實(shí)體符號(hào)

8.HTML教程:HTML的表格

9.HTML教程:HTML的單元格合并1

10.HTML教程:HTML的單元格合并2

11.HTML教程:thead tbody tfoot

12.HTML教程:背景色和背景圖片

13.HTML教程:HTML圖片img標(biāo)簽

14.HTML教程:HTML超鏈接

15.HTML教程:超鏈接的作用-request和response的概念

16.HTML教程:HTML列表

17.HTML教程:form表單初步

18.HTML教程:用戶注冊(cè)表單的實(shí)現(xiàn)

19.HTML教程:下拉列表支持多選

20.HTML教程:form的file控件

21.HTML教程:隱藏域hidden控件

22.HTML教程:隱藏域hidden控件2

23.HTML教程:readonly和disabled

24.HTML教程:控件的maxlength屬性

25.HTML教程:HTML文檔中節(jié)點(diǎn)的id屬性

26.HTML教程:div和span在網(wǎng)頁中的應(yīng)用

今天，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。

可是與此相對(duì)的是，極少大學(xué)的計(jì)算機(jī)專業(yè)愿意開設(shè)前端課程，大部分前端工程師的知識(shí)，也都是在實(shí)踐和工作中不斷學(xué)習(xí)的。

最近收到很多同學(xué)的后臺(tái)留言，說希望多推出一些前端方向的教程。

今天我們就帶來一門適合前端初學(xué)者的課程，可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能，并創(chuàng)建一個(gè)待辦事項(xiàng)的管理應(yīng)用～

項(xiàng)目效果：

課程從最基礎(chǔ)的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進(jìn)，如果你想快速上手 React 框架，這門課會(huì)是你非常好的選擇。

訪問“實(shí)驗(yàn)樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項(xiàng)應(yīng)用”就能學(xué)習(xí)全部課程內(nèi)容。

以下是課程第一節(jié)的內(nèi)容 —— 「HTML 簡(jiǎn)介」，帶你快速入門HTML，讓我們一起進(jìn)入前端的大門看看吧：

「HTML 簡(jiǎn)介」

實(shí)驗(yàn)介紹

本實(shí)驗(yàn)是對(duì) HTML 進(jìn)行學(xué)習(xí)，并且較詳細(xì)的說明了 Web 是如何工作的。主要內(nèi)容有：HTML 常見標(biāo)簽、HTML 文檔結(jié)構(gòu)、HTML 表格和表單、HTML 有序列表和無序列表。通過本節(jié)學(xué)習(xí)，可以構(gòu)建簡(jiǎn)單的 HTML 網(wǎng)頁。

知識(shí)點(diǎn)

什么是 HTML
Web 是如何工作的
文檔結(jié)構(gòu)
常見標(biāo)簽
表格
表單
有序列表和無序列表

什么是 HTML

HTML（超文本標(biāo)記語言）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML 不需要編譯，可以直接由瀏覽器執(zhí)行，它的解析依賴于瀏覽器的內(nèi)核。它不是一種編程語言，而是一種標(biāo)記語言。

Web 是如何工作的

下面我們來演示用戶是如何看到一個(gè)網(wǎng)頁顯示的。

具體來講：

當(dāng)用戶通過瀏覽器輸入網(wǎng)址后，瀏覽器先在 DNS 服務(wù)器上找到它，然后對(duì)它進(jìn)行解析。
解析完成后，瀏覽器給服務(wù)器發(fā)送 http 請(qǐng)求。
服務(wù)器同意這個(gè)請(qǐng)求，就把 HTML 文件發(fā)送回瀏覽器。
瀏覽器拿到 HTML 文件，對(duì)其解析執(zhí)行，顯示在用戶屏幕上。

HTML 文檔結(jié)構(gòu)

首先我們來看一個(gè)例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡(jiǎn)介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

這是一個(gè) HTML 的基本骨架，我們將逐步介紹這些是什么意思。

文檔類型聲明

<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。

html 標(biāo)簽

html 標(biāo)簽即根元素，此處表示文檔的開始，該標(biāo)簽包含兩個(gè)子標(biāo)簽：head 和 body。

head 元素

head 標(biāo)簽下面所包含的標(biāo)簽由 title、meta、link、style、script 等（后面會(huì)講到）。

title 標(biāo)簽

作用：設(shè)置文檔的標(biāo)題或者名稱。瀏覽器通常將該標(biāo)簽的內(nèi)容顯示在窗口頂部或者標(biāo)簽頁上。每個(gè) HTML 文檔只能有一個(gè)，必須有一個(gè) title 標(biāo)簽。

meta 標(biāo)簽

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

body 標(biāo)簽

body 標(biāo)簽定義文檔的主體，也就是我們的主要內(nèi)容（比如文本、超鏈接、圖像、表格和列表等）。

常見標(biāo)簽

1.h 系類標(biāo)簽

h 標(biāo)簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標(biāo)題。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡(jiǎn)介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級(jí)標(biāo)題</h1>
    <h2>我是二級(jí)標(biāo)題</h2>
    <h3>我是三級(jí)標(biāo)題</h3>
    <h4>我是四級(jí)標(biāo)題</h4>
    <h5>我是五級(jí)標(biāo)題</h5>
    <h6>我是六級(jí)標(biāo)題</h6>
  </body>
</html>

為了大家能更有效的學(xué)習(xí)，請(qǐng)使用實(shí)驗(yàn)樓的環(huán)境。首先我們新建一個(gè)文件，點(diǎn)擊 File，然后 New File，命名為 index.html。

然后輸入上面的代碼。

讓我們來看一下運(yùn)行效果吧。鼠標(biāo)右鍵 index.html 文件，點(diǎn)擊 Open With，然后點(diǎn)擊 Preview。

最終效果為：

2.p 標(biāo)簽

p 標(biāo)簽是我們的文本標(biāo)簽，p 標(biāo)簽會(huì)自動(dòng)在其兩個(gè)標(biāo)簽之間創(chuàng)建一些空白。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。

<p>我是第一段文字，實(shí)驗(yàn)樓，做實(shí)驗(yàn)，學(xué)編程</p>
<p>我是第二段文字，實(shí)驗(yàn)樓，做實(shí)驗(yàn)，學(xué)編程</p>

3. 圖片標(biāo)簽

HTML 的圖像是通過標(biāo)簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。

<p>實(shí)驗(yàn)樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 標(biāo)簽

<a> 標(biāo)簽是超鏈接標(biāo)簽，意思就是我們點(diǎn)擊它可以跳轉(zhuǎn)到一個(gè)網(wǎng)頁。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。

<a href="https://www.shiyanlou.com/">實(shí)驗(yàn)樓</a>

點(diǎn)擊文字：

跳轉(zhuǎn)到指定網(wǎng)頁：

篇幅有限，后續(xù)的課程內(nèi)容，請(qǐng)?jiān)?strong>“實(shí)驗(yàn)樓”邊敲代碼邊學(xué)習(xí)～

訪問“實(shí)驗(yàn)樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項(xiàng)應(yīng)用”，就能找到課程，繼續(xù)學(xué)習(xí)啦！

頻地址：

HTML網(wǎng)頁設(shè)計(jì)零基礎(chǔ)入門教程（一），兩分鐘學(xué)會(huì)設(shè)計(jì)第一個(gè)網(wǎng)頁。

文案：

大家好，我是老K。一個(gè)碼齡超過10年的程序員。從今天起，我會(huì)給大家介紹，Web網(wǎng)站開發(fā)的最基本語言：HTML。本期視頻給大家介紹怎么編寫第一個(gè)網(wǎng)頁。什么是HTML呢？HTML就是超文本標(biāo)記語言，用來標(biāo)記通過互聯(lián)網(wǎng)傳輸?shù)木W(wǎng)頁的格式。用HTML標(biāo)記的網(wǎng)頁是靜態(tài)網(wǎng)頁，后綴名一般是.html或.htm。靜態(tài)網(wǎng)頁制作完成以后，其內(nèi)容不會(huì)變化。如果要修改內(nèi)容，必須修改源文件。
HTML用各種元素組織文檔，用一對(duì)尖括號(hào)標(biāo)記元素的開始和結(jié)束。兩個(gè)尖括號(hào)里面的表示元素的內(nèi)容。例如：<title>人工智能</title>，表示網(wǎng)頁的標(biāo)題是，人工智能。所有的,web,設(shè)計(jì)語言都以HTML為基礎(chǔ)。編寫HTML，很簡(jiǎn)單。使用windows自帶的，記事本，就可以編寫。首先，創(chuàng)建一個(gè)文本文檔。用記事本打開文檔，輸入HTML代碼。我們先來看一下效果，稍后我會(huì)詳細(xì)介紹源文件的內(nèi)容。保存以后，關(guān)閉記事本。重命名文本文件，把后綴名改為html。用瀏覽器打開網(wǎng)頁，就看到效果了。
我們來看源文件。
第一個(gè)元素，HTML,是頂級(jí)元素。所有的元素都包含在它里面。
第二個(gè)元素，head，表示文檔的頭部信息。
第三個(gè)元素，title，是head的子元素，表示網(wǎng)頁的標(biāo)題.
第四個(gè)元素，body，是網(wǎng)頁的主體部分。
body，元素的內(nèi)容是一句文本：世界，你好。
好了，這就是本期視頻的內(nèi)容。謝謝觀看！再見！

源文件：

<html>
<head>
<title>This is the fisrt page</title>
</head>
<body>
Hello, world!
</body>
</html>

在線咨詢

上一篇：查看瀏覽器網(wǎng)頁星號(hào)密碼的方法，簡(jiǎn)單無需軟件，小白一看就會(huì)
下一篇：曾經(jīng)風(fēng)光無限的 JSP，為什么現(xiàn)在很少有人使用了？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商