HTML 代码总结与分析

基本结构
文档以标准 HTML5 声明开头，包含 <html>、<head> 和 <body> 基本结构。头部定义了字符集为 UTF-8 并设置了视口适配移动端。

链接与媒体

  • 存在两种超链接形式：普通跳转（<a href="https://www.runoob.com">）和新标签页跳转（添加 target="_blank"）
  • 图片标签 <img> 设置了固定宽高，但当前路径为本地文件（可能无法显示）
  • 包含一个邮件输入框 <input type="text"> 和交互按钮

文本与样式

  • 多级标题（<h1> 到 <h3>）和段落（<p>）构成内容骨架
  • 内联样式示例：<h2 style="font-size: 40px; color:rgb(0, 10, 7)">
  • 注释掉的 CSS 样式展示了类选择器 .p 的用法（字体、颜色等修饰）
  • 特殊文本格式：上标 <sup>、下标 <sub>、删除线 <del> 和下划线 <ins>

交互元素

  • JavaScript 简单应用：按钮点击弹窗（onclick）、鼠标悬停变色（onmouseover）和输入框变化检测（onchange）
  • 框架链接示例：<a href="https://www.baidu.com" target="myIfr"> 需配合 <iframe> 使用（代码中未定义）

需改进部分

  • 百度链接缺少协议前缀（应为 https://）
  • 注释中存在无效的 CSS 代码块（/* */ 注释嵌套错误）
  • </div> 未正确闭合所有嵌套
  • 图片路径为本地绝对路径（需改为相对路径或网络 URL）

标签类型说明

  1. 块级元素（如 <div>、<h1>）：独占一行
  2. 行内元素（如 <span>、<a>）：并排显示
  3. 语义化标签：
    • <em> 强调文本
    • <strong> 加粗文本
    • <span> 无默认样式
    • <a> 超链接功能### HTML 文件结构总结

该 HTML 文件是一个标准的网页文档，包含常见的多媒体元素（图片、视频、音频）。以下是关键点分析：

文档类型与基础结构

  • 使用 <!DOCTYPE html> 声明 HTML5 文档类型
  • 包含完整的 HTML 骨架（html、head、body 标签）
  • 设置 UTF-8 字符编码和响应式视口

头部信息

  • 页面标题设置为 “Document”（可通过 <title> 修改）
  • 包含基本的元标签： 
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

主体内容

图片元素

  • 使用相对路径引用图片 ./img/虎太郎.webp
  • 包含备用文本（alt 属性）和悬停提示（title 属性） 
    <img src="./img/虎太郎.webp" alt="图片" title="我是鼠标展示的信息">

视频元素

  • 引用 MP4 格式视频文件 ./static/小电影.mp4
  • 注意：alt 属性在 <video> 标签中无效（应使用 <track> 替代） 
    <video src="./static/小电影.mp4">

音频元素

  • 引用 MP3 音频文件 ./static/music.mp3
  • 缺少控制属性（可添加 controls 启用播放器界面） 
    <audio src="./static/music.mp3"></audio>

改进建议

  1. 为视频和音频添加 controls 属性以便用户交互
  2. 考虑为视频添加备用文字轨道（<track> 标签）
  3. 检查文件路径确保资源可访问（特别是中文文件名）
  4. 补充完整的文档标题（替换默认 “Document”）### HTML <a> 标签的用法总结
页面跳转与超链接

<a href="URL">文本/图片</a> 用于跳转到指定页面或资源。
target="_blank" 在新标签页打开链接，target="_top" 在顶层框架打开。
嵌套 <img> 可实现图片超链接效果。

文件下载

<a href="文件路径" download> 触发文件下载。
download="自定义文件名" 可指定下载后的文件名。

锚点定位

通过 id 或 name 属性实现页面内跳转：
<a href="#锚点ID">跳转</a> 配合 <div id="锚点ID"> 或 <a name="锚点名称">。

