今日內容：

字體標籤：

h1~h六、、、、、、
排版標籤

<div> 、 、 、<hr>、<center>、<pre>

超連接 <a>
圖片標籤 <img>

HTML標籤中有兩類標籤：javascript

1.字體標籤css

2.排版標籤html

1、字體標籤

字體標籤包含：h1~h六、、、、、、java

標題

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

字體標籤(已廢棄)

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

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

實例：瀏覽器

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

粗體標籤或(已放棄)

示例：服務器

<b>salah</b>
<strong>salah</strong>

效果：網絡

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

示例：

<u>salah</u>
<s>salah</s>

效果：

斜體標記 或（已廢棄）

上標 下標

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

例子：

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

效果：

特殊字符

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

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

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

這是一個HTML語言的&lt;p&gt;標籤

效果顯示：

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

2、排版標籤

段落標籤

段落：是英文paragraph的縮寫。

屬性：

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

示例：

<p>這是一個段落</p>
<p align="center">這是另外一個段落</p>

效果：

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

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

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

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

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

效果以下：

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

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

塊級標籤 <div>和

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

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

div標籤的屬性：

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

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

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

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

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

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

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

span舉例：

<p>
        商品簡介:
        <span>
            <a href="">詳細信息</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="shop"></div>
    </div>
<div class="footer"></div>

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

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

換行標籤 （已廢棄）

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

示例：

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

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

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

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

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

示例：

 <p>salah</p>
    <hr>
    <hr>
<p>我是段落</p>
This <br> is a para<br>graph with line breaks

內容居中標籤 `<center>`

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

示例：

<center>
       <p>salah</p>
</center>

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

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

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

示例：

   <pre>
        鵝鵝鵝

            做者：李白
        曲項向天歌
        白毛浮綠水
        
    </pre>

效果以下：

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

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

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

3、超連接

超連接有三種形式：

一、外部連接：連接到外部文件。舉例：

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

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

href是英語hypertext reference超文本地址的縮寫。讀做「喝瑞夫」，不要讀做「喝夫」。

效果：

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

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

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

上圖中解釋：

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

若是咱們將上圖中的第23行代碼寫成：

<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>

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

超連接的屬性

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

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

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

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

<p>
    <a href="">段落段落段落段落段落段落</a>
</p>

而不是a包裹p：

<a href="">
    <p>
        段落段落段落段落段落段落
    </p>
</a>

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

4、圖片標籤 <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">

上方代碼的意思是說，當前頁面有一個並列的文件夾images，在文件夾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 「替代」的意思。（有的瀏覽器不支持）

舉例：

示例：

嘿嘿<img src="images/bojie.jpeg" alt="波姐" title='波多野結衣' width="400" height="400">幺幺

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

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

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

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

<a>
   <img src="images/bojie.jpeg" alt="波姐" title='波多野結衣'>
</a>

HTML中body相關標籤-02

今日內容：

字體標籤：

h1~h六、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

排版標籤

<div> 、<span> 、 <br>、<hr>、<center>、<pre>

超連接 <a>

圖片標籤 <img>

1、字體標籤

標題

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

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

上標<sup> 下標<sub>

特殊字符

2、排版標籤

段落標籤<p>

塊級標籤 <div>和<span>

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

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

內容居中標籤 `<center>`

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

3、超連接

特殊幾個連接：

超連接的屬性

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

4、圖片標籤 <img />

能插入的圖片類型：

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

一、寫法一：相對路徑

二、寫法二：絕對路徑

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

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

HTML中body相關標籤-02

今日內容：

字體標籤：

h1~h六、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

排版標籤

<div> 、<span> 、 <br>、<hr>、<center>、<pre>

超連接 <a>

圖片標籤 <img>

1、字體標籤

標題

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

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

上標<sup> 下標<sub>

特殊字符

2、排版標籤

段落標籤<p>

塊級標籤 <div>和<span>

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

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

內容居中標籤 <center>

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

3、超連接

特殊幾個連接：

超連接的屬性

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

4、圖片標籤 <img />

能插入的圖片類型：

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

一、寫法一：相對路徑

二、寫法二：絕對路徑

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

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

　　　<div> 、<span> 、 <br>、<hr>、<center>、<pre>

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

內容居中標籤 `<center>`

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

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