在學習html？這一篇文章就夠了

家好，我是四川新華電腦學院小張，

這篇文章講解Html的相關知識，如果想從零開始學習php編程的小伙伴，請從淼哥的第一篇文章看！

上次文章講解的是DTD，也就是我們常說的DOCTYPE。

我們繼續講解。

<!DOCTYPE html>-------------------------DOCTYPE 聲明了文檔類型

<html> ------------------------------------文檔類型html開始標記

<head> -----------------------------------頭部標記

<title>我的第一個標題</title>

</head> ----------------------------------頭部結束標記

<body> ---------------------------------文件主體

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body> ----------------------------------文件主體結束

</html> ----------------------------------文檔類型html結束標記

這個是我們上次講解的html架構。

接著我們繼續講解。

html標簽

?寫法<html></html>

HTML標簽是HTML文檔的根標簽，在HTML中標簽是一層嵌套一層的，而<HTML>標簽是根標簽（最外面一層的標簽），所有其他的標簽都寫在這個標簽中。

根標簽我們可以理解為最外層的標簽。（看上面的結構）

文檔頭信息

HTML又包含head標簽和body標簽，其中head標簽中設置文檔頭信息，body標簽中設置文檔的內容。

<head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。

<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

下面這些標簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

那么怎么理解元信息呢？比如對于網頁本身的一些描述，該網頁的標題？該網頁的描述，該網頁用的什么字符編碼！等等，這些信息描述著網頁，用戶又看不到這些信息。

比如某個人的性別，姓名，當你看到這個人，可以看到外貌，身高，穿衣服的顏色。但是你并不知道這個人的姓名，有的也不知道性別。尤其像某些中性一點的長相。是吧。元信息不會渲染，但是屬于該網頁的信息。

base標簽

（該標簽應該學習了a img link form這幾個標簽之后在學習，看不懂沒關系，可以先了解）

base標簽，是嵌套在head標簽中的一個標簽。這個標簽是一個可選標簽，也就是可以有，也可以沒有！

<base> 標簽為頁面上的所有鏈接規定默認地址或默認目標。

通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。比如：我有個<a href='aa.html'>標簽,那么瀏覽器會從當前文檔的url，比如當前文檔的url是www.xxxx.com/aa/bb/cc.html，瀏覽器會把www.xxxx.com/aa/bb/路徑拿出來，和aa.html組成新的url，那么這個超鏈接就會變成www.xxxx.com/aa/bb/aa.html。

使用 <base> 標簽可以改變這一點。

如果我們將base設置成為其他的url。<base />那么，還是<a href='aa.html'>標簽，就會把http://www.myweb.com/i/這個路徑拿出來和aa.html組成新的url地址。那么這個url超鏈接就會變成http://www.myweb.com/i/a.html這個鏈接了。

瀏覽器隨后將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。

base標簽的用法

<base /> ------必選屬性。（你有這個標簽，就必須擁有這個屬性）

<base target="_blank" /> ------------------可選屬性。target意思是目標，打開超鏈接的方式，

當然也可以將兩個屬性寫到一個base標簽中。

默認target的屬性是_self，也就是點擊超鏈接，在當前頁面的框架中打開。（為什么不是當前頁面呢？因為頁面有可能嵌套在框架里）

link標簽

用法： <head> <link rel="stylesheet" type="text/css" href="test.css"></head>

meta標簽

meta標簽的作用有：搜索引擎優化（SEO），定義頁面使用語言，自動刷新并指向新的頁面，實現網頁轉換時的動態效果，控制頁面緩沖，網頁定級評價，控制網頁顯示的窗口等！

由于meta信息相對比較復雜我們將在以后HTML高級課程中講解

最常用meta標簽是：

設置頁面編碼寫法。（頁面編碼注意，要設置的編碼和文檔的編碼統一，否則會出亂碼）

具體編碼以后的文章講解。

script標簽

script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。

必需的 type 屬性規定腳本的 MIME 類型。

JavaScript 的常見應用是圖像操作、表單驗證以及動態內容更新。

用法<script type="text/javascript">document.write("Hello World!") ></script> 以后學javascript將會用到，這里只做了解。

style標簽

在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文檔。

type 屬性是必需的，定義 style 元素的內容。唯一可能的值是 "text/css"。

用法<head> <style type="text/css"> h1 {color:red} p {color:blue} </style> </head>

該標簽將會在學習CSS時用到，這里只做了解

title標簽

<title> 元素可定義文檔的標題。

瀏覽器會以特殊的方式來使用標題，并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。

