在學(xué)習(xí)html？這一篇文章就夠了

家好，我是四川新華電腦學(xué)院小張，

這篇文章講解Html的相關(guān)知識，如果想從零開始學(xué)習(xí)php編程的小伙伴，請從淼哥的第一篇文章看！

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

我們繼續(xù)講解。

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

<html> ------------------------------------文檔類型html開始標(biāo)記

<head> -----------------------------------頭部標(biāo)記

<title>我的第一個(gè)標(biāo)題</title>

</head> ----------------------------------頭部結(jié)束標(biāo)記

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

<h1>我的第一個(gè)標(biāo)題</h1>

<p>我的第一個(gè)段落。</p>

</body> ----------------------------------文件主體結(jié)束

</html> ----------------------------------文檔類型html結(jié)束標(biāo)記

這個(gè)是我們上次講解的html架構(gòu)。

接著我們繼續(xù)講解。

html標(biāo)簽

?寫法<html></html>

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

根標(biāo)簽我們可以理解為最外層的標(biāo)簽。（看上面的結(jié)構(gòu)）

文檔頭信息

HTML又包含head標(biāo)簽和body標(biāo)簽，其中head標(biāo)簽中設(shè)置文檔頭信息，body標(biāo)簽中設(shè)置文檔的內(nèi)容。

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

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

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

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

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

base標(biāo)簽

（該標(biāo)簽應(yīng)該學(xué)習(xí)了a img link form這幾個(gè)標(biāo)簽之后在學(xué)習(xí)，看不懂沒關(guān)系，可以先了解）

base標(biāo)簽，是嵌套在head標(biāo)簽中的一個(gè)標(biāo)簽。這個(gè)標(biāo)簽是一個(gè)可選標(biāo)簽，也就是可以有，也可以沒有！

<base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。

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

使用 <base> 標(biāo)簽可以改變這一點(diǎn)。

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

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

base標(biāo)簽的用法

<base /> ------必選屬性。（你有這個(gè)標(biāo)簽，就必須擁有這個(gè)屬性）

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

當(dāng)然也可以將兩個(gè)屬性寫到一個(gè)base標(biāo)簽中。

默認(rèn)target的屬性是_self，也就是點(diǎn)擊超鏈接，在當(dāng)前頁面的框架中打開。（為什么不是當(dāng)前頁面呢？因?yàn)轫撁嬗锌赡芮短自诳蚣芾铮?/p>

link標(biāo)簽

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

meta標(biāo)簽

meta標(biāo)簽的作用有：搜索引擎優(yōu)化（SEO），定義頁面使用語言，自動刷新并指向新的頁面，實(shí)現(xiàn)網(wǎng)頁轉(zhuǎn)換時(shí)的動態(tài)效果，控制頁面緩沖，網(wǎng)頁定級評價(jià)，控制網(wǎng)頁顯示的窗口等！

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

最常用meta標(biāo)簽是：

設(shè)置頁面編碼寫法。（頁面編碼注意，要設(shè)置的編碼和文檔的編碼統(tǒng)一，否則會出亂碼）

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

script標(biāo)簽

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

必需的 type 屬性規(guī)定腳本的 MIME 類型。

JavaScript 的常見應(yīng)用是圖像操作、表單驗(yàn)證以及動態(tài)內(nèi)容更新。

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

style標(biāo)簽

在 style 中，您可以規(guī)定在瀏覽器中如何呈現(xiàn) HTML 文檔。

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

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

該標(biāo)簽將會在學(xué)習(xí)CSS時(shí)用到，這里只做了解

title標(biāo)簽

<title> 元素可定義文檔的標(biāo)題。

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

同樣，當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時(shí)，標(biāo)題將成為該文檔鏈接的默認(rèn)名稱。

用法<title>網(wǎng)頁標(biāo)題</title>

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

head 標(biāo)簽總結(jié)

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

常用的標(biāo)簽有：

meta標(biāo)簽，會在Html高級部分繼續(xù)講解。

<body>頁面主體信息

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

Body中可以使用塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽來顯示文檔結(jié)構(gòu)

塊級標(biāo)簽：h1~h6,p,div,table,ul,dl,from標(biāo)簽等

內(nèi)聯(lián)標(biāo)簽：a,img,span,I,strong,select標(biāo)簽等

什么塊級標(biāo)簽（元素）呢？塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽區(qū)別是什么？

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

內(nèi)聯(lián)元素(inline)特性:和相鄰的內(nèi)聯(lián)元素在同一行。

標(biāo)簽和元素是一個(gè)意思！

<body>中包含的標(biāo)簽？

標(biāo)題標(biāo)簽

通過<h1>~<h6>六個(gè)標(biāo)簽定義不同大寫的標(biāo)簽。

文本格式化標(biāo)簽

早期編寫html代碼的時(shí)候，那個(gè)時(shí)候css用的很少，所以有一些標(biāo)簽來文本格式化。現(xiàn)在基本都用CSS來格式化文本的大小顏色粗體等等。

