肖sir_html之基本使用（1）

、新建項(xiàng)目

1、新建===web項(xiàng)目===輸入項(xiàng)目名稱====完成

二、新建html文件

在新建項(xiàng)目中新建html模板

輸入文件名稱：

三、認(rèn)識(shí)基本格式

聯(lián)想出基本格式：

四、編輯html文件

運(yùn)行html，選擇瀏覽器

五、html常用的快捷鍵

（1）ctrl+n+w web項(xiàng)目創(chuàng)建

（2）ctrl+n+h html文檔創(chuàng)建

（3）ctrl+s 保存html頁面（頁面上如果未保存會(huì)顯示*號(hào)）

（4）ctrl+r html運(yùn)行
（5）ctrl+z 撤回
（6）！+tab鍵聯(lián)想基本格式
（7）ctrl+/ 注釋和取消注釋

（8）ctrl+鼠標(biāo)滾輪，字體方大和縮小

六、認(rèn)識(shí)標(biāo)簽

（1）H標(biāo)簽（標(biāo)題標(biāo)簽）

（2）p標(biāo)簽（段落標(biāo)簽）

（3）img 標(biāo)簽（圖片標(biāo)簽）
兩種：第一種widows上傳圖片，第二種：網(wǎng)上圖片鏈接

第一種

img中顯示圖片

img中引入圖片

第二種：網(wǎng)上圖片的鏈接：

（4）標(biāo)簽（空格）

（5）em 標(biāo)簽表示斜體

（6）i 標(biāo)簽表示斜體

（7）br 表示換行

（8）b 標(biāo)簽表示加粗

（9） strong 標(biāo)簽表示加粗

（10）s 標(biāo)簽（刪除線）

（11）u 標(biāo)簽（下劃線）

（12）font 顏色

（13）sub下標(biāo)
（14）sup上標(biāo)

TML教程

超文本標(biāo)記語言（英語：HyperText Markup Language，簡(jiǎn)稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。

您可以使用 HTML 來建立自己的 WEB 站點(diǎn)，HTML 運(yùn)行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學(xué)習(xí)如何使用 HTML 來創(chuàng)建站點(diǎn)。

HTML 很容易學(xué)習(xí)！相信您能很快學(xué)會(huì)它！

本教程包含了數(shù)百個(gè) HTML 實(shí)例。

使用本站的編輯器，您可以輕松實(shí)現(xiàn)在線修改 HTML，并查看實(shí)例運(yùn)行結(jié)果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個(gè)標(biāo)題</h1>
        <p>我的第一個(gè)段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡(jiǎn)介

實(shí)例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標(biāo)題</h1>
<p>這是我的段落</p>
</body>
</html>

實(shí)例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset=“utf-8”> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個(gè)大標(biāo)題
<p> 元素定義一個(gè)段落

什么是HTML？

HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標(biāo)記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標(biāo)記語言
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁面
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML

標(biāo)簽

HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>

HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>

標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽

開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽

<標(biāo)簽>內(nèi)容</標(biāo)簽>

html元素

“HTML 標(biāo)簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴(yán)格來講, 一個(gè) HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:

HTML 元素:

<p>這是一個(gè)段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁顯示。

瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來決定如何展現(xiàn)HTML頁面的內(nèi)容給用戶

html網(wǎng)頁結(jié)構(gòu)

<html>
    <head>
        <title>頁面標(biāo)題</title>
    </head>
    <body>
        <h1>這是一個(gè)標(biāo)題</h1>
        <p>這是一個(gè)段落。</p>
        <p>這是另外一個(gè)段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。

網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。

doctype 聲明是不區(qū)分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會(huì)出現(xiàn)中文亂碼的情況，這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。

TML編輯器是一種用于創(chuàng)建、編輯和預(yù)覽HTML（超文本標(biāo)記語言）代碼的工具或應(yīng)用程序。它提供了一個(gè)直觀的界面，使用戶能夠輕松地編寫和設(shè)計(jì)網(wǎng)頁內(nèi)容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。

參考文檔：https://www.cjavapy.com/article/3299/

1、Visual Studio Code（VS Code ）

Visual Studio Code（簡(jiǎn)稱VS Code）是一款由微軟開發(fā)的跨平臺(tái)源代碼編輯器，支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā)，包括編輯HTML、CSS、JavaScript等前端技術(shù)。VS Code是一款輕量級(jí)的代碼編輯器，啟動(dòng)迅速，占用資源少。VS Code提供了豐富的擴(kuò)展和插件，可以根據(jù)需求安裝插件來增強(qiáng)編輯器功能。

1）安裝和配置

官網(wǎng)地址：Visual Studio Code - Code Editing. Redefined

根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的VS Code。打開VS Code后，可以根據(jù)自己的喜好配置編輯器設(shè)置，如主題、字體等。

2）新建HTML文件

在 VS Code 安裝完成后，選擇" 文件(F)->新建文件(N) "，在新建的文件中輸入以下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

3）編輯HTML文件

在VS Code中，點(diǎn)擊左上角的"文件"菜單，選擇"打開文件"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。

在編輯器中可以直接修改HTML文件的內(nèi)容。VS Code會(huì)自動(dòng)識(shí)別HTML標(biāo)記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。

4）插件推薦

HTML CSS Support：提供對(duì)HTML和CSS的支持，包括代碼片段、自動(dòng)補(bǔ)全等功能。

Live Server：啟動(dòng)一個(gè)本地開發(fā)服務(wù)器，實(shí)時(shí)預(yù)覽HTML頁面的效果。

