整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML 基礎(chǔ)
非常簡單的HTML文檔
HTML 標(biāo)題
HTML 段落
HTML 鏈接
HTML 圖片
實例解析
HTML 標(biāo)題
HTML 標(biāo)題
在html源碼中插入注釋
插入水平線
實例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文檔中折行的使用。
HTML 格式化的某些問題。
實例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 標(biāo)簽對空行和空格進(jìn)行控制。
此例演示不同的"計算機(jī)輸出"標(biāo)簽的顯示效果。
此例演示如何在 HTML 文件中寫地址。
此例演示如何實現(xiàn)縮寫或首字母縮寫。
此例演示如何改變文字的方向。
此例演示如何實現(xiàn)長短不一的引用語。
文本下劃線與刪除線
實例解析
HTML 樣式
HTML Style 元素
背景色樣式
字體樣式，顏色，大小
文本對齊樣式
設(shè)置文本字體
設(shè)置文本字體大小
設(shè)置文本字體顏色
設(shè)置文本字體，字體大小，字體顏色
HTML使用不同樣式
沒有下劃線的鏈接
鏈接到一個外部樣式表
實例解析
HTML 鏈接
創(chuàng)建超級鏈接
將圖像作為鏈接
在新的瀏覽器窗口打開鏈接
鏈接到同一個頁面的不同位置
跳出框架
創(chuàng)建電子郵件鏈接
創(chuàng)建電子郵件鏈接 2
實例解析
HTML 圖像
插入圖像
從不同的位置插入圖片
排列圖片
本例演示如何使圖片浮動至段落的左邊或右邊。
制作圖像鏈接
創(chuàng)建圖像映射
實例解析
HTML 表格
簡單的表格
沒有邊框的表格
表格中的表頭
帶有標(biāo)題的表格
跨行或跨列的表格單元格
表格內(nèi)的標(biāo)簽
單元格邊距(Cell padding)
單元格間距(Cell spacing)
實例解析
HTML 列表
無序列表
有序列表
不同類型的有序列表
不同類型的無序列表
嵌套列表
嵌套列表 2
定義列表
實例解析
HTML Forms 和 Input
創(chuàng)建文本域(Text fields)
創(chuàng)建密碼域
復(fù)選框
單選按鈕
簡單的下拉列表
預(yù)選下拉列表
本例演示如何創(chuàng)建一個文本域（多行文本輸入控件）。
創(chuàng)建一個按鈕
本例演示如何在數(shù)據(jù)周圍繪制一個帶標(biāo)題的框。
帶有文本域與輸入域的表單
帶有復(fù)選框與提交按鈕的form表單
帶有單選框與提交按鈕的表單
發(fā)送郵件表單
實例解析
HTML iframe
內(nèi)聯(lián)框架 (HTML頁面中插入框架)
實例解析
HTML 頭部元素
描述了文檔標(biāo)題
HTML頁面中默認(rèn)的URL鏈接
提供文檔元數(shù)據(jù)
實例解析
HTML 腳本
插入一個腳本
使用 <noscript> 標(biāo)簽
實例解析
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實用視頻。
主要內(nèi)容：這是HTML課程的第四課，主要講解HTML的文字標(biāo)簽和格式標(biāo)簽。在今天我們做一個屬于自己的簡歷。
在上一節(jié)中主要講解了HTML的標(biāo)題標(biāo)簽（h1~h7）以及加粗、斜體、下劃線、上下標(biāo)等格式的標(biāo)簽。上節(jié)請戳→HTML電腦編程03 標(biāo)題物理字體標(biāo)簽的使用，大學(xué)生學(xué)編程
HTML
font標(biāo)簽通過字面意思來看，就是字體的意思。是的這是一個用來顯示文字的標(biāo)簽。不過值得說的是，這個文字可以通過屬性的方式，指定顏色和字體大小。比如：
font標(biāo)簽的寫法
效果：
font標(biāo)簽的顯示效果
從書寫的HTML代碼可以看出，font標(biāo)簽包括兩個參數(shù)：
color（字體的顏色）：顏色的值可以為英文，也可以為RGB數(shù)值。
size（字體的大小）：通過數(shù)字1~7可以控制字體的大小。
face（文字的顯示字體）：這個屬性可以設(shè)置顯示的字體。如可以寫為：face="楷體"
在HTML中包括兩種顏色體系。一種就是直接寫顏色的英文，如：red（紅色）、blue（藍(lán)色）、green（綠色）等。
不同顏色
另外一種顏色體系是RGB。由R（Red）、G（Green）、B（Blue）三種顏色組成。相信小時候很多人都知道兩種不同的顏料，可以轉(zhuǎn)換為不同的顏色。RGB就是通過紅綠藍(lán)不同的明暗程度。來表示所有的顏色的。
RGB
RGB中的每一個顏色都是以六位十六進(jìn)制進(jìn)行表示。數(shù)值越大顏色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#號。
段落標(biāo)簽為p。會為里面的文字自動分段顯示：
p標(biāo)簽自動分段
換行標(biāo)簽為br，這是個單標(biāo)簽。寫法為：<br/>。
br標(biāo)簽的形式
效果：
換行標(biāo)簽的效果
默認(rèn)情況下，HTML的文檔排列形式為自上而下，自左而右。標(biāo)簽包括行級標(biāo)簽和塊級標(biāo)簽。如果想要對塊級標(biāo)簽進(jìn)行換行，你就需要使用br標(biāo)簽。
下面是幾個標(biāo)簽，大家直接Sublime中寫入看一下效果哦。在以后就直接使用啦
居中預(yù)格式化標(biāo)簽
在制作網(wǎng)頁時，文字是最基本的元素之一。讓閱讀者更容易閱讀，短時間里獲得更多信息，是網(wǎng)頁創(chuàng)作者的目標(biāo)。本篇將介紹各種文字格式標(biāo)簽的使用方法。
本篇主要針對初學(xué)者的一篇教程，如果你非常熟悉html，可以忽略本篇文章。
在網(wǎng)上瀏覽時經(jīng)常看到一些標(biāo)題文字，用來對應(yīng)章節(jié)劃分，它們以固定的字號顯示，總共有6種級別的標(biāo)題，從 h1 至 h6 依次減小，如下圖：
html 代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標(biāo)題</title>
</head>
<body>
<h1>這是標(biāo)題 1</h1>
<h2>這是標(biāo)題 2</h2>
<h3>這是標(biāo)題 3</h3>
<h4>這是標(biāo)題 4</h4>
<h5>這是標(biāo)題 5</h5>
<h6>這是標(biāo)題 6</h6>
</body>
</html>標(biāo)題對齊方式可以使用 align 屬性，分別有三個屬性：
如下圖：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標(biāo)題</title>
</head>
<body>
<h1>這是標(biāo)題 1</h1>
<h2 align="left">這是標(biāo)題 2</h2>
<h3 align="center">這是標(biāo)題 3</h3>
<h4 align="right">這是標(biāo)題 4</h4>
<h5>這是標(biāo)題 5</h5>
<h6>這是標(biāo)題 6</h6>
</body>
</html>除了標(biāo)題，網(wǎng)頁中普通文字也是不可缺少的，而各種文字效果可以使網(wǎng)頁更加漂亮。
只需在<body>和</body>之間輸入文字，就會直接在頁面中顯示，如何設(shè)置這些文字的格式，這里使用<font>標(biāo)簽，下面將逐一介紹各種文字格式用法。
一、設(shè)置字體、字號、顏色 —— <font> 標(biāo)簽
<font> 標(biāo)簽在HTML 4 中用于指定字體、字體大小和文本顏色，但在HTML5 中不支持。
html代碼：
<html>
<body>
<div><font face="宋體">字體</font></div>
<div><font size="5">5號字體</font></div>
<div><font color="red">顏色</font></div>
<div><font size="5" face="arial" color="blue">一起使用</font></div>
</body>
</html>在html5中不建議使用，請用 css 樣式代替。
二、粗體、斜體、下劃線、刪除線—— strong、em、u、del
效果如下：
html代碼：
<!DOCTYPE html>
<html>
<body>
<p>這是普通文本 - <strong>這是粗體文本</strong>。</p>
<p>這是普通文本 - <em>這是斜體</em>。</p>
<p>這是普通文本 - <u>這是下劃線</u>。</p>
<p>這是普通文本 - <del>這是下劃線</del>。</p>
</body>
</html>注：html 5 和 html 4 相關(guān)標(biāo)簽存在巨大差異，比如 strong 和 b 、del 和 s、em 和 i 等效果相同，在html5 中不支持，b、s、i 標(biāo)簽，已不建議使用，關(guān)于各種差異，可自己了解下就可以了。
3、上標(biāo)和下標(biāo) —— sup、sub
效果如下：
html代碼：
<html>
<body>
<p>
普通文本 <sup>上標(biāo)</sup>
</p>
<p>
普通文本 <sub>下標(biāo)</sub>
</p>
<p>
數(shù)學(xué)公式 X<sup>3</sup> + 5X<sup>2</sup> - 5 = 0
</p>
<p>
數(shù)學(xué)公式 X<sub>1</sub> - 2X<sub>1</sub> = 0
</p>
</body>
</html>4、空格——
一般在網(wǎng)頁中輸入文字時，在段落中明明增加了空格，卻在頁面中看不到，這是因為在html中，瀏覽器本身會將2個句子之間的所有半角空白僅當(dāng)做一個空白來看待。所以在這里使用空格符代替，每個空格符代表一個半角空格，多個空格可以使用多次。
html代碼：
由于頭條不顯示空格字符，所以用圖片代替
效果：
5、其它特殊字符
除了空格字符，在網(wǎng)頁中還有一些特殊字符也需要使用代碼來代替，一般情況下，特殊字符由前綴 “&” 開始、字符名和后綴 “;” 組成，和空格符類似。如下表
特殊字符有很多，這里只列出一些例子，具體自己搜索了解下。
在網(wǎng)頁中要把文字有條理地顯示，需要使用到段落標(biāo)簽，下面介紹一些與段落相關(guān)的標(biāo)簽。
在網(wǎng)頁中，通過 <p>定義為一個段落。
html代碼：
<html>
<body>
<p>這是段落。</p>
<p>這是段落。</p>
<p>這是段落。</p>
<p>段落元素由 p 標(biāo)簽定義。</p>
</body>
</html>
效果：
在寫文字時，除了自動換行外，換可以使用<br>標(biāo)簽強(qiáng)制文字換行，這個和 p 段落標(biāo)簽不一樣。段落標(biāo)簽的換行是隔行的，而br不是，時2行文字更加緊湊。
html代碼：
<html>
<body>
<p>
第一個段落<br />換行1<br />換行2<br />換行3<br />最后一行.
</p>
<p>
第二個段落 <br />換行1<br />換行2<br />換行3<br />最后一行.
</p>
</body>
</html>效果如下：
如果不想文字被瀏覽器自動換行，可以使用<nobr></nobr>標(biāo)簽處理，如下圖：
改行文字不會被自動換行，會看到出現(xiàn)橫向滾動條。
在網(wǎng)頁制作中，有時需要保留一些特殊的排版效果，這是使用標(biāo)簽控制就會很麻煩，使用<pre>標(biāo)簽就可以保留文本的格式排版效果。如下圖：
html代碼：
<html>
<body>
<pre>
這是
預(yù)格式文本。
它保留了 空格
和換行。
</pre>
<p>pre 標(biāo)簽很適合顯示計算機(jī)代碼：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
<p>這是一個ok效果</p>
<pre>
O O k K
O O K K
O O K K
</pre>
</body>
</html>使用<blockquote>可以實現(xiàn)文字段落縮進(jìn)，每使用一次，段落就縮進(jìn)一次，可以嵌套使用。
實例代碼：
<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
請注意，瀏覽器在 blockquote 元素前后添加了換行，并增加了外邊距。
</body>
</html>效果如下：
請注意，瀏覽器在 blockquote 元素前后添加了換行，并增加了外邊距。
在段落和段落之間加上一行水平線，將段落隔開。如下效果：
html代碼：
<html>
<body>
<p>hr 標(biāo)簽定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
</body>
</html>在網(wǎng)頁中可以通過添加對文字的標(biāo)注來說明某段文本。
效果如下：
html代碼：
<!DOCTYPE HTML>
<html>
<body>
<p>ruby 使用語法：</p>
<ruby>
被說明的文字 <rt> 標(biāo)注 </rt>
</ruby>
</body>
</html><dfn> | 定義一個定義項目。 |
<code> | 定義計算機(jī)代碼文本。 |
<samp> | 定義樣本文本。 |
<kbd> | 定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經(jīng)常用在與計算機(jī)相關(guān)的文檔或手冊中。 |
<var> | 定義變量。您可以將此標(biāo)簽與 <pre> 及 <code> 標(biāo)簽配合使用。 |
<cite> | 定義引用?？墒褂迷摌?biāo)簽對參考文獻(xiàn)的引用進(jìn)行定義，比如書籍或雜志的標(biāo)題。 |
本篇介紹了大部分常用的文本格式標(biāo)簽，在制作網(wǎng)頁時會經(jīng)常使用到。如何掌握這些標(biāo)簽使用，很簡單，可以使用文本編輯器或類似w3cshool 在線可編輯預(yù)覽的工具，親手寫一寫，熟悉每個標(biāo)簽的用處，無需死記硬背，關(guān)鍵在于理解。
最后，感謝您的閱讀及關(guān)注，祝你學(xué)習(xí)愉快。
上篇：前端入門——HTML的發(fā)展歷史
下篇：前端入門——html 列表
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