而更多時(shí)候使用這些標(biāo)簽來進(jìn)行占位，利用CSS來渲染這些標(biāo)簽。常用的是span。

html中的注釋

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

格式為：<!– 注釋內(nèi)容-->

瀏覽器頁面不會被顯示，而頁面源代碼中可以看到注釋的內(nèi)容。因?yàn)轫?xiàng)目越大，或者你的頁面越大，當(dāng)時(shí)可能你能看懂。時(shí)間長了肯定看不明白。如果有注釋的話，可以馬上理解當(dāng)時(shí)為什么要這么做。

水平線

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

段落標(biāo)簽-<p>

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

換行標(biāo)簽<br/>

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

鏈接<a>標(biāo)簽

HTML 使用超級鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。

幾乎可以在所有的網(wǎng)頁中找到鏈接。點(diǎn)擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。

超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。

當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個(gè)鏈接上時(shí)，箭頭會變?yōu)橐恢恍∈帧?

我們通過使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。

有兩種使用 <a> 標(biāo)簽的方式：

1、通過使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接

2、通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽

一般錨點(diǎn)鏈接主要用于網(wǎng)頁太長了，想瀏覽的那個(gè)位置需要滾輪滾動好幾下才能到達(dá)那個(gè)位置，而使用錨點(diǎn)（書簽）直接可以準(zhǔn)確的跳轉(zhuǎn)到你想去的位置。

文檔中對錨進(jìn)行命名（創(chuàng)建一個(gè)書簽）

同一個(gè)文檔中創(chuàng)建指向該錨的鏈接用關(guān)鍵字#+錨名字

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

也可以鏈接到其他網(wǎng)絡(luò)上的頁面錨的鏈接

圖像<img>

可以使用img標(biāo)簽在頁面上顯示一張圖片。

格式：

備注：一般只設(shè)置寬即可，瀏覽器會根據(jù)圖片大小進(jìn)行縮放。如果強(qiáng)行設(shè)置寬、高，有的時(shí)候圖片會失真。

列表標(biāo)簽

列表標(biāo)簽分為有序標(biāo)簽和無序標(biāo)簽

當(dāng)然、有序列表前面也可以更改序號，需要在CSS中學(xué)習(xí)改變序號的方法。

二級列表<dl>標(biāo)簽

表格標(biāo)簽-table

Table標(biāo)簽用來制作表格，表格由若干個(gè)行<tr>組成，每一行又由若干個(gè)單元格<td>組成。

Table標(biāo)簽中使用tr標(biāo)簽定義行，td標(biāo)簽定義一行中的一個(gè)列。如：定義一個(gè)一行四列。

表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。

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

<table>標(biāo)簽的cellpadding 屬性規(guī)定單元邊沿與其內(nèi)容之間的空白。

<table>標(biāo)簽的cellspacing 屬性規(guī)定單元格之間的空間。

橫向合并單元格-colspan

表格-table-豎向-rowspan

內(nèi)聯(lián)框架

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

分區(qū)標(biāo)簽-div
Div是塊級標(biāo)簽，主要是用來作為標(biāo)簽容器，和規(guī)劃頁面結(jié)構(gòu)（頁面布局）的
用法：
<div style="margin:auto;border:1px solid #f00;width: 300px;height: 600px"></div>

在很早以前，小編剛?cè)胄械臅r(shí)候，那個(gè)時(shí)候CSS不流行，頁面布局全部都用表格來做。那酸爽實(shí)在無法用言語來表達(dá)。而現(xiàn)在都是用CSS來進(jìn)行頁面布局。這個(gè)div標(biāo)簽頁是以后布局常用的標(biāo)簽。

Span標(biāo)簽

Span標(biāo)簽是內(nèi)聯(lián)標(biāo)簽，沒有特殊功能。主要是用來做為文本的容器，span標(biāo)簽主要是配合CSS來處理文字。

比如，我只想讓幾個(gè)文字編程紅顏色的，這個(gè)時(shí)候就可以用span標(biāo)簽配合CSS來做了。

框架集-frameset

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

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

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

在最新的html5中已經(jīng)刪除了這個(gè)標(biāo)簽了

實(shí)體

在 HTML 中，某些字符是預(yù)留的。

在 HTML 中不能使用小于號（<）和大于號（>），這是因?yàn)闉g覽器會誤認(rèn)為它們是標(biāo)簽。

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

音頻

使用embed標(biāo)簽可以在網(wǎng)頁中嵌入Flash，Mid，MP3等嵌入式內(nèi)容

現(xiàn)在html5出了很多新的標(biāo)簽，以后會專門有講解html5的文章。

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

明天我們繼續(xù)講解html的一些其他相關(guān)知識。手寫不宜！請給小編點(diǎn)個(gè)贊！十分感謝。

TML全稱是：超文本標(biāo)記語言（HyperText Markup Language），學(xué)習(xí)這種語言主要就是學(xué)習(xí)各種標(biāo)簽的使用，今天給大家介紹HTML的基本標(biāo)簽。