同樣，當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時，標題將成為該文檔鏈接的默認名稱。

用法<title>網頁標題</title>

<title> 標簽是 <head> 標簽中唯一要求包含的東西。（必須有title標簽）

head 標簽總結

<head>標簽唯一要求包含的標簽是<title>其他那幾種可以包含也可以不包含，但是一般我們會包含<meta charset=“utf-8”>告訴瀏覽器我們的文件編碼是什么。

常用的標簽有：

meta標簽，會在Html高級部分繼續講解。

<body>頁面主體信息

body 元素包含html的所有顯示web內容（比如文本、超鏈接、圖像、表格和列表等等。）

Body中可以使用塊級標簽和內聯標簽來顯示文檔結構

塊級標簽：h1~h6,p,div,table,ul,dl,from標簽等

內聯標簽：a,img,span,I,strong,select標簽等

什么塊級標簽（元素）呢？塊級標簽和內聯標簽區別是什么？

塊級元素(block)特性:總是獨占一行

內聯元素(inline)特性:和相鄰的內聯元素在同一行。

標簽和元素是一個意思！

<body>中包含的標簽？

標題標簽

通過<h1>~<h6>六個標簽定義不同大寫的標簽。

文本格式化標簽

早期編寫html代碼的時候，那個時候css用的很少，所以有一些標簽來文本格式化。現在基本都用CSS來格式化文本的大小顏色粗體等等。

而更多時候使用這些標簽來進行占位，利用CSS來渲染這些標簽。常用的是span。

html中的注釋

注釋用來說明、注解、注釋代碼。給人看的不會被執行。

格式為：<!– 注釋內容-->

瀏覽器頁面不會被顯示，而頁面源代碼中可以看到注釋的內容。因為項目越大，或者你的頁面越大，當時可能你能看懂。時間長了肯定看不明白。如果有注釋的話，可以馬上理解當時為什么要這么做。

水平線

在HTML代碼中加入一條水平線利用<hr />來操作。

段落標簽-<p>

瀏覽器會自動地在段落的前后添加空行，一般用在大段的文章。

換行標簽<br/>

<br/>標簽可以實現換一個新行 ,正常來說，你在編寫html頁面的時候，無論怎么換行，在頁面用瀏覽器打開的時候，是不會換行的，如果加入了<br/>標簽，瀏覽器就會認為這里該換行顯示了。

鏈接<a>標簽

HTML 使用超級鏈接與網絡上的另一個文檔相連。

幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

我們通過使用 <a> 標簽在 HTML 中創建鏈接。

有兩種使用 <a> 標簽的方式：

1、通過使用 href 屬性 - 創建指向另一個文檔的鏈接

2、通過使用 name 屬性 - 創建文檔內的書簽

一般錨點鏈接主要用于網頁太長了，想瀏覽的那個位置需要滾輪滾動好幾下才能到達那個位置，而使用錨點（書簽）直接可以準確的跳轉到你想去的位置。

文檔中對錨進行命名（創建一個書簽）

同一個文檔中創建指向該錨的鏈接用關鍵字#+錨名字

<a >有用的提示</a>

也可以鏈接到其他網絡上的頁面錨的鏈接

圖像<img>

可以使用img標簽在頁面上顯示一張圖片。

格式：

備注：一般只設置寬即可，瀏覽器會根據圖片大小進行縮放。如果強行設置寬、高，有的時候圖片會失真。

列表標簽

列表標簽分為有序標簽和無序標簽

當然、有序列表前面也可以更改序號，需要在CSS中學習改變序號的方法。

二級列表<dl>標簽

表格標簽-table

Table標簽用來制作表格，表格由若干個行<tr>組成，每一行又由若干個單元格<td>組成。

Table標簽中使用tr標簽定義行，td標簽定義一行中的一個列。如：定義一個一行四列。

表格的表頭使用 <th> 標簽進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文本：

<table>標簽的cellpadding 屬性規定單元邊沿與其內容之間的空白。

<table>標簽的cellspacing 屬性規定單元格之間的空間。

橫向合并單元格-colspan

表格-table-豎向-rowspan

內聯框架

可以使用iframe在頁面中在嵌入另外一個頁面。

分區標簽-div
Div是塊級標簽，主要是用來作為標簽容器，和規劃頁面結構（頁面布局）的
用法：
<div style="margin:auto;border:1px solid #f00;width: 300px;height: 600px"></div>

在很早以前，小編剛入行的時候，那個時候CSS不流行，頁面布局全部都用表格來做。那酸爽實在無法用言語來表達。而現在都是用CSS來進行頁面布局。這個div標簽頁是以后布局常用的標簽。

