HTML 介绍

2021-04-12 web html

简单介绍常用的语法。

简介

Hyper Text Markup Language, HTML 超文本标记语言，不是编程语言，而是一种标记语言，通过一堆的标签来描述网页。标签通过尖括号包裹，例如 <h1>、<br/> 等，而且一般是成对出现的 <p>...</p> ，包括了开始以及结束标签。

如果不使用 CSS 进行定制，那么可以分成两类：

  • 块级元素 Block Elements，以块形式显示，会占用页面的全部宽度，出现在新的一行，例如 <div> <h1> <p> 等。
  • 内联元素 Inline Elements，通常在块级元素内，不会导致换行，只占用宽度，例如 <a> <img> <em> <strong> 等。

首先介绍一些常见的示例，然后再介绍基本概念。

示例

这里包含了绝大部分的简单示例。

<!DOCTYPE html>
<html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <head>
    <title>HTML Templates</title>
  </head>
  <body>
    <h1>Head Line One</h1>
    <h2>Head Line Two</h2>
    <h3>Head Line Three</h3>
    <h4>Head Line Four</h4>
    <h5>Head Line Five</h5>
    <h6>Head Line Six</h6>
    <p>This is my <strong>first</strong> paragraph.</p>
    <p>This is the <em>second</em> paragraph. Whatever is worth doing is worth doing well. 
	Which is searched from <a href="https://www.baidu.com" target="_black">www.baidu.com</a> site.</p>

    <!-- list -->
    <ul>
      <li>Line Item 1</li>
      <li>Line Item 2</li>
    </ul>

    <ol>
      <li>Line Item 1</li>
      <li>Line Item 2</li>
    </ol>

    <!-- table -->
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Second Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Abraham</td>
          <td>Lincoln</td>
          <td>23</td>
          <td>lincon@foobar.com</td>
        </tr>
        <tr>
          <td>Albert</td>
          <td>Einstein</td>
          <td>36</td>
          <td>albert@foobar.com</td>
        </tr>
        <tr>
          <td>Nikola</td>
          <td>Tesla</td>
          <td>74</td>
          <td>tesla@foobar.com</td>
        </tr>
      </tbody>
    </table>

    <!-- form -->
    <br/>
    <form action="/summit" method="POST">
      <div>
        <label>First Name:</label>
        <input type="text" name="first" placeholder="input your first name"/>
      </div>
      <div>
        <label>Last Name:</label>
        <input type="text" name="last" placeholder="input your last name"/>
      </div>
      <input type="submit" name="submit" value="submit"/>
    </form>

    <!-- images -->
    <img src="img/foobar.png" alt="this is a image" />

    <!-- javascript -->
    <script type="text/javascript">
      document.write("<h1>Hello World!</h1>")
    </script>
  </body>
</html>

元素

HTML 文件是由 HTML 元素组成，所谓的元素，包括了从开始标签到结束标签的所有内容，例如如下的最简单页面。

<html>
  <body>
    <p>This is my first paragraph.</p>
  </body>
</html>

其中包括了三个元素，分别为：

  • p 元素，也就是 <p>This is my first paragraph.</p> 。
  • body 元素，对应了 <body><p>This is my first paragraph.</p></body> 。
  • html 元素，所有的内容。

一般标签中也可以包含属性。

属性

HTML 标签可以拥有属性，提供与 HTML 元素相关更多的信息，必须以 Key/Value 的方式出现，而且，是定义在开始标签。

<h1 align="center">This is a heading</h1>
<a href="http://www.google.com">This is a link</a>

例如，上述的第二行如果点击会在本页面显示，那么可以增加 target="_blank" 表示在新页面显示。

最常用的属性有如下几种：

  • class 元素的类名。
  • id 元素的唯一标识。
  • style 元素的行内样式。
  • title 元素的额外信息，通常可以在工具提示中显示。

参考