整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 文本格式化
加粗文本
斜體文本
電腦自動(dòng)輸出
這是 下標(biāo) 和 上標(biāo)
HTML 格式化標(biāo)簽
HTML 使用標(biāo)簽<b> 與<i> 對(duì)輸出的文本進(jìn)行格式, 如：粗體 or 斜體
這些HTML標(biāo)簽被稱為格式化標(biāo)簽（請(qǐng)查看底部完整標(biāo)簽參考手冊(cè)）。
| 通常標(biāo)簽 <strong> 替換加粗標(biāo)簽 <b> 來使用, <em> 替換 <i>標(biāo)簽使用。然而，這些標(biāo)簽的含義是不同的：<b> 與<i> 定義粗體或斜體文本。<strong> 或者 <em>意味著你要呈現(xiàn)的文本是重要的，所以要突出顯示。現(xiàn)今所有主要瀏覽器都能渲染各種效果的字體。不過，未來瀏覽器可能會(huì)支持更好的渲染效果。 |
在線實(shí)例
文本格式化
此例演示如何在一個(gè) HTML 文件中對(duì)文本進(jìn)行格式化
預(yù)格式文本
此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。
"計(jì)算機(jī)輸出"標(biāo)簽
此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。
地址
此例演示如何在 HTML 文件中寫地址。
縮寫和首字母縮寫
此例演示如何實(shí)現(xiàn)縮寫或首字母縮寫。
文字方向
此例演示如何改變文字的方向。
塊引用
此例演示如何實(shí)現(xiàn)長短不一的引用語。
刪除字效果和插入字效果
此例演示如何標(biāo)記刪除文本和插入文本。
HTML 文本格式化標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <b> | 定義粗體文本 |
| <em> | 定義著重文字 |
| <i> | 定義斜體字 |
| <small> | 定義小號(hào)字 |
| <strong> | 定義加重語氣 |
| <sub> | 定義下標(biāo)字 |
| <sup> | 定義上標(biāo)字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
HTML "計(jì)算機(jī)輸出" 標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <code> | 定義計(jì)算機(jī)代碼 |
| <kbd> | 定義鍵盤碼 |
| <samp> | 定義計(jì)算機(jī)代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義預(yù)格式文本 |
HTML 引文, 引用, 及標(biāo)簽定義
| 標(biāo)簽 | 描述 |
|---|---|
| <abbr> | 定義縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長的引用 |
| <q> | 定義短的引用語 |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個(gè)定義項(xiàng)目。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "文本格式" link.
文本顏色
顏色屬性被用來設(shè)置文字的顏色。
顏色是通過CSS最經(jīng)常的指定：
十六進(jìn)制值 - 如: ＃FF0000
一個(gè)RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
參閱 CSS 顏色值 查看完整的顏色值。
一個(gè)網(wǎng)頁的背景顏色是指在主體內(nèi)的選擇：
實(shí)例
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
對(duì)于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。
文本的對(duì)齊方式
文本排列屬性是用來設(shè)置文本的水平對(duì)齊方式。
文本可居中或?qū)R到左或右,兩端對(duì)齊.
當(dāng)text-align設(shè)置為"justify"，每一行被展開為寬度相等，左，右外邊距是對(duì)齊（如雜志和報(bào)紙）。
實(shí)例
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修飾
text-decoration 屬性用來設(shè)置或刪除文本的裝飾。
從設(shè)計(jì)的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：
實(shí)例
a {text-decoration:none;}
嘗試一下 ?
也可以這樣裝飾文字：
實(shí)例
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
我們不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常常混淆用戶。
文本轉(zhuǎn)換
文本轉(zhuǎn)換屬性是用來指定在一個(gè)文本中的大寫和小寫字母。
可用于所有字句變成大寫或小寫字母，或每個(gè)單詞的首字母大寫。
實(shí)例
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
嘗試一下 ?
文本縮進(jìn)
文本縮進(jìn)屬性是用來指定文本的第一行的縮進(jìn)。
實(shí)例
p {text-indent:50px;}
更多實(shí)例
指定字符之間的空間
這個(gè)例子演示了如何增加或減少字符之間的空間。
指定行與行之間的空間
這個(gè)例子演示了如何指定在一個(gè)段落中行之間的空間
設(shè)置元素的文本方向
這個(gè)例子演示了如何改變?cè)氐奈谋痉较颉?/p>
增加單詞之間的空白空間
這個(gè)例子演示了如何增加一個(gè)段落中的單詞之間的空白空間。
在元素內(nèi)禁用文字環(huán)繞
這個(gè)例子演示了如何禁用一個(gè)元素內(nèi)的文字環(huán)繞。
垂直對(duì)齊圖像
這個(gè)例子演示了如何設(shè)置文本的垂直對(duì)齊圖像。
添加文本陰影
這個(gè)例子演示了如何設(shè)置文本陰影。
所有CSS文本屬性。
| 屬性 | 描述 |
|---|---|
| color | 設(shè)置文本顏色 |
| direction | 設(shè)置文本方向。 |
| letter-spacing | 設(shè)置字符間距 |
| line-height | 設(shè)置行高 |
| text-align | 對(duì)齊元素中的文本 |
| text-decoration | 向文本添加修飾 |
| text-indent | 縮進(jìn)元素中文本的首行 |
| text-shadow | 設(shè)置文本陰影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 設(shè)置或返回文本是否被重寫 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊 |
| white-space | 設(shè)置元素中空白的處理方式 |
| word-spacing | 設(shè)置字間距 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML 實(shí)例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>
實(shí)例解析
DOCTYPE 聲明了文檔類型
位于標(biāo)簽 <html> 與 </html> 描述了文檔類型
位于標(biāo)簽 <body> 與 </body> 為可視化網(wǎng)頁內(nèi)容
位于標(biāo)簽 <h1> 與 </h1> 作為一個(gè)標(biāo)題使用
位于標(biāo)簽 <p> 與 </p> 作為一個(gè)段落顯示
| <!DOCTYPE html> 在HTML5中也是描述了文檔類型。 |
什么是HTML?
HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標(biāo)記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標(biāo)記語言
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁面
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
<標(biāo)簽>內(nèi)容</標(biāo)簽>
HTML 元素
"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴(yán)格來講, 一個(gè) HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:
HTML 元素:
<p>這是一個(gè)段落。</p>
Web 瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁顯示。
瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來決定如何展現(xiàn)HTML頁面的內(nèi)容給用戶：
HTML 網(wǎng)頁結(jié)構(gòu)
下面是一個(gè)可視化的HTML頁面結(jié)構(gòu)：
<html>
<head>
<title>頁面標(biāo)題</title>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
</body>
</html>
| 只有 <body> 區(qū)域 (白色部分) 才會(huì)在瀏覽器中顯示。 |
HTML版本
從初期的網(wǎng)絡(luò)誕生后，已經(jīng)出現(xiàn)了許多HTML版本:
| 版本 | 發(fā)布時(shí)間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。
網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。
doctype 聲明是不區(qū)分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整網(wǎng)頁聲明類型 DOCTYPE 參考手冊(cè)。
中文編碼
目前在大部分瀏覽器中，直接輸出中文會(huì)出現(xiàn)中文亂碼的情況，這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。
HTML 實(shí)例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁面標(biāo)題</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
