当前位置：首页 > 行业动态 > 正文

HTML文档

HTML文档由DOCTYPE声明、html标签包裹，含head（元数据）和body（

HTML文档基础结构

HTML文档由多个层级组成,核心结构如下：

层级 示例
声明 指定HTML版本（建议使用HTML5） <!DOCTYPE html>
根元素 包裹整个文档内容 <html></html>
头部 包含元数据、标题、样式链接等 <head>...</head>
主体 展示网页可见内容 <body>...</body>

常用HTML标签

文本标签

功能 示例
<h1>-<h6> 标题（<h1>为最高级别） <h1>主标题</h1>
<p> 段落 <p>这是一个段落。</p>
<br> 换行 这段文字<br>换行显示
<hr> 水平分割线 <hr>

链接与多媒体

功能 示例
<a> 超链接 <a href="https://example.com">链接</a>
<img> 图片 <img src="image.jpg" alt="描述">
<audio> 音频 <audio src="music.mp3" controls></audio>
<video> 视频 <video src="video.mp4" controls></video>

列表

类型 示例
无序列表 <ul> + <li> <ul><li>项目1</li></ul>
有序列表 <ol> + <li> <ol><li>第一项</li></ol>

HTML表格结构

表格由<table>定义，包含以下核心标签：

  • <thead>：表头区域
  • <tbody>
  • <tr>：表格行
  • <td>：数据单元格
  • <th>：表头单元格（默认加粗）

示例表格：

<table border="1">
  <thead>
    <tr><th>姓名</th><th>年龄</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>25</td></tr>
    <tr><td>李四</td><td>30</td></tr>
  </tbody>
</table>

表单元素

表单用于用户输入,核心标签包括：

  • <form>：定义表单区域，需指定action（提交地址）和method（GET/POST）
  • <input>：输入框，通过type属性定义类型（如文本、密码、复选框）
  • <textarea>：多行文本输入
  • <button> / <input type="submit">：提交按钮

示例表单：

<form action="/submit" method="post">
  <label>用户名: <input type="text" name="username"></label><br>
  <label>密码: <input type="password" name="password"></label><br>
  <button type="submit">登录</button>
</form>

常见问题与解答

问题1：忘记添加<!DOCTYPE html>会怎样？

解答：
浏览器可能以“怪异模式”渲染页面，导致CSS解析不一致，未声明DOCTYPE时，<div>的宽度可能默认为浏览器窗口宽度，而非标准盒模型行为。

问题2：为什么图片显示为“叉号”或无法加载？

解答：
常见原因包括：

  1. src路径错误（相对路径需基于HTML文件位置）
  2. 文件名大小写不匹配（部分服务器区分大小写）
  3. 图片文件损坏或格式不支持
    解决方法：检查路径是否正确，尝试使用绝对路径测试，确认
文档结构
0

相关文章