python 全棧開發，Day45(html介紹和head標籤,body標籤中相關標籤)

時間 2019-11-08

標籤 python 開發 day45 day html 介紹 head 標籤 body 相關欄目 Python 简体版

原文原文鏈接

1、html介紹

1.web標準

web準備介紹：javascript

w3c：萬維網聯盟組織，用來制定web標準的機構（組織）
web標準：製做網頁遵循的規範
web準備規範的分類：結構標準、表現標準、行爲標準。
結構：html。表示：css。行爲：Javascript。

web準備總結：css

結構標準：至關於人的身體。html就是用來製做網頁的。
表現標準：至關於人的衣服。css就是對網頁進行美化的。
行爲標準：至關於人的動做。JS就是讓網頁動起來，具備生命力的

2、瀏覽器介紹

瀏覽器是網頁運行的平臺，經常使用的瀏覽器有IE、火狐（Firefox)、谷歌（Chrome）、獵豹瀏覽器、Safari和Opera等html

瀏覽器內核：前端

瀏覽器	內核
IE	trident
chrome	blink
火狐	gecko
Safari	webkit

PS：「瀏覽器內核」也就是瀏覽器所採用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。渲染引擎是兼容性問題出現的根本緣由。java

3、開發工具介紹

Sublime Text的使用python

參考連接：Sublime Text使用技巧linux

還有其餘的前端編輯工具，好比：git

vscode，是微軟推出的一款輕量編輯器,採起了和VS相同的UI界面,搭配合適的插件能夠優化前端開發的體驗。github

Hbuilder，HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDEweb

webstorm，WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽爲「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。

這3者對比：

vscode比較輕便，Hbuilder針對移動端，方便調試代碼。

webstorm是一個重量級web開發工具。

本文主要用的是Sublime Text3

4、HTML介紹

1.HTML的概述

html全稱HyperText Mackeup Language，翻譯爲超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。好比字體、顏色、大小等。

超文本：音頻，視頻，圖片稱爲超文本。
標記：<英文單詞或者字母>稱爲標記，一個HTML頁面都是由各類標記組成。

做用：HTML是負責描述文檔語義的語言。

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

HTML是負責描述文檔語義的語言

html中，除了語義，其餘什麼都沒有。

html是一個純本文文件（就是用txt文件更名而成），用一些標籤來描述文字的語義，這些標籤在瀏覽器裏面是看不到的，因此稱爲「超文本」，因此就是「超文本標記語言」了。
因此，接下來，咱們確定要學習一堆html中的標籤對兒，這些標籤對兒可以給文本不一樣的語義。

好比，面試的時候問你，h1標籤有什麼做用？

正確答案：給文本增長主標題的語義。
錯誤答案：給文字加粗、加黑、變大。

2.HTML的網絡術語

網頁：由各類標記組成的一個頁面就叫網頁。
主頁(首頁) : 一個網站的起始頁面或者導航頁面。
標記： <p>稱爲開始標記，</p>稱爲結束標記，也叫標籤。每一個標籤都規定好了特殊的含義。
元素：<p>內容</p>稱爲元素.
屬性：給每個標籤所作的輔助信息。

5、HTML顏色介紹

顏色表示:

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

咱們你們先記住幾個純單詞的顏色，css課程中會詳細講10進制和16進制。

在公司中，UI設計師的設計圖，顏色主要採用的是16進製表示，每種顏色會有相應的註釋。

前端工程師拿到設計圖以後，用html+css+js 作出這個網頁，給最終用戶展現。

RGB色彩模式：

天然界中全部的顏色均可以用紅、綠、藍(RGB)這三種顏色波長的不一樣強度組合而得，這就是人們常說的三原色原理。
RGB三原色也叫加色模式，這是由於當咱們把不一樣光的波長加到一塊兒的時候，能夠獲得不一樣的混合色。例：紅+綠=黃色，紅+藍＝紫色，綠+藍=青
在數字視頻中，對RGB三基色各進行8位編碼就構成了大約1678萬種顏色，這就是咱們常說的真彩色。全部顯示設備都採用的是RGB色彩模式。
RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。

