新手入門前端，應該知道HTML框架排版標記標籤大全

阿新 • • 發佈：2020-11-05

排版標籤：

<h1>
<p>
<hr />
<br />
<div>
<span>
<center>
<pre>

下面來詳細介紹一下排版標籤。

標題標籤

標題使用<h1>至<h6>標籤進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具有align屬性，屬性值可以是：left、center、right。

程式碼舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    < 
meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>H1：千古壹號，永不止步</h1>
    <h2>H3：千古壹號，永不止步</h2>
    <h3>H3：千古壹號，永不止步</h3>
    <h4>H4：千古壹號，永不止步</ 
h4>
    <h5>H5：千古壹號，永不止步</h5>
    <h6>H6：千古壹號，永不止步</h6>
</body>
</html>

效果演示：

HTML 註釋

HTML 註釋的格式如下：

<!-- 我是 html 註釋  -->

段落標籤<p>

段落，是英語“paragraph“縮寫。

作用：可以把 HTML 文件分割為若干段落。在網頁中如果要把文字有條理地顯示出來，離不開段落標籤。就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落。

程式碼舉例：

<p> 
This is a paragraph</p>
<p>This is another paragraph</p>

屬性：

align="屬性值"：對齊方式。屬性值包括left center right。

HTML標籤是分等級的，HTML將所有的標籤分為兩種：

文字級標籤：p、span、a、b、i、u、em。文字級標籤裡只能放文字、圖片、表單元素。（a標籤裡不能放a和input）
容器級標籤：div、h系列、li、dt、dd。容器級標籤裡可以放置任何東西。

從學習p的第一天開始，就要牢牢記住：p標籤是一個文字級標籤，p裡面只能放文字、圖片、表單元素。其他的一律不能放。

錯誤寫法：（嘗試把 h 放到 p 裡）

    <p>
        我是一個小段落
        <h1>我是一級標題</h1>
    </p>

網頁效果如下：

上圖顯示，瀏覽器不允許你這麼做，我們使用Chrome的F12審查元素髮現，瀏覽器自己把p封閉掉了，不讓你去包裹h1。

PS：Chrome瀏覽器是HTML5支援度最好的瀏覽器。提供了非常好的開發工具，非常適合我們開發人員使用。審查元素功能的快捷鍵是F12。

水平線標籤<hr />

horizontal 單詞的發音：[ˌhɒrɪˈzɒntl]。

水平分隔線（horizontal rule）可以在視覺上將文件分隔成各個部分。在網頁中常常看到一些水平線將段落與段落之間隔開，使得文件結構清晰，層次分明。

程式碼舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>自古情深留不住</p>
    <hr />
    <p>總是套路得人心</p>
</body>
</html>

執行效果：

屬性介紹：

align="屬性值"：設定線條置放位置。屬性值可選擇：left right center。
size="2" ：設定線條粗細。以畫素為單位，內定為2。
width="500"或width="70%"：設定線條長度。可以是絕對值（單位是畫素）或相對值。如果設定為相對值的話，內定為100%。
color="#0000FF"：設定線條顏色。
noshade：不要陰影，即設定線條為平面顯示。若沒有這個屬性則表明線條具陰影或立體。

屬性效果演示：

換行標籤<br />

如果希望某段文字強制換行顯示，就需要使用換行標籤。

This <br/> is a para<br/>graph with line breaks

效果如下：

<div>和<span>標籤

div和span是非常重要的標籤，div的語義是division“分割”； span的語義就是span“範圍、跨度”。想必你應該聽說過“div + css”佈局。

div和span的介紹

div標籤：可以把標籤中的內容分割為獨立的區塊。必須單獨佔據一行。
span標籤：和div的作用一致，但不換行。

程式碼舉例：

div標籤的屬性：

align="屬性值"：設定塊兒的位置。屬性值可選擇：left、right、 center。

div和span的區別

<span>和<div>唯一的區別在於：<span>是不換行的，而<div>是換行的。

如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。或者說，DIV+CSS來實現各種樣式。

div在瀏覽器中，預設是不會增加任何的效果的，但是語義變了，div中的所有元素是一個小區域。 div標籤是一個容器級標籤，裡面什麼都能放，甚至可以放div自己。

span也是表達“小區域、小跨度”的標籤，但只是一個文字級的標籤。就是說，span裡面只能放置文字、圖片、表單元素。 span裡面不能放p、h、ul、dl、ol、div。

span舉例：

<p>
    簡介簡介簡介簡介簡介簡介簡介簡介
    <span>
        <a href="">詳細資訊</a>
        <a href="">購買</a>
    </span>
</p>

div舉例：

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="guanggao"></div>
    <div class="dongxi"></div>
</div>
<div class="footer"></div>