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

HTML文档的入门案例

HTML入门案例通常包含基础结构：以声明开头，标签包裹内容，定义元数据与标题，展示可见内容（如文字、图片），代码简洁直观，便于理解网页基本

HTML文档基础结构

HTML文档由<!DOCTYPE html>声明、<html>根元素、<head>头部和<body>主体构成，头部包含元数据（如字符集、页面标题），主体承载可见内容。

HTML文档的入门案例 第1张

元素 作用 示例代码
<!DOCTYPE> 声明文档类型（HTML5标准） <!DOCTYPE html>
<html> 文档根元素 <html lang="zh">
<head> 存储元数据（非可见内容） <title>网页标题</title>
<body> 页面可见内容区域 <h1>欢迎学习HTML</h1>

常用HTML标签示例

文本标签

功能 示例
<h1>~<h6> 标题（6级层级） <h2>二级标题</h2>
<p> 段落 <p>这是一个段落。</p>
<br> 换行 段落内换行<br>继续内容
<hr> 水平分割线 <hr>

文本样式标签

功能 示例
<b> 粗体 <b>加粗文字</b>
<i> 斜体 <i>斜体文字</i>
<sub> 下标 H<sub>2</sub>O
<sup> 上标 E=mc<sup>2</sup>

列表与表格

无序列表

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

有序列表

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

表格结构

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

超链接与图片

外部链接

<a href="https://www.example.com" target="_blank">访问示例网站</a>

本地图片

<img src="images/logo.png" alt="网站Logo" width="200">

表单基础元素

元素 功能 示例代码
<form> 表单容器 <form action="/submit" method="post">
<input> 输入框 <input type="text" name="username">
<textarea> 多行文本域 <textarea rows="5" cols="30"></textarea>
<button> 提交按钮 <button type="submit">登录</button>

基础样式控制

通过<style>标签添加内部样式：

<style>
  body { font-family: Arial, sans-serif; }
  h1 { color: #333; }
  .highlight { background-color: #ff0; }
</style>

常见问题与解答

Q1：为什么必须闭合HTML标签？
A：HTML标签必须正确闭合以保证文档结构完整，未闭合的标签会导致浏览器解析错误，例如<p>标签未闭合时，后续内容可能被错误渲染，建议使用可视化编辑器或IDE的标签匹配功能避免此类问题。

Q2：如何正确引用外部资源路径？
A：

  1. 绝对路径：从网站根目录开始，如/images/banner.jpg
  2. 相对路径：相对于当前文件位置，如./css/style.css（当前目录）或../js/script.js（上级目录）
  3. 注意事项：部署到服务器时需保持目录结构一致，建议
入门
0

相关文章