電腦小白學編程 HTML基礎概述程序員復習學習必備

全棧攻城獅-每日更新原創(chuàng)IT編程技術及日常實用視頻。

主要內(nèi)容：正式引入HTML網(wǎng)頁開發(fā)，學習并了解HTML的相關知識。變身Web開發(fā)達人，做全棧程序員。這是以第一課，希望以我的方式，你將學會HTML這門課程。

寫在前面

今天的話，主要講解一下HTML相關知識，同樣在接下來的一段時間的安排中，也以HTML為主。崇尚全棧，也就意味著我們，需要學習主流的技術知識。在前一段時間內(nèi)，主要講解了.Net的只是教程。當然.NET并沒有完畢。

C#語言

只是在這里把HTML穿插進來，一則鞏固自己所得，二來學習一下這門非常簡單的HTML技術。學習完畢HTML之后則會，繼續(xù)進行基礎加強、數(shù)據(jù)庫、MVC等教程的協(xié)作工作。

PDF文檔

同時在前一個階段內(nèi)，講解的并不是很好，在這個HTML階段內(nèi)，則會吸取教訓，爭取寫出更符合初學者學習的技術教程。當然前面的課程也會不斷的修正，最后我會生成PDF的文檔，發(fā)給大家。

HTML概述

HTML，超文本標記語言，超文本就意味著有多于文字的形式，比如包含超鏈接、圖片、視頻、動畫等形式。HTML是應用在網(wǎng)站網(wǎng)頁展現(xiàn)的一種語法結構。我們在使用瀏覽器瀏覽網(wǎng)頁的時候，看到的界面都是由HTML代碼表現(xiàn)出來的。HMTL可以說是一種展示文字圖片視頻等元素的一種方式。通過特定的標記就能展示出來自己想要的效果。如何展現(xiàn)？就讓我一步步教你。

學習HTML的必要性

物聯(lián)網(wǎng)

互聯(lián)網(wǎng)的飛速發(fā)展，導致了形形色色的網(wǎng)站應用被創(chuàng)建。云計算、物聯(lián)網(wǎng)仿佛唾手可得。把諸多應用建立在云上，通過這種瀏覽器與用戶交互的形式讓人們使用。這些所有網(wǎng)絡應用，只要是通過瀏覽器進行使用的情況，都是需要HTML技術。當然HTML作為基礎之用。這就要求我們程序員，必須學習并熟悉HTML語言。能在這個基礎上進行Web的開發(fā)。

HTML語言的特點

HTML是解釋性語言，不需編譯，直接書寫之后，就可以運行。
HTML是純文本類型的語言，你完全可以通過記事本程序進行創(chuàng)建書寫。
雖然HTML可以通過記事本來創(chuàng)建寫代碼，但是并不推薦，因為以前學習過.Net，所以依舊使用Visual Studio。VS也是前端的開發(fā)神器。
自己寫的HTML代碼，在不同的瀏覽器內(nèi)，可能會有不同的展示效果。這是由瀏覽器的渲染引擎決定的。
HTML具有平臺無關性，在任何平臺只要擁有一款瀏覽器，你就可以打開HTML網(wǎng)頁。
HTML代碼運行在瀏覽器中，也就是需要使用瀏覽器進行測試。

HTML

今天就先說一下HTML的基本知識，電腦編程系列教程，下節(jié)繼續(xù)。

TML的入門

1. HTML的代碼文件

（1）打開Hbuilder開發(fā)工具，新建項目，點擊右鍵新建一個HTML文檔。

（2）在文檔中寫HTML代碼

<!DOCTYPE html>

<html>

<head>

</head>

<body>

這是產(chǎn)品頁面

</body>

</html>

溫馨提示：

常用的快捷鍵：

Ctrl+s:保存

ctrl+c:復制

ctrl+x：剪切

ctrl+v：粘貼

2. HTML的基本結構

對于HTML文件的后綴名一般為“html”或“htm”

2.1HTML的標簽格式

（1）什么是HTML標簽？

HTML標簽是有開始標簽和結束標簽組成

開始標簽：是被尖括號包圍的元素名。

結束標簽：是被尖括號包圍的斜杠和元素名

<元素>內(nèi)容 </元素>

例如：<b>好好學習天天向上</b>

注意：有些HTML標簽是沒有結束標簽的, <hr/>

(2)單標簽和雙標簽

雙標簽：例如：<b></b>

單標簽：<hr/> <br/>

(3) 標簽的屬性

我是一個標題標簽

</h1>

3. HTML基本結構的認識

<!DOCTYPE html>

<html>

<head>

<!--

meta：提供網(wǎng)頁的相關信息，有利于搜索引擎收錄

charset="UTF-8"：設置網(wǎng)頁編碼方式為utf-8

name="Keywords" ：設置網(wǎng)頁關鍵字

name="viewport": 設置網(wǎng)頁視窗大小

-->

</head>

<body>

<!--

<body></body>：網(wǎng)頁的主體內(nèi)容，用戶呈現(xiàn)的內(nèi)容，比如文字，圖片，鏈接，視頻……

-->

</body>

</html>

4. HTML的注釋

5. HTML的編碼問題

常見編碼個格式：

UTF-8:國際通用的編碼格式

GBK/GB2312:中文編碼字符

HTML的編碼：<meta charset="UTF-8">

6. HTML規(guī)范

（1）html標簽都是有尖括號包圍的標簽，比如<b>

（2）標簽通常是成對存在，<b></b>,<h1></h1>

（3）HTML不區(qū)分大小寫，我們建議小寫。

（4）HTML可以嵌套，但是允許交叉嵌套

正確寫法：<b> <h1>我很粗</h1> </b>

錯誤寫法：

~~<b> <h1>我很粗 </b></h1>~~

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

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

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

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

項目效果：

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

訪問“實驗樓”官網(wǎng)，搜索“從 0 到 1 構建待辦事項應用”就能學習全部課程內(nèi)容。

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

「HTML 簡介」

實驗介紹

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

知識點

什么是 HTML
Web 是如何工作的
文檔結構
常見標簽
表格
表單
有序列表和無序列表

什么是 HTML

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

Web 是如何工作的

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

具體來講：

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

HTML 文檔結構

首先我們來看一個例子：

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

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

文檔類型聲明

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

html 標簽

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

head 元素

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

title 標簽

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

meta 標簽

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

body 標簽

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

常見標簽

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>

為了大家能更有效的學習，請使用實驗樓的環(huán)境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。

然后輸入上面的代碼。

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

最終效果為：

2.p 標簽

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

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

3. 圖片標簽

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

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

4.a 標簽

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

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

點擊文字：

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

篇幅有限，后續(xù)的課程內(nèi)容，請在“實驗樓”邊敲代碼邊學習～

訪問“實驗樓”官網(wǎng)，搜索“從 0 到 1 構建待辦事項應用”，就能找到課程，繼續(xù)學習啦！

在線咨詢

上一篇：HTML語言是什么？
下一篇：分享 10個酷炫的后臺模板，給不愛寫頁面的程序員

您的項目需求

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

整合營銷服務商

電腦小白學編程 HTML基礎概述 程序員復習學習必備