html標(biāo)簽圖文詳解-day1

時(shí)間：2023-08-04 17:51:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-04 17:51:01 來源：網(wǎng)站運(yùn)營

html標(biāo)簽圖文詳解-day1：

本文主要內(nèi)容

• 頭標(biāo)簽
• 排版標(biāo)簽：<p>、 <div>、 <span>、<br> 、 <hr> 、 <center> 、 <pre>
• 字體標(biāo)記：<h1>、 <font>、 <b>、 <u> 、<sup> 、<sub>
• 超鏈接 <a>
• 圖片標(biāo)簽 <img>

前言

web標(biāo)準(zhǔn)

web標(biāo)準(zhǔn)介紹：

• w3c：萬維網(wǎng)聯(lián)盟組織，用來制定web標(biāo)準(zhǔn)的機(jī)構(gòu)（組織）
• web標(biāo)準(zhǔn)：制作網(wǎng)頁要遵循的規(guī)范。
• web標(biāo)準(zhǔn)規(guī)范的分類：結(jié)構(gòu)標(biāo)準(zhǔn)、表現(xiàn)標(biāo)準(zhǔn)、行為標(biāo)準(zhǔn)。
• 結(jié)構(gòu)：html。表現(xiàn)：css。行為：JavaScript。

Web 前端分三層：

• HTML：HyperText Markup Language（超文本標(biāo)記語言）。從語義的角度描述頁面的結(jié)構(gòu)。相當(dāng)于人的身體結(jié)構(gòu)。
• CSS：Cascading Style Sheets（層疊樣式表）。從審美的角度美化頁面的樣式。相當(dāng)于人的衣服。
• JS：JavaScript。從交互的角度描述頁面的行為。相當(dāng)于人的動作，讓人有生命力。

編輯器相關(guān)

VS Code 的使用

詳情請移步至：第一次使用VS Code時(shí)你應(yīng)該知道的一切配置

Sublime Text 的使用

詳情請移步至：Sublime Text使用技巧

一、HTML的介紹

1、HTML的概述：

html全稱為HyperText Markup Language，譯為超文本標(biāo)記語言，不是一種編程語言，是一種描述性的標(biāo)記語言，用于描述超文本中內(nèi)容的顯示方式。比如字體什么顏色，大小等。

• 超文本：音頻，視頻，圖片稱為超文本。
• 標(biāo)記 ：<英文單詞或者字母>稱為標(biāo)記，一個(gè)HTML頁面都是由各種標(biāo)記組成。

作用：HTML是負(fù)責(zé)描述文檔語義的語言。

注意：HTML語言不是一個(gè)編程語言(有編譯過程)，而是一個(gè)標(biāo)記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執(zhí)行。

HTML是負(fù)責(zé)描述文檔語義的語言

html中，除了語義，其他什么都沒有。

html是一個(gè)純本文文件（就是用txt文件改名而成），用一些標(biāo)簽來描述文字的語義，這些標(biāo)簽在瀏覽器里面是看不到的，所以稱為“超文本”，所以就是“超文本標(biāo)記語言”了。 所以，接下來，我們肯定要學(xué)習(xí)一堆html中的標(biāo)簽對兒，這些標(biāo)簽對兒能夠給文本不同的語義。

比如，面試的時(shí)候問你，h1標(biāo)簽有什么作用？

• 正確答案：給文本增加主標(biāo)題的語義。
• 錯(cuò)誤答案：給文字加粗、加黑、變大。

2、HTML的歷史

我們專門來對XHTML做一個(gè)介紹。

XHTML介紹： XHTML：Extensible Hypertext Markup Language，可擴(kuò)展超文本標(biāo)注語言。 XHTML的主要目的是為了取代HTML，也可以理解為HTML的升級版。 HTML的標(biāo)記書寫很不規(guī)范，會造成其它的設(shè)備(ipad、手機(jī)、電視等)無法正常顯示。 XHTML與HTML4.0的標(biāo)記基本上一樣。 XHTML是嚴(yán)格的、純凈的HTML。

我們稍后將對XHTML的編寫規(guī)范進(jìn)行介紹。

3、HTML的網(wǎng)絡(luò)術(shù)語

• 網(wǎng)頁 ：由各種標(biāo)記組成的一個(gè)頁面就叫網(wǎng)頁。
• 主頁(首頁) : 一個(gè)網(wǎng)站的起始頁面或者導(dǎo)航頁面。
• 標(biāo)記： <p>稱為開始標(biāo)記 ，</p>稱為結(jié)束標(biāo)記，也叫標(biāo)簽。每個(gè)標(biāo)簽都規(guī)定好了特殊的含義。
• 元素：<p>內(nèi)容</p>稱為元素.
• 屬性：給每一個(gè)標(biāo)簽所做的輔助信息。
• xhtml： 符合XML語法標(biāo)準(zhǔn)的HTML。
• dhtml：dynamic，動態(tài)的。javascript + css + html合起來的頁面就是一個(gè)dhtml。
• http：超文本傳輸協(xié)議。用來規(guī)定客戶端瀏覽器和服務(wù)端交互時(shí)數(shù)據(jù)的一個(gè)格式。SMTP：郵件傳輸協(xié)議，ftp：文件傳輸協(xié)議。

4、HTML的編輯工具

用的最多的編輯器是： VS Code 和 Sublime Text。

• VS Code：最火的前端代碼編輯器。
• Sublime Text：很輕量的代碼編輯器。
• NotePad：記事本。
• EditPlus：語法高亮顯示。技巧： 根據(jù)顏色判斷單詞是否出錯(cuò) （不是100%）。不好的地方：沒有代碼提示。
• UltraEdit：根據(jù)顏色判斷單詞是否出錯(cuò)，可以顯示2進(jìn)制數(shù)據(jù)。
• dw(dreamweaver，專業(yè)工具) ：建立WEB站點(diǎn)和應(yīng)用程序的專業(yè)工具。它將布局功能、開發(fā)工具、代碼編輯組合在一起。有代碼提示。