调用系统应用
  • 电话：<a href="tel:电话号码">
  • 短信：<a href="sms:号码?body=内容">
  • 邮件：<a href="mailto:地址?subject=标题&body=正文">
  • 应用协议：如 weixin://（微信）、alipay://（支付宝）。
地图与社交应用
  • 地图：geo:纬度,经度 或 bingmaps:?cp=纬度~经度
  • QQ：mqq:// 或 tencent://message/?uin=QQ号
  • 应用商店：market://details?id=包名（安卓）。
其他特性

href="#" 返回页面顶部。
部分协议（如微信、支付宝）需依赖用户设备支持。### 锚点链接的基本实现方式

在HTML中实现页面内跳转（锚点链接）主要通过<a>标签的href属性和目标元素的id或name属性配合完成。

跳转触发写法
<a href="#锚点名称">跳转文字</a>
点击该链接会跳转到当前页面内对应锚点位置。

目标锚点接收写法
现代推荐方式：<div id="锚点名称">内容</div>
传统方式：<a name="锚点名称"></a>（需注意必须用name属性）

不同场景的实现差异

跨页面锚点跳转
<a href="目标页面.html#锚点名称">
会打开新页面并自动跳转到指定锚点位置（需目标页面存在对应锚点）。

返回顶部功能
<a href="#">返回顶部</a>
#不带参数时默认返回页面顶部。

注意事项

现代HTML5标准推荐使用id属性作为锚点接收标识，所有HTML元素均可通过id成为锚点目标。传统<a name="">写法已逐渐被淘汰。

锚点跳转时浏览器会将目标元素滚动到视口顶部，可通过CSS的:target伪类对当前锚点目标添加特殊样式。

同级页面锚点跳转时若使用target="_blank"，需确保新窗口页面高度足够显示目标锚点位置。### HTML 三大列表核心总结

有序列表 <ol>
自带数字序号，按顺序排列。子标签 <li> 用于定义列表项。
适用场景：大象进冰箱步骤、操作流程等需明确顺序的内容。

无序列表 <ul>
自带小圆点，无顺序要求。子标签 <li> 定义列表项。
适用场景：五虎上将名单、城市列表等无需排序的罗列内容。

自定义列表 <dl>
包含 <dt>（定义标题/问题）和 <dd>（定义描述/答案）。
适用场景：问答形式的解释说明，如术语定义或键值对展示。

HTML 表格核心标签

<table>
定义整个表格的容器。

<tr>
定义表格中的一行。

<th>
表头单元格，默认加粗居中，用于标题行。

<td>
普通单元格，存放具体数据内容。

使用场景区分

  • 有明确顺序 → 选择 <ol>。
  • 无顺序罗列 → 选择 <ul>。
  • 问答或术语解释 → 选择 <dl>。
  • 行列规整的数据展示 → 使用 <table> 表格。

通过合理选择列表或表格，可清晰结构化网页内容。### HTML表单知识点总结

HTML表单是网页中用于收集用户输入的重要工具，通过 <form> 标签实现数据提交到服务器。以下是基于核心知识点和规范的综合总结，帮助您快速掌握表单的核心要素。

一、表单整体结构
  • 基本元素：所有表单内容需包裹在 <form> 标签中。
  • 关键属性：
    • action：定义数据提交的服务器地址。
    • method：指定提交方式，常见有 get（数据在 URL 中传递）和 post（数据在请求体中传递）。
  • 提交数据：每个表单项必须设置 name 属性，作为后端接收数据的“键名”，否则数据无法被识别。
二、常用输入类型（input type）

输入类型通过 <input> 标签的 type 属性定义：

  • 文本输入：
    • text：单行文本框，用于用户名、昵称等普通输入。
    • password：密码框，输入内容隐藏，用于登录密码。
  • 选择输入：
    • radio：单选按钮，同组选项必须同名（name 相同），实现互斥选择，如性别。
    • checkbox：复选框，可多选，如兴趣爱好。
  • 文件上传：
    • file：用于上传本地文件，如图片或文档。
  • 按钮类型：
    • submit：提交按钮，用于发送表单数据。
    • reset：重置按钮，清空表单输入。
    • button：普通按钮，无默认行为，常用于 JavaScript 交互。
