整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
習(xí)HTML時(shí)有時(shí)候我們需要用代碼設(shè)置邊框或虛線邊框的樣式，那該怎么設(shè)置呢？下面上海非凡進(jìn)修學(xué)院HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖分享下html虛線邊框設(shè)置教程，會(huì)對(duì)幾個(gè)不同標(biāo)簽加虛線邊框效果樣式，同學(xué)們可以根據(jù)示例靈活掌握與應(yīng)用到自己DIV+CSS布局中。
為了對(duì)html不同標(biāo)簽加邊框虛線，我們選擇幾個(gè)常用標(biāo)簽對(duì)齊設(shè)置邊框虛線效果。
1、html常用標(biāo)簽
div標(biāo)簽
span
ul li
table tr td
2、實(shí)例用到CSS屬性單詞
border
width
height
3、實(shí)現(xiàn)虛線的CSS重點(diǎn)介紹
border為邊框?qū)傩裕绻獙?shí)現(xiàn)對(duì)象邊框效果，要設(shè)置邊框?qū)挾取⑦吙蝾伾⑦吙驑邮剑▽?shí)線還是虛線）
border:1px dashed #F00 這個(gè)就是設(shè)置邊框樣式寬度為1px，虛線，虛線為紅色。
4、實(shí)例描述
我們對(duì)以上幾個(gè)標(biāo)簽設(shè)置相同寬度、相同高度、邊框效果。
5、HTML代碼示例：
以上示例對(duì)html中不同標(biāo)簽設(shè)置相同的樣式，包括相同邊框虛線。
上海HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖提示邊框三個(gè)樣式
通常我們可以對(duì)邊框設(shè)置寬度（厚度）、邊框樣式、邊框顏色這三個(gè)屬性與參數(shù)。
1）、邊框顏色：border-color:#000
2）、邊框厚度（寬度）：border-width:1px
使用數(shù)字+單位設(shè)置邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數(shù)字，大于0的數(shù)值。否則設(shè)置邊框border樣式無(wú)效。
3）、border邊框樣式：border-style:solid
上海HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖提示：邊框border樣式值如下：
none :無(wú)邊框。與任何指定的border-width值無(wú)關(guān)
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線（常用）
dashed : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線（常用）
solid :實(shí)線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove : 根據(jù)border-color的值畫(huà)3D凹槽
ridge :根據(jù)border-color的值畫(huà)菱形邊框
inset : 根據(jù)border-color的值畫(huà)3D凹邊
outset : 根據(jù)border-color的值畫(huà)3D凸邊
格式化
>格式化標(biāo)記通常只能是產(chǎn)生幾種不同文本的樣式，但在語(yǔ)義上它們各自有著自己的特點(diǎn)
>如果你只是想有著一些自己的文本樣式，可以嘗試使用“常用html標(biāo)記”里格式化的內(nèi)容或css樣式表
>但是這樣會(huì)對(duì)搜索引擎不友好
>所以我們強(qiáng)調(diào)使用語(yǔ)義化標(biāo)簽，提供給瀏覽器的語(yǔ)義信息越多，瀏覽器就可以越好地把這些信息展示給用戶。
## `<abbr></abbr>`
作用：用于指示該標(biāo)簽內(nèi)的內(nèi)容是一個(gè)縮寫(xiě)
注意點(diǎn)：
1. 常與全局屬性title配合使用，這樣可以在鼠標(biāo)移動(dòng)到該處時(shí)顯示全稱
`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`
2. 在瀏覽器內(nèi)渲染會(huì)使其在內(nèi)容底部加上短虛線
## `<address></address>`
作用：用于定義文檔或文章作者/擁有者的聯(lián)系信息
>如果 `<address>` 元素位于 `<body>` 元素內(nèi)，則它表示文檔聯(lián)系信息。
>如果 `<address>` 元素位于 `<article>` 元素內(nèi)，則是它表示文章的聯(lián)系信息。
注意點(diǎn)：
1. address元素中的文本通常呈現(xiàn)為斜體，大多數(shù)瀏覽器會(huì)在address元素前后換行
2. address元素不應(yīng)該用于描述通訊地址，除非它是練習(xí)信息的一部分
3. address元素元素通常連同其他信息被包含在footer元素中
```
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
```
## `<b></b>`
作用：定義粗體文本
## `<bdi></bdi>`
作用：定義文本的文本方向，使其脫離周?chē)谋镜姆较蛟O(shè)置
注意點(diǎn)：
1. bdi指的是bidi隔離
2. 在發(fā)布用戶評(píng)論或其它難以控制的內(nèi)容時(shí)，可以使用
3. 需要與全局屬性dir配合使用
## `<bdo></bdo>`
作用：定義文字方向
注意點(diǎn)：
1. 請(qǐng)與全局屬性dir配合使用
```
<p>
如果您的瀏覽器支持 bi-directional override (bdo)，下一行會(huì)從右向左輸出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
```
## `<blockquote></blockquote>`
作用：`<blockquote>`標(biāo)簽用于定義塊引用
注意點(diǎn)：
1. 標(biāo)簽內(nèi)的所有文本都會(huì)從常規(guī)文本中分離出來(lái)，一般會(huì)上下?lián)Q行，左右增加外邊距，有時(shí)也會(huì)使用斜體
2. 換而言之，塊引用擁有它們自己的空間
3. 可選屬性：
`cite=url`規(guī)定引用來(lái)源
```
<blockquote cite="http://www.wwf.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.
</blockquote>
```
主流瀏覽器均不支持cite屬性，但是搜索引擎可以因此獲得更多的信息
## `<q></q>`
作用：用于定義短引用
注意點(diǎn)：
1. 瀏覽器經(jīng)常在引用內(nèi)容的人左右添加引號(hào)
2. `<q>` 與 `<blockquote>` 的區(qū)別:
- `<q>` 標(biāo)簽在本質(zhì)上與 `<blockquote>` 是一樣的。不同之處在于它們的顯示和應(yīng)用。`<q>` 標(biāo)簽用于簡(jiǎn)短的行內(nèi)引用。如果需要從周?chē)鷥?nèi)容分離出來(lái)比較長(zhǎng)的部分（通常顯示為縮進(jìn)地塊），請(qǐng)使用 `<blockquote>` 標(biāo)簽。
3. 在html4中，firefox和opera中q元素包含的文本必須以引號(hào)來(lái)開(kāi)始和結(jié)束，但是IE卻不支持這個(gè)規(guī)定，如果我們?yōu)榱藵M足其它瀏覽器而添加了引號(hào)，那么在IE中就會(huì)顯示兩組引號(hào)。
4. 盡管如此，我們還是推薦使用q元素，因?yàn)樗谖臋n處理和信息提取方面將會(huì)有很強(qiáng)的效果
5. 可選屬性：
`cite=citation`定義引用的出處或來(lái)源（citation）
## `<cite></cite>`
作用：表示所含文本是對(duì)某個(gè)參考文獻(xiàn)的引用
注意點(diǎn)：
1. 在顯示上與blockquote元素類似，均是斜體
2. 但是它不會(huì)有上下左右的外邊距
3. 通常情況下還要把引用包裹在一對(duì)`<a></a>`標(biāo)簽中，然后把超鏈接指向引用
`<cite><a href=URL>引用名</a></cite>`
>`<cite>` 標(biāo)簽還有一個(gè)隱藏的功能：它可以使你或者其他人從文檔中自動(dòng)摘錄參考書(shū)目。我們可以很容易地想象一個(gè)瀏覽器，它能夠自動(dòng)整理引用表格，并把它們作為腳注或者獨(dú)立的文檔來(lái)顯示。`<cite>` 標(biāo)簽的語(yǔ)義已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)了改變它所包含的文本外觀的作用；它使瀏覽器能夠以各種實(shí)用的方式來(lái)向用戶表達(dá)文檔的內(nèi)容。
## `<code></code>`
作用：定義計(jì)算機(jī)代碼文本
注意點(diǎn)：
1. code元素并不能將元素內(nèi)的內(nèi)容以原樣顯示，瀏覽器仍然會(huì)解析內(nèi)容而不跳過(guò)
2. code只是給內(nèi)容的字體改為等寬字體，即它只是將內(nèi)容轉(zhuǎn)變?yōu)榘凳具@是計(jì)算機(jī)代碼的內(nèi)容
## `<var></var>`
作用：`<var>` 標(biāo)簽表示變量的名稱，或者由用戶提供的值。
注意點(diǎn)：
1. 用 `<var>` 標(biāo)簽標(biāo)記的文本通常顯示為斜體。
2. `<var>` 標(biāo)簽是計(jì)算機(jī)文檔中應(yīng)用的另一個(gè)小竅門(mén)，這個(gè)標(biāo)簽經(jīng)常與 `<code>` 和 `<pre>` 標(biāo)簽一起使用，用來(lái)顯示計(jì)算機(jī)編程代碼范例及類似方面的特定元素。
## `<smap></smap>`
作用：用于從一段上下文中抽取一些字符
例子：
`字符序列 <samp>ae</samp> 可能會(huì)被轉(zhuǎn)換為 æ 連字字符。`
效果：
`字符序列 ae 可能會(huì)被轉(zhuǎn)換為 ? 連字字符。`
## `<ins></ins>`
作用：定義一個(gè)插入文本
注意點(diǎn)：
1. 顯示效果是加入下劃線
## `<dfn></dfn>`
作用：用于標(biāo)記特殊術(shù)語(yǔ)或短語(yǔ)
注意點(diǎn)：
1. 瀏覽器通常會(huì)將dfn元素內(nèi)的內(nèi)容顯示為斜體
2. 應(yīng)當(dāng)盡量少的使用，比如在技術(shù)性的文檔中，在第一次提到一個(gè)術(shù)語(yǔ)時(shí)，可以加上dfn元素，而在相同文檔的后續(xù)中，對(duì)于同一個(gè)術(shù)語(yǔ)，應(yīng)避免使用dfn
## `<em></em>`
作用：定義一個(gè)強(qiáng)調(diào)文本
注意點(diǎn)：
1. 在顯示結(jié)果上，它依然是斜體
2. 如果你只是為了定義一個(gè)斜體的內(nèi)容，可以考慮使用`<i></i>`或css樣式表
3. 對(duì)于強(qiáng)調(diào)的內(nèi)容應(yīng)當(dāng)不宜過(guò)多，否則無(wú)法突出想要表達(dá)的內(nèi)容
## `<strong></strong>`
作用：定義一個(gè)語(yǔ)氣更加強(qiáng)烈地強(qiáng)調(diào)文本
注意點(diǎn)：
1. 常識(shí)告訴我們應(yīng)較少使用em元素的話，那么strong元素出現(xiàn)的次數(shù)應(yīng)該更少，限制其使用可以讓這個(gè)標(biāo)記更加的引人注意和有效
## `<i></i>`
作用：定義一個(gè)斜體文本或傾斜的文本
## `<kbd></kbd>`
作用：定義鍵盤(pán)文本
注意點(diǎn)：
1. 顯示效果為等寬字體
## `<mark></mark>`(HTML5)
作用：定義帶有記號(hào)的文本
注意點(diǎn)：
1. 與加粗不同，它會(huì)將文字加上背景色
## `<meter></meter>`(HTML5)
作用：定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測(cè)量，也被稱為gauge（尺度）
注意點(diǎn)：
1. 這是一個(gè)html5的新標(biāo)簽，假如你把文檔類型聲明為html4或以下和xhtml，標(biāo)簽本身的效果將會(huì)受到影響
2. `<meter>`標(biāo)簽不應(yīng)用于指示進(jìn)度條的進(jìn)度，如果標(biāo)記進(jìn)度，請(qǐng)使用`<progress></progress>`標(biāo)簽
可用屬性：
1. form=form_id-->規(guī)定meter元素所屬的一個(gè)或多個(gè)表單
2. high=number-->規(guī)定被視作高的值的范圍
3. low=number-->規(guī)定被視作高的值的范圍
4. max=number-->規(guī)定范圍的最大值
5. min=number-->規(guī)定范圍的最小值
6. optimum=number-->規(guī)定度量的優(yōu)化值
7. value=number-->必須。規(guī)定度量的當(dāng)前值
```
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
```
## `<progress></progress>`(HTML5)
作用：標(biāo)示任務(wù)的進(jìn)度（進(jìn)程）
`<progress value="22" max="100"></progress> `
注意點(diǎn)：
1. 需要與js結(jié)合使用，來(lái)顯示任務(wù)的進(jìn)度
2. progress標(biāo)簽不適合使用來(lái)表示度量衡，這種情況請(qǐng)使用meter元素來(lái)替代
可用屬性：
max=number-->規(guī)定任務(wù)一共需要多少工作
value=number-->規(guī)定任務(wù)已經(jīng)完成多少工作
## `<pre></pre>`
作用：用于定義預(yù)格式化的文本，即通常會(huì)保留空格和換行，文本會(huì)呈現(xiàn)為等寬字體
注意點(diǎn)：
1. pre元素常用于表示計(jì)算機(jī)的源代碼，但是計(jì)算機(jī)的源代碼（html）直接放入瀏覽器仍會(huì)解析（需要使用`<`和`>`等符號(hào)實(shí)體）
2. 會(huì)導(dǎo)致內(nèi)容截?cái)嗟臉?biāo)簽絕不能包含在pre元素中，如標(biāo)題、p元素、address元素
3. 可選的屬性：
`width=number`定義每行的最大字符數(shù)
## `<ruby></ruby>`
作用：可用于定義一個(gè)ruby注釋（中文注音或字符）
注意點(diǎn)：
1. ruby元素與rt元素一同使用
2. ruby元素由需要一組字符和一個(gè)提供信息的rt元素組成
3. 還包括一個(gè)可選的rp元素，定義瀏覽器不支持ruby元素時(shí)顯示的內(nèi)容
## `<rt></rt>`
作用：定義字符的解釋或發(fā)音
## `<rp></rp>`
作用：定義瀏覽器不支持ruby元素時(shí)顯示的內(nèi)容
## `<s></s>`
作用：定義加刪除線的文本
注意點(diǎn)：
1. `<s>`標(biāo)簽是`<strike>`標(biāo)簽的縮寫(xiě)版本，但html4和xhtml中已經(jīng)不再贊成使用它了，就是說(shuō)，它早晚有一天會(huì)消失
2. 請(qǐng)使用`<del></del>`替代它
## `<del></del>`
作用：給元素中的內(nèi)容上加上刪除線
注意點(diǎn)：
1. 請(qǐng)與`<ins></ins>`標(biāo)簽配合使用，來(lái)描述文檔中的更新與修正
2. 可選的屬性：
- cite=URL
- datetime=YYYMMDD （定義文本被刪除的日期和時(shí)間）
## `<small></small>`
作用：標(biāo)簽內(nèi)的元素呈現(xiàn)小號(hào)字體的效果
注意點(diǎn)：
1. 如果被包裹字體已經(jīng)是最小號(hào)的字體了，那這個(gè)標(biāo)簽將不起任何作用
2. `<small></small>`是可以嵌套的，從而把文字連續(xù)的縮小，直到到達(dá)最小的一號(hào)字
## `<sup></sup>`
作用：標(biāo)簽中的內(nèi)容會(huì)以當(dāng)前文本流中字符高度的一般來(lái)顯示（上標(biāo)）
注意點(diǎn)：
1. 雖然顯示效果與文本流中其他元素不一樣，但是它們的字體字號(hào)都是一樣的
2. 這個(gè)標(biāo)簽在向文檔添加注腳以及表示方程式中的指數(shù)時(shí)非常有效，如果與`<a></a>`標(biāo)簽結(jié)合使用可以創(chuàng)建出很好的超鏈接注腳
## `<sub></sub>`
作用：標(biāo)簽中的內(nèi)容會(huì)以當(dāng)前文本流中字符高度的一般來(lái)顯示（下標(biāo)）
## `<template></template>`
作用：可以作為一個(gè)容器，但是它并不會(huì)存在于DOM樹(shù)中
注意點(diǎn)：
1. 多用于包裹一段代碼，對(duì)其綁定事件，使其可以控制是否隱藏
2. 一個(gè)檢查方法：
```
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("您的瀏覽器不支持 template！");
}
```
## `<u></u>`
作用：定義下劃線文本
注意點(diǎn)：
1. 應(yīng)盡量避免使用，用戶可能會(huì)把它混淆為一個(gè)超鏈接
## `<time></time>`(HTML5)
作用：定義一個(gè)公歷的時(shí)間或日期，時(shí)間和時(shí)區(qū)偏移是可選的
可選的屬性：
1. datetime=datetime-->規(guī)定日期/時(shí)間。否則由元素內(nèi)容給定日期時(shí)間
2. pubdate=pubdate-->指示 `<time>` 元素中的日期 / 時(shí)間是文檔（或 `<article>` 元素）的發(fā)布日期。
## `<wbr>`(HTML5)
一段帶有 Word Break Opportunity 的文本：
```
<p>
如果想學(xué)習(xí) AJAX，那么您必須熟悉 XML<wbr>Http<wbr>Request 對(duì)象。
</p>
```
作用：Word Break Opportunity (`<wbr>`) 規(guī)定在文本中的何處適合添加換行符。
注意點(diǎn)：如果單詞太長(zhǎng)，或者您擔(dān)心瀏覽器會(huì)在錯(cuò)誤的位置換行，那么您可以使用 `<wbr>` 元素來(lái)添加 Word Break Opportunity（單詞換行時(shí)機(jī)）。
到css虛線樣式，應(yīng)該會(huì)想到border的solid，網(wǎng)頁(yè)布局中solid用的概率最高了，要有css虛線的效果還可以用圖片做背景，但是不推薦，盡量使用css虛線樣式做這個(gè)虛線的效果，那么css虛線樣式就是border中的dotted和dashed，這兩種都是css虛線，但是他們是有區(qū)別的。
1.dotted虛線
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虛線</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dotted虛線！</div>
</body>
</html>
效果：
2.dashed虛線
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虛線</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dashed虛線！</div>
</body>
</html>
效果：
除注明外的文章,均為來(lái)源:湯久生博客(QQ:1917843637),轉(zhuǎn)載請(qǐng)保留本文地址！
原文鏈接：http://tangjiusheng.com/divcss/115.html
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