PS：后綴名不能決定文件格式，只能決定打開文件打開的方式。

5、計(jì)算機(jī)編碼介紹

計(jì)算機(jī)，不能直接存儲文字，存儲的是編碼。

計(jì)算機(jī)只能處理二進(jìn)制的數(shù)據(jù)，其它數(shù)據(jù)，比如：0-9、a-z、A-Z，這些字符，我們定義一套規(guī)則來表示。假如：A用110表示，B用111表示等。

ASCII碼： 美國發(fā)布的，用1個(gè)字節(jié)(8位二進(jìn)制)來表示一個(gè)字符，共可以表示2^8=256個(gè)字符。 美國的國家語言是英語，只要能表示0-9、a-z、A-Z、特殊符號。

ANSI編碼： 每個(gè)國家為了顯示本國的語言，都對ASCII碼進(jìn)行了擴(kuò)展。用2個(gè)字節(jié)(16位二進(jìn)制)來表示一個(gè)漢字，共可以表示2^16＝65536個(gè)漢字。例如： 中國的ANSI編碼是GB2312編碼(簡體)，對6763漢字進(jìn)行編碼，含600多特殊字符。另外還有GBK(簡體)。 日本的ANSI編碼是JIS編碼。 臺灣的ANSI編碼是BIG5編碼（繁體）。

GBK： 對GB2312進(jìn)行了擴(kuò)展，用來顯示罕見的、古漢語的漢字?，F(xiàn)在已經(jīng)收錄了2.1萬左右。并提供了1890個(gè)漢字碼位。K的含義就是“擴(kuò)展”。

Unicode編碼(統(tǒng)一編碼)： 用4個(gè)字節(jié)(32位二進(jìn)制)來表示一個(gè)字符，想法不錯(cuò)，但效率太低。例如，字母A用ASCII表示的話一個(gè)字節(jié)就夠，可用Unicode編碼的話，得用4個(gè)字節(jié)表示，造成了空間的極大浪費(fèi)。A的Unicode編碼是0000 0000 0000 0000 0000 0000 0100 0000

UTF-8(Unicode Transform Format)編碼： 根據(jù)字符的不同，選擇其編碼的長度。比如：一個(gè)字符A用1個(gè)字節(jié)表示，一個(gè)漢字用2個(gè)字節(jié)表示。

毫無疑問，開發(fā)中，都用UTF-8編碼吧，準(zhǔn)沒錯(cuò)。

中文能夠使用的字符集兩種：

• 第一種：UTF-8。UTF-8是國際通用字庫，里面涵蓋了所有地球上所有人類的語言文字，比如阿拉伯文、漢語、鳥語……
  
• 第二種：GBK（對GB2312進(jìn)行了擴(kuò)展）。gb2312 是國標(biāo)，是中國的字庫，里面僅涵蓋了漢字和一些常用外文，比如日文片假名，和常見的符號。
  

字庫規(guī)模： UTF-8（字全） > gb2312（只有漢字）

重點(diǎn)1：避免亂碼

我們用meta標(biāo)簽聲明的當(dāng)前這個(gè)html文檔的字庫，一定要和保存的文件編碼類型一樣，否則亂碼?。ㄖ攸c(diǎn)）。

當(dāng)我們不設(shè)置的時(shí)候，sublime默認(rèn)類型就是UTF-8。而一旦更改為gb2312的時(shí)候，就一定要記得設(shè)置一下sublime的保存類型： 文件→ set File Encoding to → Chinese Simplified(GBK)。

重點(diǎn)2：UTF-8和gb2312的比較

保存大?。篣TF-8（更臃腫、加載更慢） > gb2312 （更小巧，加載更快）

總結(jié)： - UTF-8：字多，有各種國家的語言，但是保存尺寸大，文件臃腫； - gb2312：字少，只用中文和少數(shù)外語和符號，但是尺寸小，文件小巧。

列出2個(gè)使用情形：

1） 你們公司是做日本動漫的，經(jīng)常出現(xiàn)一些日語動漫的名字，網(wǎng)頁要使用UTF-8。如果用gb2312將無法顯示日語。 2） 你們公司就是中文網(wǎng)頁，極度的追求網(wǎng)頁的顯示速度，要使用gb2312。如果使用UTF-8將每個(gè)漢字多一個(gè)byte，所以5000個(gè)漢字，多5kb。

我們親測： - qq網(wǎng)、網(wǎng)易、搜狐都是使用gb2312。這些公司，都追求顯示速度。 - 新華網(wǎng)藏語頻道，使用的是UTF-8，保證字符集的數(shù)量。

對了，我們是怎么查看網(wǎng)頁的編碼方式的呢？在瀏覽器中打開網(wǎng)頁，右鍵，選擇“查看網(wǎng)頁源代碼”，找到me標(biāo)簽中的charset屬性即可。 那么，我們?yōu)槭裁纯梢圆榭淳W(wǎng)頁的源代碼呢？因?yàn)檫@個(gè)打開的網(wǎng)頁已經(jīng)存到我的臨時(shí)文件夾里了，臨時(shí)文件夾里的html是純文本文件，純文本文件自然剋以查看網(wǎng)頁的源代碼了。

6、HTML顏色介紹

顏色表示：

• 純單詞表示：red、green、blue、orange、gray等
• 10進(jìn)制表示：rgb(255,0,0)
• 16進(jìn)制表示：#FF0000、#0000FF、#00FF00等

