大家好，歡迎來(lái)到前端入門(mén)系列的第一篇博客。在這個(gè)系列中，我們將一起學(xué)習(xí)前端開(kāi)發(fā)的基礎(chǔ)知識(shí)，從零開(kāi)始構(gòu)建網(wǎng)頁(yè)和Web應(yīng)用程序。本篇博客將為大家介紹HTML（超文本標(biāo)記語(yǔ)言）的基礎(chǔ)概念和標(biāo)簽，幫助你快速入門(mén)。
前言：學(xué)習(xí)目標(biāo)
本期學(xué)期目標(biāo)是：
- 了解什么是HTML
- 學(xué)習(xí)了解一個(gè)完整頁(yè)面的HTML的結(jié)構(gòu)
- 了解HTML標(biāo)簽與元素的關(guān)系
- hello world實(shí)踐
- 掌握常見(jiàn)開(kāi)發(fā)工具
- 了解常見(jiàn)瀏覽器及其內(nèi)核
什么是HTML？
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
- HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup Language
- HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
- HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
- HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
- HTML文檔也叫做 web 頁(yè)面
HTML標(biāo)簽與元素
HTML標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱(chēng)為 HTML 標(biāo)簽 (HTML tag)。
- HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如
- HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 和
- 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
- 開(kāi)始和結(jié)束標(biāo)簽也被稱(chēng)為開(kāi)放標(biāo)簽和閉合標(biāo)簽
<標(biāo)簽>內(nèi)容</標(biāo)簽>
HTML元素
“HTML 標(biāo)簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴(yán)格來(lái)講, 一個(gè) HTML 元素包含了開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:
HTML 元素:
<p>這是一個(gè)段落。</p>
HTML網(wǎng)頁(yè)結(jié)構(gòu)
下面是一個(gè)HTML骨架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入門(mén)-html系列</title>
</head>
<body>
<p>程序員小豪</p>
</body>
</html>
實(shí)例解析
1. <!DOCTYPE html>聲明為 HTML5 文檔
2. <html>元素是 HTML 頁(yè)面的根元素
3. <head>元素包含了文檔的元（meta）數(shù)據(jù)，如<meta charset="utf-8">定義網(wǎng)頁(yè)編碼格式為utf-8。
4. <title>元素描述了文檔的標(biāo)題
5. <body>元素包含了可見(jiàn)的頁(yè)面內(nèi)容
6. <h1>元素定義一個(gè)大標(biāo)題
7. <p>元素定義一個(gè)段落
注：在瀏覽器的頁(yè)面上使用鍵盤(pán)上的 F12 按鍵開(kāi)啟調(diào)試模式，就可以看到組成標(biāo)簽。
動(dòng)手寫(xiě)Hello Wrold
選擇開(kāi)發(fā)工具
我們可以選擇以下的開(kāi)發(fā)工具去開(kāi)發(fā)html：
- Visual Studio Code （首選）
- WebStorm
- Sublime Text
- DreamWeaver
- HBuilder
創(chuàng)建文件
本人使用的是vs code，我們可以打開(kāi)一個(gè)文件夾，創(chuàng)建一個(gè)新文件，命名為test.html，并在這個(gè)新文件中輸入’!+回車(chē)’，就會(huì)直接生成一個(gè)html骨架，我們?cè)赽ody標(biāo)簽里使用div標(biāo)簽寫(xiě)上hello word：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入門(mén)-html系列</title>
</head>
<body>
<div>hello world</div>
</body>
</html>
打開(kāi)瀏覽器
在這個(gè)文件里右鍵點(diǎn)擊’open in default browser’，我們就可以看到html被渲染在網(wǎng)頁(yè)上了
常見(jiàn)的五大瀏覽器及其內(nèi)核
這里順便普及一下常見(jiàn)的五大瀏覽器：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-500863.html
| 瀏覽器 | 渲染引擎內(nèi)核 |
|---|---|
| Chrome/Chromium | Blink |
| Firefox | Gecko |
| Safari | WebKit |
| Microsoft Edge | EdgeHTML (舊版) / Blink (新版) |
| Opera | Blink |
每個(gè)瀏覽器使用不同的渲染引擎來(lái)解析和呈現(xiàn)網(wǎng)頁(yè)內(nèi)容，這些渲染引擎在性能、功能和標(biāo)準(zhǔn)支持等方面可能存在差異。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-500863.html
到了這里，關(guān)于【前端｜HTML系列第1篇】HTML的基礎(chǔ)介紹與初次嘗試的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