6、HTML規範

HTML是一個弱勢語言
HTML不區分大小寫
HTML頁面的後綴名是html或者htm(有一些系統不支持後綴名長度超過3個字符，好比dos系統)
HTML的結構：
- 聲明部分：主要做用是用來告訴瀏覽器這個頁面使用的是哪一個標準。是HTML5標準。
- head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
- body部分：咱們所寫的代碼必須放在此標籤內。

一、編寫HTML的規範

1）全部標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>

（2）全部的標記都必須小寫。

（3）全部的標記都必須關閉。

雙邊標記：<span></span>
單邊標記：<br> 轉成 <br /> <hr> 轉成 <hr />，還有<img src=「URL」 />

（4）全部的屬性值必須加引號。<h1 id="head"></h1>

（5）全部的屬性必須有值。<input type="radio" checked="checked" />

二、HTML的基本語法特徵

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

HTML只在意標籤的嵌套結構，嵌套的關係。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。

也就是說，HTML不是依靠縮進來表示嵌套的，就是看標籤的包裹關係。可是，咱們發現有良好的縮進，代碼更易讀。要求你們都正確縮進標籤。

(2) 空白摺疊現象

HTML中全部的文字之間，若是有空格、換行、tab都將被摺疊爲一個空格顯示。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <span>今天

        2222</span>
</body>
</html>

訪問網頁，效果以下：

（3）標籤要嚴格封閉

下面這種，是不規範的寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <span>今天很涼爽
</body>
</html>

7、HTML結構詳解

新建HTML文件，輸入 html:5,按tab鍵後，自動生成的代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

注意：文件名不能是中文，到公司裏面，代碼是放到linux服務器中的，它對中文的識別度不是太好。儘可能以英文名來起名，名字不要太長。

一、文檔聲明頭

任何一個標準的HTML頁面，第一行必定是一個以

<!DOCTYPE...

開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。

PS:

XHTML：Extensible Hypertext Markup Language，可擴展超文本標註語言。

XHTML的主要目的是爲了取代HTML，也能夠理解爲HTML的升級版。

HTML的標記書寫很不規範，會形成其它的設備(ipad、手機、電視等)沒法正常顯示。

XHTML與HTML4.0的標記基本上同樣。

XHTML是嚴格的、純淨的HTML

如下內容僅作了解：

HTML4.01有哪些規範呢？

首先咱們先肯定一件事兒，咱們如今學習的是HTML4.01這個版本，這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。可是IE六、七、8這些瀏覽器還不能過早的淘汰，因此這幾年網頁仍是應該用HTML4.01來製做。現在，手機、移動端的網頁，就可使用HTML5了，由於其兼容性更高。

說個題外話，html1 至 html3 是美國軍方以及高等研究所用的，並未對外公開。

HTML4.01裏面有兩大種規範，每大種規範裏面又各有3種小規範。因此一共6種規範（見下面）：

HTML4.01裏面規定了普通和XHTML兩大種規範。

HTML以爲本身有一些規定不嚴謹，好比，標籤是否能夠用大寫字母呢？<H1></H1>

因此，HTML就以爲，把一些規範嚴格的標準，又制定了一個XHTML1.0。在XHTML中的字母X，表示「嚴格的」。

總結一下，HTML4.01一共有6種DTD，說白了，HTML第一行語句一共有6種：

下面對上圖中的三種小規範進行解釋：

strict：表示「嚴格的」，這種模式裏面的要求更爲嚴格。這種嚴格體如今哪裏？有一些標籤不能使用。
好比，u標籤，就是給一個本文加下劃線，可是這和HTML的本質有衝突，由於HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。因此，在strict中是不能使用u標籤的。
那怎麼給文本增長下劃線呢？從此的css將使用css屬性來解決。
那麼，XHTML1.0更爲嚴格，由於這個體系自己規定好比標籤必須是小寫字母、必須嚴格閉合標籤、必須使用引號引發屬性等等。
Transitional：表示「普通的」，這種模式就是沒有一些別的規範。
Frameset：表示「框架」，在框架的頁面使用。

