【01】HTML_day01_03-HTML經常使用標籤

時間 2020-02-10

標籤 html day01 day 經常使用標籤欄目 HTML 简体版

原文原文鏈接

typora-copy-images-to: mediacss

第01階段.前端基礎.HTML經常使用標籤html

學習目標

理解：
- 相對路徑三種形式
應用
- 排版標籤
- 文本格式化標籤
- 圖像標籤
- 連接
- 相對路徑，絕對路徑的使用

1. HTML經常使用標籤

首先 HTML和CSS是兩種徹底不一樣的語言，咱們學的是結構，就只寫HTML標籤，認識標籤就能夠了。不會再給結構標籤指定樣式了。前端

HTML標籤有不少，這裏咱們學習最爲經常使用的，後面有些較少用的，咱們能夠查下手冊就能夠了。html5

1.1 排版標籤

排版標籤主要和css搭配使用，顯示網頁結構的標籤，是網頁佈局最經常使用的標籤。web

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

後面後面講顯示模式的時候，會告訴你們

排版標籤總結

標籤名	定義	說明
	標題標籤	做爲標題使用，而且依據重要性遞減
	段落標籤	能夠把 HTML 文檔分割爲若干段落
	水平線標籤	沒啥可說的，就是一條線
	換行標籤
	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="圖像URL" />

該語法中src屬性用於指定圖像文件的路徑和文件名，他是img標籤的必需屬性。

border 後面咱們會用css來作，這裏童鞋們就記住這個border 單詞就行了

注意:

標籤能夠擁有多個屬性，必須寫在開始標籤中，位於標籤名後面。
屬性之間不分前後順序，標籤名與屬性、屬性與屬性之間均以空格分開。
採起鍵值對的格式 key="value" 的格式

好比:

正常的<br />
    <img src="cz.jpg" width="300" height="300" /><br />
     帶有邊框的<br />
    <img src="cz.jpg" width="300" height="300" border="3" /><br />
    有提示文本的<br />
    <img src="cz.jpg" width="300" height="300" border="3" title="這是個小蒲公英" /><br />
    有替換文本的<br />
    <img src="cz.jpg" width="300" height="300" border="3" alt="圖片不存在" />

此處有練習題

重點掌握點：

[ ] 請說出圖像標籤那個屬性是必需要寫的？
[ ] 請說出圖像標籤中 alt 和 title 屬性區別？

1.5 連接標籤(重點)

單詞縮寫： anchor 的縮寫 [ˈæŋkə(r)] 。基本解釋錨, 鐵錨的

在HTML中建立超連接很是簡單，只需用標籤把文字包括起來就好。

語法格式：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

屬性	做用
href	用於指定連接目標的url地址，（必須屬性）當爲標籤應用href屬性時，它就具備了超連接的功能
target	用於指定連接頁面的打開方式，其取值有_self和_blank兩種，其中_self爲默認值，__blank爲在新窗口中打開方式。

注意：

外部連接須要添加 http:// www.baidu.com
內部連接直接連接內部頁面名稱便可好比 < a href="index.html"> 首頁
若是當時沒有肯定連接目標時，一般將連接標籤的href屬性值定義爲「#」(即href="#")，表示該連接暫時爲一個空連接。
不只能夠建立文本超連接，在網頁中各類網頁元素，如圖像、表格、音頻、視頻等均可以添加超連接。

重點掌握點：

[ ] 請說出連接標籤那個屬性是必需要寫的？
[ ] 請說出如何新窗口打開這個一個連接網頁的？

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="baidu.gif" />。

|
| 下一級路徑 | 「/」 | 圖像文件位於HTML文件同級文件夾下（例如文件夾名稱爲：images）如<img src="images/baidu.gif" />。 <

|
| 上一級路徑 | 「../」 | 在文件名以前加入「../」，若是是上兩級，則須要使用「../ ../」，以此類推，如<img src="../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="#id名">連接文本</a>建立連接文本（被點擊的） （拉關係）  我也有一個姓畢的姥爺..
  <a href="#two">

快速記憶法：

比如找我的辦事，首先找到他，而後拉關係，最後看效果。

5.2 base 標籤

語法：

<base target="_blank" />

總結：

base 能夠設置總體連接的打開狀態
base 寫到之間
把全部的鏈接都默認添加 target="_blank"

pink老師一句話說出他們:

全體連接~ 到 ~ 全體集合全部連接以新窗口打開頁面 ~ 是

5.3 預格式化文本pre標籤

標籤可定義預格式化的文本。

被包圍在

標籤元素中的文本一般會保留空格和換行符。而文本也會呈現爲等寬字體。

pink老師一句話說出他們:

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

有了這個標籤，裏面的文字，會按照咱們書寫的模式顯示，不須要段落和換行標籤了。可是，比較少用，由於很差總體控制。

5.4 特殊字符（理解）

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

雖然有不少，可是咱們平時用的比較較少，你們重點記住空格大於號小於號就能夠了，剩下的回來查閱。

總結：

是以運算符開頭,以分號運算符結尾。
他們不是標籤，而是符號。
HTML 中不能使用小於號「<」和大於號「>」特殊字符，瀏覽器會將它們做爲標籤解析，若要正確顯示，在 HTML 源代碼中使用字符實體

團隊約定

推薦：

不推薦：

5.5 html5發展之路

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，例如它要求標籤必須小寫，標籤必須被正確關閉，標籤順序必須正確排列，對於屬性都必須使用雙引號等。