Span標簽

Span標簽是內聯標簽，沒有特殊功能。主要是用來做為文本的容器，span標簽主要是配合CSS來處理文字。

比如，我只想讓幾個文字編程紅顏色的，這個時候就可以用span標簽配合CSS來做了。

框架集-frameset

我們可以使用frameset標簽把一個頁面窗口分隔成多個窗口，然后使用frame標簽為每一個窗口制定一個頁面

使用rows/cols的值規定每行或每列占據屏幕的面積,中間用逗號分隔。

frameset不能放在body中，如果放在body中不能顯示框架！

在最新的html5中已經刪除了這個標簽了

實體

在 HTML 中，某些字符是預留的。

在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。

比如我們想在網頁使用空格，直接按空格鍵是肯定不好使的，所以使用使用實體  !

音頻

使用embed標簽可以在網頁中嵌入Flash，Mid，MP3等嵌入式內容

現在html5出了很多新的標簽，以后會專門有講解html5的文章。

今天我們一起了解了html相關的很多標簽。其實都很簡單。只要自己動手做一做，就可以做出來了。如果想要做出精美的頁面，還是需要配合css來實現的哦。

明天我們繼續講解html的一些其他相關知識。手寫不宜！請給小編點個贊！十分感謝。

續上次沒說完的標題吧，今天也順便講下段落和文本格式化。

首先，需要知道的是，標題很重要。

需要確保將 HTML 標題的標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題。搜索引擎使用標題為網頁的結構和內容編制索引。因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。就像之前發的那張圖一樣。然后再說說標題的水平線。<hr> 標簽在 HTML 頁面中創建水平線,hr 元素也可用于分隔內容。實例如下:

<!DOCTYPE html>

<html>

<head>

<title>20210815---(二)測試開發轉型</title>

</head>

<body>

<h></h>

<p></p>

<h1>我是最大的，你忍一下</h1>

<hr>

<h2>我是老二，你也要忍一下</h2>

<hr>

<hr>

</body>

<a href ="https://www.baidu.com">這是一個招聘網站</a>

</html>

可以看到有分割線

HTML注釋

接著我們說下HTML的注釋，可不是簡單的 //

需要注意的一點: 開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要，合理地使用注釋可以對未來的代碼編輯工作產生幫助。

接著說下HTML的段落

HTML 段落

段落是通過 <p> 標簽定義的。

具體我們來看個實例：

可以看到三個段落，我們再看看代碼是怎么實現的

<!DOCTYPE html>

<html>

<head>

<title>20210815---(二)測試開發轉型</title>

</head>

<body>

<h></h>

<p>這是第一個段落</p>

<h1>我是最大的，你忍一下</h1>

<hr>

<p>這是第二個段落</p>

<h2>我是老二，你也要忍一下</h2>

<hr>

<p>這是第三個段落</p>

<hr>

</body>

<a href ="https://www.baidu.com">這是一個招聘網站</a>

</html>

不要忘記結束標簽:即使忘了使用結束標簽，大多數瀏覽器也會正確地將 HTML 顯示出來。接著說下在段落中折行，這就需要用到<br>了

我們直接來看看實例:

可以看到有三個折行

來看看代碼:

<!DOCTYPE html>

<html>

<head>

<title>20210815---(二)測試開發轉型</title>

</head>

<body>

<h></h>

<p>這是第一個段落,你服不服<br>我不服，你個二愣子</p>

<h1>我是最大的，你忍一下</h1>

<hr>

<p>這是第二個段落<br>你給我滾一邊去</p>

<h2>我是老二，你也要忍一下</h2>

<hr>

<p>這是<br>第三個段落<br></p>

<hr>

</body>

<a href ="https://www.baidu.com">這是一個招聘網站</a>

</html>

<br /> 元素是一個空的 HTML 元素。由于關閉標簽沒有任何意義，因此它沒有結束標簽

下一節我們講下HTML的格式化，包含粗體、斜線等

加油，晚安~

習目標

了解常用瀏覽器
掌握WEB標準

理解標簽語義化
掌握常用的排版標簽
掌握常用的文本格式化圖像鏈接等標簽
掌握三種列表標簽
掌握表格標簽
掌握表格標簽
掌握表單標簽

HTML第一天目標

能夠寫出基本的頁面（里面包含圖片、各種標簽和鏈接）

開發工具

我們主要用的開發工具有chrome、hbuilder、Photoshop

瀏覽器顯示

