当前位置：首页 > news >正文

HTML入门：构建网页的基石

news 2026/3/26 17:53:44

HTML（HyperText Markup Language，超文本标记语言）是构建网页内容和结构的基础。学习HTML，就是学习如何使用各种“标签”来搭建网页的骨架。

一、HTML的基本结构

一个最简单的HTML文件结构如下：

<html> <head> <title>第一个页面</title> </head> <body> hello world </body> </html>

<html>标签：整个HTML文件的根标签。
<head>标签：用于定义页面的属性和元信息，如标题、字符编码等，其内容不会直接显示在页面上。
<body>标签：网页的主体部分，所有需要在浏览器中显示的内容都应放在这里。
<title>标签：定义浏览器标签页的标题。

在开发工具（如IDEA或VSCode）中，新建HTML文件后输入!并按Tab键，可以快速生成包含基本结构的代码框架。

二、核心概念：标签与属性

HTML代码由“标签”构成。

标签语法：标签名放在尖括号<>中，如<body>。大多数标签成对出现，如<body>内容</body>，分别称为开始标签和结束标签。也有少数单标签，如换行标签<br/>。
标签内容：写在开始标签和结束标签之间的部分。
标签属性：在开始标签中，可以包含“属性”来提供额外信息。例如，id属性可以为标签设置唯一标识：
<body id="myId">hello</body>
标签关系：标签之间会形成层次结构，如父子关系、兄弟关系，整个结构构成了DOM（文档对象模型）树。

三、常用HTML标签一览

掌握了结构，我们来认识一些常用的内容标签：

标题与段落
- 标题标签 (h1-h6)：定义六级标题，<h1>字号最大，<h6>最小。
  <h1>一级标题</h1>
- 段落标签 (p)：定义一个段落。浏览器会自动在段落前后添加一些空白。
  <p>这是一个段落。</p>
文本格式与媒体
- 格式化标签：用于设置文本样式。
  <strong>加粗</strong>，<em>倾斜</em>，<del>删除线</del>，<ins>下划线</ins>
- 图片标签 (img)：用于嵌入图像。必须包含src属性来指定图片路径。
  <img src="image/rose.jpg" alt="鲜花描述" title="鼠标悬停提示" width="200">
  - alt：替换文本，当图片无法加载时显示。
  - title：提示文本，鼠标悬停时显示。
  - width/height：控制图片尺寸。
- 超链接标签 (a)：创建跳转到其他页面或位置的链接。
  <a href="https://www.baidu.com" target="_blank">百度</a>
  - href：指定链接目标地址（必需）。
  - target="_blank"：在新标签页打开。
内容组织标签
- 列表：用于展示条目信息。
  - 无序列表 (ul, li)：项目以符号（默认为圆点）列表呈现。
  - 有序列表 (ol, li)：项目以数字序号列表呈现。
  - 自定义列表 (dl, dt, dd)：包含术语及其解释。
- 表格 (table, tr, td, th)：用于展示行列数据。<tr>定义行，<td>定义单元格，<th>定义表头单元格。
- 无语义容器 (div, span)：主要用于配合CSS进行网页布局。
  - <div>是块级元素，独占一行。
  - <span>是行内元素，不独占一行。
表单标签 (form, input)：用于收集用户输入，是与用户交互的关键。
- 表单域 (form)：定义数据提交的范围和目标地址。
  <form action="submit.php" method="post"> ... </form>
- 表单控件 (input)：<input>标签通过type属性变化，可以创建多种控件：
  - 文本框：<input type="text">
  - 密码框：<input type="password">
  - 单选框：<input type="radio" name="gender" value="male">男(相同name实现多选一)
  - 复选框：<input type="checkbox">吃饭
  - 提交按钮：<input type="submit" value="提交">
  - 文件选择：<input type="file">
- 其他表单元素：
  - label标签：与表单控件绑定，提升用户体验。点击label文字也能选中对应的控件。
    <label for="username">用户名：</label><input type="text" id="username">
  - 下拉菜单 (select, option)：
    <select><option value="bj">北京</option><option value="sh" selected>上海</option></select>
  - 文本域 (textarea)：用于输入多行文本。
    <textarea rows="5" cols="30">默认内容</textarea>

四、路径与特殊字符

图片与链接路径：
- 相对路径：以当前HTML文件为参考。image/photo.jpg(下一级目录)，../image/photo.jpg(上一级目录)。
- 绝对路径：完整的URL或磁盘路径。https://example.com/photo.png
HTML特殊字符：一些字符在HTML中有特殊含义，需要用实体名称或编号表示。
- 空格： 
- 小于号<：<
- 大于号>：>
- 与符号&：&