HTML部分第四章——HTML常用標籤

1、換行：<br>

2、超鏈接：<a></a>

示例源碼：

abc<br>dedfgsadfa<br>

<a href="#">超鏈接的文字</a> reference<br>

<a href="http://www.cwhello.com" target="_self">百

度</a><br>

<a href="http://www.cwhello.com" target="_blank">

以新窗口打開百度</a><br>

<a href="http://www.cwhello.com" title="點擊有驚

喜">帶懸停提示的超鏈接</a><br>

<a href="http://www.cwhello.com" title="xxxx"

target="_blank">帶懸停提示點擊以新窗口打開百度

</a><br>

<a href="http://www.cwhello.com" title="yyyy"><img

src=cwhello.jpg" alt="yyyy"

style="border:none;"></a><br>

<a href="index1.html">點擊打開相對路徑的網頁</a>

3、字體傾斜：<i></i>、<em></em>

4、字體加粗：<b></b> 、<strong></strong> bold (磅)

5、字體下劃線：<u></u>

6、字體：<font></font>

Color 顏色設置

Size 大小，默認字體大小是12像素（px，pixel），size可以進行縮放，最大+7，最小-7，超出以最大值進行顯示；

Font-size 具體大小

Font-weight 具體粗細

Font-family 字體

Text-decoration 文本修飾

示例源碼：

<i>重<b>蔚</b><u>自</u><font color="red" size="+100" style="font-size:50px;font-weight:900; text-decoration:overline;"><font style="text-decoration:line-through; font-family:'華文行楷';">留地</font></font>！！！</i>

TIPS：默認字體位置c:\windows\fonts 目錄下

7、水平線：<hr>

Solid 固體（實線）、dashed（虛線）、double、dotted、……

<hr style="border:1px double yellow; height:1px;" />

8、列表：無序列表、有序列表

<!--unorderlist 無序-->

<ul>

<li>列表項</li>

<li>列表項</li>

<li>列表項</li>

<li>列表項</li>

</ul>

<!--orderlist 有序-->

<ol>

<li>列表項</li>

<li>列表項</li>

<li>列表項</li>

<li>列表項</li>

</ol>

9、文字上標：

10、文字下標：

11、文字標題：

<h1></h1>

<h1></h1>

……

<h6></h6>

TIPS:一個頁面最多用1個H1，2個H2，從H3開始隨意。

12、Seo:Search Enigee Oriented，搜索引擎優化。

13、元標籤：<meta>

<meta http-equiv="keywords" content="XXX美食網 美食 xxx" />

<meta http-equiv="description" content="XXX美食網 主打徽系精品菜系 " />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

14、編碼知識：

Gb2312 國標2312，保存中文第四代簡化字的編碼。

Gbk 包含中文簡體、繁體、火星文

UTF-8 國際通用網頁編碼，保存的文字內容比中文高一位。

1個漢字=2Byte=2*8bit

向上兼容：低版本軟件可以在高版本運行，反之則不一定。

15、容器級標籤：

<p></p> 段落

<div></div> 層

<span></span>

16、其他特殊：

一個英文半角空格 &nbsp;

小於 &lt;

大於 &gt;

&copy;

17、標籤分類與轉換：

所有的標籤可以分為二大類

1、塊（block）元素：後面的內容會自動換行！！！

2、內聯（行內inline）元素：後面的內容不會換行！！！

轉換：

<標籤 style=”display:inline;”></標籤>

例1

<a style="display:block;" href="#">aaaa</a>

<a href="#">bbb</a>

例2

<div style="display:inline;">aaa</div>

Bbb

比較下面2段代碼看看效果：

第一段：

<div style="visibility:hidden;">abc</div>

<div>edf</div>

第二段：

<div style=" display:none;">abc</div>

<div>edf</div>

瀏覽器訪問常用快捷鍵：

1) ctrl+鼠標滾輪，可以縮放瀏覽器的內容

2) Ctrl+0 可以使縮放的網頁顯示為正常大小

3) 在DW中F12為預覽快捷鍵