三、常用表单属性

这些属性用于增强表单功能和用户体验：

  • 核心属性：
    • name：必须设置，作为提交数据的键名（单选/复选同组需同名）。
    • value：定义默认值或提交值（文本框为初始内容，单选/复选为提交值）。
  • 验证与提示：
    • required：设置为必填项，不填无法提交（浏览器自动校验）。
    • placeholder：输入框提示文字，仅作提示，不提交。
  • 状态控制：
    • disabled：禁用控件，灰色不可编辑，数据不提交。
    • readonly：只读，不可修改，但数据可提交。
    • checked：默认选中，仅对 radio 或 checkbox 生效。
  • 输入限制：
    • maxlength：限制最大输入字符数，如手机号长度。
    • autofocus：页面加载时自动聚焦输入框。
    • autocomplete：控制自动完成记录（on 开启，off 关闭）。
    • tabindex：设置 Tab 键切换顺序，数字越小优先级越高。
四、其他表单标签

除 <input> 外，其他标签配合使用：

  • <textarea>：多行文本输入框，用于留言或简介，可设置 cols（宽度）和 rows（高度）。
  • <select> + <option>：下拉选择框，<select> 为父标签，<option> 定义选项。
  • <button>：按钮标签，可替代 <input> 按钮，通过 type 属性指定类型（如 submit、reset）。
  • <label>：关联输入框的文字标签，提升可访问性和用户体验（如点击文字选中输入框）。
五、关键总结
  • 表单基础：使用 <form> 包裹所有项，设置 action 和 method 控制提交。
  • 数据提交：所有表单项必须定义 name 属性；单选/复选通过同名分组，checked 用于默认选中。
  • 常用属性：required（必填）、placeholder（提示）、disabled（禁用）是最实用属性。
  • 标签配合：结合 <textarea>、select>、<button> 等标签，构建完整表单。

行内样式

行内样式直接写在HTML元素的style属性中，优先级最高，适用于单个元素的特定样式调整。例如：

<p style="color: red; font-size: 16px;">示例文本</p>

内部样式

内部样式通过<style>标签定义在HTML文档的<head>部分，适用于当前页面的样式规则。例如：

<head>
    <style>
        p {
            color: blue;
            font-family: Arial;
        }
    </style>
</head>

外部样式

外部样式通过<link>标签引入独立的CSS文件，适用于多页面共享样式，便于维护。例如：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

优先级规则

行内样式 > 内部样式 > 外部样式。相同优先级下，后定义的样式会覆盖前者。### CSS 样式优先级规则总结

行内样式（Inline styles）
直接在 HTML 元素的 style 属性中定义的样式优先级最高。例如：

<h1 style="color: orange;">标题</h1>

ID 选择器（ID selectors）
通过 #id 定义的样式优先级高于类和元素选择器。例如：

#my-heading { color: red; }

类选择器（Class selectors）和属性选择器
通过 .class 或 [attribute] 定义的样式优先级高于元素选择器。例如：

.my-class { color: green; }

元素选择器（Element selectors）和伪元素
通过标签名（如 p、div）定义的样式优先级最低。例如：

p { color: black; }

!important 规则
在声明后添加 !important 会覆盖其他所有优先级规则（包括行内样式）。例如：

.my-class { color: purple !important; }

优先级顺序总结

  1. !important 声明
  2. 行内样式（style 属性）
  3. ID 选择器（#id）
  4. 类选择器（.class）、属性选择器（[attr]）、伪类（:hover）
  5. 元素选择器（div）、伪元素（::before）
  6. 继承的样式

