html基礎(chǔ)：空標(biāo)簽

、空標(biāo)簽概念：

沒有與之對應(yīng)的結(jié)束標(biāo)簽的標(biāo)簽

2、常見的空標(biāo)簽：

<meta /> //元數(shù)據(jù)
<base /> //網(wǎng)頁的基礎(chǔ)鏈接
<link /> //引入外部鏈接
<br /> //換行
<hr /> //水平線
<img /> //插入圖片
<area /> //圖片map中的可點區(qū)域
<input /> //用于搜集用戶信息

3、注意事項：

雖然HTML中對空標(biāo)簽是否需要加結(jié)束符號“ / ”進(jìn)行強制規(guī)定，但是在XHTML（XML規(guī)范的HTML版本）或XML中，對空標(biāo)簽進(jìn)行強制要求，指出空標(biāo)簽必須使用結(jié)束標(biāo)志，大多數(shù)人推薦使用規(guī)范的編寫格式，并且在未來將會對空標(biāo)簽的結(jié)束符號進(jìn)行強制要求。

在html中，在空標(biāo)簽上使用閉標(biāo)簽是無效的，例如：</br>。這樣的情況是無效的HTML。

天繼續(xù)說下HTML第二講，空元素、小寫標(biāo)簽、屬性和對應(yīng)的具體使用。

先說下HTML 空元素:

沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。

<br> 就是沒有關(guān)閉標(biāo)簽的空元素（<br> 標(biāo)簽定義換行）。

在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。

在開始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠(yuǎn)的保障。

使用HTML小標(biāo)簽:

HTML 標(biāo)簽對大小寫不敏感：<P> 等同于 <p>。許多網(wǎng)站都使用大寫的 HTML 標(biāo)簽。

HTML屬性:

屬性是 HTML 元素提供的附加信息。

屬性都包含:

HTML 元素可以設(shè)置屬性

屬性可以在元素中添加附加信息

屬性一般描述于開始標(biāo)簽

屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。

接著我們看一個實例:

HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定

<a href="http://www.liepin.com">這是一個鏈接</a>

我們在Sublime Text上試下

<!DOCTYPE html>

<html>

<head>

<title>20210815---測試開發(fā)轉(zhuǎn)型</title>

</head>

<body>

<p>沒有內(nèi)容的 HTML 元素被稱為空元素</p>

</body>

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

</html>

由于 http://www.liepin.com跳轉(zhuǎn)需要的時間有點長，可能是家里網(wǎng)速不好，頁面一直跳轉(zhuǎn)不成功。就修改為 www.baidu.com 這樣就可以了。點擊可以跳轉(zhuǎn)到新的網(wǎng)址。

HTML 屬性常用引用屬性值

屬性值應(yīng)該始終被包括在引號內(nèi)。

雙引號是最常用的，不過使用單引號也沒有問題。

提示: 在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過，萬維網(wǎng)聯(lián)盟在其 HTML 4 推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

HTML 屬性參考手冊

下面列出了適用于大多數(shù) HTML 元素的屬性：

屬性描述

class 為html元素定義一個或多個類名（classname）(類名從樣式文件引入)

id 定義元素的唯一id

style 規(guī)定元素的行內(nèi)樣式（inline style）

title 描述了元素的額外信息 (作為工具條使用)

HTML 標(biāo)題

標(biāo)題（Heading）是通過 <h1> - <h6> 標(biāo)簽進(jìn)行定義的。

<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。

接著我們看一個實例:

<!DOCTYPE html>

<html>

<head>

<title>20210815---測試開發(fā)轉(zhuǎn)型</title>

</head>

<body>

<p>沒有內(nèi)容的 HTML 元素被稱為空元素</p>

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

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

<h5>我是老五，我忠于革命</h5>

<h6>我是老六，我是最小的，我啥也不是</h6>

</body>

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

</html>

嘗試一下 ?

注釋: 瀏覽器會自動地在標(biāo)題的前后添加空行。

