當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

web从零开始做网站：一.HTML基础与工具选择

發(fā)布時(shí)間：2024/5/14 HTML 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 web从零开始做网站：一.HTML基础与工具选择小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

提示：HTML基礎(chǔ)與工具選擇

文章目錄

前言
一、HTML的概念
- 1.網(wǎng)頁(yè)的本質(zhì)
- 2.HTML
- 2.1標(biāo)簽的語(yǔ)法規(guī)范（這里簡(jiǎn)略概括）
- 2.2html的骨架
二、開(kāi)發(fā)工具
- 1.文本編輯工具（替代我們的文本工具）
- 2.集成開(kāi)發(fā)環(huán)境
三.HBuilder（國(guó)產(chǎn)，對(duì)中文友好）

前言

web從零開(kāi)始做網(wǎng)站：一.HTML基礎(chǔ)與工具選擇

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、HTML的概念

1.網(wǎng)頁(yè)的本質(zhì)

我們可以進(jìn)行實(shí)操感受一下：
首先新建一個(gè)txt文本文件，在其中輸入內(nèi)容

保存后我們把它直接從桌面拽進(jìn)瀏覽器圖標(biāo)，我們可以發(fā)現(xiàn)一個(gè)很神奇的現(xiàn)象。

在我們的網(wǎng)址欄，是我們的路徑，而內(nèi)容便顯示在瀏覽器中。%20，是因?yàn)槲业谋镜匚募锸切陆?文本文檔.txt,存在一個(gè)空格。
由此可以得到結(jié)論：網(wǎng)頁(yè)本質(zhì)上還是一個(gè)文本文件。
但我們還是需要更改一下后綴名為htm或者h(yuǎn)tml。更改之后我們會(huì)發(fā)現(xiàn)

默認(rèn)的瀏覽器不同，圖標(biāo)的顯示也是不一樣的。
瀏覽器會(huì)默認(rèn)解析html文件。

2.HTML

HTML：HyperText Mark-up Language, 超文本標(biāo)記語(yǔ)言。是用來(lái)描述網(wǎng)頁(yè)的一種標(biāo)記語(yǔ)言。
它包括一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。
HTML的核心就是標(biāo)簽，到目前為止總共的標(biāo)簽超過(guò)了100個(gè)。
全部HTML標(biāo)簽，可以參考：https://html5.tool.webfrontend.dev/

我們肯定不用全學(xué)，后面我會(huì)講解最常用的以及建立網(wǎng)站必要的標(biāo)簽。

2.1標(biāo)簽的語(yǔ)法規(guī)范（這里簡(jiǎn)略概括）

HTML標(biāo)簽是由尖括號(hào)包圍的。

根據(jù)標(biāo)簽的書寫形式，分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽)。

標(biāo)簽可以嵌套，不能交叉嵌套。

標(biāo)簽中可以包含屬性。

標(biāo)簽不區(qū)分大小寫。

2.2html的骨架

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body></body> </html>

二、開(kāi)發(fā)工具

1.文本編輯工具（替代我們的文本工具）

2.集成開(kāi)發(fā)環(huán)境

**這里我們推薦這兩個(gè)免費(fèi)的VScode和HBuilder，百度可以直接官網(wǎng)下載安裝。

三.HBuilder（國(guó)產(chǎn)，對(duì)中文友好）

進(jìn)入官網(wǎng)（大家有興趣可以好好探索一下）

點(diǎn)擊上欄的所有產(chǎn)品，并選擇第一行最左邊HBuilder X極客開(kāi)發(fā)工具。

正常進(jìn)行下載
下載完畢后，我們進(jìn)行解壓，解壓的位置就是你平常安裝軟件的地址
完畢后，在文件夾里打開(kāi)
因?yàn)橐L(zhǎng)期使用，建議大家創(chuàng)建快捷方式到桌面上打開(kāi)。

迎面滿滿的中國(guó)風(fēng)

第一次使用我說(shuō)的仔細(xì)一點(diǎn)
首先新建一個(gè)項(xiàng)目（也就是個(gè)文件夾，類似于工作區(qū)）,當(dāng)我們要有某個(gè)具體的目標(biāo)項(xiàng)目的時(shí)候，可以直接命名成項(xiàng)目名稱。

其他的具體內(nèi)容需要大家具體去探索。
我這里直接從git里導(dǎo)入

總結(jié)

以上是生活随笔為你收集整理的web从零开始做网站：一.HTML基础与工具选择的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。