HTML文檔元素

分享成果，隨喜正能量】人生，有多少計(jì)較，就有多少痛苦。有多少寬容，就有多少歡樂。痛苦與歡樂都是心靈的折射，就像鏡子里面有什么，決定于鏡子面前的事物。心里放不下，自然成了負(fù)擔(dān)，負(fù)擔(dān)越多，人生越不快樂。計(jì)較的心如同口袋，寬容的心猶如漏斗。復(fù)雜的心愛計(jì)較，簡單的心易快樂。

《VBA信息獲取與處理》教程是我推出第六套教程，目前已經(jīng)是第一版修訂了。這套教程定位于最高級，是學(xué)完初級，中級后的教程。這部教程給大家講解的內(nèi)容有：跨應(yīng)用程序信息獲得、隨機(jī)信息的利用、電子郵件的發(fā)送、VBA互聯(lián)網(wǎng)數(shù)據(jù)抓取、VBA延時操作，剪貼板應(yīng)用、Split函數(shù)擴(kuò)展、工作表信息與其他應(yīng)用交互，F(xiàn)SO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數(shù)等等內(nèi)容。程序文件通過32位和64位兩種OFFICE系統(tǒng)測試。是非常抽象的，更具研究的價(jià)值。

教程共兩冊，八十四講。今日的內(nèi)容是專題八“VBA與HTML文檔”的第二節(jié)上半部分：HTML文檔元素

第二節(jié) HTML文檔的元素分析之一

大家好，我們這講開始HTML的講解，為了認(rèn)識這種特殊的語言，我們要先看看這種語言中的各種元素個代表什么意義。上節(jié)中在講這種語言的特征時講過，標(biāo)簽是用來描述網(wǎng)頁的。瀏覽器讀取HTML文檔，識別標(biāo)簽，并按標(biāo)簽要求以網(wǎng)頁進(jìn)行顯示文本。大部分標(biāo)簽都是成隊(duì)出現(xiàn)的。

起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有文本，都叫做元素。也就是這個格式就是：

<起始標(biāo)簽:也叫元素名>元素的內(nèi)容<結(jié)束標(biāo)簽:/+元素名>

標(biāo)簽是可以擁有屬性的，屬性提供了元素的一些附加信息，起始標(biāo)簽，有時候格式如下：

<元素名屬性名稱=”屬性值”>

同時，元素是可以擁有元素的，即某個元素的內(nèi)容有時候是一個子元素。

元素這東西，比較抽象，我們可以把它且當(dāng)作一個對象來理解，例如工作簿對象，每個工作簿的名稱都不一樣（屬性），每個工作簿里面都有工作表（子元素），每個表都有名稱（屬性），里面填寫的內(nèi)容也不一樣（元素的內(nèi)容）。

1 HTML文檔構(gòu)成的整體框架結(jié)構(gòu)

在上一講中我們舉了一個最為簡單的實(shí)例來說明HTML文檔：

<html>

<body>

<h1>學(xué)習(xí)VBA語言</h1>

<p>為了更好的掌握VBA的各個知識點(diǎn)，您可以參考我的第一套教程：VBA代碼解決方案</p>

</body>

</html>

我們將上面的格式修正一下，如下面：

<html>

<title>

VBA應(yīng)用提高篇

</title>

</head>

<h1>學(xué)習(xí)VBA語言</h1>

<p>為了更好的掌握VBA的各個知識點(diǎn)，您可以先參考我的第一套教程：VBA代碼解決方案</p>

</body>

</html>

將上面的內(nèi)容寫入記事本中保存為.html文件：HTML基礎(chǔ)學(xué)習(xí)-1.html

然后我們雙擊打開這個文件，看看瀏覽器的翻譯效果：

我們再看看網(wǎng)頁的源碼：

從上面的框架代碼，我們可以看出，一般的頁面，都有html元素，其一般內(nèi)含兩個元素，一個是head元素，一個是body元素。Head元素僅僅說明文檔的相關(guān)消息，并不展示文檔實(shí)體，body元素才是真正展示文檔主體的，所有要在頁面展示的元素，都要在body內(nèi)進(jìn)行書寫。

2 HTML文檔常用元素的構(gòu)成

1）HTML標(biāo)題 <h1> - <h6>

標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。瀏覽器會自動地在標(biāo)題的前后添加空行。標(biāo)題很重要，將 HTML heading 標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號的文本而使用標(biāo)題。因?yàn)橛脩艨梢酝ㄟ^標(biāo)題來快速瀏覽您的網(wǎng)頁，所以用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。在HTML基礎(chǔ)學(xué)習(xí).HTML文件中我們已經(jīng)用到了標(biāo)題的元素