RGB色彩模式：

• 自然界中所有的顏色都可以用紅、綠、藍(lán)(RGB)這三種顏色波長的不同強(qiáng)度組合而得，這就是人們常說的三原色原理。
• RGB三原色也叫加色模式，這是因?yàn)楫?dāng)我們把不同光的波長加到一起的時(shí)候，可以得到不同的混合色。例：紅+綠=黃色，紅+藍(lán)＝紫色，綠+藍(lán)=青
• 在數(shù)字視頻中，對RGB三基色各進(jìn)行8位編碼就構(gòu)成了大約1678萬種顏色，這就是我們常說的真彩色。所有顯示設(shè)備都采用的是RGB色彩模式。
• RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。

二、HTML的規(guī)范

• HTML是一個(gè)弱勢語言
• HTML不區(qū)分大小寫
• HTML頁面的后綴名是html或者h(yuǎn)tm(有一些系統(tǒng)不支持后綴名長度超過3個(gè)字符，比如dos系統(tǒng))
• HTML的結(jié)構(gòu)：
• 聲明部分：主要作用是用來告訴瀏覽器這個(gè)頁面使用的是哪個(gè)標(biāo)準(zhǔn)。<!doctype html>是HTML5標(biāo)準(zhǔn)。
• head部分：將頁面的一些額外信息告訴服務(wù)器。不會顯示在頁面上。
• body部分：我們所寫的代碼必須放在此標(biāo)簽內(nèi)。

目前，IE瀏覽器是完全不支持H5的，支持最好的是Opera瀏覽器，可以支持95%以上；其次是google，可以支持一部分H5。

1、編寫XHTML的規(guī)范：

（1）所有標(biāo)記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>

（2）所有的標(biāo)記都必須小寫。

（3）所有的標(biāo)記都必須關(guān)閉。

• 雙邊標(biāo)記：<span></span>
• 單邊標(biāo)記：<br> 轉(zhuǎn)成 <br /> <hr> 轉(zhuǎn)成 <hr />，還有<img src=“URL” />

（4）所有的屬性值必須加引號。<font color="red"></font>

（5）所有的屬性必須有值。<hr noshade="noshade">、<input type="radio" checked="checked" />

（6）XHTML文檔開頭必須要有DTD文檔類型定義

2、HTML的基本語法特性

（1）HTML對換行不敏感，對tab不敏感

HTML只在乎標(biāo)簽的嵌套結(jié)構(gòu)，嵌套的關(guān)系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關(guān)。換不換行、tab不tab，都不影響頁面的結(jié)構(gòu)。

也就是說，HTML不是依靠縮進(jìn)來表示嵌套的，就是看標(biāo)簽的包裹關(guān)系。但是，我們發(fā)現(xiàn)有良好的縮進(jìn)，代碼更易讀。要求大家都正確縮進(jìn)標(biāo)簽。

百度為了追求極致的顯示速度，所以HTML標(biāo)簽都沒有換行、都沒有縮進(jìn)（tab），HTML和換不換行無關(guān)，標(biāo)簽的層次依然清晰，只不過程序員不可讀了。如下圖所示：

（2）空白折疊現(xiàn)象

HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個(gè)空格顯示。

舉例如下：

（3）標(biāo)簽要嚴(yán)格封閉

標(biāo)簽不封閉是災(zāi)難性的。

標(biāo)簽不封閉的舉例如下：

三、HTML結(jié)構(gòu)詳解

備注： - 所有的瀏覽器默認(rèn)情況下都會忽略空格和空行 - 每個(gè)標(biāo)簽都有私有屬性。也都有公有屬性。 - html中表示長度的單位都是像素。HTML只有一種單位就是像素。

HTML標(biāo)簽通常是成對出現(xiàn)的（雙邊標(biāo)記），比如 <div> 和 </div>，也有單獨(dú)呈現(xiàn)的標(biāo)簽（單邊標(biāo)記），如：<br />、<hr />和<img src="images/1.jpg" />等。

屬性與標(biāo)記之間、各屬性之間需要以空格隔開。屬性值以雙引號括起來。

快速生成 html 的骨架

方式1：在 VS Code 中新建 html 文件，輸入html:5，按 Tab鍵后，自動生成的代碼如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title></head><body></body></html>方式2：在Sublime Text中安裝Emmet插件。新建html文件，輸入html:5，按Tab鍵后，自動生成的代碼如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>方式3：在Sublime Text中安裝Emmet插件。新建html文件，輸入html:xt，按Tab鍵后（或者按Ctrl+E），自動生成的代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title></head><body></body></html>上面的方式2和方式3中，我們會發(fā)現(xiàn)，第一行的內(nèi)容有些不太一樣，這就是我們接下來要講的文檔聲明頭。

1、文檔聲明頭

任何一個(gè)標(biāo)準(zhǔn)的HTML頁面，第一行一定是一個(gè)以<!DOCTYPE ……>開頭的語句。

這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

HTML4.01有哪些規(guī)范呢？

HTML4.01這個(gè)版本是IE6開始兼容的。HTML5是IE9開開始兼容的。如今，手機(jī)、移動端的網(wǎng)頁，就可以使用HTML5了，因?yàn)槠浼嫒菪愿摺?br>
說個(gè)題外話，html1 至 html3 是美國軍方以及高等研究所用的，并未對外公開。

HTML4.01里面有兩大種規(guī)范，每大種規(guī)范里面又各有3種小規(guī)范。所以一共6種規(guī)范（見下圖）。

