【1分钟速通】 HTML快速入门

发布于:2025-09-11 ⋅ 阅读:(22) ⋅ 点赞:(0)

HTML(HyperText Markup Language,超文本标记语言) 是构建网页的基础语言。它通过 标签(Tag) 来描述网页的结构和内容,常与 CSS(负责样式 – <style></style>)和 JavaScript(负责交互 – <script></script>)配合使用

一个标准 HTML 页面通常包含以下骨架结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>我的第一个网页</title>
</head>
<body>
  <!-- 
  		注释:不会被浏览器执行~ 
  		各语言通用注释快捷键: ctrl+/ 
		
		注:通过查看网页源代码能查看到注释,所以发布前要仔细检查 (测试点!!!)
  -->
  <h1>欢迎来到我的网页!</h1>
  <p>这是一个段落。</p>
</body>
</html>
  • <!DOCTYPE html>:声明 HTML5 文档类型
  • <html>:根元素
  • <head>:包含页面的元信息(标题、编码等)
  • <body>:网页的主要可见内容

常见的 HTML 编辑工具包括:VS Code(最常用,插件丰富)、Sublime Text、WebStorm,以及在线工具 CodePen、JSFiddle 等。推荐使用 VS Code + Live Server 插件,可实时预览网页效果。

常用标签

⭐ 标题标签 <h1>~<h6>

  • 说明:表示不同层级的标题,h1 最大,h6 最小
  • 语法<h1>标题</h1>
  • 属性:无常用属性
  • 示例
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    

⭐ 段落 <p>

  • 说明:用于表示段落,块级元素,自动换行
  • 语法<p>内容</p>
  • 属性:无常用属性
  • 示例
    <p>这是一个段落。</p>
    

⭐ 链接 <a>

  • 说明:用于创建超链接,点击后跳转到指定页面
  • 语法<a href="url" target="_blank">文字</a>
  • 属性
    • href:跳转网址或文件路径
    • target:打开方式,常用 _blank(新窗口)
  • 示例
    <a href="https://example.com" target="_blank">访问示例网站</a>
    

⭐ 图片 <img>

  • 说明:用于在网页中插入图片
  • 语法<img src="图片地址" alt="替代文本"/>
  • 属性
    • src:图片路径
    • title: 标题 (测试点!!! 必须有标题)
    • alt:当图片无法显示时的替代文字
    • width / height:设置图片大小
  • 示例
    <img src="https://via.placeholder.com/150" title="我的标题"/>
    

⭐ 空格与换行

  • 说明:用于在网页中插入空格,换行
  • 语法:空格 &nbsp; 换行 <br />
  • 属性:无常用属性
  • 示例
    <p>这是<br />一 &nbsp 句话。</p>
    

⭐ 列表 <ul> / <ol> / <li>

  • 说明:表示无序列表、有序列表及列表项

  • 语法

    • 无序列表:<ul><li>内容</li></ul>
    • 有序列表:<ol><li>内容</li></ol>
  • 属性

    • <ol> 可用 type 指定编号样式(1/A/a/I/i)
  • 示例

    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
    
    <ol type="A">
      <li>第一步</li>
      <li>第二步</li>
    </ol>
    

⭐ 表格 <table>

  • 说明:用于展示结构化数据
  • 语法<table><tr><td></td></tr></table>
  • 属性
    • border:边框宽度
  • 示例
    <table border="1">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>小明</td>
        <td>20</td>
      </tr>
    </table>
    

⭐ 表单 <form>

  • 说明:用于收集用户输入
  • 语法<form><input/><button></button></form>
  • 属性
    • action:提交地址
    • method:提交方式(GET/POST)
  • 示例
    <form action="xxx.html" method="post">
      <input type="text" placeholder="请输入用户名" />
      <input type="password" placeholder="请输入密码" />
      <input type="radio" name="sex" /><input type="radio" name="sex" /><!--
      type = "text" : 文本框
      type = "password" : 密码框
      type = "radio" : 单选按钮 -- 设置相同组名 name 属性值才能为一组
      type = "checkbox" : 复选按钮 
      -->
      
      <button type="submit" value="提交">提交</button>
      <!--
      (测试点!!! value 必须赋值) -> 不赋值 value 的话 不同浏览器可能显示的效果不同
      type = "button" : 普通按钮 -- 没有效果,需要配合 JS 实现
      type = "submit" : 提价按钮
      type = "reset" : 重置按钮 
      -->
    </form>
    

⭐ 区块 <div> / <span>

  • 说明
    • <div>:块级容器,用于布局 – 【大盒子 - 独占一行】
    • <span>:行内容器,用于局部修饰 – 【小盒子 - 一行可以放多个】
  • 语法<div>内容</div>, <span>内容</span>
  • 属性:无常用属性
  • 示例
    <div>
      <p>这是一个块级容器</p>
    </div>
    
    <p>这是 <span style="color:red;">红色文字</span></p>
    

总结

  • HTML 是网页的骨架
  • 骨架标签(html/head/body)构成基本结构
  • 常见标签包括标题、段落、链接、图片、列表、表格、表单和布局容器
  • 配合 CSS 和 JS 才能实现完整的网页

网站公告

今日签到

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