整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在制作網頁時，文字是最基本的元素之一。讓閱讀者更容易閱讀，短時間里獲得更多信息，是網頁創作者的目標。本篇將介紹各種文字格式標簽的使用方法。
本篇主要針對初學者的一篇教程，如果你非常熟悉html，可以忽略本篇文章。
在網上瀏覽時經常看到一些標題文字，用來對應章節劃分，它們以固定的字號顯示，總共有6種級別的標題，從 h1 至 h6 依次減小，如下圖：
html 代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
</body>
</html>標題對齊方式可以使用 align 屬性，分別有三個屬性：
如下圖：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<h1>這是標題 1</h1>
<h2 align="left">這是標題 2</h2>
<h3 align="center">這是標題 3</h3>
<h4 align="right">這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
</body>
</html>除了標題，網頁中普通文字也是不可缺少的，而各種文字效果可以使網頁更加漂亮。
只需在<body>和</body>之間輸入文字，就會直接在頁面中顯示，如何設置這些文字的格式，這里使用<font>標簽，下面將逐一介紹各種文字格式用法。
一、設置字體、字號、顏色 —— <font> 標簽
<font> 標簽在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 相關標簽存在巨大差異，比如 strong 和 b 、del 和 s、em 和 i 等效果相同，在html5 中不支持，b、s、i 標簽，已不建議使用，關于各種差異，可自己了解下就可以了。
3、上標和下標 —— sup、sub
效果如下：
html代碼：
<html>
<body>
<p>
普通文本 <sup>上標</sup>
</p>
<p>
普通文本 <sub>下標</sub>
</p>
<p>
數學公式 X<sup>3</sup> + 5X<sup>2</sup> - 5 = 0
</p>
<p>
數學公式 X<sub>1</sub> - 2X<sub>1</sub> = 0
</p>
</body>
</html>4、空格——
一般在網頁中輸入文字時，在段落中明明增加了空格，卻在頁面中看不到，這是因為在html中，瀏覽器本身會將2個句子之間的所有半角空白僅當做一個空白來看待。所以在這里使用空格符代替，每個空格符代表一個半角空格，多個空格可以使用多次。
html代碼：
由于頭條不顯示空格字符，所以用圖片代替
效果：
5、其它特殊字符
除了空格字符，在網頁中還有一些特殊字符也需要使用代碼來代替，一般情況下，特殊字符由前綴 “&” 開始、字符名和后綴 “;” 組成，和空格符類似。如下表
特殊字符有很多，這里只列出一些例子，具體自己搜索了解下。
在網頁中要把文字有條理地顯示，需要使用到段落標簽，下面介紹一些與段落相關的標簽。
在網頁中，通過 <p>定義為一個段落。
html代碼：
<html>
<body>
<p>這是段落。</p>
<p>這是段落。</p>
<p>這是段落。</p>
<p>段落元素由 p 標簽定義。</p>
</body>
</html>
效果：
在寫文字時，除了自動換行外，換可以使用<br>標簽強制文字換行，這個和 p 段落標簽不一樣。段落標簽的換行是隔行的，而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>標簽處理，如下圖：
改行文字不會被自動換行，會看到出現橫向滾動條。
在網頁制作中，有時需要保留一些特殊的排版效果，這是使用標簽控制就會很麻煩，使用<pre>標簽就可以保留文本的格式排版效果。如下圖：
html代碼：
<html>
<body>
<pre>
這是
預格式文本。
它保留了 空格
和換行。
</pre>
<p>pre 標簽很適合顯示計算機代碼：</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>可以實現文字段落縮進，每使用一次，段落就縮進一次，可以嵌套使用。
實例代碼：
<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 標簽定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
</body>
</html>在網頁中可以通過添加對文字的標注來說明某段文本。
效果如下：
html代碼：
<!DOCTYPE HTML>
<html>
<body>
<p>ruby 使用語法：</p>
<ruby>
被說明的文字 <rt> 標注 </rt>
</ruby>
</body>
</html><dfn> | 定義一個定義項目。 |
<code> | 定義計算機代碼文本。 |
<samp> | 定義樣本文本。 |
<kbd> | 定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。 |
<var> | 定義變量。您可以將此標簽與 <pre> 及 <code> 標簽配合使用。 |
<cite> | 定義引用。可使用該標簽對參考文獻的引用進行定義，比如書籍或雜志的標題。 |
本篇介紹了大部分常用的文本格式標簽，在制作網頁時會經常使用到。如何掌握這些標簽使用，很簡單，可以使用文本編輯器或類似w3cshool 在線可編輯預覽的工具，親手寫一寫，熟悉每個標簽的用處，無需死記硬背，關鍵在于理解。
最后，感謝您的閱讀及關注，祝你學習愉快。
上篇：前端入門——HTML的發展歷史
下篇：前端入門——html 列表
reamweaver的CSS面板分類
type(類型)
background(背景)
block(區塊)
box(方框) 或盒子意思
border(邊框)
list(列表)
positioning(定位)
extensions(擴展)
共八個部分
1. type(類型)
type面板主要是對文字的字體，大小，顏色，效果等基本樣式進行設置。
注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。
(1)font-family：設置字體系列。什么叫字體系列呢?是指對文字設定幾個字體，當遇到第一個字體不能顯示的文字時會自動用系列中的第二個
字體或后面的字體顯示。
注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，
也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。中文網頁默認字體是宋體, 一般就空著不要選取任何字體。
默認值： not specified(取決于瀏覽器,系統默認的字體, 如: 微軟雅黑)
注意：
1.如果有漢字, 那么我們要加引號
2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開
3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...
為了避免在CSS中使用 font 或 font-family 設置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。
/* 示例:使用Unicode字體編碼設置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";(2)font-size：定義文字的大小。你可以通過選取數字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。
最好使用pixels作為單位，這樣不會在瀏覽器中文本變形。一般字體用比較標準的12px或14px, 默認值為16px。
注意：CSS中長度的單位分絕對長度單位和相對長度單位:
絕對長度單位有：
pt：磅(point)
mm、cn、in、pc：(毫米、厘米、英寸、活字)根據顯示的實際尺寸來確定長度。
此類單位不隨顯示器的分辨率改變而改變。
相對長度單位有：
px：(像素)根據顯示器的分辨率來確定長度。
em：當前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。
比如自身font-size: 30px; 那么此時1em=30px;
ex：當前字母"x"的高度，一般為字體尺寸的一半。
%：是以當前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。
small、large：表示比當前小一個級別或大一個級別的尺寸。
默認值：medium(標準大小)
(3)font-style：定義字體樣式為normal、italic、oblique。默認設置為normal。
注意： italic 斜體 oblique 歪斜體 italic和oblique實際效果是一樣的。
默認值:normal
(4)line-height：設置文本所在行的行高。默認為normal。可以是行內元素、行內塊元素, 通常與height設置的高度值相同, 可以做到垂直居中的作用。
你也可以自己鍵入一個精確的數值并選取一個計量單位。
比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。
最常用的方法: line-height:1.5em; /*行間距,相對數值,1.5倍行距,*/ 可有效的避免文字發生重疊
默認值： normal
(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。
這些效果可以同時存在，將效果前的復選框選定即可。
注意：鏈接的默認設置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持
默認值： none
(6)font-weight：給字體指定粗體字的磅值。
normal 默認值。定義標準的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細的字符。
100
200
300
400
500
600
700
800
900
inherit 規定應該從父元素繼承字體的粗細。
定義由粗到細的字符。400 等同于 normal, 而 700 等同于 bold。
默認值: normal
(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區域內所有字母大寫。
normal表示正常的字體, 為默認值；
默認值: normal
(8)text-transform：將選區中每個單詞的第一個字母轉為大寫, 或者令單詞全部大寫或全部小寫。
參數：capitalize(單詞首字母大寫)、uppercase(轉換成大寫)、lowercase(轉換成小寫)、none(不轉換)。
默認值：none
(9)color：定義文字顏色。包括對表單輸入的文字顏色。
CSS中顏色的值有三種表示方法：
#RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進制正整數。
例如：#FF0000表示紅色，#FFFF00表示黃色。
rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。
用顏色名稱。CSS可以使用已經定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。
顏色值的縮寫:
p{color:#000000} 可以縮寫為：p{color:#000}
p{color:#336699} 可以縮寫為：p{color:#369}
默認值： not specified
color: transparent; 透明色
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1)
注意: 如果文字的顏色通過單獨的類選擇去設置沒有改變顏色, 則應該通過組合選擇器(.header .top .topR .blue)去設置, 改變它的優先級。
2. background(背景)
background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。
一般是對body(頁面)、table(表格)、div(區域)的設置。
(1)background-color：設置元素的背景色。包括對input表單輸入框的背景顏色;
默認值: transparent(背景顏色為透明)
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1) 一般用于背景色
(2)background-image：設置元素的背景圖像。
默認值:none
CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了
background-image:url(a.jpg),url(b.jpg);base64使用
background-image: url("data:image/png;base64,iVBORw0KGgo=...");(3)background-repeat：確定背景圖像是否以及如何重復。
repeat 默認值。背景圖像將在垂直方向和水平方向重復。
repeat-x 背景圖像將在水平方向重復。
repeat-y 背景圖像將在垂直方向重復。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承background-repeat屬性的設置。
注意：如果定義的元素的body，可以控制頁面背景是否重復。
默認值: repeat
(4)background-attachment：固定背景圖像或者跟隨內容滾動。
參數fixed表示固定背景(不隨屏幕滾動而滾動，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內容滾動的背景。
注意：如果定義的元素的body, 可以使頁面背景固定。
默認值: scroll
(5)background-position(X)：指定背景圖像的水平位置。
可以指定為left(左邊), center(居中)，right(右邊)；
也可以指定數值，如20px是指背景距離左邊20象素。
background-position(Y)：指定背景圖像的垂直位置。
可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數值。
background-position屬性值:
left top
center top
right top
left center
center center
right center
left bottom
center bottom
right bottom
如果您僅規定了一個關鍵詞，那么第二個值將是"center"。
注意:采用英文單詞的水平位置和垂直位置的屬性值可以調換
x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值，另一個值將是 50%。
xpos ypos 第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。
如果您僅規定了一個值，另一個值將是50%。
您可以混合使用 % 和 position 值。
默認值：0% 0%
、html的介紹
HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言。標記：就是標簽, <標簽名稱></標簽名稱>，比如：<html></html>、<h1></h1>等，標簽大多數都是成對出現的。
所謂超文本，有兩層含義:
html是用來開發網頁的，它是開發網頁的語言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
網頁顯示內容
</body>
</html>網頁文件的后綴是.html或者.htm, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁。
全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發的一款免費、開源的跨平臺代碼編輯器，目前是前端(網頁)開發使用最多的一款軟件開發工具。
插件名說明Chinese (Simplified) Language Pack for VS Code中文(簡體)漢化包open in browser右擊在瀏覽器打開html
點擊對應安裝的插件，然后再點擊卸載按鈕即可。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
