前端之Html元素的分類

来源:https://www.cnblogs.com/21-forever/archive/2019/05/11/10849721.html
-Advertisement-
Play Games

一、html元素可分為三大類:塊元素、內聯元素、可變元素 1.塊元素: 常見塊狀元素:div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption 塊狀元素特點: (a)以塊的形式顯示為一個矩形區域; (b)塊狀元素獨占一行,自 ...


一、html元素可分為三大類:塊元素、內聯元素、可變元素

 

1.塊元素:

 

常見塊狀元素:div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption

 

塊狀元素特點:

 

  (a)以塊的形式顯示為一個矩形區域;

 

  (b)塊狀元素獨占一行,自上而下排列;

 

  (c)塊狀元素可以定義自己的寬度和高度,以及盒模型中的margin,padding,border;

 

  (d)塊狀元素可以作為一個容器包含其他的塊狀元素或內聯元素。

 

2.內聯元素(行內元素):

 

常見內聯元素:a,strong,b,i,em,span,label,img,input

 

內聯元素特點:

 

  (a)內聯元素在一行逐個進行顯示;

 

  (b)內聯元素沒有自己的形狀,不能定義寬度和高度,它的寬高由內容來決定;

 

  (c)內聯元素設置與高度相關的一些屬性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height),顯示無效或顯示不准確;

 

  (d)內聯元素設置左右填充和外間距是可以的。

 

內聯塊狀元素:img,input,textarea

 

內聯塊狀元素特點:

 

  (a)即具有內聯元素特點,也具有塊狀元素特點

 

  (b)即可以定義容器的寬,高,marginpadding等,還可以和其他內聯元素在一行顯示

 

3.可變元素

 

二、元素類型轉換

 

display:block|inline|inline-block|none|list-item;

 

  block:將元素轉換為塊狀元素(大部分塊狀元素的預設display屬性值)

 

  inline:將元素轉換為內聯元素(大部分內聯元素的預設display屬性值)

 

  inline-block:將元素轉換為內聯塊狀元素(img,input等元素的預設display屬性值)

 

  list-item:將元素轉換為列表類型(li的預設display屬性值)

 

  none:元素隱藏不可見

 

註:當元素設置了float屬性後,就相當於設置了display:block;可以給元素定義寬,高了

 

三、置換元素和非置換元素

 

1.置換元素

 

瀏覽器根據元素的標簽和屬性,來決定元素的具體顯示內容

 

img標簽,src屬性決定了在網頁呈現不同的圖片

 

input標簽,type屬性決定了在網頁中呈現什麼類型的input控制項

 

2.非置換元素

 

除置換元素外其他的html元素都是非置換元素

 

標簽之間書寫什麼樣的內容,瀏覽器就顯示什麼內容

 

如:<h1>hello world</h1


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前幾天考試居然記錯dial和call,故在此寫上小demo來作區別,加深印象。 主要是實現call(撥通電話)功能,dial(撥電話)功能用作對比,話不多說,貼上代碼。 1.創建佈局文件如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
  • 1.什麼是ajax ajax是技術名詞的縮寫: Asynchronous:非同步; JavaScript:JavaScript語言; And:和、與; XML:數據傳輸格式 ajax是客戶端通過HTTP向伺服器發送請求 2.ajax對象的屬性、方法 屬性 readyState: Ajax狀態碼 3.x ...
  • jquery3和layui衝突導,致使用layui.layer.full彈出全屏iframe視窗時高度152px問題 ...
  • 線段生成器 與線段生成器相關的方法: d3.svg.line() //創建一個線段生成器。 line(data) //使用線段生成器繪製data數據。 line.x([x]) //設置或獲取線段x坐標的訪問器,即使用什麼數據作為線段的x坐標。 line.y([y]) //同上。設置或獲取y坐標的訪問 ...
  • 一、在函數調用的時候,瀏覽器每次都會傳遞進兩個隱式參數 1. 函數的上下文對象this 2. 封裝實參的對象arguments 二、arguments 對象 1. arguments 對象實際上是所在函數的一個內置類數組對象 2. 每個函數都有一個arguments屬性,表示函數的實參集合,這裡的實 ...
  • CSS學習 學習資源 http://www.csszengarden.com/ CSS語法檢查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: 1.行內式 行內式通過直接設置元素的style屬性來引入css <div style="width: 100px; ...
  • 一、css寬高自適應: 1.寬度自適應: 元素寬度設為100%(塊狀元素的預設寬度為100%) 註:應用在通欄效果中 2.高度自適應: height:auto;或者不設置高度 3.最小,最大高度,最小,最大寬度: a)最小高度 min-height:value; IE6不識別min-height屬性 ...
  • 一、css佈局模型: 流動模型(Flow) 浮動模型(Float) 層模型(Layer) 1、流動模型: 頁面在沒有設置任何css樣式,元素按照本身的特性在瀏覽器中顯示,這樣的佈局模型稱為流動模型; 2、浮動模型: ①.浮動屬性 float:none(預設值,不浮動)|left(左浮動)|right ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...