前端---HTML

Uzizi發表於2018-05-18
前端HTML

一、html檔案的基本結構

<!DOCTYPE html>  <!--html的文件宣告,宣告當前html文件的版本-->
<html>           <!--根標籤: html開始標籤 -->
    <head>       <!--html標籤中的第一個子標籤: head開始標籤-->
        <meta charset="UTF-8">    <!--單個標籤meta: 主要用於當前文件設定, 這裡設定的是文件的編碼格式 utf-8-->
        <title>Document</title>   <!--title標籤: 主要用於設定當前文件標題-->
    </head>      <!--html標籤中的第一個子標籤: head結束標籤-->
    <body>       <!--html標籤中的第二個子標籤: body開始標籤-->

    </body>      <!--html標籤中的第二個子標籤: body結束標籤-->
</html>          <!--根標籤: html結束標籤 -->

二、標籤的分類

標籤按照顯示的不同, 可以分為兩類:

  • 塊元素 (行元素)
  • 內聯元素 (行內元素)

1、塊元素的特點:

  • 單個塊元素在瀏覽器中預設獨佔一行
  • 兩個塊元素不能夠在一行顯示, 他們會自動換成兩行顯示
  • 塊元素可以設定寬高等屬性.

2、內聯元素:

  • 多個內聯元素可以在一行顯示
  • 內聯元素不能夠設定寬高, 設定了也沒有用, 不會顯示出效果
  • 內聯元素的寬高由他們本身的內容多少來支撐, 內容多,寬高自動增加.

3、常見的塊標籤

（1）、標題標籤

表示文件的標題, 除了具有塊元素基本特徵, 還含有預設的外邊距

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

（2）、段落標籤

表示文件中的一個文欄位落, 除了具有塊元素基本特徵, 還含有預設的外邊距

<p>
    既然你誠心誠意的問了， 
    我們就大發慈悲的告訴你！ 
    為了防止世界被破壞， 
    為了守護世界的和平； 
    貫徹愛與真實的邪惡， 
    可愛又迷人的反派角色~~ 
    武藏！ 
    小次郎！ 
    我們是穿梭在銀河的火箭隊！白洞，白色的明天在等著我們！！ 
    就是這樣~喵~~~~ 
</p>

段落標籤中如果想要強制換行,需要使用<br>標籤, 這個標籤是個單個標籤,所以只有一個.

另外在html中, 如果想要寫大於號, 小於號, 或者空格等, 需要使用程式碼來實現, 這樣更加優雅~
程式碼實現大於號:  &gt;
程式碼實現小於號:  &lt;
程式碼實現空格:    &nbsp;

（3）、通用塊容器標籤 div

表示文件中的一塊內容，具有塊元素基本特徵，沒有其他預設樣式

<div>這是一個div元素</div>
<div>這是第二個div元素</div>
<div>
    <h3>自我介紹</h3> 
    <p>
        姑娘貌美一枝花，才學素養人品佳。
        活潑開朗不八卦，頭腦敏銳有想法。
        踏實奮進不做假，樂於求知肯深挖。
        舞文弄墨擅策劃，慧心妙舌喜表達。
        交友廣泛愛分享，微博日日落不下。
        四年深造象牙塔，學習實踐兩手抓。
        只待應屆招聘季，我花開後百花殺。
    </p>
</div>

4、常見內聯元素標籤

（1）、超連結標籤 a

連結到另外一個網頁，具有內斂元素基本特徵，預設文字藍色，有下劃線

<a href="02.html">第二個網頁</a>
<a href="http://www.baidu.com">百度網站</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""></a>
<a href="#">預設連結</a>

<a href="http://www.itcast.cn">原來的視窗開啟介面</a>
<a href="www.baidu.com" target="_blank">新視窗開啟介面</a>

說明:

  • a 標籤的 href 屬性可以新增 # 號, 這個是預設連結地址:

  • 不確定地址時, 我們可以臨時使用 # 來佔位,確定後替換即可

  • 如果想要跳轉到當前頁面的最上方時, 可以使用 #
  • a 標籤有 target 屬性
    • 如果不設定該屬性, 在當前頁面開啟新頁面
    • 如果設定該屬性, 則會在新視窗中開啟新頁面