HTML4.01里面規(guī)定了普通和XHTML兩大種規(guī)范。HTML覺得自己有一些規(guī)定不嚴(yán)謹(jǐn)，比如，標(biāo)簽是否可以用大寫字母呢？<H1></H1>所以，HTML就覺得，把一些規(guī)范嚴(yán)格的標(biāo)準(zhǔn)，又制定了一個(gè)XHTML1.0。在XHTML中的字母X，表示“嚴(yán)格的”。

總結(jié)一下，HTML4.01一共有6種DTD。說白了，HTML的第一行語句一共有6種情況：







下面對上圖中的三種小規(guī)范進(jìn)行解釋：

• strict：表示“嚴(yán)格的”，這種模式里面的要求更為嚴(yán)格。這種嚴(yán)格體現(xiàn)在哪里？有一些標(biāo)簽不能使用。 比如，u標(biāo)簽，就是給一個(gè)本文加下劃線，但是這和HTML的本質(zhì)有沖突，因?yàn)镠TML只能負(fù)責(zé)語義，不能負(fù)責(zé)樣式，而u這個(gè)下劃線是樣式。所以，在strict中是不能使用u標(biāo)簽的。 那怎么給文本增加下劃線呢？今后的css將使用css屬性來解決。 那么，XHTML1.0更為嚴(yán)格，因?yàn)檫@個(gè)體系本身規(guī)定比如標(biāo)簽必須是小寫字母、必須嚴(yán)格閉合標(biāo)簽、必須使用引號引起屬性等等。
  
• Transitional：表示“普通的”，這種模式就是沒有一些別的規(guī)范。
  
• Frameset：表示“框架”，在框架的頁面使用。
  

在sublime輸入的html:xt，x表示XHTML，t表示transitional。

在HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了（W3C自己打臉了）：

<!DOCTYPE html>

2、頭標(biāo)簽

html5 的比較完整的骨架：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content="牛逼，很牛逼，特別牛逼" /> <meta name="Description" content="網(wǎng)易是中國領(lǐng)先的互聯(lián)網(wǎng)技術(shù)公司，為用戶提供免費(fèi)郵箱、游戲、搜索引擎服務(wù)，開設(shè)新聞、娛樂、體育等30多個(gè)內(nèi)容頻道，及博客、視頻、論壇等互動交流，網(wǎng)聚人的力量。" /> <title>Document</title></head><body></body></html>面試題：

• 問：網(wǎng)頁的head標(biāo)簽里面，表示的是頁面的配置，有什么配置？
• 答：字符集、關(guān)鍵詞、頁面描述、頁面標(biāo)題、IE適配、視口、iPhone小圖標(biāo)等等。

頭標(biāo)簽都放在頭部分之間。包括：<title>、<base>、<meta>、<link>

• <title>：指定整個(gè)網(wǎng)頁的標(biāo)題，在瀏覽器最上方顯示。
• <base>：為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。
• <meta>：提供有關(guān)頁面的基本信息
• <body>：用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)簽。我們所寫的代碼必須放在此標(biāo)簽內(nèi)。
• <link>：定義文檔與外部資源的關(guān)系。

meta 標(biāo)簽：

上面的<meta>標(biāo)簽都不用記，但是另外還有一個(gè)<meta>標(biāo)簽是需要記住的：

<meta http-equiv="refresh" content="3;http://www.baidu.com">上面這個(gè)標(biāo)簽的意思是說，3秒之后，自動跳轉(zhuǎn)到百度頁面。

常見的幾種 meta 標(biāo)簽如下：

（1）字符集 charset：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">字符集用meta標(biāo)簽中的charset定義，meta表示“元”?！霸迸渲茫褪潜硎净镜呐渲庙?xiàng)目。

charset就是charactor set（即“字符集”）。

瀏覽器就是通過meta來看網(wǎng)頁是什么字符集的。比如你保存的時(shí)候，meta寫的和聲明的不匹配，那么瀏覽器就是亂碼。

（2）視口 viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width ：表示視口寬度等于屏幕寬度。

viewport 這個(gè)知識點(diǎn)，初學(xué)者還比較難理解，以后學(xué) Web 移動端的時(shí)候會用到。

（2）定義“關(guān)鍵詞”：

舉例如下：

<meta name="Keywords" content="網(wǎng)易,郵箱,游戲,新聞,體育,娛樂,女性,亞運(yùn),論壇,短信" />這些關(guān)鍵詞，就是告訴搜索引擎，這個(gè)網(wǎng)頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到你。

（3）定義“頁面描述”：

meta除了可以設(shè)置字符集，還可以設(shè)置關(guān)鍵字和頁面描述。

只要設(shè)置Description頁面描述，那么百度搜索結(jié)果，就能夠顯示這些語句，這個(gè)技術(shù)叫做SEO（search engine optimization，搜索引擎優(yōu)化）。

設(shè)置頁面描述的舉例：

<meta name="Description" content="網(wǎng)易是中國領(lǐng)先的互聯(lián)網(wǎng)技術(shù)公司，為用戶提供免費(fèi)郵箱、游戲、搜索引擎服務(wù)，開設(shè)新聞、娛樂、體育等30多個(gè)內(nèi)容頻道，及博客、視頻、論壇等互動交流，網(wǎng)聚人的力量。" />效果如下：







title 標(biāo)簽:

用于設(shè)置網(wǎng)頁標(biāo)題：

<title>網(wǎng)頁的標(biāo)題</title>title也是有助于SEO搜索引擎優(yōu)化的。

base標(biāo)簽：

<base href="/">base 標(biāo)簽用于指定基礎(chǔ)的路徑。指定之后，所有的 a 鏈接都是以這個(gè)路徑為基準(zhǔn)。

3、<body>標(biāo)簽的屬性

