整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這些標記用于將頁面分成多個部分。熟練地掌握這些標記將意味著構建出具有良好的結構和布局的頁面，使其更加友好和易于閱讀。
div標記定義了HTML文件中的一個部分或分區。它通常包含需要組合在一起的標題、段落、表格或其他元素。通過設置<div class="">與css一起使用來設置網頁某個部分的顯示。
p標記用來定義文本的段落，就像你在書中看到的那樣，一旦文本達到屏幕邊緣就會自動折到下一行。當另一個<p>標記用于開始下一個段落時，瀏覽器將在段落之間添加一些空白。p標記具有以下屬性：
span標記用于將內聯元素組合在一起，例如句子中的幾個單詞，以便僅對這些單詞應用css樣式。span標記可以在div和p標記中使用，因為它不會創建新的塊。
br標記相當于一個回車符，用于在新行開始文本。一行中的多個<br>標記將在網頁上創建一個很大的垂直空間。
hr標記通常被稱為HTML行分隔符標記，創建一條通常用于視覺上分隔頁面的水平線。它具有以下屬性：
出于某種原因，你希望文本在一條直線上繼續，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動以查看行的其余部分，這是一種糟糕的設計。
下面是以上標記的示例：
瀏覽器顯示內容如下所示：
子1：（文本內容中的連續空格）
<p>這段文本中，輸入連續的空格 大概輸入了十個。</p>顯示效果：“格”和“大” 之間的是個空格顯示出來只是一個空格。
這段文本中，輸入連續的空格 大概輸入了十個。例子2：（代碼之間的連續空格）
<span>span是一個行內標簽</span> <span>和前面的span元素之間隔了很多個空格</span>顯示效果:兩個span元素之間連續的空格，顯示出來即"簽"與“和”之間的空格，只有一個空格。
span是一個行內標簽 和前面的span元素之間隔了很多個空格上面兩個例子證明：HTML代碼中連續的空格在顯示時會顯示為一個空格，其余的多余的空格會被移除或者說被忽略。
段落文本其實也是HTML代碼的一部分，只不過它在p標簽內部，而例子2的空格是在兩個span標簽之間。
理解了空格，現在看看空行，同理
例子3：（文本內容中的空行）
<p>這段文本中，輸入連續的空行
大概輸入了五行。</p>顯示效果：如我們所見，文本代碼中的五行空行，顯示出來也只是一個空格。
這段文本中，輸入連續的空行 大概輸入了五行。例子4：（元素之間/標簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會顯示為一個空格。
<span>span是一個行內標簽</span>
<span>和前面的span元素之間隔了很多空行</span>span是一個行內標簽 和前面的span元素之間隔了很多空行得證：HTML 代碼中的所有連續的空格或空行（換行）都會被顯示為一個空格。
既然如此，如果我們希望擴大兩個字符之間的間距，讓代碼中的連續空格或空行顯示出來的結果也是連續的空格或空行，那該怎么辦？其實很簡單。
方法一：我們可以用預格式化標簽<pre>，無論是空格或空行都適用。
<pre>
這是
預格式文本。
它保留了 空格
和換行。
</pre>顯示效果
這是
預格式文本。
它保留了 空格
和換行。方法二：我們可以用空格實體符 代替空格，用換行標簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對搜索引擎不是最友好的方式，因為 和<br/>在HTML中都是沒有語義的。所以建議盡量少用。另外需要注意的是， 必須小寫，而且最后面的分號是不能省略的。
方法三：（適合空格）使用全角空格
全角空格被解釋為漢字，所以不會被被解釋為HTML分隔符，可以按照實際的空格數顯示。
問題：怎么使用全角輸入法？
以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態欄中有個月亮的標志，就說明正在使用的是半角輸入，如果是太陽的標志，就說明使用的是全角輸入。全角/半角的切換可以通過點擊標志，也可以通過快捷鍵 Shift+Space（空格符）切換。
半角輸入（月亮）
全角輸入（太陽）
方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標準間隔。我們知道英文中兩個單詞之間是通過空格隔開的，所以我們視覺上可以這樣認為，word-spacing改變了（拉長或縮短）單詞之間那個空格的寬度。
方法五：使用CSS樣式中的white-space 屬性，這個屬性聲明如何處理元素內的空白符。
值 | 描述 |
normal | 默認。空白會被瀏覽器忽略。 |
pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。 |
nowrap | 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 |
pre-wrap | 保留空白符序列，但是正常地進行換行。 |
pre-line | 合并空白符序列，但是保留換行符。 |
white-space:normal;就是正常，和不設置一樣，連續空格和空行都只會顯示一個空格。
white-space:nowrap;不換行是什么意思呢？正常情況下，當我們的文本超出了文本域，文本就會自動折行，這個設置就是說不自動折行了，而是碰到換行標簽<br />才換
white-space:pre;和方法一相同，將文本原樣輸出顯示。當文本超出文本域時，不換行，會產生滾動條。
white-space:pre-wrap;保留空格和空行，但當文本超出文本域時，會自動換行。
white-space:pre-line;連續的空格會顯示為一個空格，但保留連續的空行。
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 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 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> 條列文字標簽
<meta name="refresh" content url> 自動更新文件內容
<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> 用於顯示變數
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
