整合營銷服務(wù)商

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

          免費咨詢熱線:

          html中的元素類型種類及特點

          在HTML中,存在這許許多多的元素(同:”HTML標簽”),這些元素最終可分為三類,分別是塊級元素,內(nèi)聯(lián)元素(同:”行內(nèi)元素”),塊級內(nèi)聯(lián)元素(同:”行內(nèi)塊元素”)。

          你對這些元素是否真的了解呢?

          我們來看看這三類元素的特點:

          塊級元素

          一.特點

          1.每個塊級元素都從新的一行開始顯示(塊級元素獨占一行)

          2.元素的寬度,高度,內(nèi)邊距(padding),邊框(border),外邊框(margin)都能隨意設(shè)置

          3.塊級元素在網(wǎng)頁中所占面積=內(nèi)容區(qū)(content)+內(nèi)邊距(padding)+邊框(border)+外邊距(margin)

          4.塊級元素本身未設(shè)置寬度的情況下,寬度=父元素寬度-該元素的左右外邊距-該元素的左右邊框-該元素的左右內(nèi)邊距

          5.塊級元素未設(shè)置padding和border的情況下,padding和border的數(shù)值為0

          6.塊級元素未設(shè)置寬度和外邊距的情況下,margin的值為0,寬度為100%(即與父元素寬度一致)

          7.塊級元素設(shè)置寬度但未設(shè)置外邊距的情況下,左外邊距的值為0

          8.塊級元素設(shè)置寬度,未設(shè)置padding和border,同時設(shè)置margin: 0 auto的情況下,左右外邊距平分 父元素寬度-該元素寬度所剩余的空間

          9.塊級內(nèi)聯(lián)元素不受父元素的line-height以及自身的vertical-align影響

          二.將非塊級元素轉(zhuǎn)換成塊級元素的方法

          1.display:block

          2.float:left或right

          3.position:absolute或fixed

          4.父元素使用display:flex,子元素會變?yōu)閴K級元素

          三.常見塊級元素

          <div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<address>,<blockquote> ,<form>

          內(nèi)聯(lián)元素

          一.特點

          1.當父元素寬度足以放下多個內(nèi)聯(lián)元素時,一行內(nèi)可以顯示多個內(nèi)聯(lián)元素,否則放不下的內(nèi)聯(lián)元素將另起一行(一行存放多個內(nèi)聯(lián)元素)

          2.內(nèi)聯(lián)元素的寬度,高度由該元素的內(nèi)容撐開

          3.內(nèi)聯(lián)元素的寬度/高度/padding-top/border-top/margin-top/margin-bottom設(shè)置無效

          4.如果padding/border/margin未設(shè)置的情況下,全部為0

          5.內(nèi)聯(lián)元素受父元素的line-height以及自身的vertical-align影響

          二.將非內(nèi)聯(lián)元素轉(zhuǎn)換成內(nèi)聯(lián)元素的方法

          使用display:inline

          三.常見內(nèi)聯(lián)元素

          <a>,<span>,<i>,<br>,<strong>,<em>

          塊級內(nèi)聯(lián)元素

          一.特點

          1.當父元素寬度足以放下多個塊級內(nèi)聯(lián)元素時,一行內(nèi)可以顯示多個塊級內(nèi)聯(lián)元素,否則放不下的塊級內(nèi)聯(lián)元素將另起一行(一行存放多個塊級內(nèi)聯(lián)元素)

          2.塊級內(nèi)聯(lián)元素的寬度,高度,內(nèi)邊距(padding),邊框(border),外邊框(margin)都能隨意設(shè)置

          3. 塊級內(nèi)聯(lián)元素的寬度,高度未設(shè)置的情況下,由該元素的內(nèi)容撐開

          4.塊級內(nèi)聯(lián)元素受父元素的line-height以及自身的vertical-align影響

          二.將非內(nèi)聯(lián)元素轉(zhuǎn)換成內(nèi)聯(lián)元素的方法

          使用display:inline-block

          三.常見內(nèi)聯(lián)元素

          <input>


          web前端之二叉搜索樹

          分享成果,隨喜正能量】人可以無知,但不可以無趣。在自己的心上種一顆快樂的種子,堅定、快樂的做自己的事,更讓大家不那么無趣。

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

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

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

          3)HTML 注釋 <!-- 與 -->

          注釋標簽 <!-- 與 --> 用于在 HTML 插入注釋。可以將注釋插入 HTML 代碼中,這樣可以提高其可讀性,使代碼更易被人理解。瀏覽器會忽略注釋,也不會顯示它們。開始括號之后(左邊的括號)需要緊跟一個嘆號,結(jié)束括號之前(右邊的括號)不需要。

          注釋可以按下面的格式寫:

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

          4)段落 <p>

          段落是通過 <p> 標簽定義的。瀏覽器會自動地在段落的前后添加空行。(<p> 是塊級元素)

          在上面的例子中我們已經(jīng)用到了表述段落的符號<p>,我們?nèi)绻崛【W(wǎng)頁小說的數(shù)據(jù),新聞等頁面的消息,文本都是一段一段的,這樣的頁面,我們就可以通過<p>標簽實現(xiàn)。當運用ie/webbrowser方式提取這類網(wǎng)頁的時候,歷遍所有段落p元素即可。

          使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。可以用 <br /> 標簽代替它!(但是不要用 <br /> 標簽去創(chuàng)建列表。)

          5)超鏈接 <a>

          使用 <a> 標簽在 HTML 中創(chuàng)建鏈接。

          超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時,箭頭會變?yōu)橐恢恍∈帧?/p>

          有兩種使用 <a> 標簽的方式:通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接也可以通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽。

          超鏈接是我們最常見的頁面元素,基本的門戶網(wǎng)站都有他,點了以后,可以跳轉(zhuǎn)到另一個頁面。一般語法格式:

          <a href=”跳轉(zhuǎn)的URL” target=” _blank/_self”>顯示的超鏈接文本</a>

          Target屬性,表示的是當我們點擊超鏈接,是在原頁面進行跳轉(zhuǎn)(_self)還是新建頁面進行跳轉(zhuǎn)(_blank)。

          為了說明這種超鏈接,我們更正一下“HTML基礎(chǔ)學習-1.html”的內(nèi)容:

          <html>

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

          <title>

          VBA應用提高篇

          </title>

          </head>

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

          <h1>學習VBA語言</h1>

          <p>為了更好的掌握VBA的各個知識點,您可以先參考我的第一套教程: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">顯示學習的網(wǎng)頁</a>

          </body>

          </html>

          講上述代碼另存為“HTML基礎(chǔ)學習-2.html”內(nèi)容截圖:

          打開這個文件:

          點擊鏈接:

          查看一下源碼:

          3 本節(jié)介紹的HTML文檔常用元素匯總

          1)標題 <h1> - <h6>

          2)水平線 <hr />

          3)注釋 <!-- 與 -->

          4)段落 <p>

          5)超鏈接 <a>

          以上各個元素我們要熟練的掌握,才能在分析網(wǎng)頁的時候可以隨心所欲。下一講我們繼續(xù)講解HTML網(wǎng)頁的元素構(gòu)成。

          本節(jié)知識點回向:

          什么是HTML文檔的框架結(jié)構(gòu)是怎樣的?說出以下個元素的標簽:標題,水平線,注釋,段落,超鏈接 。

          本節(jié)參考文件:HTML基礎(chǔ)學習-1.html;HTML基礎(chǔ)學習-2.html

          我20多年的VBA實踐經(jīng)驗,全部濃縮在下面的各個教程中,教程學習順序:

          【分享成果,隨喜正能量】人生在世,會遇到一些好事,還會遇上些壞事。好事我承受得起,壞事也承受得住。就這樣坦蕩蕩做個尋常人也不壞。

          tml元素主要分為3類,塊級元素、內(nèi)聯(lián)元素以及內(nèi)聯(lián)塊級元素,本篇文章我們來就詳細介紹一下各個分類的含義以及對應的特點。

          (1)塊級元素

          在html中div、 p、hx、form、ul 、 li、dl、dd就是塊級元素。css屬性設(shè)置display:block就是將元素顯示為塊級元素。塊級元素特點:

          1、每個塊級元素都從新的一行開始,并且其后的元素也另起一行;(一個塊級元素獨占一行

          2、元素的高度寬度行高以及底邊距都可設(shè)置;

          3、元素寬度在不設(shè)置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設(shè)定一個寬度。

          我們這里將塊級元素代碼寫一下然后看一下在瀏覽器中的顯示效果。html代碼就如下所示:

          在網(wǎng)頁中我們可以看到,這些元素每一個都單獨占據(jù)一行的空間,不管內(nèi)容是否夠一行。

          (2)內(nèi)聯(lián)元素

          在html中,span、a、label、input、 strong 和em就是典型的內(nèi)聯(lián)元素(行內(nèi)元素)(inline)元素。當然塊狀元素也可 以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素特點:

          1、和其他元素都在一行上;

          2、元素的高度寬度行高頂部底部邊距不可設(shè)置;

          3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。

          注意:為 a 元素設(shè)置了寬和高,但都沒有起到作用,原因是a在默認的時候是內(nèi)聯(lián)元素,內(nèi)聯(lián)元素是不可以設(shè)置寬和高的。

          我們這里將內(nèi)聯(lián)元素代碼寫一下然后看一下在瀏覽器中的顯示效果。html代碼就如下所示:

          在網(wǎng)頁中我們可以看到,這些元素會在一行一直排著顯示,直到充滿整行空間才會換行顯示。

          (3)內(nèi)聯(lián)塊級元素

          內(nèi)聯(lián)塊狀元素(inline-block)就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點,代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。inline-block元素特點:

          1、和其他元素都在一行上;

          2、元素的高度、寬度行高以及底邊距都可設(shè)置。

          注意:img是inline元素,但是他同時也是替換元素,他有著特殊的表現(xiàn):

          1. 可以設(shè)置width/height;

          2. 默認的,img元素在屏幕占據(jù)的空間與其圖片的實際像素一致,除非CSS有設(shè)置或者自身的width/height HTML 屬性有設(shè)置;

          3. 如果img標簽的包裹元素為也為inline元素,則img的邊界可以超出其直接父元素的邊界,直到自己的寬、高達到最大或者設(shè)定值為止,而且文檔流中img的兄弟元素也不能遮蓋住img。最常見的就是a里面包含的img;

          4. 所以從行為上看,img元素作為替換元素,有著類似于Inline-block的行為,盡管在SPEC里面,他的確是一個inline元素。

          對于html的元素分類今天就先介紹到這里,大家在平時可以自己多加練習練習,做到每個標簽屬于什么元素。


          每日金句: 成功的秘訣就是每天都比別人多努力一點。喜歡我的文章的小伙伴記得關(guān)注一下哦,每天將為你更新最新知識。


          主站蜘蛛池模板: 日韩在线观看一区二区三区| 日本精品一区二区在线播放| 无码人妻精品一区二区三区99性 | 国产免费一区二区三区| 麻豆AV无码精品一区二区| 亚洲一区二区三区不卡在线播放 | 日韩有码一区二区| 亚洲中文字幕无码一区| 精品无人区一区二区三区| 偷拍激情视频一区二区三区| 国产成人av一区二区三区不卡| 国产在线视频一区二区三区98| 亚洲高清日韩精品第一区| 国产日韩精品一区二区在线观看 | 91久久精一区二区三区大全| 中文字幕一区二区三区5566| 国产精品亚洲一区二区在线观看| 一区二区三区免费高清视频| 一区二区三区在线|欧| 国产精品免费视频一区| 国产亚洲一区二区在线观看| 久久久国产精品无码一区二区三区 | 国产在线观看一区二区三区| 中日av乱码一区二区三区乱码| 亚洲丰满熟女一区二区v| 在线视频亚洲一区| 亚洲V无码一区二区三区四区观看| 亚洲av综合av一区二区三区| 成人一区二区免费视频| 国产精品久久一区二区三区| 午夜无码一区二区三区在线观看| 一区二区三区日韩| 视频一区二区三区人妻系列| 3d动漫精品啪啪一区二区中| 亚洲欧洲一区二区三区| 精品国产一区二区三区麻豆| 精品一区二区三区免费观看| 亚洲变态另类一区二区三区| 久久国产免费一区| 无码精品前田一区二区| 亚洲日韩一区二区三区|