HTML标簽筆記

父子級關系：

兄弟關系：

在sublime中在html檔案中，輸入!或html:5 再按TAB鍵直接出現HTML架構

語義化标簽：

排版标簽： （排版标簽主要和CSS搭配使用，顯示頁面結構的标簽，是網頁布局最常用的标簽）

标題标簽：（單詞縮寫：head）

段落标簽：（單詞縮寫：paragraph)

是HTML文檔中最常見地标簽，預設情況下，文本在一個段落中會根據浏覽器視窗地大小自動換行。

水準線标簽：（單詞縮寫: horizontal)

在網頁中常常看到一些水準線将段落與段落之間分隔開，使得文檔結構清晰，層次分明。這些水準線可以通過插入圖檔實作，也可以簡單地通過标簽來完成

（輸出一個标簽再按TAB鍵高效噢！）

換行标簽：(break)

div span标簽

div span 是沒有語義 是我們網頁布局主要地2個盒子

div就是division的縮寫 分别，分區的意思 其實有很多div來組成網頁

span跨度，跨距；範圍

文法格式：

span 是放在一行

文本格式标簽：

圖像标簽img:

基本圖像插入方式：

屬性 屬性值 描述

src URL 圖像的路徑

alt 文本 圖像不能顯示時的替換文本

title 文本 滑鼠懸停時顯示的内容

width 像素 設定圖像的寬度

height 像素 設定圖像的高度

border 數字 設定圖像邊框的寬度

連結标簽：（anchor,錨)

href:用于指定連結目标的URL位址，當為标簽應用href屬性時，它就具有了超連結的功能，用于指定連結頁面的打開方式，其取值有self和blank兩種，其中self為預設值，blank為在新視窗中打開方式。

注意：

（1）外部連結需要添加 http://www.baidu.com

（2）内部連結直接連結内部頁面名稱即可，比如<code>&lt;a href="index.html"&gt;首頁&lt;/a&gt;</code>

（3）如果當時沒有确定連結目标時，通常将連結标簽href屬性值定義為"#"（即href="$")，表示該連結暫時為一個空連結

（4）不僅可以建立文本超連結，在網頁中各種網頁元素，如圖檔、表格、音頻、視訊等都可以添加超連結。

錨點定位：（通過建立錨點連結，使用者能夠快速定位到目标内容）

建立錨點連結分為兩步：

（1）使用"a href="#id名"連結文本/a"建立連結文本

（2）使用相應的id名标注跳轉到目标位置

base标簽：

base可以設定整體連結的打開狀态

可以所有連結在新視窗打開，而不要在下目标連結中加打開方式

如果想要某一個特别的打開方式可以在連結中自己重新定義

特殊字元标簽：

特殊字元 描述 字元的代碼

我們的段落文法格式是：<code>&amp;lt;p&amp;gt; 段落 &amp;lt;/p&amp;gt;</code>

注釋标簽：

路徑:(相對路徑和絕對路徑)

相對路徑：

（1）圖像檔案和HTML檔案位于同一檔案夾，隻需輸入圖像檔案的名稱即可，如<code>&lt;img src="logo.gif"/&gt;</code>

（2）圖像檔案位與HTML的下一級文夾，輸出檔案夾名和檔案名，之間用"/"隔開，如

（3）圖像位于HTML檔案的上一級檔案夾 ，在檔案名之前加入"…/"，如果是上兩級，則需要"…/…/"，以此類推，如：<code>&lt;img src="../logo.gif"/&gt;</code>

絕對路徑:

“D:\web\img\logo.gif”,或完整的網絡位址，例如"http://www.itcast.cn/images/logo.gif"

清單标簽：

無序清單：

無序清單的各個清單之間沒有順序級别之分，是并列的。其基本文法格式如下：

有序清單：(ol)

（排名可以用

ol裡隻能放li，但li裡面可以放其他

自定義清單：

定義清單常用于對術語或名詞進行解釋和描述，定義清單的清單項前沒有任何項目符号。其基本文法如下：