【前端】【总复习】HTML

一、HTML(结构)

HTML 是网页的骨架,主要负责网页的结构与语义表达,为 CSS 和 JavaScript 提供承载基础。


1.1 HTML 基本结构与语义化标签

1.1.1 HTML 基本结构

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>文档标题</title>
</head>
<body>
  <h1>Hello HTML</h1>
</body>
</html>

🔹说明:

  • <!DOCTYPE html>:声明 HTML5 文档类型
  • <html>:HTML 文档根元素
  • <head>:文档头部,包含 meta、title、link 等信息
  • <body>:主体内容,浏览器显示的主要区域

1.1.2 语义化标签(Semantic Tags)

常见语义化标签:

标签 语义描述
<header> 页眉或导航区域
<nav> 导航链接块
<main> 页面主内容
<section> 页面中的区块
<article> 独立的文章内容块
<aside> 侧边栏(如广告、推荐)
<footer> 页脚信息

🔹好处:

  • 更易于搜索引擎抓取(SEO)
  • 提高可访问性(如屏幕阅读器识别)
  • 结构清晰,易于团队协作

1.2 表单相关元素与属性

HTML 表单用于收集用户输入,是前后端交互的基础。

1.2.1 常见元素

  • <input>:单行输入(类型众多)
  • <select>:下拉选择
  • <textarea>:多行文本输入
  • <label>:字段说明,增强可用性
  • <button> / <input type="submit">:提交按钮

1.2.2 <input> 常见类型

html 复制代码
<input type="text" />
<input type="email" />
<input type="password" />
<input type="checkbox" />
<input type="radio" />
<input type="number" />
<input type="file" />

1.2.3 关键属性

属性 说明
name 用于提交字段标识
value 默认值
placeholder 占位提示
required 是否必填
disabled 禁用
readonly 只读
autocomplete 自动补全
maxlength / minlength 输入长度限制

1.3 常见标签的用法

1.3.1 <meta> 标签

html 复制代码
<meta charset="UTF-8" />
<meta name="description" content="页面描述,有助于 SEO" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

1.3.2 <link> 标签

html 复制代码
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="favicon.ico" />

1.3.3 <canvas> 画布

html 复制代码
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const ctx = document.getElementById("myCanvas").getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 100, 50);
</script>

1.3.4 <iframe> 内嵌页面

html 复制代码
<iframe src="https://example.com" width="300" height="200"></iframe>

1.4 SEO 与可访问性(Accessibility)

1.4.1 SEO(搜索引擎优化)

要点 示例
使用语义化标签 <article>, <section>
正确使用标题标签 <h1><h6>
提供描述性 meta 标签 <meta name="description">
图片加 alt 文本 <img src="..." alt="描述">

1.4.2 可访问性

  • 使用 <label> 与表单元素关联:提高辅助技术兼容性
  • 使用 aria-* 属性增强无障碍访问
  • 保证对比度、结构清晰、键盘可操作

1.5 常见场景考点

1.5.1 禁用自动填充

html 复制代码
<input type="text" name="username" autocomplete="off" />

1.5.2 placeholder 与 label 的区别

比较项 placeholder label
展示方式 输入框内提示文字 输入框外说明文字
是否提交
可访问性 较差 较好(配合 for 使用)
推荐用法 仅作提示 用于表单说明,推荐

建议 :同时使用 label + placeholder,提升体验与可访问性:

html 复制代码
<label for="email">邮箱地址</label>
<input type="email" id="email" placeholder="请输入邮箱" />
相关推荐
赶飞机偏偏下雨5 分钟前
【前端笔记】CSS 选择器的常见用法
前端·css·笔记
LuckyLay1 小时前
AI教你学VUE——Deepseek版
前端·javascript·vue.js
我是哈哈hh1 小时前
【Vue】全局事件总线 & TodoList 事件总线
前端·javascript·vue.js·vue3·vue2
liuyang___1 小时前
vue3+ts的watch全解!
前端·javascript·vue.js
我是哈哈hh1 小时前
【Vue】组件自定义事件 & TodoList 自定义事件数据传输
前端·javascript·vue.js·vue3·vue2
牧杉-惊蛰1 小时前
VUE+ElementUI 使用el-input类型type=“number” 时,取消右边的上下箭头
前端·vue.js·elementui
Stella25212 小时前
14前端项目----登录/注册
前端
群联云防护小杜3 小时前
如何有效防御服务器DDoS攻击
运维·服务器·前端·tcp/ip·安全·ddos
liuyang___4 小时前
vue3+ts的computed属性怎么用?
前端·javascript·vue.js
软件技术NINI4 小时前
html css js网页制作成品——HTML+CSS珠海网页设计网页设计(4页)附源码
javascript·css·html