技術(shù)分享 | web前端的HTML淺析
WEB 就是 World Wide Web 的縮寫，稱之為全球廣域網(wǎng)，俗稱 WWW。對于用戶來說其實(shí)就是由多個(gè)網(wǎng)頁組合在一起而形成一種服務(wù)。
WEB 前端負(fù)責(zé)展示一個(gè)網(wǎng)站當(dāng)中前臺網(wǎng)頁里的內(nèi)容。而網(wǎng)頁是由前端工程師使用 HTML 語言編寫而成的一種文件，它里面會包含文字、圖片、超鏈接、音頻、視頻等等這些內(nèi)容。
HTML 超文本標(biāo)記語言（Hyper Text Markup Language）就是用來描述網(wǎng)頁的一種計(jì)算機(jī)語言。
HTML發(fā)展
在互聯(lián)網(wǎng)最初的時(shí)候是沒有 HTML 的，只能通過網(wǎng)絡(luò)傳輸最簡單的文字內(nèi)容。隨著用戶的要求越來越多，同時(shí)也隨著技術(shù)的不斷發(fā)展，就出現(xiàn)了一種可以表達(dá)文字內(nèi)容之外的語言 HTML1.0。后來又慢慢發(fā)展到了現(xiàn)在的 HTML5，也就是現(xiàn)在常說的 H5。
HTML查看工具
在測試過程中，有時(shí)候需要通過工具去查看對應(yīng)的 HTML 代碼。在這里可以用瀏覽器自帶的開發(fā)者工具，打開這個(gè)工具的快捷鍵是 F12。
開發(fā)者工具是一個(gè)相當(dāng)強(qiáng)大的工具?？梢圆榭葱薷?HTML，還可以調(diào)試 JS，可以修改 CSS，還可以查看網(wǎng)絡(luò)數(shù)據(jù)，并且還能進(jìn)行性能測試，非常的全能。對于 WEB 測試來說，是一個(gè)必須要掌握的工具。
要查看 HTML 源碼，只需要進(jìn)入開發(fā)者工具的 Elements 界面。在這里可以對 WEB 頁面上的元素進(jìn)行定位，并且查看整個(gè) WEB 頁面的 HTML 源碼。
HTML基本結(jié)構(gòu)
網(wǎng)頁是通過 HTML 語言來書寫。用 HTML 語言去書寫網(wǎng)頁有一些結(jié)構(gòu)是默認(rèn)必須存在的， 這個(gè)結(jié)構(gòu)就叫做網(wǎng)頁（HTML）骨架。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
</head>
<body>
</body>
</html>
標(biāo)簽就是 HTML 語言的發(fā)明者人為定義好的一些“單詞”，不同的標(biāo)簽代表了不同的功能。
標(biāo)簽有兩種常見的形式：
單標(biāo)簽：
<標(biāo)簽名 />雙標(biāo)簽：
<標(biāo)簽名稱><!--標(biāo)簽名稱--><!DOCTYPE html>：向?yàn)g覽器聲明當(dāng)前的文檔是 HTML 類型。<html>?與?</html>?之間的文本描述網(wǎng)頁，是網(wǎng)頁當(dāng)中最大的一個(gè)標(biāo)簽，稱之為根標(biāo)簽。<head>?與?</head>?描述網(wǎng)頁頭部，里面的內(nèi)容是寫給瀏覽器看的。<meta charset="UTF-8">?表示在設(shè)置當(dāng)前網(wǎng)頁的顯示編碼。<title>?與?</title>?之間文本為網(wǎng)頁的標(biāo)題，里面的內(nèi)容會在瀏覽器的標(biāo)簽頁上顯示。<body>?與?</body>?之間的文本是網(wǎng)頁主體，里面的內(nèi)容會顯示在瀏覽器的空白區(qū)域內(nèi)。<div>?與?</div>?之間定義網(wǎng)頁中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分。<h1>?與?</h1>?之間的文本被顯示為標(biāo)題。<p>?與?</p>?之間的文本被顯示為段落。
<html lang="en"><head>
? ?<meta charset="UTF-8">
? ?<title>網(wǎng)頁標(biāo)題</title></head><body>
? ?<div>
? ? ? ?<h1>我的第一個(gè)網(wǎng)頁</h1>
? ? ? ?<p>網(wǎng)頁中的內(nèi)容</p>
? ?</div></body></html>
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現(xiàn)，比如：name=“value”。
屬性的基本格式為：<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”>
每個(gè)標(biāo)簽都可以擁有多個(gè)屬性。屬性必須寫在開始標(biāo)簽中，位于標(biāo)簽名的后面。屬性之間不區(qū)分順序。標(biāo)簽名與屬性、屬性與屬性之間使用空格隔開。任何屬性都有默認(rèn)值，省略該屬性表示使用默認(rèn)值。
在 HTML 里，屬性也有很多種，比如首先有全局屬性，全局屬性是所有的標(biāo)簽都可以使用的。然后還有事件屬性，事件大家可以理解為不同的操作。在不同的操作中，也有特殊的屬性可以定義。最后還有各個(gè)標(biāo)簽的一些獨(dú)有的屬性。
比如常見的全局屬性有:
class：規(guī)定元素的類名
id：規(guī)定元素的唯一 id
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
? ? <div id="first">網(wǎng)頁中的內(nèi)容</div>
</body>
</html>
