02.HTML基礎標簽

  • HTML標題：

    1. 標題在body內，是以標簽<h1>-<h6>構成（依次減小）
    2. 默認情況，HTML會自動在塊級元素下加一個空行，比如標題，段落等
    3. 標題不只是簡單的字體加粗，搜索引擎通過標題編制索引,用戶通過標題快速瀏覽網頁,標題的重要度自H1到H6依次降低
    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>heading</title>
  </head>
  <body>
      <h1>h1標題</h1>
      <h2>h2標題</h2>
      <h3>h3標題</h3>
      <h4>h4標題</h4>
      <h5>h5標題</h5>
      <h6>h6標題</h6>
  </body>
</html>
    image.png

  • HTML段落：

    1. 段落是以標簽<p>構成
    2. <p>為塊元素,在元素結束后,會默認添加一列空行
    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>paragraph</title>
  </head>
  <body>
      <p>段落p</p>
  </body>
</html>
    image.png

  • HTML鏈接：

    1. 鏈接是通過標簽<a>構成，href="xxx"是屬性,屬性值的表達方式
    2. 屬性在網頁中是非展示的內容，標簽中間內容為網頁展示內容
    3. a與img嵌套,可實現點擊圖片跳轉
    4. a標簽常用屬性:
      href:設置鏈接跳轉的路徑(可以是超鏈接,也可以時網址)
      target:設置鏈接點擊后,新網頁的打開方式(_blank即新窗口打開)
      name:設置錨點,id有同樣作用
    5. 通過name或id屬性設置錨點,通過#name或#id直接調賬到錨點所在目錄或文檔位置

    超鏈接 超文本 (hyper text)
    ? 超文本的基本特征就是可以超鏈接文檔
    ? 通過設置錨點將鏈接與存于某處的文檔關聯起來
    ? 實現當點擊鏈接時跳轉到相應文檔的功能
    ? 此文檔可存于網絡或本地,但和鏈接錨點有相同的錨點存在于文檔中
    ? 通常稱提供熱點和超鏈接的錨點為鏈接,而標記文檔部分的錨為錨

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>paragraph</title>
  </head>

  <body>
      <a href="http://www.lxweimin.com/" target="_blank">
          <img src="img/jianshu.png" />
      </a>
      <br /><br />
      <a href="#dest">跳轉</a>
      <p id="dest">跳轉到這里</p>
      <br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br />
  </body>
</html>
    test07.gif

  • HTML圖片：

    1. 圖片是以標簽<img>構成
    2. 和<body background="圖片地址">使用,可用作背景圖片
    3. img標簽常用屬性:
      ? src:指定獲取圖片的位置
      ? alt:當圖片無法顯示時,需要展示的內容(推薦使用)
      ? title:當鼠標放在圖片上時,彈出要顯示的內容(說明)
      ? width:圖片的顯示寬度
      ? height:圖片的顯示高度
    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>paragraph</title>
  </head>

  <body>
      <img src="img/big.png" alt="笑臉" title="原圖片" />
      <img src="img/big.png" width="100px" height="100px" title="自定義尺寸" />
  </body>
</html>
    test08.gif
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容