在sublime輸入的html:xt，x表示XHTML，t表示transitional。
HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了（W3C本身打臉了）：

<!DOCTYPE html>

ok，下面重點的來了。

二、頭標籤（head）

head標籤都放在頭部分之間。這裏麪包含了：<title>、<meta>、<link>，<style>

<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
<meta>：提供有關頁面的基本信息
<link>：定義文檔與外部資源的關係。
<style>:定義內部樣式表與網頁的關係

2.1 Meta標籤介紹：

元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。

標籤位於文檔的頭部，不包含任何內容。

提供的信息是用戶不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

經常使用的meta標籤：

（1）http-equiv屬性

它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

注意：meta必定要指定編碼，不然IE瀏覽器展現中文時，會亂碼。

（2）name屬性

主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />

　　這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。讓別人可以找到你，搜索到。

<meta name="Description" content="網易是中國領先的互聯網技術公司，爲用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />

只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，這個技術叫作SEO（search engine optimization，搜索引擎優化）。

效果以下：

<meta name=viewport content="width=device-width, initial-scale=1">

上面這個標籤，是讓咱們網頁支持移動端，移動設備優先（瞭解便可）

2.2 title標籤

主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。

<title>路飛學城</title>

效果以下：

HTML標籤中有兩類標籤：

1.字體標籤

2.排版標籤

8、字體標籤

字體標籤包含：h1~h六、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

標題

標題使用<h1>至<h6>標籤進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具備align屬性，屬性值能夠是：left、center、right。

<body>
    <h1>路飛學城</h1>
    <h2>路飛學城</h2>
    <h3>路飛學城</h3>
    <h4>路飛學城</h4>
    <h5>路飛學城</h5>
    <h6>路飛學城</h6>
</body>

打開網頁，效果以下：

h1系叫塊級標籤,它的特色是獨佔一行

字體標籤<font>(已廢棄)

color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設置字體顏色。設置方式：單詞 #ff00cc rgb(0,0,255)

size：設置字體大小。取值範圍只能是：1至7。取值時，若是取值大於7那就按照7來算，若是取值小於1那就按照1來算。若是想要更大的字體，那就只能經過css樣式來解決
face="微軟雅黑"：設置字體類型。注意在寫字體時，「微軟雅黑」這個字不能寫錯。

實例：

<body>
    <font face="微軟雅黑" color="green" size="8">字體</font>
</body>

打開網頁，效果以下：

粗體標籤<b>或<strong>(已放棄)

示例：

<body>
    韓雪
    <b>韓雪</b>
    <strong>韓雪</strong>
</body>

網頁效果以下：

下劃線標記 `<u>` 中劃線標記`<s>`（已廢棄）

示例：

<body
    <u>劉詩詩</u>
    <s>劉詩詩</s>
</body>

網頁效果以下：

斜體標記 `<i>`或`<em>`（已廢棄）

示例：

<body
    <i>宋茜</i>
    <em>宋茜</em>
</body>

網頁效果以下：

上標<sup> 下標<sub>

上小標這兩個標籤容易混淆，怎麼記呢？這樣記：b的意思是bottom：底部

例子：

<body>
    5<sup>2</sup>
    8<sub>2</sub>
</body>

網頁效果以下：

特殊字符

 ：空格（non-breaking spacing，不斷打空格）
<：小於號（less than）
>：大於號（greater than）
&：符號&
"：雙引號
'：單引號
©：版權©
™：商標™

要求你們背過的特殊字符： 、<、>、&copy

好比說，你想把<p>做爲一個文本在頁面上顯示，直接寫<p>是確定不行的，由於這表明的是一個段落標籤，因此這裏須要用到轉義字符。應該這麼寫：

<body>
    這是一個HTML語言的<p>標籤
</body>

網頁效果以下：

若是還想知道其它的HTML特殊字符：HTML特殊字符參考表

9、排版標籤

段落標籤<p>

段落：是英文paragraph的縮寫。

屬性：

