HTML區塊劃分3種類型和標簽嵌套規則

来源:https://www.cnblogs.com/dhnblog/archive/2020/03/28/12586902.html
-Advertisement-
Play Games

html中的標簽元素大體被分為三種不同的類型:塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。HTML網頁基本標簽的嵌套規則:1.塊元素可以嵌套行元素2.行元素可以嵌套行元素3.行元素不可以嵌套塊元素4.文字類塊元素不可以嵌套塊元素5.容器類塊元素可以嵌套塊元素 ...


HTML 可以通過 <div> 和 <span> 將元素組合起來,大多數 HTML 元素被定義為塊級元素或內聯元素;塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束);實例: <h1>, <p>, <ul>, <table>

HTML 內聯元素:內聯元素在顯示時通常不會以新行開始,實例: <b>, <td>, <a>, <img>

HTML <div> 元素

  • <div> 標簽可以把文檔分割為獨立的、不同的部分。
  • HTML <div> 元素是塊級元素,它是可用於組合其他 HTML 元素的容器。
  • <div> 元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前後顯示折行。
  • 如果與 CSS 一同使用,<div> 元素可用於對大的內容塊設置樣式屬性。
  • <div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。

完全table表格佈局網站:view-source:http://www.hongdalixin.com/

HTML <span> 與元素

  • HTML <span> 元素是內聯元素,可用作文本的容器
  • <span> 元素也沒有特定的含義。
  • 當與 CSS 一同使用時,<span> 元素可用於為部分文本設置樣式屬性。

A.拓展:HTML塊級、行級元素,特殊字元,嵌套規則

HTML網頁基本標簽的嵌套規則:

  1. 塊元素可以嵌套行元素
  2. 行元素可以嵌套行元素
  3. 行元素不可以嵌套塊元素
  4. 文字類塊元素不可以嵌套塊元素
  5. 容器類塊元素可以嵌套塊元素

B.拓展:css排版常用樣式、三種不同html類型、css佈局盒模型介紹

html中的標簽元素大體被分為三種不同的類型:塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

  • 塊狀元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<address>、<blockquote>、<form>
  • 內聯元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
  • 內聯塊狀元素:<img>、<input>

總結:什麼是塊級元素?在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。如a{display:block;}就是將內聯元素a轉換為塊狀元素,從而使a元素具有塊狀元素特點。
塊級元素特點:1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。2、元素的高度、寬度、行高以及頂和底邊距都可設置。3、元素寬度在不設置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定一個寬度。
在html中,<span>、<a>、<label>、<strong>和<em>就是典型的內聯元素(行內元素)(inline)元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。如div{display:inline;}就是將塊狀元素div轉換為內聯元素,從而使div元素具有內聯元素特點。
內聯元素特點:1、和其他元素都在一行上;2、元素的高度、寬度及頂部和底部邊距不可設置;3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。
內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增),<img>、<input>標簽就是這種內聯塊狀標簽。
inline-block元素特點:1、和其他元素都在一行上;2、元素的高度、寬度、行高以及頂和底邊距都可設置。


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

-Advertisement-
Play Games
更多相關文章
  • OXO1 寫在前面 1.HTML和CSS的對比 (1)HTML只關註語義和結構,主要是對網頁元素的整理和分類。 (2)CSS的主要使用場景就是美化頁面,佈局頁面。 (3)CSS和HTML搭配使用,實現網頁結構,表現分離。 2.CSS概述 (1)概念 CSS是疊層樣式表(Cascading Style ...
  • 按照國際慣例先放效果圖 貼代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .container{ width:1200px; height:auto; } . ...
  • 問題 Layui在表單提交時,會有 是必選的,需要在提交的時候進行驗證。 解決方法 1. 在 中添加表單相應內容 2. 在 中進行驗證 說明 1. 的命名需要是 ,如上面例子中使用的是 。 2. 是用來獲取數據中的鍵,返回值是一個數組,數組的值為 的鍵名。 3. 用來獲取數組中符合要求的值,傳入的是 ...
  • 什麼是web前端? 大家越來越肯定前端的作用,如今也高端web前端開發人員依舊緊缺。而web前端技術說白了就是Java、CSS、HTML等“傳統”技術與Adobe AIR、Google Gears,以及概念性較強的互動式設計,藝術性較強的視覺設計。主要用來製作網站頁面。 Web前端開發工程師到目前為 ...
  • ##HttpServlet是GenericServlet 的子類 HttpServlet是GennericServlet的子類,只用於接收Http請求和響應。一般情況,web開發中,需要使用的Servlet均只需要實現該類即可,servlet.http包中定義了採用HTTP通信協議的HttpServ ...
  • 按照國際慣例,先放效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .ball{ background:linear-gradient( ...
  • 1.1 JavaScript簡史 在web日益流行的今天,人們對客戶端腳本語言的需求也越來越高。 1995.2 就職於網景公司的Brendan Eich發佈了其開發的LiveScript,改語言同時在瀏覽器和伺服器使用。為了趕工期,在Netscape Navigator 2發佈前夕,Netscape ...
  • HTML佈局標簽,定義文檔區塊,塊級(block-level);定義 span,用來組合文檔中的行內元素。雖然我們可以使用HTML table標簽來設計出漂亮的佈局,但是table標簽是不建議作為佈局工具使用的,設計表格的目的是呈現表格化數據 - 表格不是佈局工具! ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...