注意：内部样式（<style> 标签）和外部样式（.css 文件）优先级相同，后定义的规则会覆盖先定义的规则。### CSS 选择器优先级总结

!important > 行内样式（style属性） > ID选择器 > 类选择器/伪类选择器 > 标签选择器 > 通配符选择器

行内样式优先级最高，但!important可强制覆盖所有规则。ID选择器（#id）强于类选择器（.class），标签选择器（如div）弱于类选择器，通配符（*）优先级最低。

颜色表示方法

关键字：如skyblue
RGB：rgb(20, 214, 58)
RGBA：rgba(20, 214, 58, 0.1)（含透明度）
十六进制：#985d73

RGBA的透明度范围是0（完全透明）到1（不透明），例如0.1表示10%不透明度。

后代与子代选择器

后代选择器（空格）：匹配所有层级后代
.box h2 选择.box内所有h2元素

子代选择器（>）：仅匹配直接子元素
.box>h2 仅选择.box下一级的h2

后代选择器会覆盖更通用的样式，如示例中.box h2的font-size覆盖了全局h2的样式。

结构伪类选择器

:first-child：匹配父元素的第一个子元素
:last-child：匹配最后一个子元素
:nth-child(n)：匹配第n个子元素（支持even/odd）

示例：
.box p:nth-child(4) 选中第4个p元素
.box p:nth-child(odd) 选中所有奇数位p

交互伪类选择器

:hover：鼠标悬停时生效
:active：鼠标点击时生效

示例：
div:hover span：鼠标悬停div时改变其子span的样式
a:active：点击链接时改变颜色

可通过transition属性添加动画效果，如transition: all 0.5s实现平滑过渡。### 代码功能分析
这段HTML和CSS代码创建了一个简单的网页，其中包含一个div元素，该元素使用视窗单位（vw/vh）定义尺寸并设置了背景颜色。

HTML结构解析

  • 文档类型声明为HTML5（<!DOCTYPE html>）。
  • 根元素<html>设置语言为英语（lang="en"）。
  • <head>部分包含：
    • 字符集声明为UTF-8。
    • 响应式视口设置（适配移动设备）。
    • 页面标题为"Document"（未修改的默认值）。
  • <body>内仅有一个<div>元素。

CSS样式说明

  • div元素的样式规则：
    • 注释掉了固定像素尺寸（10px）的代码。
    • 使用视窗单位设置尺寸：
      • 50vw表示宽度为视窗宽度的50%。
      • 50vh表示高度为视窗高度的50%。
    • 背景颜色设置为粉色（pink）。

关键特性

  1. 响应式设计：通过视窗单位（vw/vh）实现元素尺寸随浏览器窗口大小自动调整。
  2. 注释使用：展示了如何注释掉不需要的代码（固定像素尺寸部分）。
  3. 基础结构：包含HTML文档的基本必要元素（DOCTYPE、html、head、body）。

效果预览

打开该HTML文件时，会显示一个粉色矩形，其大小始终占据视窗宽度和高度的50%，随窗口缩放动态变化。### CSS 三大特性解析

层叠性
当相同选择器对同一元素定义相同属性时，后定义的样式会覆盖先前的样式。例如，若同一div的color属性被多次定义，最终生效的是最后出现的值。

优先级
不同选择器的权重决定样式优先级，顺序为：!important > 行内样式 > ID选择器 > 类/伪类选择器 > 元素选择器 > 继承样式。权重高的样式优先生效。

继承性
子元素自动继承父元素的部分样式（如color、font-family）。示例中<p>继承了<div>的红色文字和华文彩云字体，但未继承border等非继承属性。

代码示例说明

<style>
    div {
        width: 50%;
        height: 50%;
        background-color: aqua;
        color: red;            /* 被<p>继承 */
        font-size: 30px;        /* 被<p>继承 */
        border: 10px solid black; /* 不被继承 */
        font-family: "华文彩云"; /* 被<p>继承 */
    }