align='屬性值'：對齊方式。屬性值包括：left、center、right

示例：

<body>
    <p>這是一個萌妹子</p>
    <p align="center">這是另外一個萌妹子</p>
</body>

網頁效果以下：

ok,下面這幾句話，你們必定緊緊記住。HTML標籤是分等級的。HTML將全部的標籤分爲兩種：

文本級標籤：p、span、a、b、i、u、em。文本標籤裏只能放文字、圖片、表單元素。
容器級標籤：div、h系列、li、dt、dd。容器級標籤裏能夠聽任何東西。

從學習p的第一天開始，就要死死記住：p標籤是一個文本級標籤，p裏面只能放文字、圖片、表單元素。其餘的一概不能放。

錯誤寫法：（把h系列的標籤放到p裏）

<body>
    <p>
    我是個段落
    <h2>我是二級標題</h2>
    </p>
</body>

網頁效果以下：

上圖顯示，瀏覽器不容許你這麼作。咱們使用Chrome的F12審查元素髮現，瀏覽器本身把p封閉掉了，不讓你去包裹h2。

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

塊級標籤 <div>和<span>

div和span是很是重要的標籤，div的語義是division「分割」； span的語義就是span「範圍、跨度」。CSS課程中你將知道，這兩個東西，都是最最重要的「盒子」。

div：把標籤中的內容做爲一個塊兒來對待(division)。必須單獨佔據一行。

div標籤的屬性：

align="屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center

<span>和<div>惟一的區別在於：<span>是不換行的，而<div>是換行的。

若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。

示例：

<body>
    <div>
        導航欄
    </div>
    <div>
        中心banner
    </div>
    <span>路飛</span>
    <span>alex</span>
</body>

網頁效果以下：

div在瀏覽器中，默認是不會增長任何的效果的，可是語義變了，div中的全部元素是一個小區域。

div標籤是一個容器級標籤，裏面什麼都能放，甚至能夠放div本身。

span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。

就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。

span舉例：

<body>
    <p>
        商品簡介:
        <span>
            <a href="">詳細信息</a>
            <a href="">生產日期</a>
        </span>
    </p>
</body>

網頁效果以下：

div舉例：

<body>
    <div class="header">
    <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="content">
        <div class="guanggao"></div>
        <div class="shop"></div>
    </div>
    <div class="footer"></div>
</body>

因此，咱們親切的稱呼這種模式叫作「div+css」。div標籤負責佈局，負責結構，負責分塊。css負責樣式。

ps:這個class屬性名就與css有很大關聯，講到css模塊會詳細講這塊內容。

換行標籤<br> （已廢棄）

當你打算結束一行，而又不想開始一個新段落時，<br>標籤就派上用場了。不管你將它置於何處，<br>標籤都會產生一個強制的換行。

示例：

<body>
    This <br> is a para<br>graph with line breaks
</body>

網頁效果以下：

上圖顯示，<p>標籤和<br>標籤的區別在於：<p>標籤會在段落的先後自動插入一個空行，而<br>標籤沒有空行；並且<br>標籤沒有屬性。

注意<br> 沒有結束標籤，把<br>標籤寫爲 <br/> 是經得起將來考驗的作法，XHTML 和 XML 都接受在打開的標籤內部來關閉標籤的作法。

水平線標籤`<hr>`（已廢棄）

水平分隔線（horizontal rule）能夠在視覺上將文檔分隔成各個部分

示例：

<body>
    <p>皇上</p>
    <hr>
    <hr>
    <p>我是夏雨荷</p>
This <br> is a para<br>graph with line breaks
</body>

網頁效果以下：

內容居中標籤 `<center>`

此時center表明是一個標籤，而不是一個屬性值了。只要是在這個標籤裏面的內容，都會居於瀏覽器的中間。

示例：

<body>
    <center>
       <p>小凳子</p>
    </center>
</body>

網頁效果以下：

到了H5裏面，center標籤不建議使用。

預約義（預格式化）標籤：`<pre>`

含義：將保留其中的全部的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）
說明：真正排網頁過程當中，<pre>標籤幾乎用不着。但在PHP中用於打印一個數組時使用。

