整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML文檔元素

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

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

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

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

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

          在上一講中我們舉了一個最為簡單的實例來說明HTML文檔:

          <html>

          <body>

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

          <p>為了更好的掌握VBA的各個知識點,您可以參考我的第一套教程:VBA代碼解決方案</p>

          </body>

          </html>

          我們將上面的格式修正一下,如下面:

          <html>

          <head> <!--注釋:文檔頭部,文檔相關(guān)消息,并不提供文檔內(nèi)容-->

          <title>

          VBA應(yīng)用提高篇

          </title>

          </head>

          <body> <!--注釋:文檔主體-->

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

          <p>為了更好的掌握VBA的各個知識點,您可以先參考我的第一套教程:VBA代碼解決方案</p>

          </body>

          </html>

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

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

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

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

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

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

          標(biāo)題(Heading)是通過 <h1> - <h6> 等標(biāo)簽進行定義的。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。瀏覽器會自動地在標(biāo)題的前后添加空行。標(biāo)題很重要,將 HTML heading 標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號的文本而使用標(biāo)題。因為用戶可以通過標(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實踐經(jīng)驗,全部濃縮在下面的各個教程中,教程學(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>粗體字(強調(diào))

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

          <em>...</em>斜體字(強調(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 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é)點的名稱

          <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è)定定義列表的項目解說

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

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

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

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

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

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

          <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> 列表的項目 ( 可指定符號 )

          <marquee> 跑馬燈效果

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

          <meta name="refresh" content url> 自動更新文件內(nèi)容

          <multiple> 可同時選擇多項的列表欄

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

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

          <option> 定義表單中列表欄的項目

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

          <p> 分段

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

          <pre> 使用原有排列

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

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

          <small> 顯示小字體

          <strike> 文字加橫線

          <strong> 用於加強語氣

          <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> 打字機字體

          <u> 文字加底線

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

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

          本篇文章開始成哥將帶大家一起學(xué)習(xí)一下前端的基礎(chǔ)知識,我們先講解前端的基礎(chǔ)HTML與CSS,這個講完我們將講解VUE前端框架,最后我們再講講Ant Design的VUE前端框架,從而形成前端一個系列的教程,下面就開始我們今天的內(nèi)容吧!

          01 HTML簡介

          HTML的英文全稱是 Hyper Text Markup Language,即超文本標(biāo)記語言。

          HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語言,它是標(biāo)準(zhǔn)通用化標(biāo)記語言SGML的應(yīng)用。用HTML編寫的超文本文檔稱為HTML文檔,它能獨立于各種操作系統(tǒng)平臺(如UNIX, Windows等)。

          使用HTML語言,將所需要表達的信息按某種規(guī)則寫成HTML文件,通過專用的瀏覽器來識別,并將這些HTML文件"翻譯"成可以識別的信息,即現(xiàn)在所見到的網(wǎng)頁。HTML 不需要編譯,可以直接由瀏覽器執(zhí)行,非常方便開發(fā)時調(diào)試。

          02 HTML實例

          我們現(xiàn)在創(chuàng)建一個典型的HTML結(jié)構(gòu)具體如下:

          1. <!DOCTYPE html>  
          2. <html lang="ch">  
          3. <head>  
          4.     <meta charset="UTF-8">  
          5.     <title>HTML實例</title>  
          6. </head>  
          7. <body>  
          8.   <h1>我是標(biāo)題</h1>  
          9.   <p>我是段落。</p>  
          10. </body>  
          11. </html> 

          如上頁面中各個標(biāo)簽代表的意思如下:

          1)<!DOCTYPE html>是文檔聲明頭,它告訴游覽器當(dāng)前處理的內(nèi)容是HTML頁面

          2)html是 HTML 頁面的根元素,用于標(biāo)識HTML內(nèi)容的開始與結(jié)束

          3) head是HTML頁面的頭,包含了文檔的一些屬性。其中meta是元數(shù)據(jù)這邊charset="UTF-8"標(biāo)識當(dāng)前頁面編碼格式為UTF-8,title為文檔的標(biāo)題

          4)body是HTML主體也是游覽器在顯示頁面時的內(nèi)容。h1是body內(nèi)容中定義的標(biāo)題,p是body內(nèi)容中定義的段落

          我們現(xiàn)在通過游覽器打開編寫的HTML內(nèi)容,具體內(nèi)容如下

          在HTML中的內(nèi)容可以通過以下格式進行內(nèi)容注釋具體如下:

          03 HTML標(biāo)簽、元素、屬性、實體編碼與事件

          (1)HTML標(biāo)簽

          HTML 標(biāo)簽是 HTML 語言中最基本的單位,HTML 標(biāo)簽是 HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)最重要的組成部分。HTML標(biāo)簽具有如下特點:

          1)標(biāo)簽一般是成對出現(xiàn)的 如:<div></div>;也有空標(biāo)簽 如:<br />

          2)標(biāo)簽由<>包括,分為開始標(biāo)簽(開放標(biāo)簽)和結(jié)束標(biāo)簽(閉合標(biāo)簽)

          3)標(biāo)簽不區(qū)分大小寫,根據(jù)W3C(萬維網(wǎng)聯(lián)盟)推薦,統(tǒng)一使用小寫字母

          標(biāo)簽的示列如下:

          標(biāo)簽按照<>的對數(shù)可以分為如下兩類分別為雙標(biāo)簽與單標(biāo)簽,下面我們具體來了解一下這兩類標(biāo)簽。

          1)雙標(biāo)簽

          雙標(biāo)簽指由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。其基本語法格式如下:

          1. <標(biāo)記名></標(biāo)記名>

          常見的雙標(biāo)簽有如下幾種:

          1. <html></html>  
          2. <head></head>  
          3. <title></title>  
          4. <body></body>  
          5. <h1></h1>  
          6. <p></p>  
          7.   
          8. <!-- 塊級元素 -->  
          9. <div></div>  
          10. <span></span>  
          11.   
          12. <!-- 超鏈接元素 -->  
          13. <a></a>  
          14.   
          15. <!-- 列表元素 -->  
          16. <ul></ul>  

          2)單標(biāo)簽

          單標(biāo)簽是指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)記。其基本語法格式如下:

          1. <標(biāo)記名/>

          常見的單標(biāo)簽有如下幾種:

          1. <!-- 換行標(biāo)簽 -->  
          2. <br />  
          3.   
          4. <!-- 分隔線標(biāo)簽 -->  
          5. <hr />  
          6.   
          7. <!-- 圖片標(biāo)簽 -->  
          8. <img />  

          (2)HTML元素

          HTML 元素指的是從開始標(biāo)簽(start tag)到結(jié)束標(biāo)簽(end tag)的所有代碼,如<p>段落</p>。元素可以進行嵌套具體如下:

          1. <div>  
          2.   <h1>我是標(biāo)題</h1>  
          3.     
          4.   <div>  
          5.     <p>元素嵌套示列</p>  
          6.   </div>  
          7.   
          8. </div>  

          (3)HTML屬性

          屬性為 HTML 元素提供附加信息,可分為全局屬性(即所有元素均可使用的屬性,如id,class等)和元素屬性(部分元素可使用的屬性,例如<a href="http://www.baidu.com">搜索</a>),屬性通常由屬性名="屬性值"構(gòu)成,存在于開始標(biāo)簽中,示列如下:

          (4)HTML實體編碼

          對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應(yīng)的"實體編碼",如< <> >空格 。

          (5)HTML事件

          通過某個動作,執(zhí)行某個操作/JS腳本的能力。如點擊按鈕,改變顏色,事件可以分為多類比多鼠標(biāo)點擊、鼠標(biāo)聚焦等,下面我看看看一個事件編寫示列:

          04 HTML常用標(biāo)簽示列

          (1)h標(biāo)簽

          h 標(biāo)簽有六種分別為h1、h2、h3、h4、h5、h6,這六個分別對應(yīng)六種樣式的標(biāo)題,我們現(xiàn)在來編寫這六種h標(biāo)簽,演示代碼如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎(chǔ)教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   <h1>H1標(biāo)題</h1>  
          9.   <h2>H2標(biāo)題</h2>  
          10.   <h3>H3標(biāo)題</h3>  
          11.   <h4>H4標(biāo)題</h4>  
          12.   <h5>H5標(biāo)題</h5>  
          13.   <h6>H6標(biāo)題</h6>  
          14. </body>  
          15. </html>  

          我們來運行該HTML文件,來看看這六種h標(biāo)簽有什么樣式差異,從示列中可以發(fā)現(xiàn)h1標(biāo)簽字體最大然后依次減小。

          (2)p標(biāo)簽

          p 標(biāo)簽是文本標(biāo)簽,現(xiàn)在我們來編寫一段含有p標(biāo)簽的html文本,然后運行了看看p標(biāo)簽的樣式具體操作如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎(chǔ)教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <h4>標(biāo)題一</h4>  
          10.   <p>我是段落1</p>  
          11.   
          12.   <h4>標(biāo)題二</h4>  
          13.   <p>我是段落2</p>  
          14.   
          15. </body>  
          16. </html>  

          (3)a標(biāo)簽

          a標(biāo)簽是超鏈接標(biāo)簽,點擊a標(biāo)簽可以跳轉(zhuǎn)到其設(shè)置的網(wǎng)站,具體示列如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎(chǔ)教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   <div>  
          9.     <a href="http://www.baidu.com">點我跳轉(zhuǎn)到百度頁面</a>  
          10.   </div>  
          11.   
          12.   <div>  
          13.     <a href="http://www.qq.com">點我跳轉(zhuǎn)到騰訊頁面</a>  
          14.   </div>  
          15.   
          16. </body>  
          17. </html>  

          (4)div標(biāo)簽

          div標(biāo)簽是一個塊級元素,它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子,我們可以為這個盒子設(shè)置各種各樣屬性(如高度、寬度、顏色等),下面我們編寫一個div標(biāo)簽并設(shè)置其長為300px,寬度為200px,同時給其一個背景顏色,具體如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎(chǔ)教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
          10.   
          11. </body>  
          12. </html>  

          (5)列表標(biāo)簽

          列表作為網(wǎng)頁設(shè)計的重要內(nèi)容之一,能夠用來制作導(dǎo)航欄和新聞列表等。HTML 列表分為:有序列表(ol),無序列表(ul)以及自定義列表(dl)

          1)有序列表ul

          有序列表的順序是有序的,默認情況下會以數(shù)字來排列,但也可以通過設(shè)置其type屬性以大寫字母、小寫字母、大寫羅馬數(shù)字、小寫羅馬數(shù)字來排列,我們現(xiàn)在來寫一個示列,具體如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎(chǔ)教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <!--  有序列表,以默認方式數(shù)字排列 -->  
          10.   <p>有序列表默認方式數(shù)字排列</p>  
          11.   <ol>  
          12.     <li>列表1</li>  
          13.     <li>列表2</li>  
          14.     <li>列表3</li>  
          15.   </ol>  
          16.   
          17.   <!--  有序列表,以大寫字母排列 -->  
          18.   <p>有序列表大寫字母排列</p>  
          19.   <ol type="A">  
          20.     <li>列表1</li>  
          21.     <li>列表2</li>  
          22.     <li>列表3</li>  
          23.   </ol>  
          24.   
          25. </body>  
          26. </html>  

          2)無序列表ol

          無序列表的順序是無序的,不會按照某個值來排序,無序列表中每個列表前默認都有一個實心圓,也可以通過type屬性來設(shè)置成空心圓或者小方塊,無序列表示列如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎(chǔ)教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <p>無序列表默認type樣式</p>  
          10.   <ul>  
          11.     <li>列表1</li>  
          12.     <li>列表2</li>  
          13.     <li>列表3</li>  
          14.   </ul>  
          15.   
          16.   <p>無序列表方塊樣式</p>  
          17.   <ul type="square">  
          18.     <li>列表1</li>  
          19.     <li>列表2</li>  
          20.     <li>列表3</li>  
          21.   </ul>  
          22.   
          23. </body>  
          24. </html>  

          3)自定義列表dl

          自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項以 <dt> 開始,其列表內(nèi)容是以<dd> 開始,自定義列表前面沒有任何標(biāo)識,其具體示例如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎(chǔ)教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <p>自定義列表</p>  
          10.   <dl>  
          11.     <dt>東岳</dt>  
          12.     <dd>泰山</dd>  
          13.   
          14.     <dt>南岳</dt>  
          15.     <dd>衡山</dd>  
          16.   
          17.     <dt>西岳</dt>  
          18.     <dd>華山</dd>  
          19.   
          20.     <dt>北岳</dt>  
          21.     <dd>恒山</dd>  
          22.   
          23.     <dt>中岳</dt>  
          24.     <dd>嵩山</dd>  
          25.   </dl>  
          26.   
          27. </body>  
          28. </html>  

          (6)其它標(biāo)簽

          1)換行標(biāo)簽<br/>

          在HTML中如果想給內(nèi)容進行換行可以使用換行標(biāo)簽,具體示列如下:

          2)分割線標(biāo)簽<hr/>

          <hr/> 標(biāo)簽用于在 HTML創(chuàng)建一條分割線,具體示列如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎(chǔ)教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <p>我是張三</p>  
          10.   <!-- 分割線標(biāo)簽 -->  
          11.   <hr/>  
          12.   <p>我是李四</p>  
          13. </body>  
          14. </html>  

          05 總結(jié)

          至此我們《HTML基礎(chǔ)教程上篇》就講完了,下篇內(nèi)容主要講解HTML樣式、HTML表單、Tabel等,敬請期待。最后如果喜歡本篇文章不要忘了點贊、關(guān)注與轉(zhuǎn)發(fā)哦!

          -END-

          @IT管理局專注計算機領(lǐng)域技術(shù)、大學(xué)生活、學(xué)習(xí)方法、求職招聘、職業(yè)規(guī)劃、職場感悟等類型的原創(chuàng)內(nèi)容。期待與你相遇,和你一同成長。

          文章推薦:

          • 一文秒懂Web框架基礎(chǔ)之WSGI協(xié)議
          • IT工程師都需要掌握的容器技術(shù)之掃盲篇

          主站蜘蛛池模板: 国产精品视频一区国模私拍| 天堂va视频一区二区| 亚洲av午夜福利精品一区| 无码中文字幕乱码一区| 亚洲电影唐人社一区二区| 日韩爆乳一区二区无码| 78成人精品电影在线播放日韩精品电影一区亚洲 | 国产成人高清精品一区二区三区 | av无码一区二区三区| 狠狠色婷婷久久一区二区| 无码人妻精品一区二区三18禁| 国产精品视频第一区二区三区| 亚洲一区中文字幕久久| 亚洲AV日韩综合一区| 久久精品中文字幕一区| 久久久国产精品亚洲一区| 色一情一乱一区二区三区啪啪高| 精品一区狼人国产在线| 日韩精品成人一区二区三区| 亚洲综合av一区二区三区 | 日韩一区二区在线观看视频| 国产免费一区二区三区| 本免费AV无码专区一区| 亚洲大尺度无码无码专线一区| 日本丰满少妇一区二区三区 | 制服丝袜一区二区三区| 日韩视频免费一区二区三区| 国产高清在线精品一区小说 | 熟妇人妻AV无码一区二区三区| 亚洲日本精品一区二区| 亚洲综合av一区二区三区不卡| 人妻无码一区二区三区四区| 无码人妻精品一区二| 久久综合精品不卡一区二区| 国产在线观看91精品一区| 亚洲色婷婷一区二区三区| 日韩一区二区在线免费观看| 亚洲国产精品一区二区成人片国内| 婷婷亚洲综合一区二区| 亚洲AV成人一区二区三区AV| 中文字幕精品一区二区|