html中的行內元素和塊級元素小結

来源:http://www.cnblogs.com/czh1994/archive/2017/06/26/7079597.html
-Advertisement-
Play Games

一.首先我們總結下行內元素和塊級元素有哪些: 行內元素: <a>標簽可定義錨<abbr>表示一個縮寫形式<acronym>定義只取首字母縮寫<b>字體加粗<bdo>可覆蓋預設的文本方向<big>大號字體加粗<br>換行<cite>引用進行定義<code>定義電腦代碼文本<dfn>定義一個定義項目< ...


一.首先我們總結下行內元素和塊級元素有哪些:

行內元素:

<a>標簽可定義錨
<abbr>表示一個縮寫形式
<acronym>定義只取首字母縮寫
<b>字體加粗
<bdo>可覆蓋預設的文本方向
<big>大號字體加粗
<br>換行
<cite>引用進行定義
<code>定義電腦代碼文本
<dfn>定義一個定義項目
<em>定義為強調的內容
<i>斜體文本效果
<img>向網頁中嵌入一幅圖像
<input>輸入框
<kbd>定義鍵盤文本
<label>標簽為
<input> 元素定義標註(標記)
<q>定義短的引用
<samp>定義樣本文本
<select>創建單選或多選菜單
<small>呈現小號字體效果
<span>組合文檔中的行內元素
<strong>語氣更強的強調的內容
<sub>定義下標文本
<sup>定義上標文本
<textarea>多行的文本輸入控制項
<tt>打字機或者等寬的文本效果
<var>定義變數

塊級元素:

<address>定義地址
<caption>定義表格標題
<dd>定義列表中定義條目
<div>定義文檔中的分區或節
<dl>定義列表
<dt>定義列表中的項目
<fieldset>定義一個框架集
<form>創建 HTML 表單
<h1>定義最大的標題
<h2>定義副標題
<h3>定義標題
<h4>定義標題
<h5>定義標題
<h6>定義最小的標題
<hr>創建一條水平線
<legend>元素為
<fieldset>元素定義標題
<li>標簽定義列表項目
<noframes>為那些不支持框架的瀏覽器顯示文本,於 frameset 元素內部
<noscript>定義在腳本未被執行時的替代內容<ol>定義有序列表
<ul>定義無序列表
<p>標簽定義段落
<pre>定義預格式化的文本
<table>標簽定義 HTML 表格
<tbody>標簽表格主體(正文)
<td>表格中的標準單元格
<tfoot>定義表格的頁腳(腳註或表註)
<th>定義表頭單元格
<thead>標簽定義表格的表頭
<tr>定義表格中的行

二.然後我們再來看看行內元素和塊級元素的區別:

1.行內元素與塊級元素直觀上的區別

行內元素會在一條直線上排列,都是同一行的,水平方向排列

塊級元素各占據一行,垂直方向排列。塊級元素從新行開始結束接著一個斷行。

2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。

3.行內元素與塊級元素屬性的不同,主要是盒模型屬性上

行內元素設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效

三.行內元素和塊級元素的轉化:

把塊級元素轉換成行內元素:display:inline;

將行內元素轉換成塊級元素:display:block;

行內塊元素:display:inline-block;

 


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

-Advertisement-
Play Games
更多相關文章
  • 雙向綁定功能是在項目中比較常見的一個需求,傳統的js實現方式是添加監聽函數的方式,Vue框架實現很簡單,因為它本身就是基於雙向綁定實現的,接下來我將講解一下如何使用react實現雙向綁定的功能是 首先瞭解一下status:state是React中組件的一個對象.React把用戶界面當做是狀態機,想象 ...
  • 報錯如下圖: 原因是之前template屬性使用的html模板內添加了script標簽,將其刪掉再使用chunks屬性自動添加即可。 ( 註釋掉也不可以,必須刪除! ) ...
  • function ajax(data){ //data{data:"",dataType:"xml/json",type:"get/post",url:"",asyn:"true/false",success:funtion(){},failure:function(){}} //datapost=... ...
  • 原型 每個函數都有一個prototype屬性,指向一個原型對象,這個對象專門保存特定類型的所有實例【共有的屬性和方法】。 所有原型對象都會自動獲得constructor屬性,指向構造函數。 在調用構造函數創建新實例對象時,會自動設置新實例的內部屬性[[Prototype]]指向構造函數的原型對象。 ...
  • HTML * Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義? 1.<!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範 2. 所謂的標準模式是指,瀏覽器按 W3C 標準解析執行代碼;怪異模式則 ...
  • 1.SyntaxError(語法錯誤) 解析代碼時發生的語法錯誤 eg:var 1a; Uncaught SyntaxError: Unexpected number 2.ReferenceError(引用錯誤) a.引用了一個不存在的變數 eg: console.log(a); Uncaught ...
  • js中立即執行函數的應用:應用到事件綁定上。 少說多做,直接運行代碼(代碼中有註釋): 運行結果: 當點擊id為a1,a2,a3的div時分別觸發對應的事件。 ...
  • 感謝 LeaVerou 大神,讓我們可以提前使用上這麼美妙的屬性。 conic-gradient 是個什麼?說到 conic-gradient ,就不得不提的它的另外兩個兄弟: linear-gradient : 線性漸變 radial-gradient : 徑向漸變 說這兩個應該還是有很多人瞭解並 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...