2）HTML水平線 <hr />

<hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。可用于分隔內(nèi)容。

[待續(xù)]

本節(jié)參考文件：HTML基礎(chǔ)學(xué)習(xí)-1.html；HTML基礎(chǔ)學(xué)習(xí)-2.html

我20多年的VBA實(shí)踐經(jīng)驗(yàn)，全部濃縮在下面的各個教程中，教程學(xué)習(xí)順序：

【分享成果，隨喜正能量】人生，一歲有一歲的味道，一站有一站的風(fēng)景，你的年齡應(yīng)該成為你生命的勛章而不是你傷感的理由。 ??

lt;marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=left></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定卷動距離

<marquee scrolldelay=300>...</marquee>設(shè)定卷動時間

<!>字體效果

<h1>...</h1>標(biāo)題字(最大)

<h6>...</h6>標(biāo)題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強(qiáng)調(diào))

<i>...</i>斜體字

<em>...</em>斜體字(強(qiáng)調(diào))

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =font-size:100 px>...</font>無限增大

<!>區(qū)斷標(biāo)記

<hr>水平線

<hr size=9>水平線(設(shè)定大小)

<hr width=80%>水平線(設(shè)定寬度)

<hr color=ff0000>水平線(設(shè)定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結(jié)格式

<base href=位址>(預(yù)設(shè)好連結(jié)路徑)

<a href=位址></a>外部連結(jié)

<a href=位址 target=_blank></a>外部連結(jié)(另開新視窗)

<a href=位址 target=_top></a>外部連結(jié)(全視窗連結(jié))

<a href=位址 target=頁框名></a>外部連結(jié)(在指定頁框連結(jié))

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設(shè)定圖片寬度

<img src=圖片位址 height=30>設(shè)定圖片高度

<img src=圖片位址 alt=提示文字>設(shè)定圖片提示文字

<img src=圖片位址 border=1>設(shè)定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設(shè)定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲存格合并列的列數(shù)(使用數(shù)字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調(diào)整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

<! - - ... - -> 注解

<a href target> 指定超連結(jié)的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結(jié)

<a href> 指定超連結(jié)

<a name=錨的名稱> 被連結(jié)點(diǎn)的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結(jié)的分割視窗

<basefont size> 更改預(yù)設(shè)字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設(shè)定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設(shè)定表格標(biāo)題位置

<caption>...</caption> 為表格加上標(biāo)題

<center> 向中對齊

<cite>...<cite> 用於引經(jīng)據(jù)典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設(shè)定定義列表的項(xiàng)目解說

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標(biāo)簽

<dl>...</dl> 設(shè)定定義列表的標(biāo)簽

<dt> 設(shè)定定義列表的項(xiàng)目

<em> 強(qiáng)調(diào)之用

<font face> 任意指定所用的字形

<font size> 設(shè)定字體大小

<form action> 設(shè)定戶動式表單的處理方式

<form method> 設(shè)定戶動式表單之資料傳送方式

<frame marginheight> 設(shè)定視窗的上下邊界

<frame marginwidth> 設(shè)定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設(shè)定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設(shè)定文字大小

<head> 標(biāo)示文件資訊

<hr> 加上分格線

<html> 文件的開始與結(jié)束

<i> 斜體字

<img align> 調(diào)整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預(yù)設(shè)圖形大小

<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界

<img lowsrc> 預(yù)載圖片功能

<img src border> 設(shè)定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項(xiàng)目 ( 可指定符號 )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標(biāo)簽

<multiple> 可同時選擇多項(xiàng)的列表欄

<noframe> 定義不出現(xiàn)分割視窗的文字

<ol>...</ol> 有序號的列表

<option> 定義表單中列表欄的項(xiàng)目

<p align> 設(shè)定對齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強(qiáng)語氣

<sub> 下標(biāo)字

<sup> 上標(biāo)字

<table border=n> 調(diào)整表格的寬線高度

<table cellpadding> 調(diào)整資料欄位之邊界

<table cellspacing> 調(diào)整表格線的寬度

<table height> 調(diào)整表格的高度

<table width> 調(diào)整表格的寬度

<table>...</table> 產(chǎn)生表格的標(biāo)簽

<td align> 調(diào)整表格欄位之左右對齊

<td bgcolor> 設(shè)定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設(shè)定表格欄位不換行

<td valign> 調(diào)整表格欄位之上下對齊

<td width> 調(diào)整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動否換行

<th>...</th> 定義表格的標(biāo)頭欄位

<title> 文件標(biāo)題

<tr>...</tr> 定義表格美一行

<tt> 打字機(jī)字體

<u> 文字加底線

<ul type>...</ul> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數(shù)

述

HTML文檔由HTML元素組成，一個HTML元素由一個標(biāo)簽和一組屬性組成。一個標(biāo)簽可以有一個或多個屬性，屬性以名稱和值成對出現(xiàn)。Web 瀏覽器讀取HTML 文檔，并以網(wǎng)頁的形式顯示出來，瀏覽器不會顯示 HTML 標(biāo)簽，而是通過標(biāo)簽來解釋網(wǎng)頁的內(nèi)容。

HTML(Hyper Text Mark-up Language超文本標(biāo)記語言)：不是編程語言，而是一種描述性的標(biāo)記語言，用于描述網(wǎng)頁中內(nèi)容的顯示方式，比如文字以什么顏色、大小來顯示等，這些都是利用Html標(biāo)記來實(shí)現(xiàn)。

HTML標(biāo)簽是由尖括號（“<”和“>”）包圍的關(guān)鍵詞，如標(biāo)簽 <p>。標(biāo)簽不區(qū)分大小寫，故 <p> 和 <P> 的含義相同，不過推薦使用小寫。

HTML標(biāo)簽通常成對出現(xiàn)，一個是開始標(biāo)簽，一個是結(jié)束標(biāo)簽。開始標(biāo)簽告訴瀏覽器，從這里開始執(zhí)行該標(biāo)簽所表示的功能；結(jié)束標(biāo)簽告訴瀏覽器，該功能到這里結(jié)束。在開始標(biāo)簽前加一個斜杠（/）即成為結(jié)束標(biāo)簽。如，html 元素的開始標(biāo)簽是 <html>，結(jié)束標(biāo)簽是</html>。也就是說，一個HTML 元素由開始標(biāo)簽、內(nèi)容、結(jié)束標(biāo)簽組成。開始標(biāo)簽是放在一對尖括號中的元素名稱及可能包含的屬性，結(jié)束標(biāo)簽是放在一對尖括號中的斜杠加元素的名稱。語法格式為：<開始標(biāo)簽>內(nèi)容</結(jié)束標(biāo)簽>。如，em 元素的開始標(biāo)簽為<em>，結(jié)束標(biāo)簽為 </em>，在<em> 和 </em> 標(biāo)簽之間是元素的內(nèi)容。如下圖所示：

HTML的文檔結(jié)構(gòu)

所有的網(wǎng)頁文件，通過都是四對標(biāo)記來構(gòu)成文檔的骨架，它們是：

小結(jié)：

<html>…</html>標(biāo)識網(wǎng)頁文件的開始與結(jié)束，所有的Html元素，都要放在這對標(biāo)記中。

<head>…</head>標(biāo)識網(wǎng)頁文件的頭部信息，如標(biāo)題、搜索引擎關(guān)鍵字等

<title>…</title>標(biāo)識網(wǎng)頁文件的標(biāo)題

<body>…</body>標(biāo)識網(wǎng)頁文件的主體部分

常見的HTML的標(biāo)記語法

1. 單標(biāo)記

一．<標(biāo)記名稱>

單一型，無屬性值

如：<br/>——表示換行符

二．<標(biāo)記名稱屬性=”屬性值”>

單一型，有屬性值

如：<hr width=”80%”/>

2. 雙標(biāo)記

三．<標(biāo)記名稱>…</標(biāo)記名稱>

沒有屬性值

如：<title>…<title>

四．<標(biāo)記名稱屬性=”屬性值”>…</標(biāo)記名稱>

有屬性值

如：<body bgcolor=”red”>…</body>

注釋

格式：

<!—注釋內(nèi)容-->

Body屬性

<font>標(biāo)記

語法：

字符格式

段落標(biāo)記

格式：

HTML中的特殊字符

修飾標(biāo)記

水平直線<hr/>

覺得不錯的朋友關(guān)注下哩，后面會分享HTML標(biāo)簽屬性、描點(diǎn)、表單等更多干貨。

在線咨詢

上一篇：潤揚(yáng)科技制作三合一覆蓋全網(wǎng)，只做有效果的網(wǎng)站!
下一篇：1.7萬個JavaScript文件,Etsy大型代碼庫如何完成向TypeScript遷移

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商