typora-copy-images-to: media

第01階段.前端基礎.HTML常用標簽

學習目標

• 理解：
  • 相對路徑三種形式
• 應用
  • 排版標簽
  • 文本格式化標簽
  • 影像標簽
  • 鏈接
  • 相對路徑，絕對路徑的使用

1. HTML常用標簽

首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標簽，認識標簽就可以了， 不會再給結構標簽指定樣式了，

HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了，

1.1 排版標簽

排版標簽主要和css搭配使用，顯示網頁結構的標簽，是網頁布局最常用的標簽，

1）標題標簽h (熟記)

單詞縮寫： head 頭部. 標題 title 檔案標題

為了使網頁更具有語意化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即

標題標簽語意： 作為標題使用，并且依據重要性遞減

其基本語法格式如下：

<h1>   標題文本   </h1>
<h2>   標題文本   </h2>
<h3>   標題文本   </h3>
<h4>   標題文本   </h4>
<h5>   標題文本   </h5>
<h6>   標題文本   </h6>

顯示效果如下：

小結 :

• 加了標題的文字會變的加粗，字號也會依次變大
• 一行是只能放一個標題的

     傳智播客學前端，
　　 前端入門亦簡單，
　　 簡單知識簡單看，
　　 重點勤練寫三遍，
　　 標題一共六級選，
　　 具體效果重繪見，
　　        ------pink老師

2）段落標簽p ( 熟記)

單詞縮寫： paragraph 段落 [?p?r?gr?f] 無須記這個單詞

作用語意：

可以把 HTML 檔案分割為若干段落

在網頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，而段落的標簽就是

<p>  文本內容  </p>

是HTML檔案中最常見的標簽，默認情況下，文本在一個段落中會根據瀏覽器視窗的大小自動換行，

3）水平線標簽hr(認識)

單詞縮寫： horizontal 橫線 [?h?r??zɑntl] 同上

在網頁中常常看到一些水平線將段落與段落之間隔開，使得檔案結構清晰，層次分明，這些水平線可以通過插入圖片實作，也可以簡單地通過標簽來完成，

<hr />是單標簽

在網頁中顯示默認樣式的水平線，

課堂練習:新聞頁面

4）換行標簽br (熟記)

單詞縮寫： break 打斷 ,換行

在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然后自動換行，如果希望某段文本強制換行顯示，就需要使用換行標簽

<br />

這時如果還像在word中直接敲回車鍵換行就不起作用了，

此處有練習題

5）div 和 span標簽(重點)

div span 是沒有語意的 是我們網頁布局主要的2個盒子 想必你聽過 css+div

div 就是 division 的縮寫 分割， 磁區的意思 其實有很多div 來組合網頁，

span 跨度，跨距；范圍

語法格式：

<div> 這是頭部 </div>    <span>今日價格</span>

他們兩個都是盒子，用來裝我們網頁元素的， 只不過他們有區別，現在我們主要記住使用方法和特點就好了

• div標簽 用來布局的，但是現在一行只能放一個div
• span標簽 用來布局的，一行上可以放好多個span

后面后面講顯示模式的時候，會告訴大家

排版標簽總結

1.2 文本格式化標簽(熟記)

在網頁中，有時需要為文字設定粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示，

區別：

b 只是加粗 strong 除了可以加粗還有 強調的意思， 語意更強烈，

剩下的同理...

請同學們重點記住 前兩組 加粗 和 傾斜 后面兩組沒記住回來查

1.3 標簽屬性

所謂屬性就是外在特性 比如 手機的顏色 手機的尺寸 ，總結就是手機的，，

• 手機的顏色是黑色
• 手機的尺寸是 8寸
• 水平線的長度是 200
• 圖片的寬度 是 300

使用HTML制作網頁時，如果想讓HTML標簽提供更多的資訊，可以使用HTML標簽的屬性加以設定，其基本語法格式如下：

<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>
<手機 顏色="紅色" 大小="5寸">  </手機>

1.4 影像標簽img (重點)

單詞縮寫： image 影像

要想在網頁中顯示影像就需要使用影像標簽，接下來將詳細介紹影像標簽以及和他相關的屬性，（它是一個單身狗）

語法如下：

<img src=https://www.cnblogs.com/jiexiaobai/p/"影像URL" />

該語法中src屬性用于指定影像檔案的路徑和檔案名，他是img標簽的必需屬性，

