html排版標籤

重生之我在异界写程序發表於2024-07-04
HTML

HTML排版標籤

標題標籤


標題使用<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>KindaZhang的標題標籤測試</h1>
    <h2>KindaZhang的標題標籤測試</h2>
    <h3>KindaZhang的標題標籤測試</h3>
    <h4>KindaZhang的標題標籤測試</h4>
    <h5>KindaZhang的標題標籤測試</h5>
    <h6>KindaZhang的標題標籤測試</h6>
</body>
</html>

結果展示：

HTML註釋

HTML的註釋如下：

    <!-- <h6>KindaZhang的標題標籤測試</h6> -->

vscode的快捷鍵是ctrl+/

段落標籤<p>

段落：paragraph縮寫，屬性：align（對齊方式），屬性值包括left、center、right

作用：如同寫文章分段落，是頁面文字更有調理。

程式碼：

<p>這是一個段落</p>
<p align="center">這又是一個段落</p>

結果展示：

水平線<hr />

水平線：horizontal rule

作用：用一條線隔離文件

屬性：

  • aligen，設定線條位置。屬性值：right、left、center

  • size：設定線條粗細。單位是畫素，預設為2.

  • width:設定線條長度。絕對值（數字、單位是畫素）和相對值（百分比，預設為100%）兩種表示方法。

  • color：設定線條顏色。

  • noshade：不要陰影、及設定為平面顯示。沒有這個屬性，表明線條具有陰影或立體

程式碼：

<p>這是一個段落</p>
<hr size="5"color="#0000FF"></hr>
<p align="center">這又是一個段落</p>

結果：

換行標籤<br/>

作用：強制換行

程式碼：

<p>這又是<br/>一個<br/>段落</p>

結果：

<div>和<span>標籤

div：division，分割。將標籤內容分割成獨立的區塊。必須單獨佔據一行

span：範圍、跨度。和div作用一致，但不換行。

屬性：div屬性--align，設定塊的位置，屬性值--left、right、center。

程式碼：

 <div>一去二三里</div>
 <div>煙村四五家</div>
 <span>亭臺六七座</span>
 <span>八九十枝花</span>

結果：

div和span區別：

  • <div>換行，<span>不換行

  • <div>是一個容器級標籤，就是什麼標籤都可以放。<span>是一個文字級標籤，只能防止文字、圖片、表單元素。不能放p、h、ul、ol、div。

  • div+css，div標籤賦值佈局、結構、分塊，css負責樣式。

預定義（預格式化）標籤<pre>

作用：不忽略空格換行、直接輸出。幾乎不用。

程式碼：

<pre>
        一去二三里
        
        煙村四五家

        亭臺六七座

        八九十枝花
 </pre>

結果：

8

標籤分級

  • 文字級標籤：p、span、a、b、i、u、em。文字級標籤內只能放文字、圖片、表單元素。（a標籤內不能放a和input，p標籤要記牢）

  • 容器級標籤：div、h1-h6、li、dt、dd。可以放置任何東西

相關文章