html基礎(chǔ)必備-分隔標(biāo)記，前端小白一看就會

節(jié)、分區(qū)和分割線

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

分區(qū) - <div> </div>

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

段落 - <p> </p>

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

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

內(nèi)聯(lián) - <span> </span>

span標(biāo)記用于將內(nèi)聯(lián)元素組合在一起，例如句子中的幾個單詞，以便僅對這些單詞應(yīng)用css樣式。span標(biāo)記可以在div和p標(biāo)記中使用，因為它不會創(chuàng)建新的塊。

換行 - <br>

br標(biāo)記相當(dāng)于一個回車符，用于在新行開始文本。一行中的多個<br>標(biāo)記將在網(wǎng)頁上創(chuàng)建一個很大的垂直空間。

水平分隔線 - <hr>

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

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

不換行 - <nobr> </nobr>

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

例子

下面是以上標(biāo)記的示例：

瀏覽器顯示內(nèi)容如下所示：

種分割線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表格如何從中間分開？

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

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

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

在線咨詢

上一篇：前端面試題（十五）
下一篇：探秘網(wǎng)頁性能提升利器之CSS硬件加速

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商