示例：

<body>
    <pre>
        清平調·其一

            做者：李白
        雲想衣裳花想容，春風拂檻露華濃。
        若非羣玉山頭見，會向瑤臺月下逢。

    </pre>
</body>

網頁效果以下：

上圖中，好像pre標籤部分的字體變小了，並且還出現了縮進，好吧，這個實際上是瀏覽器搞的鬼。
爲何要有<pre>這個標籤呢？答案是：

全部的瀏覽器默認狀況下都會忽略空格和空行。

好吧，其實這個標籤也用的比較少。排版標籤就給你們介紹到這裏。

11、超連接

超連接有三種形式：

一、外部連接：

連接到外部文件。舉例：

<a href="new.html">點擊進入到新網頁</a>

a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。是一個文本級的標籤。

效果：

固然，咱們也能夠直接點進連接，訪問一個網址。舉例以下；

<a href="http://www.baidu.com" target="_blank">進入百度</a>

效果以下：

二、錨連接：

指給超連接起一個名字，做用是在本頁面或者其餘頁面的的不一樣位置進行跳轉。好比說，在網頁底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用到了錨連接。
首先咱們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。效果以下：

<body>
    <a name='top'>頂部</a>
    <pre>
楊玉環 （中國四大美女之一）
...









    </pre>
    <a href="#top">回到頂部</a>
</body>

網頁效果以下：　

上圖中解釋：

11行代碼表示，頂部這個錨的名字叫作top。
而後在底部設置超連接，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top）。注意上圖中紅框部分的#號不要忘記了，表示跳到名爲top的特定位置，這是規定。若是少了#號，點擊以後，就會跳到top這個文件或者top這個文件夾中去。

若是咱們將上圖中的回到頂部那一行代碼寫成：

<a href="new.hhml#top">回到頂部</a>

就表示，點擊以後，跳轉到new.html頁面的top錨點中去。

說明：name屬性是HTML4.0之前使用的，id屬性是HTML4.0後纔開始使用。爲了向前兼容，所以，name和id這兩個屬性都要寫上，而且值是同樣的。

三、郵件連接：

代碼舉例：

<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>

效果：點擊以後，會彈出outlook，做用不大。

前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息

特殊幾個連接：

返回頁面頂部的位置

 <a href="#">跳轉到頂部</a>

與js有關：

<a href="javascript:alert(1)">內容</a>
<a href="javascript:;">內容</a>

1. javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應例如：<a href="javascrip:;">內容</a>
2. javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼。例如：<ahref="javascript:alert()">內容</a>

某些頁面的左側導航欄，會用到 <a href="javascrip:;"></a>。它只須要能點擊就行，不作跳轉。跳轉的事情給js來處理。

超連接的屬性

href：目標URL
title：懸停文本。
name：主要用於設置一個錨點的名稱。
target：告訴瀏覽器用什麼方式來打開目標頁面。target屬性有如下幾個值：
- _self：在同一個網頁中顯示（默認值）
- _blank：在新的窗口中打開。
- _parent：在父窗口中顯示
- _top：在頂級窗口中顯示

blank就是「空白」的意思，就表示新建一個空白窗口。爲啥有一個_ ，就是規定，沒啥好解釋的。
也就是說，若是不寫target=」_blank」那麼就是在相同的標籤頁打開，若是寫了target=」_blank」，就是在新的空白標籤頁中打開。

ps:a是一個文本級的標籤

好比一個段落中的全部文字都可以被點擊，那麼應該是p包含a；

<body>
    <p>
    <a href="">你是風兒,我是沙</a>
    </p>
</body>

而不是a包裹p：

<body>
    <a href="">
    <p>
        你是風兒,我是沙
    </p>
    </a>
</body>

a的語義要小於p，a就是能夠當作文原本處理，因此p裏面至關於放的就是純文字。　

12、圖片標籤 <img />

img: 表明的就是一張圖片。是單邊標記。

img是自封閉標籤，也稱爲單標籤。

能插入的圖片類型：