其屬性有： - bgcolor：設(shè)置整個(gè)網(wǎng)頁的背景顏色。 - background：設(shè)置整個(gè)網(wǎng)頁的背景圖片。 - text：設(shè)置網(wǎng)頁中的文本顏色。 - leftmargin：網(wǎng)頁的左邊距。IE瀏覽器默認(rèn)是8個(gè)像素。 - topmargin：網(wǎng)頁的上邊距。 - rightmargin：網(wǎng)頁的右邊距。 - bottommargin：網(wǎng)頁的下邊距。

<body>標(biāo)簽另外還有一些屬性，這里用個(gè)例子來解釋：







上方代碼中，當(dāng)我們對點(diǎn)我點(diǎn)我這幾個(gè)字使用超鏈時(shí)，link屬性表示默認(rèn)顯示的顏色、alink屬性表示鼠標(biāo)點(diǎn)擊但是還沒有松開時(shí)的顏色、vlink屬性表示點(diǎn)擊完成之后顯示的顏色。效果如下：







接下來，我們講一下<body>里的各種標(biāo)簽的屬性。

一、排版標(biāo)簽

注釋標(biāo)簽

<!-- 注釋 -->

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

<p>This is a paragraph</p><p>This is another paragraph</p>屬性： - align="屬性值"：對齊方式。屬性值包括left center right。 舉例：










段落，是英語paragraph“段落”縮寫。

HTML標(biāo)簽是分等級的，HTML將所有的標(biāo)簽分為兩種：

• 文本級標(biāo)簽：p、span、a、b、i、u、em。文本級標(biāo)簽里只能放文字、圖片、表單元素。（a標(biāo)簽里不能放a和input）
  
• 容器級標(biāo)簽：div、h系列、li、dt、dd。容器級標(biāo)簽里可以放置任何東西。
  

從學(xué)習(xí)p的第一天開始，就要死死記?。?b>p標(biāo)簽是一個(gè)文本級標(biāo)簽，p里面只能放文字、圖片、表單元素。其他的一律不能放。

錯(cuò)誤寫法：（嘗試把 h 放到 p 里）

<p> 我是一個(gè)小段落 <h1>我是一級標(biāo)題</h1> </p>網(wǎng)頁效果如下：







上圖顯示，瀏覽器不允許你這么做，我們使用Chrome的F12審查元素發(fā)現(xiàn)，瀏覽器自己把p封閉掉了，不讓你去包裹h1。

PS：Chrome瀏覽器是世界上HTML5支持最好的瀏覽器。提供了非常好的開發(fā)工具，非常適合我們開發(fā)人員使用。審查元素功能的快捷鍵是F12。

塊級標(biāo)簽 <div>和<span>

div和span是非常重要的標(biāo)簽，div的語義是division“分割”； span的語義就是span“范圍、跨度”。
CSS課程中你將知道，這兩個(gè)東西，都是最最重要的“盒子”。

div：把標(biāo)簽中的內(nèi)容作為一個(gè)塊兒來對待(division)。必須單獨(dú)占據(jù)一行。

div標(biāo)簽的屬性： - align="屬性值"：設(shè)置塊兒的位置。屬性值可選擇：left、right、 center。




<span>和<div>唯一的區(qū)別在于：<span>是不換行的，而<div>是換行的。

如果單獨(dú)在網(wǎng)頁中插入這兩個(gè)元素，不會對頁面產(chǎn)生任何的影響。這兩個(gè)元素是專門為定義CSS樣式而生的?；蛘哒f，DIV+CSS來實(shí)現(xiàn)各種樣式。

效果舉例：







div在瀏覽器中，默認(rèn)是不會增加任何的效果的，但是語義變了，div中的所有元素是一個(gè)小區(qū)域。 div標(biāo)簽是一個(gè)容器級標(biāo)簽，里面什么都能放，甚至可以放div自己。

span也是表達(dá)“小區(qū)域、小跨度”的標(biāo)簽，但是是一個(gè)文本級的標(biāo)簽。 就是說，span里面只能放置文字、圖片、表單元素。 span里面不能放p、h、ul、dl、ol、div。

span里面是放置小元素的，div里面放置大東西的。舉例如下：

span舉例：

<p> 簡介簡介簡介簡介簡介簡介簡介簡介 <span> <a href="">詳細(xì)信息</a> <a href="">購買</a> </span> </p>div舉例：

<div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> <div class="guanggao"></div> <div class="dongxi"></div> </div> <div class="footer"></div>所以，我們親切的稱呼這種模式叫做“div+css”。div標(biāo)簽負(fù)責(zé)布局，負(fù)責(zé)結(jié)構(gòu)，負(fù)責(zé)分塊。css負(fù)責(zé)樣式。

換行標(biāo)簽<br>（已廢棄）

當(dāng)你打算結(jié)束一行，而又不想開始一個(gè)新段落時(shí)，<br>標(biāo)簽就派上用場了。無論你將它置于何處，<br>標(biāo)簽都會產(chǎn)生一個(gè)強(qiáng)制的換行。

This <br> is a para<br>graph with line breaks效果如下：







上圖顯示，<p>標(biāo)簽和<br>標(biāo)簽的區(qū)別在于：<p>標(biāo)簽會在段落的前后自動插入一個(gè)空行，而<br>標(biāo)簽沒有空行；而且<br>標(biāo)簽沒有屬性。

注意<br> 沒有結(jié)束標(biāo)簽，把<br>標(biāo)簽寫為 <br/> 是經(jīng)得起未來考驗(yàn)的做法，XHTML 和 XML 都接受在打開的標(biāo)簽內(nèi)部來關(guān)閉標(biāo)簽的做法。

水平線標(biāo)簽<hr>（已廢棄）

水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個(gè)部分。 效果如下：







