html基礎必備-分隔標記，前端小白一看就會

節、分區和分割線

這些標記用于將頁面分成多個部分。熟練地掌握這些標記將意味著構建出具有良好的結構和布局的頁面，使其更加友好和易于閱讀。

分區 - <div> </div>

div標記定義了HTML文件中的一個部分或分區。它通常包含需要組合在一起的標題、段落、表格或其他元素。通過設置<div class="">與css一起使用來設置網頁某個部分的顯示。

段落 - <p> </p>

p標記用來定義文本的段落，就像你在書中看到的那樣，一旦文本達到屏幕邊緣就會自動折到下一行。當另一個<p>標記用于開始下一個段落時，瀏覽器將在段落之間添加一些空白。p標記具有以下屬性：

align="" - 段落中文本的對齊方式：left, center or right
width="" - 段落將占據頁面的固定寬度或百分比，默認為100%

內聯 - <span> </span>

span標記用于將內聯元素組合在一起，例如句子中的幾個單詞，以便僅對這些單詞應用css樣式。span標記可以在div和p標記中使用，因為它不會創建新的塊。

換行 - <br>

br標記相當于一個回車符，用于在新行開始文本。一行中的多個<br>標記將在網頁上創建一個很大的垂直空間。

水平分隔線 - <hr>

hr標記通常被稱為HTML行分隔符標記，創建一條通常用于視覺上分隔頁面的水平線。它具有以下屬性：

width="" - 線條將占用固定寬度，默認100%寬度
color="" - 線條顏色
noshade - 取消3D外觀，創建一條平的實線分隔線

不換行 - <nobr> </nobr>

出于某種原因，你希望文本在一條直線上繼續，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動以查看行的其余部分，這是一種糟糕的設計。

例子

下面是以上標記的示例：

瀏覽器顯示內容如下所示：

lt;marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=left></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定卷動距離

<marquee scrolldelay=300>...</marquee>設定卷動時間

<!>字體效果

<h1>...</h1>標題字(最大)

<h6>...</h6>標題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調)

<i>...</i>斜體字

<em>...</em>斜體字(強調)

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執行標記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =font-size:100 px>...</font>無限增大

<!>區斷標記

<hr>水平線

<hr size=9>水平線(設定大小)

<hr width=80%>水平線(設定寬度)

<hr color=ff0000>水平線(設定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結格式

<base href=位址>(預設好連結路徑)

<a href=位址></a>外部連結

<a href=位址 target=_blank></a>外部連結(另開新視窗)

<a href=位址 target=_top></a>外部連結(全視窗連結)

<a href=位址 target=頁框名></a>外部連結(在指定頁框連結)

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設定圖片寬度

<img src=圖片位址 height=30>設定圖片高度

<img src=圖片位址 alt=提示文字>設定圖片提示文字

<img src=圖片位址 border=1>設定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

<table border=邊框大小>...</table>設定表格邊框大小(使用數字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色

<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)

<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)

<table cols=參數>...</table>指定表格的欄數

<table frame=參數>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數字)

<table height=高度>...</table>指定表格的高度大小(使用數字)

<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)

<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

<! - - ... - -> 注解

<a href target> 指定超連結的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結

<a href> 指定超連結

<a name=錨的名稱> 被連結點的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結的分割視窗

<basefont size> 更改預設字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設定表格標題位置

<caption>...</caption> 為表格加上標題

<center> 向中對齊

<cite>...<cite> 用於引經據典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設定定義列表的項目解說

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標簽

<dl>...</dl> 設定定義列表的標簽

<dt> 設定定義列表的項目

<em> 強調之用

<font face> 任意指定所用的字形

<font size> 設定字體大小

<form action> 設定戶動式表單的處理方式

<form method> 設定戶動式表單之資料傳送方式

<frame marginheight> 設定視窗的上下邊界

<frame marginwidth> 設定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設定文字大小

<head> 標示文件資訊

<hr> 加上分格線

<html> 文件的開始與結束

<i> 斜體字

<img align> 調整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預設圖形大小

<img hspace> 插入圖片并預設圖形的左右邊界

<img lowsrc> 預載圖片功能

<img src border> 設定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預設圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項目 ( 可指定符號 )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標簽

<multiple> 可同時選擇多項的列表欄

<noframe> 定義不出現分割視窗的文字

<ol>...</ol> 有序號的列表

<option> 定義表單中列表欄的項目

<p align> 設定對齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強語氣

<sub> 下標字

<sup> 上標字

<table border=n> 調整表格的寬線高度

<table cellpadding> 調整資料欄位之邊界

<table cellspacing> 調整表格線的寬度

<table height> 調整表格的高度

<table width> 調整表格的寬度

<table>...</table> 產生表格的標簽

<td align> 調整表格欄位之左右對齊

<td bgcolor> 設定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設定表格欄位不換行

<td valign> 調整表格欄位之上下對齊

<td width> 調整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動否換行

<th>...</th> 定義表格的標頭欄位

<title> 文件標題

<tr>...</tr> 定義表格美一行

<tt> 打字機字體

<u> 文字加底線

<ul type>...</ul> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數

