HTML CSS 新手大全初学者必看（含有部分 JavaScript）

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）

标签类型说明

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

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

文档类型与基础结构

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

头部信息

页面标题设置为 "Document"（可通过 <title> 修改）

包含基本的元标签：

html 复制代码

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

主体内容

图片元素

使用相对路径引用图片 ./img/虎太郎.webp

包含备用文本（alt 属性）和悬停提示（title 属性）

html 复制代码

<img src="./img/虎太郎.webp" alt="图片" title="我是鼠标展示的信息">

视频元素

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

音频元素

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

改进建议

为视频和音频添加 controls 属性以便用户交互
考虑为视频添加备用文字轨道（<track> 标签）
检查文件路径确保资源可访问（特别是中文文件名）
补充完整的文档标题（替换默认 "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属性中，优先级最高，适用于单个元素的特定样式调整。例如：

html 复制代码

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

内部样式

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

html 复制代码

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

外部样式

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

html 复制代码

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

优先级规则

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

行内样式（Inline styles）

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

html 复制代码

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

ID 选择器（ID selectors）

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

css 复制代码

#my-heading { color: red; }

类选择器（Class selectors）和属性选择器

通过 .class 或 [attribute] 定义的样式优先级高于元素选择器。例如：

css 复制代码

.my-class { color: green; }

元素选择器（Element selectors）和伪元素

通过标签名（如 p、div）定义的样式优先级最低。例如：

css 复制代码

p { color: black; }

!important 规则

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

css 复制代码

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

优先级顺序总结

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

注意：内部样式（<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）。

关键特性

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

效果预览

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

层叠性

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

优先级

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

继承性

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

代码示例说明

html 复制代码

<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）

HTML 代码总结与分析

头部信息

主体内容

改进建议

页面跳转与超链接

文件下载

锚点定位

调用系统应用

地图与社交应用

其他特性

不同场景的实现差异

注意事项

HTML 表格核心标签

使用场景区分

一、表单整体结构

二、常用输入类型（input type）

三、常用表单属性

四、其他表单标签

五、关键总结

行内样式

内部样式

外部样式

优先级规则

优先级顺序总结

颜色表示方法

后代与子代选择器

结构伪类选择器

交互伪类选择器

HTML结构解析

CSS样式说明

关键特性

效果预览

代码示例说明

注意事项

HTML 结构说明

JavaScript 核心总结（部分版）

JS 引入方式

JS 输出 / 显示方式

JS 注释

JS 数据类型

变量定义

获取页面元素

修改标签内容

JS 事件

JS 必须知道的重点

超简短背诵版

HTML CSS 新手大全初学者必看（含有部分 JavaScript）