屬性： - align="屬性值"：設(shè)定線條置放位置。屬性值可選擇：left right center。 - size="2"：設(shè)定線條粗細(xì)。以像素為單位，內(nèi)定為2。 - width="500"或width="70%"：設(shè)定線條長度?？梢允墙^對值（單位是像素）或相對值。如果設(shè)置為相對值的話，內(nèi)定為100%。 - color="#0000FF"：設(shè)置線條顏色。 - noshade：不要陰影，即設(shè)定線條為平面顯示。若沒有這個(gè)屬性則表明線條具陰影或立體，這是內(nèi)定值。 屬性效果演示：

內(nèi)容居中標(biāo)簽 <center>

此時(shí)center代表是一個(gè)標(biāo)簽，而不是一個(gè)屬性值了。只要是在這個(gè)標(biāo)簽里面的內(nèi)容，都會居于瀏覽器的中間。 效果演示：







到了H5里面，center標(biāo)簽不建議使用。

預(yù)定義（預(yù)格式化）標(biāo)簽：<pre>

含義：將保留其中的所有的空白字符(空格、換行符)，原封不動的輸出結(jié)果（告訴瀏覽器不要忽略空格和空行） 說明：真正排網(wǎng)頁過程中，<pre>標(biāo)簽幾乎用不著。但在PHP中用于打印一個(gè)數(shù)組時(shí)使用。

效果演示：







上圖中，好像紅框部分的字體變小了，而且還出現(xiàn)了縮進(jìn)，好吧， 這個(gè)其實(shí)是瀏覽器搞的鬼。 為什么要有<pre>這個(gè)標(biāo)簽?zāi)兀看鸢甘牵?br>

所有的瀏覽器默認(rèn)情況下都會忽略空格和空行。

好吧，其實(shí)這個(gè)標(biāo)簽也用的比較少。

二、字體標(biāo)簽

標(biāo)題

標(biāo)題使用<h1>至<h6>標(biāo)簽進(jìn)行定義。<h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題。具有align屬性，屬性值可以是：left、center、right。 效果演示：

字體標(biāo)簽<font>（已廢棄）

屬性： - color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設(shè)置字體顏色。 設(shè)置方式：單詞 / #ff00cc / rgb(0,0,255) - size：設(shè)置字體大小。 取值范圍只能是：1至7。取值時(shí)，如果取值大于7那就按照7來算，如果取值小于1那就按照1來算。如果想要更大的字體，那就只能通過css樣式來解決。 設(shè)置：用’+2’代表值是5 或直接給值 - face="微軟雅黑"：設(shè)置字體類型。注意在寫字體時(shí)，“微軟雅黑”這個(gè)字不能寫錯(cuò)。 舉例：

<font face="微軟雅黑" color="#FF0000" size="10">vae</font>效果：

特殊字符（轉(zhuǎn)義字符）

•  ：空格 （non-breaking spacing，不斷打空格）
• <：小于號（less than）
• >：大于號（greater than）
• &：符號&
• "：雙引號
• '：單引號
• ©：版權(quán)?
• ™：商標(biāo)?
• 绐：文字紿。其實(shí)，#32464是漢字紿的unicode編碼。

要求背誦的特殊字符有： 、<、>、©。

比如說，你想把<p>作為一個(gè)文本在頁面上顯示，直接寫<p>是肯定不行的，因?yàn)檫@代表的是一個(gè)段落標(biāo)簽，所以這里需要用到轉(zhuǎn)義字符。應(yīng)該這么寫：

這是一個(gè)HTML語言的<p>標(biāo)簽正確的效果如下：







錯(cuò)誤的效果如下：







其實(shí)我們只要記住前三個(gè)符號就行了，其他的在需要的時(shí)候查一下就行了。而且，EditPlus軟件中是可以直接點(diǎn)擊這些符號進(jìn)行選擇的：







來一張表格，方便需要的時(shí)候查詢：

| 特殊字符 | 描述 |字符的代碼 | |:-------------|:-------------|:-----| ||空格符| | |<|小于號|<| |> |大于號|>| |&|和號|&| |￥|人民幣|¥| |?|版權(quán)|©| |?|注冊商標(biāo)|®| |°|攝氏度|°| |±|正負(fù)號|±| |×|乘號|×| |÷|除號|÷| |2|平方2（上標(biāo)2）|²| |3|立方3（上標(biāo)3）|³|

一些小標(biāo)簽/小標(biāo)記

• <u>：下劃線標(biāo)記
  
• <s>或<del>：中劃線標(biāo)記（刪除線）
  
• <i>或<em>：斜體標(biāo)記
  

效果：







上面的這幾個(gè)標(biāo)簽，常用于做一些小裝飾、小圖標(biāo)。比如：

20180118_2340.png

這張圖中，我們通過查看京東網(wǎng)站的代碼發(fā)現(xiàn)，箭頭處的小圖標(biāo)都是用的標(biāo)簽<i>。

div的主要目的是用來布局，而小裝飾卻可以用來

粗體標(biāo)簽<b>或<strong>（已廢棄）

效果：

上標(biāo)<sup> 下標(biāo)<sub>

上小標(biāo)這兩個(gè)標(biāo)簽容易混淆，怎么記呢？這樣記：b的意思是bottom：底部 舉例：

O<sup>2</sup> 5<sub>3</sub>效果：

三、超鏈接

超鏈接有三種形式：

1、外部鏈接：鏈接到外部文件。舉例：

<a href="02頁面.html">點(diǎn)擊進(jìn)入另外一個(gè)文件</a>a是英語anchor“錨”的意思，就好像這個(gè)頁面往另一個(gè)頁面扔出了一個(gè)錨。是一個(gè)文本級的標(biāo)簽。