</style>
<body>
    <div>这是盒子
        <p>vhtcgv</p>          <!-- 继承父元素div的文字样式 -->
    </div>
</body>

注意事项

  • 继承性仅适用于特定属性（如文本相关属性），布局属性（如border）通常不继承。
  • 层叠性需考虑样式表的加载顺序，后加载的样式表可能覆盖前者。
  • 优先级计算需避免滥用!important，可能导致维护困难。### CSS 样式总结

字体样式
font-style 控制文字倾斜，italic 表示斜体，normal 表示正常。后定义的样式会覆盖前面的声明，例如 font-style: normal 会覆盖 italic。

字体粗细
font-weight 控制文字粗细，lighter 表示较细，bold 表示加粗，normal 表示正常。同样，后定义的样式会覆盖前面的声明。

字体族
font-family 指定字体，优先使用 "华文彩云"，若不可用则回退到 sans-serif 通用字体族。

颜色修正
color: orange 是正确写法，orangered 写法无效。若需橙红色，应使用标准颜色名称或十六进制值。

文本装饰
text-decoration 可组合多种样式：

  • underline skyblue double 表示蓝色双下划线。
  • 其他可选值：line-through（删除线）、overline（上划线）、wavy（波浪线）、dashed（虚线）、dotted（点线）。

HTML 结构说明

  • 包含一个 div 元素（类名为 box）和一个 p 段落。
  • 注释中列出了 text-decoration 的线型选项，但未实际应用。
  • 链接 <a href="#">百度</a> 未设置样式，默认显示为蓝色下划线。

JavaScript 核心总结（部分版）

JS 引入方式

内嵌式：直接在 HTML 里写 <script> JS代码 </script>
外链式：通过 <script src="文件.js"></script> 引入外部文件

JS 输出 / 显示方式

alert(内容) —— 弹出提示框
console.log(内容) —— 控制台打印
document.write(内容) —— 直接写在页面上
元素.innerHTML = 内容 —— 修改标签里的内容

JS 注释

// 单行注释
/* 多行注释 */

JS 数据类型

数字：Number
字符串：String
布尔：Boolean（true / false）
数组：Array
对象：Object
空：null
未定义：undefined

变量定义

let 变量名 = 值
const 常量名 = 值（固定不变）
老写法：var（不推荐）

获取页面元素

document.getElementById("id名")
作用：拿到 HTML 标签，方便修改内容 / 样式

修改标签内容

元素.innerHTML = "新内容"

JS 事件

onclick：点击事件
例：onclick="alert('欢迎')"

JS 必须知道的重点

JS 代码是从上往下执行
要获取元素，必须等元素加载完（放标签后面）
同一个 id 不能重复（代码里 id=“bun” 重复了）

超简短背诵版

引入：内嵌、外链
输出：alert、console、write、innerHTML
注释：// 和 /* */
类型：数字、字符串、布尔、数组、对象
拿元素：getElementById
改内容：innerHTML
点击事件：onclick

# html # css # javascript
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

深入Android Framework：从核心原理到面试实战

avatar AtomGit开源社区

20260501_陈哲凡_研途灵伴项目周报3_管理后台与饮食纵切收口

本周重点推进管理后台业务功能与饮食模块纵切链路。完成管理后台从脚手架到真实业务页面的升级，实现题集、菜单、知识建议等8个模块的CRUD功能，统一交互模式与接口规范。同步完善后端/admin接口，强化字段校验与删除保护机制。打通饮食全链路，实现基于用户状态的智能推荐系统，采用规则评分+AI生成的双保险策略。特别注重前后端字段对齐，确保联调效率。技术栈主要使用FastAPI、React+TS、Ant

avatar AtomGit开源社区
cover

【腾讯位置服务开发者征文大赛】WorkBuddy + tencentmap skill 打造从“查地图“到“对话地图“—— AI 赋能 + 腾讯地图 API 打造智能出行规划助手

avatar AtomGit开源社区