整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 文檔由 HTML 元素定義。
HTML 元素
<phtml 元素指的是從開始標(biāo)簽（start="" tag）到結(jié)束標(biāo)簽（end="" tag）的所有代碼。<="" p="" style="color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px; line-height: normal; white-space: normal;">
| 開始標(biāo)簽 * | 元素內(nèi)容 | 結(jié)束標(biāo)簽 * |
|---|---|---|
| <p> | 這是一個(gè)段落 | </p> |
| <a href="default.htm"> | 這是一個(gè)鏈接 | </a> |
| <br> |
*開始標(biāo)簽常被稱為起始標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag）。
HTML 元素語法
HTML 元素以開始標(biāo)簽起始
HTML 元素以結(jié)束標(biāo)簽終止
元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）
大多數(shù) HTML 元素可擁有屬性
注釋: 您將在本教程的下一章中學(xué)習(xí)更多有關(guān)屬性的內(nèi)容。
嵌套的 HTML 元素
<p大多數(shù) html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">
HTML 文檔由嵌套的 HTML 元素構(gòu)成。
HTML 文檔實(shí)例
<!DOCTYPE html>
<html>
<body>
<p>這是第一個(gè)段落。</p>
</body>
</html>
以上實(shí)例包含了三個(gè) HTML 元素。
HTML 實(shí)例解析
<p> 元素:
<p>這是第一個(gè)段落。</p>
這個(gè) <p> 元素定義了 HTML 文檔中的一個(gè)段落。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <p> 以及一個(gè)結(jié)束標(biāo)簽 </p>.
元素內(nèi)容是: This is my first paragraph.
<body> 元素:
<body>
<p>這是第一個(gè)段落。</p>
</body>
The <body> 元素定義了 HTML 文檔的主體。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <body> 以及一個(gè)結(jié)束標(biāo)簽 </body>。
元素內(nèi)容是另一個(gè) HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>這是第一個(gè)段落。</p>
</body>
</html>
The <html> 元素定義了整個(gè) HTML 文檔。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <html> ，以及一個(gè)結(jié)束標(biāo)簽 </html>.
元素內(nèi)容是另一個(gè) HTML 元素（body 元素）。
不要忘記結(jié)束標(biāo)簽
即使您忘記了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地顯示 HTML：
<p>這是一個(gè)段落
<p>這是一個(gè)段落
以上實(shí)例在瀏覽器中也能正常顯示，因?yàn)殛P(guān)閉標(biāo)簽是可選的。
但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生不可預(yù)料的結(jié)果或錯(cuò)誤。
HTML 空元素
沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。
<br> 就是沒有關(guān)閉標(biāo)簽的空元素（<br> 標(biāo)簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。
在開始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實(shí)是更長遠(yuǎn)的保障。
HTML 提示：使用小寫標(biāo)簽
HTML 標(biāo)簽對(duì)大小寫不敏感：<P> 等同于 <p>。許多網(wǎng)站都使用大寫的 HTML 標(biāo)簽。
W3CSchool 使用的是小寫標(biāo)簽，因?yàn)槿f維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強(qiáng)制使用小寫。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
分享成果，隨喜正能量】人可以無知，但不可以無趣。在自己的心上種一顆快樂的種子，堅(jiān)定、快樂的做自己的事，更讓大家不那么無趣。
《VBA信息獲取與處理》教程是我推出第六套教程，目前已經(jīng)是第一版修訂了。這套教程定位于最高級(jí)，是學(xué)完初級(jí)，中級(jí)后的教程。這部教程給大家講解的內(nèi)容有：跨應(yīng)用程序信息獲得、隨機(jī)信息的利用、電子郵件的發(fā)送、VBA互聯(lián)網(wǎng)數(shù)據(jù)抓取、VBA延時(shí)操作，剪貼板應(yīng)用、Split函數(shù)擴(kuò)展、工作表信息與其他應(yīng)用交互，F(xiàn)SO對(duì)象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數(shù)等等內(nèi)容。程序文件通過32位和64位兩種OFFICE系統(tǒng)測(cè)試。是非常抽象的，更具研究的價(jià)值。
教程共兩冊(cè)，八十四講。今日的內(nèi)容是專題八“VBA與HTML文檔”的第二節(jié)上半部分：HTML文檔常用元素匯總
3）HTML 注釋 <!-- 與 -->
注釋標(biāo)簽 <!-- 與 --> 用于在 HTML 插入注釋。可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會(huì)忽略注釋，也不會(huì)顯示它們。開始括號(hào)之后（左邊的括號(hào)）需要緊跟一個(gè)嘆號(hào)，結(jié)束括號(hào)之前（右邊的括號(hào)）不需要。
注釋可以按下面的格式寫：
<!--注釋：文檔頭部，文檔相關(guān)消息，并不提供文檔內(nèi)容-->
4）段落 <p>
段落是通過 <p> 標(biāo)簽定義的。瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。（<p> 是塊級(jí)元素）
在上面的例子中我們已經(jīng)用到了表述段落的符號(hào)<p>，我們?nèi)绻崛【W(wǎng)頁小說的數(shù)據(jù)，新聞等頁面的消息，文本都是一段一段的，這樣的頁面，我們就可以通過<p>標(biāo)簽實(shí)現(xiàn)。當(dāng)運(yùn)用ie/webbrowser方式提取這類網(wǎng)頁的時(shí)候，歷遍所有段落p元素即可。
使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣。可以用 <br /> 標(biāo)簽代替它！（但是不要用 <br /> 標(biāo)簽去創(chuàng)建列表。）
5）超鏈接 <a>
使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。
超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>
有兩種使用 <a> 標(biāo)簽的方式：通過使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接也可以通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽。
超鏈接是我們最常見的頁面元素，基本的門戶網(wǎng)站都有他，點(diǎn)了以后，可以跳轉(zhuǎn)到另一個(gè)頁面。一般語法格式：
<a href=”跳轉(zhuǎn)的URL” target=” _blank/_self”>顯示的超鏈接文本</a>
Target屬性，表示的是當(dāng)我們點(diǎn)擊超鏈接，是在原頁面進(jìn)行跳轉(zhuǎn)（_self）還是新建頁面進(jìn)行跳轉(zhuǎn)（_blank）。
為了說明這種超鏈接，我們更正一下“HTML基礎(chǔ)學(xué)習(xí)-1.html”的內(nèi)容：
<html>
<head> <!--注釋：文檔頭部，文檔相關(guān)消息，并不提供文檔內(nèi)容-->
<title>
VBA應(yīng)用提高篇
</title>
</head>
<body> <!--注釋：文檔主體-->
<h1>學(xué)習(xí)VBA語言</h1>
<p>為了更好的掌握VBA的各個(gè)知識(shí)點(diǎn)，您可以先參考我的第一套教程：VBA代碼解決方案</p>
<a href="https://mbd.baidu.com/newspage/data/landingshare?pageType=1&isBdboxFrom=1&context=%7B%22nid%22%3A%22news_9520815886500285610%22%2C%22sourceFrom%22%3A%22bjh%22%7D" target=" _blank">顯示學(xué)習(xí)的網(wǎng)頁</a>
</body>
</html>
講上述代碼另存為“HTML基礎(chǔ)學(xué)習(xí)-2.html”內(nèi)容截圖：
打開這個(gè)文件：
點(diǎn)擊鏈接：
查看一下源碼：
1）標(biāo)題 <h1> - <h6>
2）水平線 <hr />
3）注釋 <!-- 與 -->
4）段落 <p>
5）超鏈接 <a>
以上各個(gè)元素我們要熟練的掌握，才能在分析網(wǎng)頁的時(shí)候可以隨心所欲。下一講我們繼續(xù)講解HTML網(wǎng)頁的元素構(gòu)成。
本節(jié)知識(shí)點(diǎn)回向：
什么是HTML文檔的框架結(jié)構(gòu)是怎樣的？說出以下個(gè)元素的標(biāo)簽：標(biāo)題，水平線，注釋，段落，超鏈接 。
本節(jié)參考文件：HTML基礎(chǔ)學(xué)習(xí)-1.html；HTML基礎(chǔ)學(xué)習(xí)-2.html
我20多年的VBA實(shí)踐經(jīng)驗(yàn)，全部濃縮在下面的各個(gè)教程中，教程學(xué)習(xí)順序：
【分享成果，隨喜正能量】人生在世，會(huì)遇到一些好事，還會(huì)遇上些壞事。好事我承受得起，壞事也承受得住。就這樣坦蕩蕩做個(gè)尋常人也不壞。
TML 代碼約定
很多 Web 開發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。
在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。
而針對(duì)于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫，可以使用以下代碼：
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風(fēng)格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個(gè)段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個(gè)段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個(gè)元素都要添加關(guān)閉標(biāo)簽。
不推薦:
<section>
<p>這是一個(gè)段落。
<p>這是一個(gè)段落。
</section>
推薦:
<section>
<p>這是一個(gè)段落。</p>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：
我們可以這么寫：
<meta charset="utf-8">
也可以這么寫：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面，使用這種風(fēng)格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時(shí)使用大小寫是非常不好的習(xí)慣。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5 屬性值可以不用引號(hào)。
屬性值我們推薦使用引號(hào):
如果屬性值含有空格需要使用引號(hào)。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號(hào)易于閱讀。
以下實(shí)例屬性值包含空格，沒有使用引號(hào)，所以不能起作用:
<table class=table striped>
以下使用了雙引號(hào)，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時(shí)，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸，在加載時(shí)可以預(yù)留指定空間，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號(hào)
等號(hào)前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器，左右滾動(dòng)代碼是不方便的。
每行代碼盡量少于 80 個(gè)字符。
空行和縮進(jìn)
不要無緣無故添加空行。
為每個(gè)邏輯功能塊添加空行，這樣更易于閱讀。
縮進(jìn)使用兩個(gè)空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進(jìn)。
不必要的空行和縮進(jìn):
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想,
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>
</body>
表格實(shí)例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表實(shí)例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。
以下 HTML5 文檔是正確的:
實(shí)例:
<!DOCTYPE html>
<head>
<title>頁面標(biāo)題</title>
</head>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文檔的根元素，用于描述頁面的語言：
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會(huì)崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。
省略 <head>?
在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。
默認(rèn)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。
實(shí)例
<!DOCTYPE html>
<html>
<title>頁面標(biāo)題</title>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
</body>
</html>
嘗試一下 ?
| 現(xiàn)在省略 head 標(biāo)簽還不推薦使用。 |
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁面的主題:
<title>菜鳥教程</title>
標(biāo)題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評(píng)論可以在 <!-- 和 --> 中分行寫：
<!--
這是一個(gè)較長評(píng)論。 這是 一個(gè)較長評(píng)論。這是一個(gè)較長評(píng)論。
這是 一個(gè)較長評(píng)論 這是一個(gè)較長評(píng)論。 這是 一個(gè)較長評(píng)論。
-->
長評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀。
樣式表
樣式表使用簡(jiǎn)潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號(hào)與選擇器放在同一行。
左花括號(hào)與選擇器間添加以空格。
使用兩個(gè)空格來縮進(jìn)。
冒號(hào)與屬性值之間添加已空格。
逗號(hào)和符號(hào)之后使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號(hào)。
只有屬性值包含空格時(shí)才使用引號(hào)。
右花括號(hào)放在新的一行。
每行最多 80 個(gè)字符。
| 在逗號(hào)和分號(hào)后添加空格是常用的一個(gè)規(guī)則。 |
在 HTML 中載入 JavaScript
使用簡(jiǎn)潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。
以下兩個(gè) JavaScript 語句會(huì)輸出不同結(jié)果:
實(shí)例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
訪問 JavaScript 代碼規(guī)范。
使用小寫文件名
大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫敏感： london.jpg 不能通過 London.jpg 訪問。
其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫的文件名。
文件擴(kuò)展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來處理。
區(qū)別在于：
.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。
在 Unix 系統(tǒng)中后綴沒有特別限制，一般用 .html。
技術(shù)上區(qū)別
如果一個(gè) URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。
不管怎樣，HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
