body中標籤的分類

• 1.行內標籤
• 2.塊級標籤

1.行內標籤

(1)常用的行內標籤

   <span>   <a>   <em>   <i>   <strong>   <b>

  特點:

•    在一行內顯示,不換行
•    不能設定寬高,如果不設定寬高,預設是內容的寬高

 **行內塊標籤: img input

特點:

•     行內顯示
•     可以設定寬高

(2) <span> 標籤

span 表達"小區域,小跨度" 是一個文字級標籤

span裡面只能放置文字,圖片,表單元素.span裡面不能放p,h,ui,dl,ol.div

(3)<a> 標籤 

   <a href="https://image.baidu.com/">點選進入百度圖片</a>

a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文字級的標籤。href是英語hypertext reference

返回頂部

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

超連結的屬性

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

blank就是“空白”的意思，就表示新建一個空白視窗。為啥有一個_ ，就是規定，沒啥好解釋的。
也就是說，如果不寫target=”_blank”

(4)<img> 標籤

能插入的圖片型別

• 能夠插入的圖片型別是：jpg(jpeg)、gif、png、bmp。型別和型別之間有什麼區別，css課上講。

• 不能往網頁中插入的圖片格式是：psd、ai

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

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

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

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

<img src="images/1.jpg">
#當前頁面有一個並列的資料夾images，在資料夾images中存放了一張圖片1.jpg

絕對路徑

網路路徑

<img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b12ec0dd93510fb367197197e932c893/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg" height = "100">

• width： 寬度
• height：高度
• title：提示性文字。公有屬性。也就是滑鼠懸停時出現的文字。
• align：指圖片的水平對齊方式，屬性值可以是：left、center、right

• alt： 當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate “替代”的意思。（有的瀏覽器不支援）

另外:

注意事項：

• 如果要想保證圖片等比例縮放，請只設置width和height中其中一個。
• 如果想實現圖文混排的效果，請使用align屬性，取值為left或right

點選圖片的時候跳轉到某個連結，應該是：

       <a href="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b12ec0dd93510fb367197197e932c893/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg">
            <img src="./圖片/fengjing.jpg" alt="風景" height = "100">
            <img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b12ec0dd93510fb367197197e932c893/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg" height = "100">
        </a>
        

(4) <em>   <i>   <strong>   <b>

• 斜體標籤  <em>   <i>  
• 粗體標籤 <strong>   <b>

倚天圖屠龍記
<b>倚天圖屠龍記</b>
<strong>倚天圖屠龍記</strong>

 2. 塊級標籤

(1)常用塊級標籤

h1 - h6    <div>   <p>    <ul>  <ol>  <dl>   <table>    <form>   <input>

特點:

• 獨佔一行
• 可以設定寬高,如果不設定,預設是父盒子寬的100%

(2)h1 - h6 

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

    倚天屠龍記
    <!--h1 只允許頁面中只有一個:為了seo和爬蟲-->
    <h1>倚天屠龍記</h1>
    <h2>倚天屠龍記</h2>
    <h3>倚天屠龍記</h3>
    <h4>倚天屠龍記</h4>
    <h5>倚天屠龍記</h5>
    <h6>倚天屠龍記</h6>

(3) div

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

div標籤的屬性：

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