<

border 后面我們會用css來做，這里童鞋們就記住這個border 單詞就好了

**注意: **

1. 標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面，
2. 屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開，
3. 采取 鍵值對 的格式 key="value" 的格式

比如:

	正常的<br />
    <img src=https://www.cnblogs.com/jiexiaobai/p/"cz.jpg" width="300" height="300" />

     帶有邊框的

    

	有提示文本的

	

	有替換文本的

	

此處有練習題

重點掌握點：

• [ ] 請說出 影像標簽那個屬性是必須要寫的？
• [ ] 請說出 影像標簽中 alt 和 title 屬性區別？

1.5 鏈接標簽(重點)

單詞縮寫： anchor 的縮寫 [???k?(r)] ，基本解釋 錨, 鐵錨 的

在HTML中創建超鏈接非常簡單，只需用標簽把文字包括起來就好，

語法格式：

<a href=https://www.cnblogs.com/jiexiaobai/p/"跳轉目標" target="目標視窗的彈出方式">文本或影像

注意：

1. 外部鏈接 需要添加 http:// www.baidu.com
2. 內部鏈接 直接鏈接內部頁面名稱即可 比如 < a href=https://www.cnblogs.com/jiexiaobai/p/"index.html"> 首頁
3. 如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href=https://www.cnblogs.com/jiexiaobai/p/"#")，表示該鏈接暫時為一個空鏈接，
4. 不僅可以創建文本超鏈接，在網頁中各種網頁元素，如影像、表格、音頻、視頻等都可以添加超鏈接，

重點掌握點：

• [ ] 請說出 鏈接標簽那個屬性是必須要寫的？
• [ ] 請說出 如何新視窗打開這個一個鏈接網頁的？

1.6 注釋標簽

在HTML中還有一種特殊的標簽——注釋標簽，如果需要在HTML檔案中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽，

簡單解釋：

注釋內容不會顯示在瀏覽器視窗中，但是作為HTML檔案內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到，

語法格式：

    <!-- 注釋陳述句 -->     快捷鍵是：    ctrl + /       或者 ctrl +shift + / 

注釋重要性：

pink老師 一句話說出他們:

注釋是給人看的，目的是為了更好的解釋這部分代碼是干啥的， 程式是不執行這個代碼的

團隊約定

一般用于簡單的描述，如某些狀態描述、屬性描述等

注釋內容前后各一個空格字符，注釋位于要注釋代碼的上面，單獨占一行

推薦：

<!-- Comment Text -->
<div>...</div>

不推薦：

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>

2. 路徑(重點、難點)

實際作業中，我們的檔案不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個檔案夾來管理他們，

**目錄檔案夾： **

就是普通檔案夾，里面只不過存放了我們做頁面所需要的 相關素材，比如 html檔案， 圖片 等等，

**根目錄 **

打開目錄檔案夾的第一層 就是 根目錄

頁面中的圖片會非常多， 通常我們再新建一個檔案夾專門用于存放影像檔案（images），這時再插入影像，就需要采用“路徑”的方式來指定影像檔案的位置，路徑可以分為： 相對路徑和絕對路徑

相對路徑

以參考檔案之網頁所在位置為參考基礎，而建立出的目錄路徑，因此，當保存于不同目錄的網頁參考同一個檔案時，所使用的路徑將不相同，故稱之為相對路徑，

路徑分類	符號	說明
同一級路徑		只需輸入影像檔案的名稱即可，如<img src=https://www.cnblogs.com/jiexiaobai/p/"baidu.gif" />，

|
| 下一級路徑 | “/” | 影像檔案位于HTML檔案同級檔案夾下（例如檔案夾名稱為：images） 如<img src=https://www.cnblogs.com/jiexiaobai/p/"images/baidu.gif" />， <

|
| 上一級路徑 | “../” | 在檔案名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推， 如<img src=https://www.cnblogs.com/jiexiaobai/p/"../baidu.gif" />，

|

**pink老師 一句話說出他們: **

相對路徑，是從代碼所在的這個檔案出發， 去尋找我們的目標檔案的，而 我們所說的 上一級 下一級 同一級 簡單說，就是 圖片 位于 HTML 頁面的位置

絕對路徑

絕對路徑以Web站點根目錄為參考基礎的目錄路徑，之所以稱為絕對，意指當所有網頁參考同一個檔案時，所使用的路徑都是一樣的，

