HTML入门详解（二）

接上文，一对标签需要一个起始标签和一个结束标签，结束标签开头是一个 / 来表示这对标签的结束，元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容，空元素在开始标签中进行关闭，大多数 HTML 元素可拥有属性。

那么html有哪些基本标签在本文中进行列举。

编写HTML推荐使用vscode，它是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

• 标题通过<h1> - <h6> 标签来定义。

  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>

  效果如图，每个标题独占一行。
• 段落通过标签 <p> 来定义。

  <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
  <p>这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落</p>
  

  效果如图，会自动换行，每个段落独占一行。

• 链接通过标签 <a> 来定义，链接写在a标签的href属性中，target属性代表打开资源的方式，默认值是本窗口打开，还可以_blank定义新窗口打开。

  <a href="http://www.baidu.com">跳转到百度</a>

  效果如图所示，点击后在当前页面跳转到百度。通过a标签可以实现锚点，首先定义一些标题或段落，定义第一个元素的name属性，然后将a标签的href属性设置为#+同样的值，若想跳转到其他页面某个锚点上，则href设置为：页面#锚点name值。

  <h1 name="top">h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
      <p>这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落</p>
      <a href="#top">回到开始</a>

  效果如图，点击链接可以回到第一个h1。

• 图像是通过标签 <img> 来定义。

  <img src="../../百度图标.png" alt="">

  其中src是图片的路径，效果如图。

• 水平线通过<hr>标签来定义，<hr>标签是一个单标签，中间不可以添加内容，严谨一些写为<hr/>。

      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
      <hr>
      <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
  

  效果如图。

• 不产生一个新段落的情况下进行换行通过<br>标签实现，同样是一个单标签，中间不可以添加内容，严谨一些写为<br/>。

      <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落<br>
          这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

  效果如图。

• 使用标签 对输出的文本进行格式化，<b>标签定义粗体文本，<i>标签定义斜体，还有<em>定义着重文字，<small>定义小号字，<strong>定义加重语气等。

      <em>你好</em>
      <i>你好</i>
      <small>你好</small>
      <strong>你好</strong>
      <sub>你好</sub>
      <sup>你好</sup>
      <ins>你好</ins>
      <del>你好</del>

  效果如图。

• 表格由 <table> 标签定义，每个表格均有若干行，由 <tr> 标签定义；每行被分割为若干单元格，由 <td> 标签定义；表格可以包含标题行<th>用于定义列的标题，可见表格包含两个主要部分：标题和表格内容，那么<thead > 用于定义表格的标题部分，<tbody > 用于定义表格的主体部分。

   <table>
          <thead>
              <tr>
                  <td>标题1</td>
                  <td>标题2</td>
                  <td>标题3</td>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>第一行第一列</td>
                  <td>第一行第二列</td>
                  <td>第一行第三列</td>
              </tr>
              <tr>
                  <td>第二行第一列</td>
                  <td>第二行第二列</td>
                  <td>第二行第三列</td>
              </tr>
              <tr>
                  <td>第三行第一列</td>
                  <td>第三行第二列</td>
                  <td>第三行第三列</td>
              </tr>
          </tbody>
      </table>

  效果如图。若想显示边框，可以设置表格border="1"，即<table border="1"></table>，效果如图。

• 无序列表使用 <ul> 标签，有序列表使用 <ol> 标签，每个列表项使用 <li> 标签，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

      <ul>
          <li>第一项</li>
          <li>第二项</li>
          <li>第三项</li>
      </ul>
  
      <ol>
          <li>第一项</li>
          <li>第二项</li>
          <li>第三项</li>
      </ol>

  效果如图。

• 大多数 HTML 元素被定义为块级元素或内联元素，块级元素在浏览器显示时，通常会以新行来开始，内联元素在显示时通常不会以新行开始。

• 可以通过<div>标签和<span>标签来对HTML分块， <div> 元素是块级元素，<span> 元素是内联元素，它们可用于组合其他 HTML 元素的容器，没有特定的含义。<div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。<span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。

      <div>第一块div</div>
      <div>第二块div</div>
      <span>第一块span</span>
      <span>第二块span</span>

  效果如图。

• <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法。<input>是表单控件元素，其中，属性有
  • type：可以设置控件类型，参数：
    • text:单行文本框，password :密码框，radio:单选框，checkbox:复选框，file:文件上传器，submit:提交按钮，button:普通按钮，reset:重置按钮，color:颜色拾取器，number:数字输入框，range:滑块，date:日期控件，time :时间控件，datetime-local :本地日期时间控件month:月控件，week:周控件。
  • name:设置控件名称。
  • value:设置控件的值。
  • min:数字最小值，当类型是number/range。
  • max:数字最大值，当类型是number/range。
  • step:数字步长值，当类型是number/range。
  • checked :是否黑认选中，当类型是radio/checkbox。
  • disabled:是否可用。
  • readonly:是否只读。

    <form action="/" method="post">
        <!-- 文本输入框 -->
        <label for="name">用户名:</label>
        <input type="text" id="name" name="name" required>
    
        <br>
    
        <!-- 密码输入框 -->
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
    
        <br>
    
        <!-- 单选按钮 -->
        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
    
        <br>
    
        <!-- 复选框 -->
        <input type="checkbox" id="subscribe" name="subscribe" checked>
        <label for="subscribe">订阅推送信息</label>
    
        <br>
    
        <!-- 下拉列表 -->
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>
    
        <br>
    
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>

    效果如图。