可以看出，文字是越來越小的，標(biāo)題越來越小。說明符合要求

什么學(xué)習(xí)HTML？

理解HTML代碼是制作網(wǎng)頁的基本技能。在互聯(lián)網(wǎng)高度發(fā)達(dá)的今天，網(wǎng)頁制作技術(shù)開始變的和修圖、處理視頻一樣重要。

第一，學(xué)會制作網(wǎng)頁就可以把自己想要展示的信息讓其他人使用瀏覽器觀看，無論是文字、照片還是視頻都可以通過瀏覽器觀看，甚至是分享自己制作的小游戲。

第二，理解網(wǎng)頁運行的基本原理后可以更好的瀏覽他人的網(wǎng)頁，尋找有用信息，更合理的使用第三方工具，簡單高效的制作自己的網(wǎng)頁。

HTML學(xué)習(xí)難度與重要性

HTML代碼本身非常容易理解，使用也非常簡單，但是單純使用HTML代碼寫出的網(wǎng)頁效果和我們平時看到的網(wǎng)頁相差甚遠(yuǎn)。要想做出一個漂亮的頁面，我們還需要CSS和JavaScript的幫助。

HTML、CSS、JavaScript這些不同的代碼都有什么作用呢？簡單來說，HTML代碼可以為網(wǎng)頁提供基本內(nèi)容，比如文字、圖片、音樂、視頻等。CSS代碼可以為頁面安排布局，比如標(biāo)題的位置、字體、顏色、大小等，籠統(tǒng)的說就是為HTML代碼添加的內(nèi)容增加樣式信息，例如修改位置、尺寸、顏色等屬性。JavaScript代碼可以為頁面提供交互（互動）功能，例如通過按鈕控制頁面內(nèi)容的隱藏、出現(xiàn)，或者為多張圖片添加輪播功能等。

對比起來，HTML的學(xué)習(xí)難度最低，但作用是最重要的，因為一切頁面的基礎(chǔ)是內(nèi)容，沒有內(nèi)容，樣式與交互都不存在。

認(rèn)識HTML基本結(jié)構(gòu)

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

以上七行代碼是一個網(wǎng)頁文件的HTML代碼的基本結(jié)構(gòu)。

大家觀察一下可以發(fā)現(xiàn)一個規(guī)律，每一行的內(nèi)容都是寫在“<>”里面的。原因說來話長，先記住就行。每個寫在“<>”里面的內(nèi)容叫做“標(biāo)簽”。以后“標(biāo)簽”這個詞會經(jīng)常出現(xiàn)。

第一行<!DOCTYPE HTML>標(biāo)簽指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令（這句話可以暫時不必理解）。重要的是這句傲嬌的代碼只能存在在HTML代碼的第一行！

第二行<html>標(biāo)簽與第七行的</html>標(biāo)簽是一對，“<html>”叫做開始標(biāo)簽，“</html>”叫做結(jié)束標(biāo)簽。他們之間的區(qū)別在于結(jié)束標(biāo)簽比開始標(biāo)簽多一個“/”。這是HTML代碼的一個重要規(guī)律，以后我將要學(xué)到的大部分標(biāo)簽都是這樣的，可能瀏覽器有些強迫癥吧，如果沒有結(jié)束標(biāo)簽它會很不舒服，有可能會消極怠工而產(chǎn)生麻煩（不能正常顯示）。不過遺憾的是<!DOCTYPE HTML>太傲嬌，至今沒有另一半。<html> 與 </html> 標(biāo)簽限定了文檔的開始點和結(jié)束點。

第三行與第四行組成一對，叫做“head”標(biāo)簽。顧名思義，這個“頭”標(biāo)簽里的內(nèi)容統(tǒng)領(lǐng)全局，比如控制布局與樣式的CSS代碼文件和添加互動功能的JavaScript代碼文件在這里添加或?qū)耄凰阉黜撁嬗玫年P(guān)鍵詞信息在這里添加；頁面信息的編碼方式也是由此指定；瀏覽器窗口的標(biāo)題也在這里顯示。