（2）、通用內聯容器標籤 span

具有內聯元素基本特徵，沒有其他預設樣式
我們一般在文欄位落的中間部分強調某一部分的時候呼叫span,新增樣式,從而改變強調的部分的樣式:
例如: 這是一段文字,其中梅總需要強調,所以我們可以使用span來完成強調的操作.

<p>這是一個段落文字, 段落文字中有<span>特殊標誌或者樣式<span>的文字</p>

（3）、圖片標籤 img

在網頁中插入圖片，具有內聯元素基本特性，但是它支援寬高設定

<img src="images/pic.png" alt="圖片">

說明:

  • src屬性主要是新增要展示的圖片地址
  • alt屬性的作用:
    • 圖片載入失敗時, 顯示的提示資訊
    • 搜尋引擎在收錄圖片時, 根據這個屬性值來收錄圖片
    • 製作無障礙網頁, 方便盲人的讀屏軟體讀取.

（4）、特殊的一些標籤

空格: 在html中, 空格一般會用:  表示

回車: 在html中回車換行一般用
表示

小於號( < ): 在html中一般用<表示

大於號( > ): 在html中一般用>表示

刪除標籤: del 或者 ( s )

傾斜標籤: em 或者 ( i )

下劃線標籤: ins 或者 ( u )

三、標籤總結

  • HTML 整體是由標籤組成的, 各個標籤的功能很多都是重複的
  • 同學們學習標籤用法的時候多多練習即可
  • 標籤整體分為: 塊級標籤 和 行內標籤
    • 塊級標籤可以設定寬高值, 獨佔一行
    • 行內標籤自動設定寬高值, 一行內可以有多個
    • 一般來說, 塊級元素可以包含行內元素,行內元素不能包含塊級元素.
    • 特殊情況, 需要記住: p 標籤不能巢狀 div
  • a 標籤用於跳轉(超連結) [跳轉網頁, 跳轉頁面, 跳轉檔案等] target屬性為blank時，跳轉新頁面，設為空，當前頁面開啟
  • 標題標籤用於設定標題, 共有6級
  • div就是一個無色透明的容器,看不見,摸不到
  • img標籤主要用於設定圖片
  • p 標籤就是paragraph(段落) 通常用於包裹段落
  • span是一個行內元素通常用於p標籤內部,個別文字設定時使用.
  • ol li有序列表
  • ul li無序列表
  • label 表單

四、塊級元素和內聯元素的巢狀規則：

  • 最基本：內聯不能巢狀塊級，塊級可以巢狀內聯元素
   <div><h1></h1><p></p></div>    正確（塊級並列）
　  <span></span></a>    正確（內聯巢狀內聯）
　　<span><div></div></span>    錯誤（內聯巢狀塊級）
  • 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：h1、h2、h3、h4、h5、h6、p、dt。所以說p裡面不能巢狀div，就是我犯的錯誤。
 <p><ol><li></li></ol></p>—— 錯
 <p><div></div></p>—— 錯
  • 特殊的
  • 裡面可以巢狀div（
  • 可以但

    不行）

  • 塊級元素與塊級元素並列、內聯元素與內聯元素並列
<div><h2></h2><p></p></div>　　正確
<div><a href="#"></a><span></span></div>　　正確
<div><h2></h2><span></span></div>　　錯誤（塊級和內聯並列了）　

五、標籤語義化

在佈局中需要儘量使用帶語義的標籤, 使用帶語義的標籤的目的首先是為了讓搜尋引擎能更好的理解網頁的結構,提高網站在搜尋中的排名(也叫作SEO), 其次是方便程式碼的閱讀和維護
帶語義的標籤:

  • h1 —- h6: 表示標題
  • p: 表示段落
  • img : 表示圖片
  • a: 表示連結

不帶語義 的標籤:

  • div: 表示一個容器
  • span: 表示行內的一塊內容

所以我們要根據網頁上顯示的內容, 使用合適的標籤, 可以優化之前的程式碼.

相關文章