“D:\web\img\logo.gif”，或完整的網路地址，例如“http://www.itcast.cn/images/logo.gif”，

注意：

絕對路徑用的較少，我們理解下就可以了， 但是要注意，它的寫法 特別是符號 \ 并不是 相對路徑的 /

3. 今日總結

總結今天的思路貫穿線：

4. 綜合案例： 圣誕

5. @拓展閱讀

5.1 錨點定位 （難點）

通過創建錨點鏈接，用戶能夠快速定位到目標內容，

創建錨點鏈接分為兩步：

1. 使用相應的id名標注跳轉目標的位置， (找目標)
  <h3 id="two">第2集</h3> 

2. 使用<a href=https://www.cnblogs.com/jiexiaobai/p/"#id名">鏈接文本創建鏈接文本（被點擊的） （拉關系）  我也有一個姓畢的姥爺..
     

<base target="_blank" />

 標簽可定義預格式化的文本，


被包圍在 
 標簽 元素中的文本通常會保留空格和換行符，而文本也會呈現為等寬字體，

```html

  此例演示如何使用 pre 標簽

  對空行和 空格

  進行控制



**pink老師 一句話說出他們:**

> 所謂的預格式化文本就是 ，按照我們預先寫好的文字格式來顯示頁面， 保留空格和換行等， 

有了這個標簽，里面的文字，會按照我們書寫的模式顯示，不需要段落和換行標簽了，但是，比較少用，因為不好整體控制，



#### 5.4 特殊字符 （理解）

 一些特殊的符號，我們再html 里面很難或者 不方便直接 使用， 我們此時可以使用下面的替代代碼，

![](https://img2018.cnblogs.com/blog/1805572/202002/1805572-20200209132850755-1723836838.png)



**雖然有很多，但是我們平時用的比較較少， 大家重點記住   空格    大于號 小于號   就可以了，剩下的回來查閱，**

**總結：**

1. 是以**運算子**`&`開頭,以**分號運算子**`;`結尾，
2. 他們不是標簽，而是符號，
3. HTML 中不能使用小于號 “<” 和大于號 “>”特殊字符，瀏覽器會將它們作為標簽決議，若要正確顯示，在 HTML 源代碼中使用字符物體

**團隊約定**

   *推薦：*


more >>

   *不推薦：*


more >> 


#### 5.5 html5發展之路



 ![](https://img2018.cnblogs.com/blog/1805572/202002/1805572-20200209132913125-1008290626.png)





#### 5.6 什么是XHTML

XHTML 是更嚴格更純凈的 HTML 代碼，

- XHTML 指**可擴展超文本標簽語言**（EXtensible HyperText Markup Language），
- XHTML 的目標是取代 HTML，
- XHTML 與 HTML 4.01 幾乎是相同的，
- XHTML 是更嚴格更純凈的 HTML 版本，
- XHTML 是作為一種 XML 應用被重新定義的 HTML，
- XHTML 是一個 W3C 標準，

#### 5.7 HTML和 XHTML之間有什么區別?

- XHTML 指的是可擴展超文本標記語言
- XHTML 與 HTML 4.01 幾乎是相同的
- XHTML 是更嚴格更純凈的 HTML 版本
- XHTML 是以 XML 應用的方式定義的 HTML
- XHTML 是 2001 年 1 月發布的 W3C 推薦標準
- XHTML 得到所有主流瀏覽器的支持
- XHTML 元素是以 XML 格式撰寫的 HTML 元素，XHTML是嚴格版本的HTML，例如它要求標簽必須小寫，標簽必須被正確關閉，標簽順序必須正確排列，對于屬性都必須使用雙引號等，

# 6. @深入閱讀

[HTML5的崛起之路](http://www.chinaz.com/manage/2015/0720/424831.shtml)

# 7. 預習內容

- 表格標簽

- 能夠通過表格標簽能夠寫出一個簡版表格資料展示 

  例如： 

  ![](https://img2018.cnblogs.com/blog/1805572/202002/1805572-20200209132929849-1559868379.png)



    可以把你今天學習的內容放在表格內，再次作為總結





      
  
      轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/75954.html
      
標籤：Html/Css 
      
上一篇：【01】HTML_day01_02-認識HTML
下一篇：PS切圖工具