html標(biāo)簽

lt;h2 id="title1">列表標(biāo)簽</h2>

<h3 id="title2">無序列表(unordered list)</h3>

作用: 給一堆內(nèi)容添加無序列表語義(一個(gè)沒有先后順序整體), 列表中的條目是不分先后
格式:

li 英文是 list item, 翻譯為列表項(xiàng)

 <h4>選擇居住城市(CN)</h4>
 <ul>
 <li>北京</li>
 <li>上海</li>
 <li>廣州</li>
 <li>鐵嶺</li>
 </ul>

ul應(yīng)用場景:

導(dǎo)航條
商品列表等
新聞列表

注意事項(xiàng):

其實(shí)ul還有一個(gè)type屬性, 可以修改先導(dǎo)符號的樣式, 取值有disc、square、circle幾種
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
這里指的無序是指對于主體來說內(nèi)容沒有先后之分, 例如主題是"選擇居住城市(CN)"北京上海都是中國的城市, 無論誰放在前面它都還是中國的城市的. 如果標(biāo)題改為"中國霧霾排行", 那么就必須有嚴(yán)格的排名,北京必須寫在前面
瀏覽器會給無需列表自動添加先導(dǎo)符號但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點(diǎn), 而是增加無序列表的語義
ul是一個(gè)組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說li標(biāo)簽不能單獨(dú)存在, 必須包裹在ul里面
由于ul和li是一個(gè)整體, 所以ul里面不推薦包裹其它標(biāo)簽, 永遠(yuǎn)記住ul里面最好只寫li標(biāo)簽
雖然ul中推薦只能寫li標(biāo)簽, 但是li標(biāo)簽是一個(gè)容器標(biāo)簽, li標(biāo)簽中可以添加任意標(biāo)簽, 甚至可以添加ul標(biāo)簽
關(guān)注微信訂閱號：網(wǎng)頁設(shè)計(jì)輕松學(xué)

<ul>
 <li>
 好吃的 <ul>
 <li>牛奶</li>
 <li>面包</li>
 </ul>
 </li>
 <li>
 日用的 <ul>
 <li>毛巾</li>
 <li>牙膏</li>
 </ul>
 </li>
 </ul>

<h3 id="title3">有序列表(ordered list)</h3>

作用: 給一堆內(nèi)容添加有序列表語義(一個(gè)有順序整體), 列表中的條目有先后之分
格式:

 <h4>中國房價(jià)排行</h4>
 <ol>
 <li>北京</li>
 <li>上海</li>
 <li>廣州</li>
 <li>鐵嶺</li>
 </ol>

ol應(yīng)用場景:

xxx排行榜
其實(shí)ol應(yīng)用場景并不多, 因?yàn)槟苡胦l做的用ul都能做

注意事項(xiàng):

ol和ul就是語義不一樣，怎么使用都是一樣的以及注意點(diǎn)都一樣
其實(shí)ul還有兩個(gè)常見屬性start、type屬性, 可以修改先導(dǎo)符號的樣式和序號
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了

<h3 id="title4">定義列表(definition list)</h3>

作用: 給一堆內(nèi)容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個(gè)條目進(jìn)行相應(yīng)的描述
格式:

dt英文definition title, 翻譯為定義標(biāo)題
dd英文definition description, 翻譯為定義描述信息

 <dl>
 <dt>北京</dt>
 <dd>國家的首都, 看升國旗的地方</dd>
 <dt>上海</dt>
 <dd>魔都, 遍地是黃金的地方</dd>
 </dl>

關(guān)注微信訂閱號：網(wǎng)頁設(shè)計(jì)輕松學(xué)

dl應(yīng)用場景:

網(wǎng)站底部相關(guān)信息
但凡看到一堆內(nèi)容都是用于描述某一個(gè)內(nèi)容的時(shí)候就要想到dl

注意事項(xiàng):
- dl是一個(gè)組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說dt和dd標(biāo)簽不能單獨(dú)存在, 必須包裹在dl里面

由于dl和dt、dd是一個(gè)整體, 所以dl里面不推薦包裹其它標(biāo)簽
dd和dt和li標(biāo)簽一樣是容器標(biāo)簽, 里面可以添加任意標(biāo)簽
定義列表非常靈活, 可以給一個(gè)dt配置多個(gè)dd, 但是最好不要出現(xiàn)多個(gè)dt對應(yīng)一個(gè)dd, dd的語義是描述離它最近的一個(gè)dt, 所以其它dt相當(dāng)于沒有描述, 而定義列表存在的意義就是既可以列出每一個(gè)條目又可以對每一個(gè)條目進(jìn)行描述
定義列表非常靈活, 可以將多個(gè)dt+dd組合拆分為多個(gè)dl

在線咨詢

上一篇：web前端：CSS的常用屬性速查表
下一篇：《如何在Vue中前端導(dǎo)出word文件》，P8大佬告訴

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

在學(xué)習(xí)html？這一篇文章就夠了

您的項(xiàng)目需求