程序开发与运维

HTML

Stone大约 8 分钟

HTML

HTML，全称为超文本标记语言（HyperText Markup Language）是一种用来结构化 Web 网页及其内容的标记语言。HTML 使用一系列的元素（Elements）和属性（Attributes）来描述网页的结构和内容。

HTML 元素

元素包括：

  1. 开始标签（Opening tag）：包含元素的名称，被 <、> 所包围。表示元素从这里开始或者开始起作用。
  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个 /。表示着元素的结尾。
  3. 内容（Content）：元素的内容，在开始标签与结束标签之间。
  4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素也可以有属性（Attribute）：

HTML 属性

属性包含了关于元素的一些额外信息。上图中 class 是属性名称，editor-note 是属性的值。

属性应该包含：

  1. 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格。
  2. 属性的名称，并接上一个等号。
  3. 由引号所包围的属性值。

VS Code

VS Code，即 Visual Studio Codeopen in new window，是微软发布的一款跨平台的源代码编辑器。它支持在 Windows、macOS 和Linux 等多个操作系统上运行，并且可以通过安装插件来扩展其功能，支持多种编程语言，最常用于前端开发。

在下载页面open in new window下载最新版 VS Code 进行安装。然后安装必要的插件，包括：

  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  • Live Server
  • open in browser
  • Error Lens

然后创建目录，使用 VS Code 打开，即可进行开发。

开始

在 VS Code 中，创建后缀名为 .html 的文件，然后键入 !，按下 ENTER 或者 TAB 键，即可快速生成 HTML 基本骨架。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

其中：

  • html：整个网页

  • head：网页头部，用来存放给浏览器看的信息，例如 CSS

    • title：网页标题

  • body：网页主体，用来存放给用户看的信息，例如图片、文字

注释

HTML 使用 <!-- --> 添加注释，在 VS Code 中使用 CTRL + / 添加删除注释。

<body>
  <!-- 我是注释 -->
</body>

标题

HTML 使用 h1 到 h6 标记标签内的内容为标题。

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

注意：

  • 标题标签文字会加粗且独占一行。
  • h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo。

段落

HTML 使用 p 标记标签内的内容为段落。

<body>
  <p>我是段落1</p>
  <p>我是段落2</p>
</body>

注意：

  • 段落独占一行
  • 段落之间存在间隙

换行

HTML 使用单标签 br 标记换行。

<body>
  第一行
  <br>
  第二行
</body>

水平线

HTML 使用单标签 hr 标记水平线。

<body>
  第一行
  <hr>
  第二行
</body>

加粗

HTML 使用 strong 或者 b 加粗文本。

<body>
  <strong>加粗</strong>
  <hr>
  <b>加粗</b>
</body>

倾斜

HTML 使用 em 或者 i 加粗文本。

<body>
  <em>倾斜</em>
  <hr>
  <i>倾斜</i>
</body>

下划线

HTML 使用 ins 或者 u 为文本添加下划线。

<body>
  <ins>下划线</ins>
  <hr>
  <u>下划线</u>
</body>

删除线

HTML 使用 del 或者 s 为文本添加删除线。

<body>
  <del>删除线</del>
  <hr>
  <s>删除线</s>
</body>

图像

HTML 使用 img 为网页插入图片。

<body>
  <img src="https://minio.stonecoding.net/picgo/202309211129115.png" alt="替换文本">
</body>

属性有：

  • src：指定图像的位置和名称，是 img 的必须属性。
  • alt：指定替换文本，图像无法显示时显示的文字。
  • title：指定提示文本，鼠标悬停在图片上时显示的文字。
  • width：指定图片宽度。
  • height：指定图片高度。

超链接

HTML 使用 a 指定内容为超链接。

<body>
  <a href="http://www.baidu.com">百度一下</a>
  <a href="http://www.baidu.com" target="_blank">百度一下</a>
  <a href="#">空链接</a>
  <a href="javascript:;" onclick="alert('Hello, world!');">点击我</a>
</body>

其中：

  • href：指定跳转地址，是超链接的必须属性。
  • target="_blank"：表示在新窗口打开链接。
  • href="#"：表示空链接，不会跳转。
  • href="javascript:;"：该链接在点击时不会导航到任何页面，而是触发与之关联的 JavaScript 代码（如果有的话）。不推荐使用。

音频

HTML 使用 audio 指定音频。

<body>
  <audio src="./双截棍.mp3" controls loop autoplay></audio>
</body>

其中：

  • src：指定音频文件地址，是 audio 的必须属性。
  • controls：显示音频控制面板。
  • loop：循环播放。
  • autoplay：自动播放。

提示：

书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

视频

HTML 使用 video 指定视频。

<body>
  <video src="./双截棍.mp4" controls loop muted autoplay></video>
</body>

其中：

  • src：指定视频文件地址，是 video 的必须属性。
  • controls：显示视频控制面板。
  • loop：循环播放。
  • muted：静音播放。
  • autoplay：在静音时自动播放。

列表

列表包括：

  • 无序列表
  • 有序列表
  • 定义列表

