節、分區和分割線

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

分區 - <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。注意：這將迫使用戶向右滾動以查看行的其余部分，這是一種糟糕的設計。

例子

下面是以上標記的示例：

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

種分割線Html代碼

一、基本線條：

1、<HR>

2、align線條位置（可選left、right、center）；width線條長度；color顏色；size厚度

<HRalign=center width=300 color=#987cb9SIZE=1>

二、特效（效果并不是孤立的，可相互組合）

1、兩頭漸變透明：

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>

2、紡錘形：

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>

3、右邊漸變透明：

<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>

4、左邊漸變透明：

<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>

5、虛線：

<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>

6、雙線：

<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>

7、立體效果：

<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>

8、鋼針效果：

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

９．垂直分割線

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

虛線的Html代碼

HTML代碼：

<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

TML表格如何從中間分開？

大家好，這節課講解一下如何在html中把表格從中間分開。可以使用到表格中的單元格合并方式，比如可以看到html里面加入了兩行四列的表格，它的邊框設置為兩個px，通過合并，通過"colspan"設置分隔線來跨列合并，使其達到表格分開的效果。

運行一下代碼，可以看到表格第二列和第三列已經進行合并了，當然也可以通過實現跨行合并達到合并單元格創建表格分割線的效果。跨行合并，運行一下代碼，可以看到表格的第一行和第二行已經合并了(口誤是行不是列)，并且在中間創造了一條分割線。

以上就是今天所講解的html如何把表格從中間分開。