整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
以下HTML標記用于格式化網頁上文本的外觀。這可以使網頁變得更加生動，但是，文本格式的太多變化也會使人不快。
head標記有6個級別可用，從h1用于最大和最重要的標題，到h6是最小的標題。
b標記之間的文本以粗體顯示，與周圍的文本相對突出。
i標記以一個小角度顯示文本。
u標記在文本正文添加一條線，請注意，鏈接已經有下劃線，不需要額外的標記。
strike標記在文本的正中間畫一條線，通常用來表示文本是舊的，不再相關，刪除。也可以用<s></s>代替。
pre標記之間的任何文本，包括空格、回車符和標點符號，都將像在文本編輯器中一樣顯示在瀏覽器中（通常瀏覽器會忽略多個空格）
code標記之間的文本以固定寬度字體顯示，通常在顯示源代碼時使用。
tt標記之間的文本就像是用打字機打出了一個固定寬度的文字。
blockquote標記定義一個塊引用，并且在塊的左右添加額外的邊距。
small標記讓你無需設置字體大小，就可以使文本呈現比周圍稍小的外觀。
font標記的color屬性改變幾個字或一段文字的顏色。屬性使用十六進制顏色代碼。
font標記的size屬性改變字體的大小，值范圍從1到7，1是最小，7是最大。
font標記的size屬性還可以相對于其前面的字體大小的作即時更改，此用法將按你指定的數字增減字體大小。例如：<font size="-1">一些文本</font>
font標記的face屬性以指定的字體顯示文本，值為字體名稱，如“Helvetica”、“Arial”或“Courier”。
center標記之間的所有內容都居中。
em標記用于強調文本，文本通常以斜體顯示，可能會根據瀏覽器的不同而有所不同。
strong標記用于著重強調文本，通常以粗體顯示，可能會根據瀏覽器的不同而有所不同。
下面是以上標記的示例：
瀏覽器顯示內容如下所示：
么是彈性布局？
用戶的文字大小與彈性布局
用戶的瀏覽器默認渲染的文字大小是“16px”，換句話說，Web頁面中“body”的文字大小在用戶瀏覽器下默認渲染是“16px”。當然，如果用戶愿意他可以改變這種字體大小的設置，用戶可以通過UI控件來改變瀏覽器默認的字體大小。
彈性設計有一個關鍵地方Web頁面中所有元素都使用“em”單位值。“em”是一個相對的大小，我們可以這樣來設置1em，0.5em，1.5em等，而且“em”還可以指定到小數點后三位，比如“1.365em”。而其中“相對”的意思是：
1.相對的計算必然會一個參考物，那么這里相對所指的是相對于元素父元素的font-size。比如說：如果在一個<div>設置字體大小為“16px”，此時這個<div>的后代元素教程了是將繼承他的字體大小，除非重新在其后代元素中進行過顯示的設置。此時，如果你將其子元素的字體大小設置為“0.75em”，那么其字體大小計算出來后就相當于“0.75 X 16px = 12px”；
2.如果用戶通過瀏覽器的UI控件改變了文字的大小，那么我們整個頁面也會進行放大（或縮小），不至于用戶改變了瀏覽器的字體后會致使整個頁面崩潰（我想這種現像大家都有碰到過，不信你就試試你自己制作過的項目，你會覺得很恐怖）。
大家可以查看這個彈性布局樣例。此時你使用瀏覽器的UI控件改變了文字的大小或者直接“ctrl + ”和“ctrl - ”，你會發現這個彈性布局實例，在瀏覽器改變字體大小瀏覽會做出相應的放大和縮小，并不會影響整個頁面的布局。注：這個實例的所有HTML和CSS在本教程中教程了都會使用到。
至于其他的彈性布局的實例，大家可以瀏覽Dan Cederholm的Simplebites，并改變文字的大小去瀏覽。
體驗后，是不是覺得彈性布局的頁面很靈活呀，而且也像“px”一樣的精確。因此，只要我們掌握了“font-size”、“px”和“em”之間的基本關系，我們就可以民以食快速使用CSS創建精確的布局。
CSS的Elastigirl引進EM
Elastigirl的“em”是極其強大和靈活的，他不管字體大小是什么，是12px，16或60，他都可以計算出其值。
em其實就是一種排版的測試單位，而且他的由來還有一段小故事，關于這段小故事我就不和大家說了，因為大家都不是來聽我講故事的，我想大還是喜歡知道他在CSS中的那些事。
在CSS中，“em”實際上是一個垂直測量。一個em等于任何字體中的字母所需要的垂直空間，而和它所占據的水平空間沒有任何的關系，因此：
如果字體大小是16px，那么1em=16px。
入門
在我們開始來了解CSS中的這個“em”之前，我們需要知道在瀏覽器下，他的默認字體大小。正好我們前面也這樣做了，在所有現代瀏覽器中，其默認的字體大小就是“16px”。因此在瀏覽器下默認的設置將是：
1em = 16px
因此，在一個CSS選擇器被寫入時，瀏覽器就有了一個“16px”大小的默認字體。此時我們Web頁面中的<body>就繼承了這個“font-size:16px;”，除非你在CSS樣式中顯式的設置<body>的“font-size”值，來改變其繼承的值。這樣一來，“1em = 16px”、“0.5em = 8px”、“10em = 160px”等等，那么我們也可以使用“em”來指定任何元素的大小。
設置Body的font-size
很多前輩在多年的實踐中得出一個經驗，他們建議我們在<body>中設置一個正文文本所需的字體大小，或者設置為“10px”，相當于（“0.625em或62.5%”），這樣為了方便其子元素計算。這兩種都是可取的。但是我們都知道，<body>的默認字體是“16px”，同時我們也很清楚了，我們改變了他的默認值，要讓彈性布局不被打破，就需要重新進行計算，重新進行調整。所以完美的設置是： body {font-size:1em;}
可是在那個沒人愛的IE底下，“em”會有一個問題存在。調整字體大小的時候，同樣會打破我們的彈性布局，不過還好，有一個方法可以解決：
html {font-size: 100%;}
公式轉換——PXtoEM
如果你是第一創建彈性布局的，最好在身邊準備一個計算器，因為我們一開始少不了很多的計算，有了他放心。
像素對于我們來說太密切了，因此我們也將從這開始。首先需要計算出1px和em之間的比例，然后是知道我們需要的px值。通過前面的介紹，大家都知道1em總是等于父元素的字體大小，因此我們完全可以通過下面的工式來計算：
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
大家可以參考一下面這張轉換表(body字體為16px時的值)
接下來我們一起看一個很簡單的實例“使用CSS的EM制作一個960px寬度的彈性布局”
HTML Markup
<body> <div id="container">…</div> </body>
將960px轉換為em
1 ÷ 16px × 960px = 60em
這個計算值的前提條件是<body>的“font-size:16px”。
CSS Code
html { font-size: 100%; } body { font-size: 1em; } #container { width: 60em; }
通過上面的實例，我想大家更能形像化的理解了，因為有例可詢，其實我們可以把上面的計算公式轉換一下，將更方便你的計算：
需要轉換的像素值 ÷ 父元素的font-size = em值
那么我們上面的實例“960px”就可以這樣來轉換成“em”值
960px ÷ 16px = 60em
上面我們一起見證了“px”轉換成“em”的計算方式，接下來我們一起來動看制作上面展示過的彈性布局樣例。下面我們主要一起來一步一步的實現他。
構建一個彈性的容器
要創建彈性布局樣例那樣的居中效果，我們首先需要創建一個HTML結構，我在此給創建一個<div>并且取名叫“wrap”
<body> <div id="wrap"> content here</div> </body>
我們希望這個容器是一個“740px”寬，適合一個“800px × 600px”顯屏的實例。那么“740px”會等于多少“em”呢？這就是我們需要關心的問題，大家一起來看吧：
1、將“740px”轉換成“em”設置到我們的容器“div#wrap”：我們都知道“div#wrap”的父元素<body>設置了字體為“16px”，那么此時在沒有進行另外顯示的設置時，他的子元素<div id="wrap">將繼承“font-size”值，這樣我們就可以輕意得到：“1px和1em之間的關系”
1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em
這樣一來，我們的“740px”就很容易的能轉換成“em” 0.0625em × 740 = 46.25em
當然大家也可以按照我們前面所列出的計算公式來進行轉換，這樣你心中更具有一個概念性，也不容易弄錯：
1 ÷ 16 × 740 = 46.25em (1 ÷ 父元素的font-size × 需要轉換的像素值 = em值)
這樣一來，您可以使用上面的公式計算出您需要的任何寬度或高度的“em”值，你只需要知道“1px等于多少em”，另外就是你要轉換的“px”值是多少，具備這幾個參數你就能得到你想要的“em”值了。
2、創建CSS樣式：現在我們可以給“div#wrap”寫樣式了，彈性布局樣例很明顯的告訴我們，給“div#wrap”設置了一個寬度為“740px”居中，帶有上下“margin”為“24px”，而且帶有“1px”的邊框效果，那么我們首先根據上面的公式計算出相應的“em值”，然后在寫到CSS樣式中：
html {font-size: 100%;} body {font-size: 1em;} #wrap { width: 46.25em;/*740px ÷ 16 = 46.25em */ margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/ border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/ }
現在我們就輕松的創建了一個包含內容的彈性容器：彈性布局樣例。
文本樣式與em
首先我們在前面那個創建的<div id="wrap"></div>中插入一個<h1>和一個<p>:
<div id="wrap"> <h1>...</h1> <p>...</p> </div>
在彈性布局樣例實例中，我們標題使用了“18px”，而段落設置的是“12px”字體，同時其行高是“18px”。18px將是我們實現彈性布局的一個重要值，可以使用他們都按正比變化。（有關于標題和段落的排版介紹，大家感興趣可以點擊Richard Rutter的basic leading和vertical rhythm以及chapter on vertical motion的相關介紹）。
根據CSS繼承一說，我們在“div#wrap”的內容容器中沒有顯式的設置字體大小，這樣整個“div#wrap”將繼承了其父元素“body”的字體——“16px”。
1、給段落設置樣式：——“12px”的字體，“18px”的行高以及margin值
從CSS繼承中，我們可以得知我們所有段落繼承了其父元素“div#wrap”的“font-size:16px”。同時我們通過前面的介紹得知1px = 1 ÷ 16 = 0.0625em，這樣一來我們就很輕松的知道“12px”等于多少個“em”
0.0625em × 12 = 0.750em
這樣我們就可以給段落p設置樣式：
p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}
要計算出段落所需的行高和“margin”為“18px”，來滿足Richard Rutter說的basic leading，那我們就需要像下面的方法和來計算：
18 ÷ 12 = 1.5em
使用所需的行高值“18px”直接除以“字體大小12px”，這樣就得到了段落“p”的“line-height”值。在本例中行高就等于字體的“1.5”倍，接著我們把“line-height”和“margin”樣式加到段落“p”中
p{ font-size: 0.75em;/*0.625em × 12 = 0.750em */ line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */ margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */ }
2、給標題設置一個18px的字號
標題“h1”和段落“p”一樣的原理，他也是繼承他父元素“div#wrap”的“16px”的“font-size”，所以我們也是按同樣的方法可以計處出他的“em”
0.0625em × 18 = 1.125em
我們可以把得出的值寫到CSS樣式表中
h1 { font-size: 1.125em;/*0.625em × 18 = 1.125em*/ }
同樣為了保留Richard Rutter所說的vertical rhythm，我們同樣將標題“h1”的“line-height”和“margin”都設置為“18px”，使用方法前面介紹的方法。很容易得到他們的“em”值為“1em”:
h1 { font-size: 1.125em; /*0.625em × 18 = 1.125em*/ line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */ margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */ }
設置圖片大小——使用em
要做出彈性布局樣例這樣的果，我們也需要在html中插入一張圖片：
<body> <div id="wrap"> <h1>....</h1> <p><img src="90.png" alt="" /> Lorem...</p> </div> </body>
我們這張圖片具有“90px”的寬和高，同時具有一個右邊距和底邊距為“18px”設置，而且還進行左浮動。下面我們就一起來看其如何實現圖片這幾個樣式效果：
從HTML結構中，我們很清楚的知道，圖片是段落“p”的子元素，通過前面的介紹，你們知道這個段落“p”的“font-size”值被得定義為“12px”，因此我們計算圖片的屬性值時，不能在按“1px = 0.0625em”或者“1em=16px”來計算，我們需要使用最老的公式計算：
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
這樣一來，按上面所示的公式，我們就可以計算出圖片的大小：
1 ÷ 12 × 90 = 7.5em
現在你就可以將計算出來的值寫到樣式中去：
p img { width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度) = 7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度) = 7.5em */ }
我們在段落中知道了“18px”剛好是“1em”，現在我們也把他使用到圖片的樣式中：
p img { width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度) = 7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度) = 7.5em */ margin: 0 1.5em 1.5em 0; float: left; }
這樣我們就制作出一個和彈性布局樣例一樣的效果。希望通過這樣的一個實例能幫助大家了解如何使用“em”來創建一個彈性布局的方法。當然大家可能還在擔心使用“em”來制作一個彈性布局，不能像“px”一樣的的精確，如果你真正理解了這篇教程后，我想你不會在有這樣的想法。
彈性布局的公式總結
最后我想大家肯定和我會有同一種想法，就是相關參數是的“px”值如何成功而且正確的轉換成“em”值，經過上面的學習，我最后將公式總結一下：
元素自身沒有設置字號大小時，元素的width、height、line-height、margin、padding、border等值轉換都按下面公式轉換：
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
我們來看一個實例：
<body> <div id="wrapper">test</div> </body>
我們在body默認字體大小為“16px”,此時需要“div#wrapper”的相關參數值為：
#wrapper { width: 200px; height: 100px; border: 5px solid red; margin: 15px; padding: 10px; line-height: 18px; }
那么我們按照上面的公式，將所在參數進行轉換：
#wrapper { width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/ }
我們一起來看計算出來的值：
接下來我需要大家在來看一個效果，這一點很關鍵喲，仔細看好，在同樣的參數基礎上稍加一條元素本身設置字體大小為：14px；，大家可以會說很簡單的呀，按前面的公式計算出來加上就是了，那么我現在就按大家說的計算加上：
#wrapper { font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/ width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/ }
此進我們在firebug下看計算出來的layout值
為了更好的說明問題，我把元素自身沒有設置字體大小和元素自身設置了字體大小，兩者在firebug計算出來值：
我截這個圖的主要意圖是，說明一個問題就是元素自身要是設置了字體大小后，其計算公式就不在是前面所說的，我們需要做一下修改：
1、字體計算公式依舊
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
2、其它屬性的計算公式需要換成
1 ÷ 元素的font-size × 需要轉換的像素值 = em值
那么我們現在來計算一回：
#wrapper { font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/ width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/ height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/ border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/ margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/ padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/ line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/ }
我們在來看一次計算出來的值：
總結
長篇介紹了一大堆，唯一想告訴大家的是以下幾點
1、瀏覽器的默認字體大小是16px
2、如果元素自身沒有設置字體大小，那么元素自身上的所有屬性值如“boder、width、height、padding、margin、line-height”等值，我們都可以按下面的公式來計算
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
3、這一種千萬要慢慢理解，不然很容易與第二點混了。如果元素設置了字體大小，那么字體大小的轉換依舊按第二條公式計算，也就是下面的：
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
那么元素設置了字體大小，此元素的其他屬性，如“border、width、height、padding、margin、line-height”計算就需要按照下面的公式來計算：
1 ÷ 元素自身的font-size × 需要轉換的像素值 = em值
這樣說，不知道大家理解了整明白了沒有，如果沒有整明白，可以回過頭來看上面的一個實例。
TML標簽：
所有內容都在<html></html>標簽之內；
<head></head>內放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中。
<head></head>內的<title></title>中設置的是頁面的標題，<title></title>只能放在<head></head>中；
<body></body>是頁面的主體，大部分顯示內容都定義在這里。
HTML注釋：<!-- -->：
注釋不允許嵌套
html常用標簽:
h標簽（標題），HTML定義了<h1></h1>到<h6></h6>六個h標簽，分別表示不同大小的字體。h1最大，h6最小。
<br/>只是回車，<p>是段落。<p>前后會有比較大的空白，而<br/>則沒有。
<center>居中顯示.
<b>、<strong>粗體，<i>、<em>斜體。<u>下劃線。
<sub>2</sub>下標，如：H<sub>2</sub>O
<sup>2</sup>上標，如：10<sup>2</sup>
<font></font>字體標簽，<font color=“red“ size=“7” face=“隸書”>紅色</font>。color（設置顏色） size（1-7） face（設置字體,設置字體是注意用戶計算機中必須有該字體才能正常顯示）
<hr> color size（厚度） width（長度） align=left/center/right （默認為劇中顯示）
<pre> 預格式化 保持本色;
HTML特殊字符：<（小于號，less than）；>（大于號，greater than）； （空格）。
超鏈接：<a>標簽的一些常用屬性：href、title、target、name
插入圖片：<img src=“路徑”/>
列表：dl→(定義列表)，ul→(無序列表)， ol→(有序列表)。
表格：<table>；創建行：<tr>；創建單元格：<td>；表頁眉：<thead>；表主體：<tbody>；表頁腳：<tfoot>；表頭：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox表單標簽：（復選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。
meta標簽：（包括在head標簽中。主要用來描述頁面自身信息,元信息）
<meta name="keywords" content="C#學習資料,4k8k.net,.net開發,軟件開發,編程自學網"/>
<meta name="description" content="免費更新最新C#相關技術知識，主要包括：.net基礎,網頁前端,三層架構,SQL數據庫..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網頁編碼
<meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網頁。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網頁。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。
<meta name="名字" content="值" />關于網頁的描述信息。
<meta http-equiv="名字" content="值" />模擬http響應頭信息。
C#編程自學_做最好的.net自學資料站_更多文章請訪問：http://www.4k8k.net/
歡迎訂閱。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