瀏覽器是網頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。

瀏覽器內核（理解）

瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎：它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎并沒有區分得很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多，如果加上沒什么人使用的非商業的免費內核，可能會有10多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。

了解一點：移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發。

iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的

Web標準

了解常用瀏覽器

1、讓Web的發展前景更廣闊
2、內容能被更廣泛的設備訪問
3、更容易被搜尋引擎搜索
4、降低網站流量費用

5、使網站更易于維護
6、提高頁面瀏覽速度

web標準的結構

結構標準：結構用于對網頁元素進行整理和分類，咱們主要學的是HTML。最重要
表現標準：表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：行為是指網頁模型的定義及交互的編寫，咱們主要學的是 Javascript

HTML初識

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”。是用來描述網頁的一種語言。

所謂超文本，因為它可以加入圖片、聲音、動畫、多媒體等內容，不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接。

<h1> 我是一個大標題 </h1>

注意：體會文本標簽語言幾個詞語

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)

標記語言是一套標記標簽 (markup tag)

總結： HTML 作用就是用標記標簽來描述網頁，把網頁內容在瀏覽器中展示出來。

HTML骨架格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

骨架結構解析

1.HTML標簽：
作用所有HTML中標簽的一個根節點。最大的標簽根標簽
2 head標簽：文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

注意在head標簽中我們必須要設置的標簽是title

3.title標簽：文檔的標題
作用：讓頁面擁有一個屬于自己的標題。
4.body標簽：文檔的主體以后我們的頁面內容基本都是放到body里面的
body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）

HTML標簽分類

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 HTML、head、body都是HTML骨架結構標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素

1.雙標簽

<標簽名> 內容 </標簽名>

該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。

比如 <body>我是文字 </body>

2.單標簽

<標簽名 />

單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。

比如 <br />

HTML標簽關系

標簽的相互關系就分為兩種：

1.嵌套關系

2.并列關系

HTML常用標簽

首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標簽，認識標簽就可以了。不會再給結構標簽指定樣式了。

HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。

排版標簽

標題標簽（熟記）

單詞縮寫： head 頭部. 標題 title 文檔標題

為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式如下：

段落標簽（熟記）

水平線標簽（認識）

<hr />是單標簽

換行標簽（熟記）

<br />

div span標簽(重點)

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

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

span, 跨度，跨距；范圍

語法格式：

文本格式化標簽(熟記)

在網頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。

b i s u 只有使用沒有強調的意思 strong em del ins 語義更強烈

標簽屬性

使用HTML制作網頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設置。其基本語法格式如下：

<標簽名屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>

在上面的語法中，

1.標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。

2.屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。

3.任何標簽的屬性都有默認值，省略該屬性則取默認值。

采取鍵值對的格式 key="value" 的格式

比如:

屬性是寬度

值是 400

圖像標簽img (重點)

單詞縮寫： image 圖像

HTML網頁中任何元素的實現都要依靠HTML標簽，要想在網頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和他相關的屬性。其基本語法格式如下：

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。

鏈接標簽(重點)

單詞縮寫： anchor 的縮寫 [???k?(r)] 。基本解釋錨, 鐵錨的

在HTML中創建超鏈接非常簡單，只需用標簽環繞需要被鏈接的對象即可，其基本語法格式如下：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href：用于指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用

target：用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認值，blank為在新窗口中打開方式。

注意：

1.外部鏈接需要添加 http:// www.baidu.com

2.內部鏈接直接鏈接內部頁面名稱即可比如 < a href="index.html"> 首頁

3.如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。

4.不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

錨點定位（難點）

通過創建錨點鏈接，用戶能夠快速定位到目標內容。

創建錨點鏈接分為兩步：

1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本（被點擊的） <a href="#two"> 2.使用相應的id名標注跳轉目標的位置。 <h3 id="two">第2集</h3>

base 標簽基本的

base 可以設置整體鏈接的打開狀態

base 寫到 <head> </head> 之間

把所有的連接都默認添加 target="_blank"

特殊字符標簽（理解）

注釋標簽

在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。其基本語法格式如下：

ctrl + / 或者 ctrl +shift + /

注釋內容不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。

路徑(重點、難點)

實際工作中，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。

路徑可以分為：相對路徑和絕對路徑

相對路徑

以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。

圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如img src="logo.gif" /。
圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如img src="img/img01/logo.gif" /。

圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如img src="../logo.gif" /。

絕對路徑

絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的

“D:webimglogo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/l...”。

總結今天的思路貫穿線

列表標簽