第五行與第六行組成一對，叫做“body”標(biāo)簽。用來顯示所有的頁面內(nèi)容信息。

畫個圖來表示一下這四個標(biāo)簽的層級關(guān)系（就是誰包含誰的意思，或者誰在誰的勢力范圍內(nèi)出現(xiàn)）：

邊學(xué)邊練------寫一個最簡單的頁面

正所謂萬丈高樓平地起，下面我們就動手做我們的第一個網(wǎng)頁文件。

工具：電腦，安裝一個瀏覽器（IE 火狐谷歌瀏覽器都可以），確定“記事本”工具可用。

有了以上工具我們就可以寫了。

Step1 新建一個.txt文件。

操作如下：

（1）選擇合適的磁盤，比如D盤或F盤新建一個文件夾，命名為“網(wǎng)頁”。點擊進(jìn)入。

（2）在空白處點擊鼠標(biāo)右鍵新建一個文本文件，命名為“第一個頁面”。這時我們就有了一個“第一個頁面.txt”文件了。

如果你的電腦不顯示“.txt”這樣的文件后綴，可以在屏幕左上方尋找“查看”菜單，如圖2

圖 2

點擊后，出現(xiàn)如下菜單如圖3，點擊“選項”。

圖 3

點擊“查看”，去掉“隱藏已知文件類型的擴(kuò)展名”選項前的“對號”，如圖4所示。這時就能顯示或修改文件后綴了。

圖 4

Step2 添加內(nèi)容

（1）雙擊打開“第一個頁面.txt”文件，把HTML基本結(jié)構(gòu)共七行代碼輸入進(jìn)去。

（2）保存，關(guān)閉文件，在“第一個頁面.txt”文件上點擊鼠標(biāo)右鍵，選擇“重命名”，將“.txt”修改為“.html”。這時，系統(tǒng)會提示，如圖1，大膽點“是”。

圖 1

這時我們的文件就變成了html網(wǎng)頁文件了。

我們雙擊這個文件發(fā)現(xiàn)瀏覽器內(nèi)一片空白，這就好比我們在桌子上擺了個碟子，里面并沒有放美食。瀏覽器中的一片白就是空碟子的顏色，而HTML基本結(jié)構(gòu)就是這個碟子。

下面我們往碟子里加點東西。

Step3 添加內(nèi)容

（1）在“第一個頁面.html”文件上點擊鼠標(biāo)右鍵，選擇“打開方式”，選擇“記事本”，如果沒有“記事本”選項，請點擊“選擇其他應(yīng)用”，點擊選擇最下面的“更多應(yīng)用”，選擇“記事本”。下一次選擇“打開方式”時，“記事本”就會出現(xiàn)了。

（2）在<head></head>標(biāo)簽之間添加“<title>學(xué)習(xí)寫第一個網(wǎng)頁</title>”。在<body></body>之間添加“<h1>第一個網(wǎng)頁</h1>”；“<p>隨著學(xué)的內(nèi)容越來越多，網(wǎng)頁就會越來越漂亮了！</p>”完成如圖5

圖 5

（3）保存，關(guān)閉，雙擊打開！效果如圖6

圖6

今天的邊學(xué)邊做就到這里，下一次會詳細(xì)解釋<head>標(biāo)簽、<body>標(biāo)簽中常出現(xiàn)的子標(biāo)簽以及它們各自的作用。

第二篇《邊學(xué)邊做網(wǎng)頁篇——<head>標(biāo)簽里裝點啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479

在線咨詢

上一篇：跨境電商賣家如何制作圖文并茂的HTML郵件，做好EDM營銷
下一篇：一個網(wǎng)頁顯示需要經(jīng)歷哪些過程

您的項目需求

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

整合營銷服務(wù)商

html基礎(chǔ)：空標(biāo)簽

您的項目需求