HTML塊級元素

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/12/24/6216633.html
-Advertisement-
Play Games

[1]h [2]p [3]div [4]hr [5]pre [6]blockquote [7]address [8]其他 ...


前面的話

  在HTML5出現之前,人們一般把元素分為塊級、內聯和內聯塊元素。本文將詳細介紹HTML塊級元素

 

h

  標題(Heading)元素有六個不同的級別,<h1>是最高級的,而<h6>則是最低的。一個標題元素能簡要描述該節的主題

  從<h1><h6>,重要性逐漸減小,字體大小也逐漸減小。在使用標題元素時,要註意以下幾點

  1、不要為了減小標題的字體而使用低級別的標題,而是使用CSS的font-size樣式

  2、避免跳過某級標題:始終要從<h1>開始,接下來使用<h2> 等等

  3、使用<section> 元素時,為了方便起見,避免重覆在一個頁面上使用<h1><h1>應該用來表示頁面的標題,其他的標題當從<h2>開始。使用<section>時,應當每個 section都使用一個<h2>

【預設樣式】

//從h1到h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;

  HTML5新增了<hgroup>標簽,它表示標題組,用於組合標題,只在區塊需要有多個級別的標題時使用 

<hgroup>
    <h1>水果</h1>
    <h2>蘋果</h2>
</hgroup>

 

p

  <p>元素(paragraph)表示文本的一個段落,該元素通常表現為一整塊與相鄰文本分離的文本,或以垂直的空白隔離或以首行縮進

【預設樣式】

margin: 16px 0;

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

 

div

  <div>元素(divide)(或HTML文檔分區元素)是一個通用型的流內容容器,它在語義上不代表任何特定類型的內容,它可以被用來對其它元素進行分組,一般用於樣式化相關的需求(使用class或id特性)或者對具有相同特性的一組元素進行分組(比如lang),它應該在沒有任何其它語義元素可用時才使用(比如<article><nav>)

 

hr

  <hr>元素表示段落級元素之間的主題轉換(例如,一個故事中的場景的改變,或一個章節的主題的改變)。在HTML的早期版本中,它是一個水平線。現在它仍能在可視化瀏覽器中表現為水平線,但目前被定義為語義上的,而不是表現層面上

  <hr>用於段落級元素之間的分割,區塊之間不需要使用<hr>進行分割

<p>段落1</p>
<hr>
<p>段落2</p>

【預設樣式】

margin: 8px 0;
border-style: inset;
border-width: 1px;

 

pre

  <pre>元素表示預定義格式文本。在該元素中的文本通常按照原文件中的編排,以等寬字體的形式展現出來,文本中的空白符(比如空格和換行符)都會顯示出來,通常表示已排版的內容,如代碼塊和字元畫等

<pre>
body {
  color:red;
}
</pre>

【預設樣式】

margin: 1em 0;
white-space: pre;

 

blockquote

  <blockquote>元素(或者HTML塊級引用元素),代表其中的文字是引用內容。通常在渲染時,這部分的內容會有一定的縮進。若引文來源於網路,則可以將原內容的出處URL地址設置到cite特性上,若要以文本的形式告知讀者引文的出處時,可以通過<cite>元素

  [註意]引用的署名必須在引用外部定義

<blockquote cite="http://baike.baidu.com/view/921793.htm">
  <p>橫眉冷對千夫指,俯首甘為孺子牛</p>
</blockquote>    
<p>魯迅</p>

【預設樣式】

margin: 1em  40px;

 

address

  <address>元素可以讓作者為它最近的<article>或者<body>祖先元素提供聯繫信息。在後一種情況下,它應用於整個文檔

  當表示一個和聯繫信息無關的任意的地址時,使用<p>元素而不是<address>元素。這個元素不能包含除了聯繫信息之外的任何信息,比如出版日期(這應該包含在<time>元素中)。通常,<address>元素可以放在當前section的<footer>元素中,如果存在的話

【預設樣式】

font-style: italic;

 

其他

  除了上面介紹的<div><h><p><hr><blockquote><address>標簽外,還有一些前面已經介紹過的標簽屬於塊級標簽

  包括骨架類標簽(<html><body>),列表類標簽(<ul><ol><dl><dd><dt>),表單類標簽(form<fieldset><output><legend><optgroup><option>),HTML5新增的結構標簽(<article><aside><header><footer><nav><section>),HTML5新增的多媒體標簽(<figure><figcaption>),HTML5新增的功能性標簽(<summary><details>)

 

最後

  可能有人會覺得<br>標簽應該是一個塊級元素,因為它有換行,與塊級元素的特征很相似。但它實際上是一個內聯元素,它的用途是在文本中產生一個換行




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

-Advertisement-
Play Games
更多相關文章
  • 剛剛出來實習,之前實習的公司有一個分頁插件,和後端的數據字典約定好了的,基本上是看不到內部是怎麼實現的,新公司是做WPF的,好像對於ASP.NET的東西不多,導師扔了一個小系統給我和另一個同事,指了兩種框架的方案就讓我們自己做了。。。 剛開始在網上找了一下,覺得bootstrap-paginator ...
  • 使用jsonp實現跨域獲取數據。 js部分 在頁面中測試 結果可以返回結果,頁面顯示為,表示獲取成功! ...
  • <!doctype html> <html> <head> <title>CSS3logo</title> <style type="text/css"> html, body, div, img { margin: 0; padding: 0; } #box { position: absolut ...
  • web工程中如何將大量數據從伺服器端傳送到瀏覽器一直是很重要的一個問題。 其中一個解決方法是在伺服器端將將數據封裝成json格式,然後傳給前臺。廢話不多說,下麵講乾貨。 1.要用json必須下載一個庫和必須的依賴項。 2.導入到eclipse/myeclopseweb工程中web-inf/lib中。 ...
  • 1、元字元 [擁有特殊含義的元字元] \d -> 匹配一個0-9的數字,相當於[0-9],和它相反的是\D ->匹配一個除了0-9的任意字元 \w -> 匹配一個0-9、a-z、A-Z、_的數字或字元,相當於[0-9a-zA-Z_] \s -> 匹配一個空白字元(空格、製表符...) \b -> 匹 ...
  • <!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style>body{ background:#000;}.upshop-view{ width:320px; height:499px; background ...
  • 上面的兩張圖片中,你能看出有什麼不同嗎? 右圖使用 html5 canvas api 中的 和 函數嵌入了一段文字。 道理很簡單, 函數返回一個 對象,該對象包含三個屬性: 是一個位元組數組,每 4 位元組表示圖片中一個像素,按照“ 紅、綠、藍、透明度”的順序依次排列, 表示圖片寬度, 圖片高度。 只要 ...
  • 關於“加入收藏”的代碼,很多人都不會重視,一般情況是隨便在網上搜一個代碼放在頁面里就草草了事了。可是都沒有做到主流瀏覽器的相容。下麵分享一段使用 jQuery 實現加入收藏夾的功能。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...