href是英語hypertext reference超文本地址的縮寫。讀作“喝瑞夫”，不要讀作“喝夫”。

效果：







當(dāng)然，我們也可以直接點(diǎn)進(jìn)鏈接，訪問一個(gè)網(wǎng)址。舉例如下；

<a href="http://www.baidu.com" target="_blank">點(diǎn)我點(diǎn)我</a>2、錨鏈接： 指給超鏈接起一個(gè)名字，作用是在本頁面或者其他頁面的的不同位置進(jìn)行跳轉(zhuǎn)。比如說，在網(wǎng)頁底部有一個(gè)向上箭頭，點(diǎn)擊箭頭后回到頂部，這個(gè)就是利用到了錨鏈接。 首先我們要創(chuàng)建一個(gè)錨點(diǎn)，也就是說，使用name屬性或者id屬性給那個(gè)特定的位置起個(gè)名字。效果如下：







上圖中解釋：

11行代碼表示，頂部這個(gè)錨的名字叫做name1。 然后在底部設(shè)置超鏈接，點(diǎn)擊時(shí)將回到頂部（此時(shí)，網(wǎng)頁中的url的末尾也出現(xiàn)了#name1）。注意上圖中紅框部分的#號不要忘記了，表示跳到名為name1的特定位置，這是規(guī)定。如果少了#號，點(diǎn)擊之后，就會跳到name1這個(gè)文件或者name1這個(gè)文件夾中去。

如果我們將上圖中的第28行代碼寫成：

<a href="a.html#name1">回到頂部</a>那就表示，點(diǎn)擊之后，跳轉(zhuǎn)到a.html頁面的name1錨點(diǎn)中去。

說明：name屬性是HTML4.0以前使用的，id屬性是HTML4.0后才開始使用。為了向前兼容，因此，name和id這兩個(gè)屬性都要寫上，并且值是一樣的。

3、郵件鏈接： 代碼舉例：

<a href="mailto:smyhvae@163.com">點(diǎn)擊進(jìn)入我的郵箱</a>效果：點(diǎn)擊之后，會彈出outlook，作用不大。

超鏈接的屬性

• href：目標(biāo)URL
• title：懸停文本。
• name：主要用于設(shè)置一個(gè)錨點(diǎn)的名稱。
• target：告訴瀏覽器用什么方式來打開目標(biāo)頁面。target屬性有以下幾個(gè)值：
• _self：在同一個(gè)網(wǎng)頁中顯示（默認(rèn)值）
• _blank：在新的窗口中打開。
• _parent：在父窗口中顯示
• _top：在頂級窗口中顯示

title屬性舉例：

<a href="09_img.html" title="很好看哦">結(jié)婚照</a>效果如下：







target屬性舉例：

<a href="1.html" title="懸停文本" target="_blank">鏈接的內(nèi)容</a>blank就是“空白”的意思，就表示新建一個(gè)空白窗口。為啥有一個(gè)_ ，就是規(guī)定，沒啥好解釋的。 也就是說，如果不寫target=”_blank”那么就是在相同的標(biāo)簽頁打開，如果寫了target=”_blank”，就是在新的空白標(biāo)簽頁中打開。

備注1：分清楚img和a標(biāo)簽的各自的屬性

區(qū)別如下：

<img src="1.jpg" /><a href="1.html"></a>

備注2：a是一個(gè)文本級的標(biāo)簽

比如一個(gè)段落中的所有文字都能夠被點(diǎn)擊，那么應(yīng)該是p包裹a：

<p> <a href="">段落段落段落段落段落段落</a></p>而不是a包裹p：

<a href=""> <p> 段落段落段落段落段落段落 </p></a>a的語義要小于p，a就是可以當(dāng)做文本來處理，所以p里面相當(dāng)于放的就是純文字。

四、圖片標(biāo)簽

img: 代表的就是一張圖片。是單邊標(biāo)記。

img是自封閉標(biāo)簽，也稱為單標(biāo)簽。

能插入的圖片類型：

• 能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什么區(qū)別，css課上講。
  
• 不能往網(wǎng)頁中插入的圖片格式是：psd、ai
  

HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務(wù)器上。

src屬性：圖片的相對路徑和絕對路徑

這里涉及到圖片的一個(gè)屬性：

• src屬性：指圖片的路徑。

在寫圖片的路徑時(shí)，有兩種寫法：相對路徑、絕對路徑

1、寫法一：相對路徑

相對當(dāng)前頁面所在的路徑。兩個(gè)標(biāo)記 . 和 .. 分表代表當(dāng)前目錄和父路徑。

舉例1：

<!-- 當(dāng)前目錄中的圖片 --><img src="2.jpg"><img src="./2.jpg"><!-- 上一級目錄中的圖片 --><img src="../2.jpg">img 是image“圖片”的簡寫，src 是英語source“資源”的縮寫。

相對路徑不會出現(xiàn)這種情況：

aaa/../bbb/1.jpg../要么不寫，要么就寫在開頭。

舉例2：

<img src="images/1.jpg">上方代碼的意思是說，當(dāng)前頁面有一個(gè)并列的文件夾images，在文件夾images中存放了一張圖片1.jpg 效果：







相對路徑的面試題?，F(xiàn)有如下文件層級圖：







問題：如果想在index.html中插入1.png，那么對應(yīng)的img語句是？

分析：

現(xiàn)在document是最大的文件夾，里面有兩個(gè)文件夾work和photo。work中又有一個(gè)文件夾叫做myweb。myweb文件夾里面有index.html。 所以index.html在myweb文件夾里面，上一級就是work文件夾，上兩級就是document文件夾。通過document文件夾當(dāng)做一個(gè)中轉(zhuǎn)站，進(jìn)入photo文件夾，看到了1.png。