无序列表

HTML 使用 ul 指定无序列表，使用 li 指定列表条目。

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

其中：

  • ul 标签里面只能包含 li 标签。
  • li 标签里面可以包含任何内容。

有序列表

HTML 使用 ol 指定有序列表，使用 li 指定列表条目。

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

其中：

  • ol 标签里面只能包含 li 标签。
  • li 标签里面可以包含任何内容。

定义列表

HTML 使用 dl 指定定义列表，使用 dt 指定列表标题，使用 dd 指定列表描述。

<body>
  <dl>
    <dt>列表标题</dt>
    <dd>列表项1</dd>
    <dd>列表项2</dd>
  </dl>
</body>

其中：

  • dl 标签里面只能包含 dt 和 dd 标签。
  • dt 和 dd 标签里面可以包含任何内容。

表格

HTML 使用 table 指定表格，使用 tr 指定行，使用 th 指定表头行单元格，使用 td 指定内容行单元格。

<body>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>stone</td>
      <td>18</td>
    </tr>
  </table>
</body>

其中：

  • border：为表格添加边框线。

为 td 添加 rowspan 属性指定合并单元格数量，保留最上单元格，进行跨行合并单元格。

<body>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>stone</td>
      <td rowspan="2">18</td>
    </tr>
    <tr>
      <td>tom</td>
    </tr>
  </table>
</body>

为 td 添加 colspan 属性指定合并单元格数量，保留最左单元格，进行跨列合并单元格。

<body>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>stone</td>
      <td rowspan="2">18</td>
    </tr>
    <tr>
      <td>tom</td>
    </tr>
    <tr>
      <td colspan="2">最后一行</td>
    </tr>
  </table>
</body>

表单

HTML 使用表单收集用户信息。

input

HTML 使用 input 接受来自用户的数据，用于为基于 Web 的表单创建交互式控件。

input 标签使用 type 属性指定用户数据输入方式，主要有：

  • text：默认值，文本框，用于输入单行文本。
  • password：密码框。
  • radio：单选框。
  • checkbox：复选框。
  • file：上传文件。
<body>
  用户：<input type="text" placeholder="用户名不区分大小写">
  <br>
  密码：<input type="password" placeholder="密码区分大小写">
  <br>
  性别：
  <input type="radio" name="gender" checked>男
  <input type="radio" name="gender" >女
  <br>
  爱好：
  <input type="checkbox" checked>唱
  <input type="checkbox" checked>跳
  <input type="checkbox">篮球
  <br>
  头像：<input type="file" multiple>
</body>

其中：

  • placeholder：为 type="text" 和 type="password" 输入框的占位文本，表示提示信息。
  • name：为 type="radio" 单选框分组，具有相同 name 的单选框为一组，只能选择其中一个。
  • checked：表示默认选中。
  • multiple：表示可以上传多个文件。

下拉菜单

HTML 使用 select 指定下拉菜单，使用 option 指定下拉菜单条目。

<body>
  城市：
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option selected>重庆</option>
  </select>
</body>

其中：

  • selected：指定默认选中的条目。

文本域

HTML 使用 textarea 指定文本域，以便输入多行文本。

<body>
  <textarea>请输入评论</textarea>
</body>

label

HTML 使用 label 绑定文字和表单控件的关系，增大表单控件的点击范围。

<body>
  性别：
  <input type="radio" name="gender" id="man">
  <label for="man">男</label>
  <label><input type="radio" name="gender">女</label>
</body>

有两种写法：

  1. label 标签只包裹内容，不包裹表单控件，设置 label 标签的 for 属性值和表单控件的 id 属性值相同。
  <input type="radio" name="gender" id="man">
  <label for="man">男</label>
  1. 使用 label 标签包裹文字和表单控件，不需要属性。
  <label><input type="radio" name="gender">女</label>

按钮

HTML 使用 button 指定按钮。

button 的 type 属性值有：

  • submit：提交按钮，点击后将数据提交到后台，默认功能。
  • reset：重置按钮，点击后将表单控件恢复为默认值。
  • button：普通按钮，默认没有功能，一般配合 JavaScript 使用。
<body>
  <form>
    用户：<input type="text">
    <br>
    密码：<input type="password">
    <br>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </form>
</body>

提示：

按钮需配合 form 标签（表单区域）才能实现对应的功能。

布局

使用 div 和 span 划分网页区域，进行布局。

div

HTML 使用 div 进行布局，独占一行。

<body>
  <div>div 标签，独占一行</div>
  <div>div 标签，独占一行</div>
</body>

span

HTML 使用 span 进行布局，不换行。

<body>
  <span>span 标签，不换行</span>
  <span>span 标签，不换行</span>
</body>

字符实体

由于 HTML 使用了 < 和 > 来作为标签的起始符号，如果要在网页中显示这种符号，则需要使用字符实体。

显示结果描述实体名称
空格&nbsp;
<小于&lt;
>大于&gt;
<body>
  &lt;&nbsp; p &nbsp;&gt;
</body>
上次编辑于:
贡献者: stonebox