可以插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什麼區別，css課上講。
不能往網頁中插入的圖片格式是：psd、ai

HTML頁面不是直接插入圖片，而是插入圖片的引用地址，因此也要把圖片上傳到服務器上。

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

這裏涉及到圖片的一個屬性：

src屬性：指圖片的路徑。

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

一、寫法一：相對路徑

相對當前頁面所在的路徑。兩個標記 . 和 .. 分表表明當前目錄和父路徑。

舉例1：

<!-- 當前目錄中的圖片 -->
<img src="2.jpg">
<img src=".\2.jpg"> 
<!-- 上一級目錄中的圖片 -->
<img src="..\2.jpg">

img 是image「圖片」的簡寫，src 是英語source「資源」的縮寫。

舉例2：

<img src="images/1.jpg">

二、寫法二：絕對路徑

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

<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

（2）網絡路徑。舉例：

<img src="http://www.baidu.com/2016040102.jpg">

相對路徑和絕對路徑的總結

相對路徑的好處：站點無論拷貝到哪裏，文件和圖片的相對路徑關係都是不變的。
相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。

問題：個人網頁在C盤，圖片卻在D盤，能不能插入呢？

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

注意：可使用file://來插入，可是這種方法，沒有任何意義！由於服務器上沒有所謂c盤、d盤。

下面的方法是行的，可是沒有任何工程上的意義，這是由於服務器沒有盤符，linux系統沒有盤符：

<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />

總結一下：

咱們如今不管是在a標籤、img標籤，若是要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。
相對路徑，就是../ image/ 這種路徑。從本身出發，找到別人；
絕對路徑，就是http://開頭的路徑。
絕對不容許使用file://開頭的東西，這個是徹底錯誤的！

img標籤的經常使用其它屬性

width：寬度
height：高度
title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。
align：指圖片的水平對齊方式，屬性值能夠是：left、center、right
alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate 「替代」的意思。（有的瀏覽器不支持）

舉例：

<body>
    <img src="images/lzl.jpg" alt="林志玲" title="林志玲" width="500" height="700">
</body>

網頁效果以下：

文本級的標籤顯示在瀏覽器上時，無論你的圖片多高，它總會底邊對齊，這是一種現象，「高矮不齊，底邊對齊」。

此時你們能夠給圖片設置align屬性，來查看效果吧！

注意事項：
（1）若是要想保證圖片等比例縮放，請只設置width和height中其中一個。
（2）若是想實現圖文混排的效果，請使用align屬性，取值爲left或right

若是想點擊圖片的時候跳轉到某個連接，好比百度，應該是：

<a href="http://www.baidu.com">
        <img src="images/lzl.jpg" alt="林志玲" title='林志玲'>
</a>

今日做業：

主要利用今天學習的知識來作
第一個做業：我的博客
展現姓名，年齡，職業
我的介紹，頭像，我的博客地址

第二個做業：
展現春，夏，秋，冬 4個字，每一個點擊以後，會跳轉到對應的頁面
好比春，展現一張春天的圖片
提示：
第一種寫法，使用top跳轉
第二種寫法，使用4個頁面，分別展現

第一個做業：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        h3 {
            /*文字居中*/
            text-align: center;
        }
        .main {
            /*div居中*/
            margin:0 auto;
        }
        .middle {
            text-align: center;
        }
        .td_lt {
            text-align: right;
            /*文字顏色*/
            color: #a2e1d4;
        }
        .td_rt {
            text-align: left;
            color: #e3c887;
        }
        .head {
            /*底色*/
            background-color: #fbfbfb;
            color: #e3c887;
        }
        p {
            text-align: center;
            /*字體大小*/
            font-size: 15px;
            /*行高*/
            line-height: 26px;
            color: #fe6673;
        }
        .logo {
            width: 100px;
            height: 100px;
            /*塊顯示*/
            display: block;
            margin: 0 auto;
        }
        a {
            /*設置a標籤顏色*/
            color: #fbb8ac;
            /*去除下劃線*/
            text-decoration:none;
        }

    </style>
