亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

五月的夏天 · 更新于 2020-11-04

HTML 基本語法

HTML 它有屬于它自己的一套專屬語法。我們如果想要編寫一個完整的網頁，那么我們就必須遵循 HTML 的語法來編寫代碼，HTML 都是由各種標簽構成的，我們只需要記住這些標簽的寫法和意義，那么我們就可以編寫網頁的基本結構了。

HTML 文件都由不同的標簽構成的：

  <!DOCTYPE HTML>
    <HTML lang="en">
    <head>
      <title>HTML基本語法</title>
    </head>
    <body>
      <p>這是一段話</p>
      <h1>我是一個大標題</h1>
      <a href="https://www.baidu.com">百度</a>
    </body>
    </HTML>

1. HTML 的構成

HTML 文件都是由標簽構成的，大部分標簽都是雙標簽，由頭標簽和尾標簽組成，小部分標簽為單標簽，沒有尾標簽。每個標簽有特定的作用，例如，代表“連接”的 a 標簽，代表“圖片”的 img 標簽等。

2. 標簽的基本寫法

2.1 雙標簽的寫法

  <p>
  這是一段話
  </p>

總結: 雙標簽是成對出現的， 尾標簽在標簽名前會多一個/。

2.2 單標簽的寫法

<img src='http://www.xianlaiwan.cn/static/img/index/logo.png' alt='慕課logo'>

總結：單標簽沒有尾標簽。

3. 標簽的內容和屬性

3.1 標簽的內容

標簽的內容寫在頭標簽和尾標簽之間， 代表這段內容由特定的標簽修飾。

  <p>
  這是一段話 <!-- 這段為p標簽的內容 -->
  </p>

Tips：單標簽沒有內容，因為它沒有尾標簽，通常我們指的是雙標簽之間的內容。

3.2 標簽的屬性

標簽的屬性，如果是標簽為雙標簽，則屬性寫在頭標簽中（頭標簽的<>內）， 如果是單標簽，則寫在標簽的<>內。

 <a href='https://www.baidu.com'>百度</a> <!-- 雙標簽的屬性寫在頭標簽的<>內 -->
 <img src='http://www.xianlaiwan.cn/static/img/index/logo.png' alt='慕課logo'> <!-- 單標簽的屬性寫在標簽的<>內 -->

總結：標簽的屬性有三部分構成，屬性名，等號，屬性值，等號左邊的為屬性名，等號右邊的為屬性值，屬性值必須由引號引起來，單引號和雙引號都可以。標簽的屬性用來給標簽添加屬性，讓標簽有特點的作用。

4. HTML 標簽的關系

4.1 嵌套關系

一組標簽寫在另外一組標簽之間，充當了另外一組標簽的內容。例如：

<div>
  <p>
    我是一個p標簽  
  </p>
</div>

標簽與標簽之間是可以嵌套的，但先后順序必須保持一致。

4.2 并列關系

一組標簽和另外一組標簽平級，沒有任何的嵌套關系。例如：

<div>
    我是一個div標簽
</div>
<p>
    我是一個p標簽
</p>

Tips：HTML 標簽只有兩種關系，要么是嵌套關系，要么是并列關系。

5. 標簽的注意事項

HTML標簽不區分大小寫，<p> 和 <P> 是一樣的，但建議小寫，因為大部分程序員都以小寫為準。

6. 小結

  1. HTML 文件都由不同的標簽構成的。
  <!DOCTYPE HTML>
    <HTML lang="en">
    <head>
      <title>HTML基本語法</title>
    </head>
    <body>
      <p>這是一段話</p>
      <h1>我是一個大標題</h1>
      <a href="https://www.baidu.com">百度</a>
    </body>
    </HTML>
  1. 標簽分為雙標簽和單標簽。
  <!-- img標簽為單標簽，沒有尾標簽和內容 -->
  <img src='http://www.xianlaiwan.cn/static/img/index/logo.png' alt='慕課logo'>

  <!-- p標簽為雙標簽，有尾標簽和內容 -->
  <p>這是一段話</p>
  1. 雙標簽都是成對出現的。
  <!-- p標簽為雙標簽，有尾標簽， 尾標簽多一個/ -->
  <p>這是一段話</p>
  1. 雙標簽具有內容和屬性。
  <!-- a標簽為雙標簽， href為標簽屬性， 百度為標簽的內容 -->
  <a href='https://www.baidu.com'>百度</a>
  1. 單標簽只有屬性，沒有內容。
  <!-- img標簽為單標簽， src和alt都為屬性，單標簽沒有內容 -->
  <img src='http://www.xianlaiwan.cn/static/img/index/logo.png' alt='慕課logo'>
  1. 標簽有且僅有嵌套和并列關系。
<!DOCTYPE HTML>
  <!-- head標簽和body標簽為并列關系， head和HTML、body和HTML均為嵌套關系 -->
  <HTML lang="en">
    <head>
      <title>HTML基本語法</title>
    </head>
    <body>
    </body>
  </HTML>

圖片描述