答案：

<img src="../../photo/1.png" />

2、寫法二：絕對路徑

絕對路徑包括以下兩種：

（1）以盤符開始的絕對路徑。舉例：

<img src="C:/Users/smyhvae/Desktop/html/images/1.jpg">（2）網(wǎng)絡(luò)路徑。舉例：

<img src="http://img.smyhvae.com/2016040102.jpg">大家打開上面的img中的鏈接，掃一掃，可能有驚喜哦。

相對路徑和絕對路徑的總結(jié)

相對路徑的好處：站點(diǎn)不管拷貝到哪里，文件和圖片的相對路徑關(guān)系都是不變的。 相對路徑使用有一個(gè)前提，就是網(wǎng)頁文件和你的圖片，必須在一個(gè)服務(wù)器上。

問題：我的網(wǎng)頁在C盤，圖片卻在D盤，能不能插入呢？

答案： 用相對路徑不能，用絕對路徑也不能。

注意：可以使用file://來插入，但是這種方法，沒有任何意義！因?yàn)榉?wù)器上沒有所謂c盤、d盤。

下面的方法是行的，但是沒有任何工程上的意義，這是因?yàn)榉?wù)器沒有盤符，linux系統(tǒng)沒有盤符：

<img src="file://C:/Users/Danny/Pictures/明星/1.jpg" alt="" />總結(jié)一下：

• 我們現(xiàn)在無論是在a標(biāo)簽、img標(biāo)簽，如果要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。
  
• 相對路徑，就是../ image/ 這種路徑。從自己出發(fā)，找到別人；
  
• 絕對路徑，就是http://開頭的路徑。
  
• 絕對不允許使用file://開頭的東西，這個(gè)是完全錯(cuò)誤的！
  

img標(biāo)簽的其他屬性

• width：寬度
• height：高度
• Align：指圖片的水平對齊方式，屬性值可以是：left、center、right
• title：提示性文本。公有屬性。也就是鼠標(biāo)懸停時(shí)出現(xiàn)的文本。
• border：給圖片加邊框（描邊），單位是像素，邊框的顏色是黑色
• Hspace：指圖片左右的邊距
• Vspace：指圖片上下的邊距
  
• alt：當(dāng)圖片不可用（無法顯示）的時(shí)候，代替圖片顯示的內(nèi)容。alt是英語 alternate “替代”的意思，代表替換資源。（有的瀏覽器不支持）
  

舉例：

<img src="images/1.jpg" width="300" height="`188" title="這是美女">效果：







Alt屬性效果演示：（當(dāng)圖片 src 不可用的時(shí)候，顯示文字。這樣做，至少能讓用戶知道，這個(gè)圖片大概是什么內(nèi)容）

• 圖片的align屬性：圖片和周圍文字的相對位置。屬性取值可以是：bottom（默認(rèn)）、center、top、left、right。 我們來分別看一下這align屬性的這幾個(gè)屬性值的區(qū)別。

1、align=""，圖片和文字低端對齊。即默認(rèn)情況下的顯示效果：







2、align="center"：圖片和文字水平方向上居中對齊。顯示效果：







3、align="top"：圖片與文字頂端對齊。顯示效果：







4、align="left"：圖片在文字的左邊。顯示效果：







5、align="right"：圖片在文字的右邊。顯示效果：







注意事項(xiàng)： （1）如果要想保證圖片等比例縮放，請只設(shè)置width和height中其中一個(gè)。 （2）如果想實(shí)現(xiàn)圖文混排的效果，請使用align屬性，取值為left或right。

熱點(diǎn)問題

指的是對圖片的局部區(qū)域加超鏈接。 我們知道，如果給圖片加一個(gè)超鏈接，那個(gè)點(diǎn)擊這個(gè)圖片的任意區(qū)域，都會跳轉(zhuǎn)到新的位置。舉例：

<a href="網(wǎng)頁2.html"><img src="2.jpg"></a>上方代碼表明：給圖片加一個(gè)超鏈接，那個(gè)點(diǎn)擊這個(gè)圖片的任意區(qū)域，都會跳轉(zhuǎn)到新的位置。 現(xiàn)在，我只想對圖片的局部區(qū)域加超鏈接，該怎么做呢？這里的難點(diǎn)在于坐標(biāo)的確定，此時(shí)需要用到Dreamweaver。







上圖中，切換到“設(shè)計(jì)”標(biāo)簽，然后：







上圖中，點(diǎn)擊菜單欄插入-圖像，導(dǎo)入圖片：







，在圖片上點(diǎn)擊右鍵，選擇屬性，彈出屬性面板：







上圖中，我們可以利用紅框部分的地圖繪制需要添加超鏈接的區(qū)域。箭頭處表示的是要鏈接到的文件。藍(lán)框部分表示打開新頁面的方式，藍(lán)狂部分的new是沒有下劃線的，它和_blank的含義是一樣的。




局部區(qū)域的熱點(diǎn)設(shè)置完畢后，上圖顯示，紅框部分就是多出的代碼，也正是我們需要的代碼。多出的代碼如下：

<img src="file:///C|/Users/smyhvae/Desktop/html/1.jpg" alt="" width="488" height="730" usemap="#Map"/><map name="Map"> <area shape="circle" coords="227,374,63" href="file:///C|/Users/smyhvae/Desktop/html/網(wǎng)頁2.html" target="_blank"></map>上方代碼中，第一行的usemap="#Map"表示我要引用名為Map的地圖。 然后第02至第04行就給出了地圖的定義。 效果演示：







最后，送上妹子的近照一張。樓主已經(jīng)仁至義盡了：http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg