HTML 设计与使用入门

发布于：2025-09-14 ⋅ 阅读:(12) ⋅ 点赞:(0)

HTML 设计与使用入门 

一、完整示例（基础页面模板）这是一个结构清晰、可直接拷贝运行的最小 HTML 模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML 设计与使用示例</title>
</head>
<body>
  <header>
    <h1>我的第一个网页</h1>
  </header>

  <main>
    <section>
      <h2>段落与文本格式</h2>
      <p>这里是一段示例段落。可以使用 <strong>strong / b</strong> 加粗，<em>em / i</em> 倾斜，<u>u</u> 下划线，<del>del</del> 删除线。</p>
      <p>换行使用 &lt;br&gt; 标签。示例：第一行<br>第二行。</p>
    </section>

    <section>
      <h2>超链接与图片</h2>
      <a href="https://www.example.com" target="_blank" rel="noopener">访问示例网站（新窗口打开）</a>
      <p><a href="localpage.html">链接到本地页面</a></p>
      <p><img src="abc.jpg" alt="示例图片描述" width="300"></p>
    </section>

    <section>
      <h2>列表</h2>
      <ul>
        <li>无序列表（disc / circle / square）</li>
      </ul>
      <ol start="3" type="1">
        <li>有序列表（可设置 start 与 type）</li>
      </ol>
    </section>

    <section>
      <h2>表格</h2>
      <table border="1">
        <tr>
          <th colspan="3">表格标题（合并 3 列）</th>
        </tr>
        <tr>
          <td>1-1</td><td>1-2</td><td>1-3</td>
        </tr>
      </table>
    </section>

    <section>
      <h2>表单（form）</h2>
      <form action="/submit" method="post">
        <label>
          姓名：<input type="text" name="name" placeholder="输入姓名" required maxlength="50">
        </label><br>
        <label>
          邮箱：<input type="email" name="email" placeholder="example@mail.com" required>
        </label><br>
        <input type="submit" value="提交">
      </form>
    </section>
  </main>

  <footer>
    <hr>
    <small>版权所有 © 2025</small>
  </footer>
</body>
</html>

二、基础概念快速回顾

1. 文档结构

  • <!DOCTYPE html>：声明文档为 HTML5，放在最顶端。

  • <html lang="zh-CN">：根元素，lang 用于指定页面语言（利于 SEO 与无障碍）。

  • <head>：包含字符集、title、meta、样式与脚本等元信息。

  • <body>：页面可见内容放这里。

2. 常用文本元素

  • 标题：<h1> ~ <h6>，语义化标题（h1 最大）。

  • 段落：<p>，会自带段落间距。

  • 换行：<br>（单标签）。

  • 强调/加粗：<strong>（语义强调）或 <b>（样式化加粗）。

  • 斜体：<em>（语义强调）或 <i>。

  • 删除线：<del>，通常用来表示已删除内容。

  • 下划线：<u>（尽量少用做语义装饰）。

  • 小字号：<small>，上/下标：<sup> / <sub>。

  • 高亮：<mark>（黄色背景，表示重要或匹配项）。

  • 注释：<!-- 注释内容 -->（不会显示在页面上）

3. 元素属性（attribute）

属性用于为标签添加额外信息，如 id、class、title、style、data-* 等：

<p id="intro" class="lead" title="简介">……</p>

常见的布局或表现属性（尽量用 CSS 替代）：

  • align（已过时，建议使用 CSS）

  • bgcolor（表格或 body 设置背景色，建议用 CSS：background-color）

三、超链接（<a>）

  • 基本写法：<a href="URL">链接文字</a>

  • 五种常见用途：

    1. 外部链接：href="https://..."

    2. 本地页面：href="page.html"

    3. 图片链接：把 <img> 放到 <a> 内

    4. 邮件：href="mailto:email@example.com"

    5. 下载链接：href="file.zip" download

  • 新窗口打开：target="_blank"（配合 rel="noopener noreferrer" 更安全）

四、图片（<img>）

  • 基本属性：src、alt（必须）、width、height

  • alt：当图片无法显示或用于无障碍工具时显示文字，务必填写有意义描述。

  • 宽高可以用像素或百分比（百分比相对于包含块，注意高度百分比有时无效）。

  • 示例：<img src="abc.jpg" alt="示例美女" width="300">

五、列表（<ul>, <ol>, <li>）

  • 无序列表：<ul>，常见 type（过时，建议用 CSS）有 disc、circle、square。

  • 有序列表：<ol>，可以设置 start（起始序号）与 type（数字/字母/罗马数字）。

  • 列表项：<li> 内可嵌入文本、链接、图片、甚至子列表。

六、表格（<table>）

  • 结构：<table> > <tr>（行） > <td> / <th>（单元格 / 表头）

  • 合并：水平合并使用 colspan="n"，垂直合并使用 rowspan="n"。

  • 表头：用 <th>（默认居中且加粗）。

  • 示例：

<table border="1">
  <tr><th colspan="3">姓名表</th></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

  • 提示：表格用于展示表格化数据，不要用表格做布局（已过时，使用 CSS 布局）。

七、表单（<form>）与输入元素

  • action：提交地址；method：GET（参数附在 URL 后）或 POST（请求体传递）

  • 常用 input 类型：

    • text, password, email, number, tel, url

    • submit, reset, button, hidden, image

  • HTML5 新属性：

    • required：必填项

    • placeholder：提示文本

    • maxlength：最大长度

    • type="email" 等能做基本校验（浏览器支持差异）

  • 示例：

<form action="/send" method="post">
  <input type="text" name="username" placeholder="用户名" required>
  <input type="email" name="email" placeholder="邮箱">
  <input type="submit" value="提交">
</form>

  • 注意：表单提交真实应用中要做好后端与前端验证，避免安全问题（如 XSS、SQL 注入等）。

八、HTML 实体（Entities）

某些特殊字符必须使用实体表示：

  • &lt; 表示 <

  • &gt; 表示 >

  • &amp; 表示 &

  • &nbsp; 表示不间断空格

  • 还有很多字符实体用于数学符号或其他语言字符。

九、语义化与可访问性（重要）

  • 使用语义标签（header, nav, main, article, section, footer）能让页面结构更清晰，利于 SEO 与屏幕阅读器。

  • 给交互元素添加 aria-* 属性或 alt、label 等，有助于无障碍访问。

  • 表单元素应配合 <label> 使用，便于屏幕阅读器识别：

<label for="email">邮箱：</label>
<input id="email" type="email" name="email">

十、最佳实践与建议

  1. 用 CSS 做样式，不要滥用内联属性（如 bgcolor、align）——保持结构与样式分离。

  2. 始终设置 <meta charset="utf-8">，避免中文乱码。

  3. 图片必须有 alt，并尽量压缩图片以提升性能。

  4. 用语义化标签 让内容对机器与用户都更友好。

  5. 表单与输入校验：前端做体验上校验，后端必须做安全校验。

  6. 响应式设计：用 <meta name="viewport"> + CSS 媒体查询适配移动设备。

  7. 避免使用过时属性/标签（如 align, 部分 <font>），应用现代 CSS。

  8. 性能考虑：尽可能延迟/合并脚本、使用合适图片尺寸、开启压缩与缓存。

  9. 可访问性（a11y）：键盘导航、合理对比度、ARIA 标签等不可忽视。

十一、常见小问题与解答

  • <br> 与 <p> 的区别？
    <br> 强制换行，通常用于诗句或地址类；<p> 表示段落，会自动在段落之间产生间距。

  • 图片百分比宽高无效怎么办？
    百分比宽度相对于包含块有效，但高度百分比可能依赖父元素高度；通常用 CSS 控制尺寸更可靠（例如 max-width:100%）。

  • 表格合并单元格出错？
    确保 colspan 与 rowspan 的数值与行列结构匹配，不要让表格单元格数目在某行不相等（除非确实合并）。

十二、简短检查清单（创建页面前）

  • 加入 <!DOCTYPE html> 与 <meta charset="utf-8">

  • 页面 <title> 是否设置？

  • 图片是否有 alt 描述？

  • 表单字段是否有 label？是否需要 required？

  • 使用语义化标签组织内容？

  • 是否为移动端适配（viewport 与响应式）？

  • 是否使用外部 CSS/JS 而非内联（便于维护）？

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布