Html是什么意思？詳解Html的特點、結(jié)構(gòu)、標(biāo)簽及編輯工具
一、Html是什么意思
Html是Hyper Text Markup Language英文首字母的縮寫，中文翻譯為超文本標(biāo)記語言, 是一種標(biāo)記語言。HTML是一種基礎(chǔ)技術(shù)，常與CSS、Javascript一起被眾多網(wǎng)站用于設(shè)計網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁。HTML描述了一個網(wǎng)站的結(jié)構(gòu)語義隨著線索的呈現(xiàn)，使之成為一種標(biāo)記語言而非編程語言。
HTML元素是構(gòu)建網(wǎng)站的基石。HTML允許嵌入圖像與對象，并且可以用于創(chuàng)建交互式表單，它被用來結(jié)構(gòu)化信息——例如標(biāo)題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。HTML的語言形式為尖括號包圍的HTML元素（如<html>），瀏覽器使用HTML標(biāo)簽和腳本來詮釋網(wǎng)頁內(nèi)容，但不會將它們顯示在頁面上。
HTML可以嵌入如JavaScript的腳本語言，它們會影響HTML網(wǎng)頁的行為。網(wǎng)頁瀏覽器也可以引用層疊樣式表（CSS）來定義文本和其它元素的外觀與布局。維護(hù)HTML和CSS標(biāo)準(zhǔn)的組織萬維網(wǎng)聯(lián)盟（W3C）鼓勵人們使用CSS替代一些用于表現(xiàn)的HTML元素。
二、Html的特點
Html包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，其主要特點如下：
1、簡易性：超文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便。
2、可擴(kuò)展性：超文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。
3、平臺無關(guān)性：雖然個人計算機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，超文本標(biāo)記語言可以使用在廣泛的平臺上，這也是萬維網(wǎng)（WWW）盛行的另一個原因。
4、通用性：另外，HTML是網(wǎng)絡(luò)的通用語言，一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
三、Html的結(jié)構(gòu)
標(biāo)準(zhǔn)的超文本標(biāo)記語言文件都具有一個基本的整體結(jié)構(gòu)，標(biāo)記一般都是成對出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語言文件的開頭與結(jié)尾標(biāo)志和超文本標(biāo)記語言的頭部與實體兩大部分。有三個雙標(biāo)記符用于頁面整體結(jié)構(gòu)的確認(rèn)。
1、標(biāo)記符<html>，說明該文件是用超文本標(biāo)記語言（本標(biāo)簽的中文全稱）來描述的,它是文件的開頭；而</html>,則表示該文件的結(jié)尾，它們是超文本標(biāo)記語言文件的開始標(biāo)記和結(jié)尾標(biāo)記。
2、頭部內(nèi)容
<head> </head>這2個標(biāo)記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標(biāo)記是頁面的標(biāo)題、序言、說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。
3、主體內(nèi)容
<body></body>網(wǎng)頁中顯示的實際內(nèi)容均包含在這2個正文標(biāo)記符之間。正文標(biāo)記符又稱為實體標(biāo)記。
下面是一個典型的網(wǎng)頁源碼的結(jié)構(gòu)劃分：
<html> // Html 開始標(biāo)示
<head> // Html 頭標(biāo)示
<title>Hello</title> // 設(shè)置網(wǎng)頁標(biāo)題
</head> // 頭結(jié)束標(biāo)示
<body> // 主體開始標(biāo)示
<p>Hello world!!!</p> // 放置Hello word！?。∥谋?/p>
</body> // 主體結(jié)束標(biāo)示
</html> // Html結(jié)束標(biāo)示
注意：寫完代碼記得將格式保存為.html（推薦）、.htm、.xhtml。
四、Html標(biāo)簽及作用
| 標(biāo)記 | 類型 | 譯名或意義 | 作用 | 備注 |
| 文件標(biāo)記 | ||||
| <html> | ● | 文件聲明 | 讓瀏覽器知道這是 HTML 文件 | |
| <head> | ● | 開頭 | 提供文件整體資訊 | |
| <title> | ● | 標(biāo)題 | 定義文件標(biāo)題，將顯示于瀏覽頂 | |
| <body> | ● | 本文 | 設(shè)計文件格式及內(nèi)文所在 | |
| 排版標(biāo)記 | ||||
| <!--注解--> | ○ | 說明標(biāo)記 | 為文件加上說明，但不被顯示 | |
| <p> | ○ | 段落標(biāo)記 | 為字、畫、表格等之間留一空白行 | |
| <br> | ○ | 換行標(biāo)記 | 令字、畫、表格等顯示于下一行 | |
| <hr> | ○ | 水平線 | 插入一條水平線 | |
| <center> | ● | 居中 | 令字、畫、表格等顯示于中間 | 反對 |
| <pre> | ● | 預(yù)設(shè)格式 | 令文件按照原始碼的排列方式顯示 | |
| <div> | ● | 區(qū)隔標(biāo)記 | 設(shè)定字、畫、表格等的擺放位置 | |
| <nobr> | ● | 不折行 | 令文字不因太長而繞行 | |
| <wbr> | ● | 建議折行 | 預(yù)設(shè)折行部位 | |
| 字體標(biāo)記 | ||||
| <strong> | ● | 加重語氣 | 產(chǎn)生字體加粗,bold的效果 | |
| <b> | ● | 粗體標(biāo)記 | 產(chǎn)生字體加粗的效果 | |
| <em> | ● | 強(qiáng)調(diào)標(biāo)記 | 字體出現(xiàn)斜體效果 | |
| <i> | ● | 斜體標(biāo)記 | 字體出現(xiàn)斜體效果 | |
| <tt> | ● | 打字字體 | courier字體，字母寬度相同 | |
| <u> | ● | 加上底線 | 加上底線 | 反對 |
| <h1> | ● | 一級標(biāo)題標(biāo)記 | 變粗變大加寬，程度與級數(shù)反比 | |
| <h2> | ● | 二級標(biāo)題標(biāo)記 | 將字體變粗變大加寬 | |
| <h3> | ● | 三級標(biāo)題標(biāo)記 | 將字體變粗變大加寬 | |
| <h4> | ● | 四級標(biāo)題標(biāo)記 | 將字體變粗變大加寬 | |
| <h5> | ● | 五級標(biāo)題標(biāo)記 | 將字體變粗變大加寬 | |
| <h6> | ● | 六級標(biāo)題標(biāo)記 | 將字體變粗變大加寬 | |
| <font> | ● | 字形標(biāo)記 | 設(shè)定字形、大小、顏色 | 反對 |
| <basefont> | ○ | 基準(zhǔn)字形標(biāo)記 | 設(shè)定所有字形、大小、顏色 | 反對 |
| <big> | ● | 字體加大 | 令字體稍為加大 | |
| <small> | ● | 字體縮細(xì) | 令字體稍為縮細(xì) | |
| <strike> | ● | 畫線刪除 | 為字體加一刪除線 | 反對 |
| <code> | ● | 程式碼 | 字體稍為加寬如<tt> | |
| <kbd> | ● | 鍵盤字 | 字體稍為加寬，單一空白 | |
| <samp> | ● | 范例 | 字體稍為加寬如<tt> | |
| <var> | ● | 變數(shù) | 斜體效果 | |
| <cite> | ● | 傳記引述 | 斜體效果 | |
| <blockquote> | ● | 引述文字區(qū)塊 | 縮排字體 | |
| <dfn> | ● | 述語定義 | 斜體效果 | |
| <address> | ● | 地址標(biāo)記 | 斜體效果 | |
| <sub> | ● | 下標(biāo)字 | 下標(biāo)字 | |
| <sup> | ● | 上標(biāo)字 | 指數(shù)（平方、立方等） | |
| 清單標(biāo)記 | ||||
| <ol> | ● | 順序清單 | 清單項目將以數(shù)字、字母順序排列 | |
| <ul> | ● | 無序清單 | 清單項目將以圓點排列 | |
| <li> | ○ | 清單項目 | 每一標(biāo)記標(biāo)示一項清單項目 | |
| <menu> | ● | 選單清單 | 清單項目將以圓點排列，如<ul> | 反對 |
| <dir> | ● | 目錄清單 | 清單項目將以圓點排列，如<ul> | 反對 |
| <dl> | ● | 定義清單 | 清單分兩層出現(xiàn) | |
| <dt> | ○ | 定義條目 | 標(biāo)示該項定義的標(biāo)題 | |
| <dd> | ○ | 定義內(nèi)容 | 標(biāo)示定義內(nèi)容 | |
| 表格標(biāo)記 | ||||
| <table> | ● | 表格標(biāo)記 | 設(shè)定該表格的各項參數(shù) | |
| <caption> | ● | 表格標(biāo)題 | 做成一打通列以填入表格標(biāo)題 | |
| <tr> | ● | 表格列 | 設(shè)定該表格的列 | |
| <td> | ● | 表格欄 | 設(shè)定該表格的欄 | |
| <th> | ● | 表格標(biāo)頭 | 相等于<td>，但其內(nèi)之字體會變粗 | |
| 表單標(biāo)記 | ||||
| <form> | ● | 表單標(biāo)記 | 決定單一表單的運作模式 | |
| <textarea> | ● | 文字區(qū)塊 | 提供文字方盒以輸入較大量文字 | |
| <input> | ○ | 輸入標(biāo)記 | 決定輸入形式 | |
| <select> | ● | 選擇標(biāo)記 | 建立pop-up卷動清單 | |
| <option> | ○ | 選項 | 每一標(biāo)記標(biāo)示一個選項 | |
| 圖形標(biāo)記 | ||||
| <img> | ○ | 圖形標(biāo)記 | 用以插入圖形及設(shè)定圖形屬性 | |
| 連結(jié)標(biāo)記 | ||||
| <a> | ● | 連結(jié)標(biāo)記 | 加入連結(jié) | |
| <base> | ○ | 基準(zhǔn)標(biāo)記 | 可將相對url轉(zhuǎn)絕對及指定連結(jié)目標(biāo) | |
| 框架標(biāo)記 | ||||
| <frameset> | ● | 框架設(shè)定 | 設(shè)定框架 |
五、Html的編輯工具
HTML其實是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為以下幾種：
1、基本文本、文檔編輯軟件，使用微軟自帶的記事本或?qū)懽职宥伎梢跃帉?，?dāng)然，如果你用WPS或Word來編寫也可以，不過保存時請使用.htm或.html作為擴(kuò)展名，這樣就方便瀏覽器認(rèn)出直接解釋執(zhí)行了。
2、半所見即所得軟件，如：FCK-Editer、E-webediter等在線網(wǎng)頁編輯器；尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開發(fā)，Sublime Text2收費但可以無限期試用）。
3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網(wǎng)頁，如：AMAYA（出品單位：萬維網(wǎng)聯(lián)盟）；FRONTPAGE（出品單位：微軟）；Dreamweaver（出品單位Adobe）。Microsoft Visual Studio（出品公司：微軟）：其中所見即所得軟件與半所見即所得的軟件相比，開發(fā)速度更快，效率更高，且直觀的表現(xiàn)更強(qiáng)。任何地方進(jìn)行修改只需要刷新即可顯示。缺點是生成的代碼結(jié)構(gòu)復(fù)雜，不利于大型網(wǎng)站的多人協(xié)作和精準(zhǔn)定位等高級功能的實現(xiàn)。
六、Html的作用
HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁。
HTML通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關(guān)聯(lián)。這些相互關(guān)聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠(yuǎn)的某臺計算機(jī)上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機(jī)方式進(jìn)行連接，為人們查找，檢索信息提供方便。
七、Html常見問題
1、html文件如何打開？
可以使用記事本或者文本文件打開，但是這種打開方式是代碼形式的。也可以使用瀏覽器(IE、360、火狐、谷歌)打開，這樣顯示的就是圖形化界面。
2、HTML 元素和標(biāo)簽有什么區(qū)別？
元素代表某種結(jié)構(gòu)或語義，通常由開始標(biāo)簽、內(nèi)容和結(jié)束標(biāo)簽組成。
標(biāo)簽就是<head>、<body>、<table>等被尖括號 < 和 > 包起來的對象，絕大部分的標(biāo)簽都是成對出現(xiàn)的，如<div></div>、<h1></h1>。
3、什么是語義 HTML？
語義 HTML 是一種編碼風(fēng)格，它是使用 HTML 標(biāo)記來加強(qiáng)內(nèi)容的語義或含義。在語義 HTML 中 <b> </b> 標(biāo)簽不用于粗體語句而是 <strong></strong> ，斜體語句不是用 <i> </i>，而是用 <em></em>。
4、div 和 span 的區(qū)別？
span和div的區(qū)別在于span元素是內(nèi)聯(lián)的，通常用于一行內(nèi)的一小塊，例如段落內(nèi)。而 div 是塊級，相當(dāng)于在其前后有一個換行符，用于對較大的代碼塊進(jìn)行分組。
5、<!DOCTYPE html> 標(biāo)簽是否為 HTML 標(biāo)簽？
不是，<!DOCTYPE html> 聲明不是 HTML 標(biāo)簽。<!DOCTYPE>聲明叫做文件類型定義（DTD），聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行。
總結(jié)
優(yōu)化猩SEO：Html是一種標(biāo)記語言，一種基礎(chǔ)技術(shù)，上網(wǎng)瀏覽的網(wǎng)頁都是Html制作的，一般網(wǎng)站開發(fā)都會將設(shè)計好的圖形界面采用Html格式制作靜態(tài)網(wǎng)頁，然后再由技術(shù)人員進(jìn)行開發(fā)。
參考鏈接：
HTML_百度百科
https://baike.baidu.com/item/HTML/97049
前端面試 18個常見HTML問題與答案_html_devpoint_InfoQ寫作社區(qū)
https://xie.infoq.cn/article/50a240e46c9db63a0ed541175
什么是HTML標(biāo)簽？HTML標(biāo)簽有什么作用？_w3cschool
https://www.w3cschool.cn/html/question-10231661.html
修改于2023-09-03
想了解更多建站百科的內(nèi)容，請訪問：建站百科