Prettier：格式化HTML代碼，使代碼結(jié)構(gòu)更整潔。

Auto Close Tag：自動(dòng)閉合HTML標(biāo)簽，提高編碼效率。

Bracket Pair Colorizer：對(duì)成對(duì)的括號(hào)進(jìn)行著色，方便識(shí)別代碼塊。

2、Sublime Text

Sublime Text是一款流行的跨平臺(tái)源代碼編輯器，支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā)，包括編輯HTML、CSS、JavaScript等前端技術(shù)。

Sublime Text的界面非常簡(jiǎn)潔，沒有多余的菜單和工具欄，更便于專注于代碼編輯。Sublime Text支持多種編程語言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強(qiáng)大的插件系統(tǒng)，用戶可以根據(jù)需要安裝插件來擴(kuò)展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等，以滿足個(gè)性化需求。Sublime Text啟動(dòng)迅速，響應(yīng)快速，適合于快速編輯代碼。

1）安裝和配置

官網(wǎng)地址：Sublime Text - Text Editing, Done Right

根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Sublime Text。打開Sublime Text后，可以根據(jù)自己的喜好進(jìn)行編輯器設(shè)置，如字體、主題等。

2）新建HTML文件

在Sublime Text 安裝完成后，選擇" File->New File "，在新建的文件中輸入以下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

3）編輯HTML文件

在Sublime Text中，點(diǎn)擊左上角的"File"菜單，選擇"Open File"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。在編輯器中可以直接修改HTML文件的內(nèi)容。Sublime Text會(huì)自動(dòng)識(shí)別HTML標(biāo)記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。

4）插件推薦

Emmet：提供HTML/CSS快速編寫和自動(dòng)完成功能，可以大大提高編碼效率。

Sublime Linter：對(duì)代碼進(jìn)行實(shí)時(shí)語法檢查，幫助發(fā)現(xiàn)潛在的錯(cuò)誤和警告。

Color Highlighter：對(duì)CSS中的顏色進(jìn)行高亮顯示，方便調(diào)試和修改樣式。

SideBarEnhancements：增強(qiáng)側(cè)邊欄功能，提供更多文件操作選項(xiàng)。

3、Dreamweaver

Dreamweaver是由Adobe公司開發(fā)的一款全球知名的網(wǎng)頁設(shè)計(jì)和開發(fā)工具。它為開發(fā)人員和設(shè)計(jì)師提供了一個(gè)可視化的界面，可以直觀地創(chuàng)建和編輯網(wǎng)頁內(nèi)容，同時(shí)也支持手動(dòng)編輯代碼。Dreamweaver提供可視化界面，可以直觀地拖拽和編輯網(wǎng)頁元素，無需手動(dòng)編寫代碼。除了可視化界面，Dreamweaver也支持手動(dòng)編輯代碼，適合于開發(fā)人員和設(shè)計(jì)師。Dreamweaver可在Windows和macOS等多個(gè)平臺(tái)上運(yùn)行。Dreamweaver集成了代碼編輯器、預(yù)覽窗口、文件管理器等功能，提供全面的開發(fā)環(huán)境。

1）安裝和配置

官網(wǎng)地址：Website design software | Adobe Dreamweaver

根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Dreamweaver。打開Dreamweaver后，，根據(jù)需要進(jìn)行編輯器設(shè)置，如界面語言、字體、代碼顏色等。

2）編輯HTML文件

在Dreamweaver中，點(diǎn)擊左上角的"File"菜單，選擇"New"，然后選擇"HTML"，即可新建一個(gè)空白的HTML文件。內(nèi)容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

使用可視化界面，可以直接拖拽頁面元素、調(diào)整布局、插入圖片等。若需要手動(dòng)編輯HTML代碼，可以在下方的代碼編輯器中進(jìn)行修改。Dreamweaver會(huì)自動(dòng)提供代碼補(bǔ)全和語法高亮功能。在Dreamweaver中，可以實(shí)時(shí)預(yù)覽網(wǎng)頁效果，點(diǎn)擊右上角的"Live View"按鈕即可。

3）CSS和JavaScript支持

Dreamweaver也支持CSS和JavaScript的編輯和預(yù)覽，可以幫助創(chuàng)建更豐富的網(wǎng)頁效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼，并實(shí)時(shí)查看效果。

4）網(wǎng)頁上傳和發(fā)布

Dreamweaver集成了FTP功能，可以直接將編輯好的網(wǎng)頁上傳到服務(wù)器。點(diǎn)擊"Site"菜單，選擇"Manage Sites"，配置好站點(diǎn)設(shè)置，即可進(jìn)行上傳和發(fā)布。

5）Dreamweaver模板和庫(kù)

Dreamweaver提供模板和庫(kù)功能，可以保存和復(fù)用常用的網(wǎng)頁元素和樣式，提高開發(fā)效率。

參考文檔：https://www.cjavapy.com/article/3299/

在線咨詢

上一篇：JavaScript+css實(shí)現(xiàn)的圖片自動(dòng)滑動(dòng)切換頁面web前端html源碼
下一篇：網(wǎng)頁WEB集成IP視頻監(jiān)控不是夢(mèng)，0基礎(chǔ)不懂編程？你也可以做到

您的項(xiàng)目需求

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

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

肖sir_html之基本使用（1）

1、Visual Studio Code（VS Code ）

2、Sublime Text

3、Dreamweaver

您的項(xiàng)目需求