本篇文章開始成哥將帶大家一起學習一下前端的基礎知識，我們先講解前端的基礎HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內容吧！

01 HTML簡介

HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。

HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。

使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現在所見到的網頁。HTML 不需要編譯，可以直接由瀏覽器執行，非常方便開發時調試。

02 HTML實例

我們現在創建一個典型的HTML結構具體如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML實例</title>  
6. </head>  
7. <body>  
8.   <h1>我是標題</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html>

如上頁面中各個標簽代表的意思如下：

1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當前處理的內容是HTML頁面

2）html是 HTML 頁面的根元素，用于標識HTML內容的開始與結束

3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數據這邊charset="UTF-8"標識當前頁面編碼格式為UTF-8，title為文檔的標題

4）body是HTML主體也是游覽器在顯示頁面時的內容。h1是body內容中定義的標題，p是body內容中定義的段落

我們現在通過游覽器打開編寫的HTML內容，具體內容如下

在HTML中的內容可以通過以下格式進行內容注釋具體如下：

03 HTML標簽、元素、屬性、實體編碼與事件

（1）HTML標簽

HTML 標簽是 HTML 語言中最基本的單位，HTML 標簽是 HTML（標準通用標記語言下的一個應用）最重要的組成部分。HTML標簽具有如下特點：

1）標簽一般是成對出現的如:<div></div>;也有空標簽如:<br />

2）標簽由<>包括,分為開始標簽(開放標簽)和結束標簽(閉合標簽)

3）標簽不區分大小寫,根據W3C(萬維網聯盟)推薦,統一使用小寫字母

標簽的示列如下：

標簽按照<>的對數可以分為如下兩類分別為雙標簽與單標簽，下面我們具體來了解一下這兩類標簽。

1）雙標簽

雙標簽指由開始和結束兩個標記符組成的標記。其基本語法格式如下：

1. <標記名></標記名>

常見的雙標簽有如下幾種：

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 塊級元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超鏈接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>

2）單標簽

單標簽是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：

1. <標記名/>

常見的單標簽有如下幾種：

1. <!-- 換行標簽 -->  
2. <br />  
3.   
4. <!-- 分隔線標簽 -->  
5. <hr />  
6.   
7. <!-- 圖片標簽 -->  
8. <img />

（2）HTML元素

HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼，如<p>段落</p>。元素可以進行嵌套具體如下：

1. <div>  
2.   <h1>我是標題</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>

（3）HTML屬性

屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構成,存在于開始標簽中，示列如下:

（4）HTML實體編碼

對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應的"實體編碼"，如< <> >空格。

（5）HTML事件

通過某個動作,執行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標點擊、鼠標聚焦等，下面我看看看一個事件編寫示列：

04 HTML常用標簽示列

（1）h標簽

h 標簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應六種樣式的標題，我們現在來編寫這六種h標簽，演示代碼如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1標題</h1>  
9.   <h2>H2標題</h2>  
10.   <h3>H3標題</h3>  
11.   <h4>H4標題</h4>  
12.   <h5>H5標題</h5>  
13.   <h6>H6標題</h6>  
14. </body>  
15. </html>

我們來運行該HTML文件，來看看這六種h標簽有什么樣式差異，從示列中可以發現h1標簽字體最大然后依次減小。

（2）p標簽

p 標簽是文本標簽，現在我們來編寫一段含有p標簽的html文本，然后運行了看看p標簽的樣式具體操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>標題一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>標題二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>

（3）a標簽

a標簽是超鏈接標簽，點擊a標簽可以跳轉到其設置的網站，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">點我跳轉到百度頁面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">點我跳轉到騰訊頁面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>

（4）div標簽

div標簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標簽并設置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>

（5）列表標簽

列表作為網頁設計的重要內容之一，能夠用來制作導航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）

1）有序列表ul

有序列表的順序是有序的，默認情況下會以數字來排列，但也可以通過設置其type屬性以大寫字母、小寫字母、大寫羅馬數字、小寫羅馬數字來排列，我們現在來寫一個示列，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默認方式數字排列 -->  
10.   <p>有序列表默認方式數字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表，以大寫字母排列 -->  
18.   <p>有序列表大寫字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>

2）無序列表ol

無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認都有一個實心圓，也可以通過type屬性來設置成空心圓或者小方塊，無序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>無序列表默認type樣式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>無序列表方塊樣式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>

3）自定義列表dl

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始，其列表內容是以<dd> 開始，自定義列表前面沒有任何標識，其具體示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定義列表</p>  
10.   <dl>  
11.     <dt>東岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>華山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>

（6）其它標簽

1）換行標簽<br/>

在HTML中如果想給內容進行換行可以使用換行標簽，具體示列如下：

2）分割線標簽<hr/>

<hr/> 標簽用于在 HTML創建一條分割線，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是張三</p>  
10.   <!-- 分割線標簽 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>

05 總結

至此我們《HTML基礎教程上篇》就講完了，下篇內容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。

文章推薦：

一文秒懂Web框架基礎之WSGI協議
IT工程師都需要掌握的容器技術之掃盲篇

在線咨詢

上一篇：css背景圖片高度自適應解決方案
下一篇：Serverless 實戰：如何為你的頭像增加點裝飾？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商