無序列表 ul （重點）

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

注意：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。

無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

有序列表 ol （了解）

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

所有特性基本與ul 一致。

但是實際工作中，較少用 ol img src="media/1.jpg" />

自定義列表（理解）

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

表格 table(會使用)

創建表格

在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。創建表格的基本語法格式如下：

<table> <tr> <td>單元格內的文字</td> ... </tr> ... </table>

在上面的語法中包含三對HTML標簽，分別為 table</table、tr</tr、td</td，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體的解釋
1.table用于定義一個表格。

2.tr 用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。

3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。

注意：

1. <tr></tr>中只能嵌套<td></td> 2. <td></td>標簽，他就像一個容器，可以容納所有的元素

表格屬性

表頭標簽

表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標簽th</th替代相應的單元格標簽td</td即可。

表格結構（了解）

在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述），具體如下所示：

<thead></thead>：用于定義表格的頭部。

必須位于<table></table> 標簽中，一般包含網頁的logo和導航等頭部信息。

<tbody></tbody>：用于定義表格的主體。

位于<table></table>標簽中，一般包含網頁中除頭部和底部之外的其他內容。

表格標題

表格的標題： caption
定義和用法

caption 元素定義表格標題。

<table>    <caption>我是表格標題</caption> </table>

caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。

合并單元格(難點)

跨行合并：rowspan 跨列合并：colspan

合并單元格的思想：

將多個內容合并的時候，就會有多余的東西，把它刪除。例如把 3個 td 合并成一個，那就多余了2個，需要刪除。公式：刪除的個數 = 合并的個數 - 1

合并的順序先上先左

總結表格

表格提供了HTML 中定義表格式數據的方法。
表格中由行中的單元格組成。

表格中沒有列元素，列的個數取決于行的單元格個數。
表格不要糾結于外觀，那是CSS 的作用。

表格的學習要求：能手寫表格結構，并且能合并單元格。

表單標簽(掌握)

表單控件：

包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。

提示信息：

一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

表單域：

他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。

input 控件(重點)

在上面的語法中，input /標簽為單標簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，input /標簽還可以定義很多其他的屬性，其常用屬性如下表所示。

label標簽(理解)

label 標簽為 input 元素定義標注（標簽）。

作用：用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

如何綁定元素呢？

for 屬性規定 label 與哪個表單元素綁定。

<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的信息，就需要用到textarea/textarea標簽。通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下：

<textarea cols="每行中的字符數" rows="顯示的行數">   文本內容 </textarea>

下拉菜單

使用select控件定義下拉菜單的基本語法格式如下

<select>   <option>選項1</option>   <option>選項2</option>   <option>選項3</option>   ... </select>

注意：

select</select中至少應包含一對option></option。
在option 中定義selected =" selected "時，當前項即為默認選中項。

表單域

在HTML中，form標簽被用于定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：

<form action="url地址" method="提交方式" name="表單名稱">   各種表單控件 </form>

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數據的服務器程序的url地址。
method
用于設置表單數據的提交方式，其取值為get或post。

name
用于指定表單的名稱，以區分同一個頁面中的多個表單。

注意：每個表單都應該有自己表單域。

如需轉載，請注明出處，否則將追究法律責任。

在線咨詢

上一篇：精美html大型商城模板通用電商模板源碼
下一篇：純CSS實現波浪效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

在學習html？這一篇文章就夠了

習目標

HTML第一天目標

開發工具

瀏覽器顯示

瀏覽器內核（理解）

Web標準

web標準的結構

HTML初識

HTML骨架格式

骨架結構解析

HTML標簽分類

HTML標簽關系

HTML常用標簽

標題標簽（熟記）

段落標簽（熟記）

水平線標簽（認識）

換行標簽（熟記）

div span標簽(重點)

文本格式化標簽(熟記)

標簽屬性

圖像標簽img (重點)

鏈接標簽(重點)

錨點定位 （難點）

base 標簽 基本的

特殊字符標簽 （理解）

注釋標簽

路徑(重點、難點)

相對路徑

絕對路徑

總結今天的思路貫穿線

列表標簽

無序列表 ul （重點）

有序列表 ol （了解）

自定義列表（理解）

表格 table(會使用)

創建表格

表格屬性

表頭標簽

表格結構（了解）

表格標題

合并單元格(難點)

總結表格

表單標簽(掌握)

input 控件(重點)

label標簽(理解)

textarea控件(文本域)

下拉菜單

表單域

您的項目需求

錨點定位（難點）

base 標簽基本的

特殊字符標簽（理解）