</head>
<body>
    <div class="main">
        <h1 class="head" align="center">我的簡介</h1>
    <img src="images/lufei.jpg" class="logo">
    <div class="middle">
        <table border="0" align="center">
            <tr>
                <td class="td_lt">姓名：</td>
                <td class="td_rt">肖祥</td>
            </tr>
            <tr>
                <td class="td_lt">年齡：</td>
                <td class="td_rt">18</td>
            </tr>
            <tr>
                <td class="td_lt">職業：</td>
                <td class="td_rt">IT</td>
            </tr>
            <tr>
                <td class="td_lt">博客地址：</td>
                <td class="td_rt"><a href="https://www.cnblogs.com/xiao987334176">cnblogs</a></td>
            </tr>
        </table>
    </div>
    <br/>
    <p>
        愛電影、愛漫畫、愛音樂、愛編程、愛妹子。<br/><br/>
        假如生活欺騙了你，不要憂鬱，也不要憤慨！相信吧，快樂的日子就會到來。心永遠憧憬將來。
    </p>
</body>
</html>

頁面效果以下：

第二個做業：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        h1 {
            color: #fbb8ac;
        }
        .main{
            margin:0 auto;
            text-align: center;
            width: 200px;
            height: 200px;
        }
        .chun {
            background-color: #2ae0c8;
            width: 100px;
            height: 100px;
            /*左浮動*/
            float: left;
        }
        .xia {
            background-color: #fe6673;
            width: 100px;
            height: 100px;
            float: left;
        }
        a {
            /*去除a標籤默認顏色*/
            color: black;
            text-decoration:none;
            line-height:100px;
            /*超出隱藏*/
            overflow:hidden;
        }
        .qiu {
            background-color: #fad8be;
            width: 100px;
            height: 100px;
            float: left;
        }
        .dong {
            background-color: #cbf5fb;
            width: 100px;
            height: 100px;
            float: left;
        }
        .clear {
            /*清除浮動*/
            clear: both;
        }

    </style>
</head>
<body>
    <h1 align="center">一年四季</h1>
    <div class="main">
        <div class="chun"><a href="images/chun.jpg" target="_black">春天</a></div>
        <div class="xia"><a href="images/xia.jpg" target="_black">夏天</a></div>
        <!-- 清除浮動 -->
        <div class="clear"></div>
        <div class="qiu"><a href="images/qiu.jpg" target="_black">秋天</a></div>
        <div class="dong"><a href="images/dong.jpg" target="_black">冬天</a></div>
    </div>

</body>
</html>

頁面效果以下：

第二種寫法：節省css行數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        h1 {
            color: #fbb8ac;
        }
        .main{
            margin:0 auto;
            text-align: center;
            width: 200px;
            height: 200px;
        }
        .left {
            width: 100px;
            height: 100px;
            /*左浮動*/
            float: left;
        }
        .chun {
            background-color: #2ae0c8;
            /*左浮動*/
            float: left;*/
        }
        .xia {
            background-color: #fe6673;
        }
        a {
            /*去除a標籤默認顏色*/
            color: black;
            text-decoration:none;
            /*設置行高,讓a標籤的文字垂直居中*/
            line-height:100px;
            /*超出隱藏*/
            overflow:hidden;
        }
        .qiu {
            background-color: #fad8be;
        }
        .dong {
            background-color: #cbf5fb;
            /*屬性設置元素的上外邊距*/
            margin-top: -100px;
        }
        .clear {
            /*清除浮動*/
            clear: both;
        }

    </style>
</head>
<body>
    <h1 align="center">一年四季</h1>
    <div class="main">
        <div class="left chun"><a href="images/chun.jpg" target="_black">春天</a></div>
        <div class="left xia"><a href="images/xia.jpg" target="_black">夏天</a></div>
        <!-- 清除浮動 -->
        <div class="left clear"></div>
        <div class="left qiu"><a href="images/qiu.jpg" target="_black">秋天</a></div>
        <div class="left dong"><a href="images/dong.jpg" target="_black">冬天</a></div>
    </div>

</body>
</html>