建設(shè)銀行官方網(wǎng)站地址新品牌推廣策略
文章目錄
- 什么是 HTML ？
- HTML 的構(gòu)成 ？
- 什么是 HTML 元素？
- HTML 元素的組成部分
- HTML 元素的特點(diǎn)
- HTML 基本文檔結(jié)構(gòu)
- 如何打開新建的 HTML 文件
- 代碼查看
什么是 HTML ？
HTML（超文本標(biāo)記語言，HyperText Markup Language）是一種用來告知瀏覽器如何組織頁面的標(biāo)記語言。它定義了網(wǎng)頁的內(nèi)容結(jié)構(gòu)，通過不同的標(biāo)簽，HTML 可以定義網(wǎng)頁內(nèi)容的結(jié)構(gòu)和層次，包括文本、圖片、視頻、表格等。每個(gè)標(biāo)簽都有特定的語義和功能，能夠幫助瀏覽器正確顯示網(wǎng)頁內(nèi)容。
HTML 是上個(gè)世紀(jì)90年代由歐洲核子研究中心的物理學(xué)家 蒂姆·伯納斯-李（Tim Berners-Lee）發(fā)明。它的最大特點(diǎn)就是支持超鏈接，點(diǎn)擊鏈接就可以跳轉(zhuǎn)到其他網(wǎng)頁，從而構(gòu)成了整個(gè)互聯(lián)網(wǎng)。
可以說，HTML是所有網(wǎng)頁的骨架，并且與 CSS 和 JavaScript 組合使用，能夠?qū)崿F(xiàn)網(wǎng)頁的樣式設(shè)計(jì)和交互功能。
1999年，HTML 4.01 版發(fā)布，成為廣泛接受的 HTML 標(biāo)準(zhǔn)。2014年，HTML 5 發(fā)布，這是目前正在使用的版本。
瀏覽器的網(wǎng)頁開發(fā)，涉及三種技術(shù)：HTML、CSS 和 JavaScript。
HTML 語言定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，CSS 樣式表定義網(wǎng)頁的樣式，JavaScript 語言定義網(wǎng)頁與用戶的互動(dòng)行為。
HTML 語言是網(wǎng)頁開發(fā)的基礎(chǔ)，相當(dāng)于網(wǎng)頁的“骨架”，CSS 和 JavaScript 都是基于 HTML 才能生效，但即使沒有這兩者，HTML 本身也能使用，可以完成基本的內(nèi)容展示。
HTML 的構(gòu)成 ？
HTML 由一系列的元素組成，這些元素可以用來包圍或標(biāo)記不同部分的內(nèi)容，使其以某種方式呈現(xiàn)或者工作。
元素是網(wǎng)頁的一部分。在 XML 和 HTML 中，一個(gè)元素可以包含一個(gè)數(shù)據(jù)項(xiàng)，或是一塊文本，或是一張照片，亦或是什么也不包含。一個(gè)典型的元素包括一個(gè)具有一些屬性的開始標(biāo)簽，中間的文本內(nèi)容和一個(gè)結(jié)束標(biāo)簽。
HTML 的關(guān)鍵特性：
- 超文本（HyperText）意味著它可以在不同頁面之間建立鏈接。
- 標(biāo)記語言（Markup Language）意味著它使用標(biāo)簽來標(biāo)記文本，定義網(wǎng)頁的結(jié)構(gòu)。
什么是 HTML 元素？
元素是 HTML 的核心單位，它通常由一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽構(gòu)成，中間包含內(nèi)容或其他嵌套的元素。每個(gè)元素定義了網(wǎng)頁的一部分結(jié)構(gòu)或功能。例如：
<p>這是一個(gè)段落。</p>
在這個(gè)例子中，<p> 是段落標(biāo)簽，表示一個(gè)段落元素。標(biāo)簽之間的文本就是段落的內(nèi)容。HTML 通過這樣的元素來組織網(wǎng)頁內(nèi)容的層次和結(jié)構(gòu)。
HTML 元素的組成部分
- 開始標(biāo)簽：標(biāo)記元素的開始。例如，
<p>表示段落的開始。 - 內(nèi)容：位于標(biāo)簽之間的文本或其他嵌套的HTML元素。例如，
這是一個(gè)段落是段落的內(nèi)容。 - 結(jié)束標(biāo)簽：標(biāo)記元素的結(jié)束。例如，
</p>表示段落的結(jié)束。
一些元素（如 <img> 和 <br> ）是自閉合標(biāo)簽，它們沒有結(jié)束標(biāo)簽，僅包含屬性，不需要包裹內(nèi)容。例如：
<img src="image.jpg" alt="圖片描述">
HTML 元素的特點(diǎn)
- 層次性：HTML 元素可以相互嵌套，形成層次結(jié)構(gòu)。瀏覽器會(huì)解析這些嵌套關(guān)系，以正確呈現(xiàn)內(nèi)容。
- 語義化：HTML 提供了語義化標(biāo)簽，使頁面結(jié)構(gòu)和內(nèi)容更具可讀性和可訪問性。例如，
<header>、<footer>等標(biāo)簽不僅用于布局，還傳達(dá)了內(nèi)容的意義。
HTML 元素使開發(fā)者能夠靈活地組織內(nèi)容，為網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)提供了完整的基礎(chǔ)。通過這些元素，瀏覽器可以理解并展示網(wǎng)頁內(nèi)容，從而實(shí)現(xiàn)更好的用戶體驗(yàn)。
HTML 基本文檔結(jié)構(gòu)
一個(gè)標(biāo)準(zhǔn)的 HTML 文檔具有以下基本結(jié)構(gòu)：
<!DOCTYPE html>
<html><head><title>網(wǎng)頁標(biāo)題</title><meta charset="UTF-8"></head><body><!-- 網(wǎng)頁的主要內(nèi)容 --></body>
</html>
<!DOCTYPE html>: 聲明文檔的類型，確保瀏覽器按照 HTML 規(guī)范解析頁面內(nèi)容。<html>: HTML 文檔的根元素，所有 HTML 內(nèi)容都嵌套在其中。<head>: 包含網(wǎng)頁的元數(shù)據(jù)，例如字符編碼、頁面標(biāo)題、CSS 樣式和腳本的引入等。<meta charset="UTF-8">: 聲明文檔使用的字符集為 UTF-8，這幾乎是所有現(xiàn)代網(wǎng)頁的標(biāo)準(zhǔn)。<title>: 定義網(wǎng)頁的標(biāo)題，這個(gè)標(biāo)題將顯示在瀏覽器標(biāo)簽頁上。<body>: 包含網(wǎng)頁的主要可見內(nèi)容，如文本、圖像、表格和表單等。
在 VS Code 中創(chuàng)建一個(gè)新 HTML 文件時(shí)（如 01.html），可以利用內(nèi)置的 Emmet 快捷方式來生成基本結(jié)構(gòu)。只需輸入 ! 并按下 Tab 鍵，即可自動(dòng)生成如下 HTML 基礎(chǔ)模板：
如何打開新建的 HTML 文件
-
創(chuàng)建 HTML 文件：在代碼編輯器（如 VS Code 或者是 Webstorm ）中新建一個(gè) HTML 文件，命名為
01.html，并將 HTML 基礎(chǔ)結(jié)構(gòu)輸入其中。 -
保存文件：保存文件后，確保文件擴(kuò)展名為
.html，以便瀏覽器能夠識(shí)別它是網(wǎng)頁文件。 -
在瀏覽器中打開文件：
- 方法 1：直接雙擊
01.html文件，它會(huì)在默認(rèn)瀏覽器中打開。 - 方法 2：在文件上右鍵選擇“用瀏覽器打開”或“Open with”選項(xiàng)，然后選擇所需的瀏覽器。
- 方法 3 ( VS Code 內(nèi)置功能)： 在 VS Code 中安裝 “Live Server” 擴(kuò)展。安裝完成后，右鍵點(diǎn)擊文件并選擇 “Open with Live Server”，即可在本地服務(wù)器上實(shí)時(shí)查看文件，并且每次保存都會(huì)自動(dòng)刷新頁面。
- 方法 4 ( Webstorm 內(nèi)置功能)： 在 Webstorm 中，html 文件的右上角會(huì)出現(xiàn) “內(nèi)置預(yù)覽”、“Chrome”等小圖標(biāo)，點(diǎn)擊即可打開，或者是右鍵菜單中選擇 “運(yùn)行 01.html”，即可在瀏覽器打開頁面。
- 方法 1：直接雙擊
這樣，您可以在瀏覽器中查看新建的HTML文件并檢查內(nèi)容效果。
代碼查看
在瀏覽器中打開網(wǎng)頁，右鍵選擇“查看頁面源碼”（View Page Source）即可查看HTML文檔的完整結(jié)構(gòu)。這對(duì)了解網(wǎng)頁的結(jié)構(gòu)和調(diào)試代碼非常有幫助。
