HTML5

HTML5文档结构

graph TD A[HTML5文档结构] --> B["文档基本结构✨"] A --> C[主体结构元素] A --> D[非主体结构元素] A --> E[全局属性] B --> B1[类型声明] B --> B2[文件开始标签] B --> B3[文件头] B --> B4[文件主体] B --> B5[注释] C --> C1[article] C --> C2[section] C --> C3[nav] C --> C4[aside] C --> C5[time] D --> D1[header] D --> D2[hgroup] D --> D3[footer] D --> D4[address] E --> E1["id,class,dtyly⭐"] E --> E2[title] E --> E3[dir] E --> E4[contentEditable] E --> E5["signMode⭐"] E --> E6["hidden⭐"] E --> E7[spellcheck]

文档基本结构✨

1. 类型声明
<!DOCTYPE html>

在这里不区分大小写

2. 文件开始标签

文章中的所有内容都包含在其中

<html lang="zh-CN">
    ...
</html>

属性

  • lang设置文章语言
3. 文件头

一般包含文章的标题和元信息,也包含 css和 js的引入

<head>
    <meta charset="utf-8">
    <title>...</title>
</head>

一下是一些常用的元信息

  • <meta charset="utf-8"> 设置文件编码格式
  • <meta name="author" content="char"> 设置文章作者
  • <meta name="description" content="表述...">设置文章的描述
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">移动端适配
  • <meta name="theme-color" content="#4285f4">设置网站主题色(移动端)

  • <meta name="keywords" content="关键词1, 关键词2, 关键词3">设置文章关键词(现代搜索引擎以忽视)

4. 文件主体

用于盛放展示给用户的内容

<body>
	...
</body>
5. 注释

有利于代码的检查和修改,不会展示给用户

<!--注释的文字-->
<!--
注释的段落
注释的段落
-->

主体结构元素

1. article

表示文档、页面、应用或网站中一个独立的、可独立分配或可复用的结构。

<article>
	...
</article>

使用场景:

  1. 论坛帖子
  2. 新闻文章
  3. 博客文章
  4. 用户评论
  5. 独立的小部件或应用组件
2. section

表示文档中的一个主题性分组，通常会有标题。

<section>
	...
</section>

使用场景:

  1. 文章的章节
  2. 标签页中的不同标签内容
  3. 长文档中的不同部分
  4. 任何需要分组的 相关内容
3. article和section主要区别
特性 <article> <section>
独立性 内容是独立的、完整的 内容是相关的但依赖上下文
复用性 可以被单独复用 通常不能单独复用
嵌套 可以嵌套其他 <article> 通常不嵌套其他 <section>
标题 通常必须有标题 建议有标题但不是必须
语义 表示独立内容 表示主题分组

需要注意的是,这里提到的复用指的是 内容复用而并非功能复用

注意

  • 不要将其作为设置样式的容器,那是div的作用
  • 当article,aside,nav更符合要求时,尽量不要用section
  • 不要为没有标题的内容设置section
4.nav

用于构建导航,既可为页面导航,也可为页内导航

常见运用场合

  • 传统导航栏
  • 侧边导航栏
  • 页内导航
  • 翻页操作

需要注意的是,不是所有的导航都用 nav

<nav>
	<ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">分类</a></li>
        <li><a href="#">标签</a></li>
        <li><a href="#">归档</a></li>
    </ul>
</nav>
5. aside

表示与页面主要内容仅有间接关联的内容，这类内容可以被视为与主内容分开的独立单元。

降低SEO权重

常见运用场景

  • 注释
  • 摘录引用
  • 侧边栏
  • 广告栏

主要使用方法

  • 被包含在 article中:表示主要内容的附属信息
  • 在 article外:表示站点的附属内容
6. time

可明确地对 机器的日期和时间进行编码,并且以让人易读的方式展现出来

<time datetime="机器可读格式">人类可读格式</time>
<!--提供标准化的时间数据（ISO 8601 格式）-->
场景 示例代码 说明
完整日期时间 <time datetime="2025-06-20T14:30:00+08:00">2025年6月20日 14:30</time> T 分隔日期和时间，+08:00 表示时区（北京时间）Z 表示UTC标准时区(+00:00)
仅日期 <time datetime="2025-06-20">2025年端午节</time> 适合节日、生日等不需要精确时间的场景
时间段 <time datetime="PT2H30M">2小时30分钟</time> P 表示周期，T 后接时间，H/M 分别代表小时/分钟
周数 <time datetime="2025-W25">2025年第25周</time> W 前为年份，后为周数

非主体结构元素

表示 逻辑结构或 附加信息的非主体结构远元素

1. header

具有引导和导航作用,

<article>
    <header>
	<h1>HTML从入门到精通</h1>
	</header>
    ...
</article>

一个 header元素中通常包含一个或多个 heading元素,也可以包含 hgroup,table,form,nav等其他元素

2. hgroup

对 标题及其 子标题进行分类的元素,可包含 heading和 p元素

<article>
	<header>
        <hgroup>
        	<h1>HTML教程</h1>
            <h2>从入门到精通</h2>
        </hgroup>
    </header>
</article>

需要注意的是,这里这样做是为了提高ESO对主标题的权重,且优化无障碍用户的体验感

但在实际开发中我们常h1+css的形式代替hgroup,这样可以做出更绚丽的样式

<div class="title-group" role="group" aria-label="文章标题">
  <h1>CSS3完全指南</h1>
  <p class="subtitle">从盒模型到Flexbox</p>
</div>
3. footer

表示最近一个章节内容或根元素的页脚，通常包含该章节的元信息（如作者、版权、相关链接等）

<root>
	<ul>
        <li><a href="#">友链</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">版权</a></li>
    </ul>
</root>
4. address

通常用于提供文档作者或相关责任方的联系方式。

<articel>
	<header>
    	<h1>
            HTML从入门到精通
        </h1>
    </header>
    <address>
    	<a href="#">QQ</a>
    	<a href="#">微信</a>
    </address>
</articel>

需要注意的是 address不能嵌套在 header和 hgroup内,address内的文字会默认设置为斜体

全局属性

顾名思义所有元素都可以使用的属性

1. id,class,style
属性 作用 备注
id 指定元素的id名 id唯一不可重复使用
class 指定元素类名 可重复使用
style 指定元素行内样式 权重最高

✅ 用 id → 唯一性操作（JS、锚点、表单）。
✅ 用 class → 可复用的样式或批量操作。

<div id="Hi">
    <h1>
        Hi
    </h1>
</div>
---
<div class="hi">
    <h1>
        hi
    </h1>
</div>
---
<div style="background-color:blue">
    <h1>
        hi
    </h1>
</div>
2. title

用于指定元素的额外信息,鼠标移动的元素上时会显示这些额外信息

<a href="#" title="博客">前往我的小窝</a>

image-20250622115219708

3. dir

用于元素内容的文本方向

<p dir="ltr">
	hello world!
</p>
<p dir="rtl">
	hello world!
</p>

image-20250622120931894

4. contentEditable

可以让元素的内容变得可编辑，类似于一个简单的富文本编辑器。

<div contentEditable="true">
    你可以编辑这段文字
</div>

当元素未被指定该属性时,将继承父元素的属性

5. designMode

控制整个文档是否可编辑的属性，它比单个元素的 contenteditable 属性影响范围更广,该属性有 on和 off两个值

<button onclick="document.designMode='on'">启用编辑</button>
<button onclick="document.designMode='off'">禁用编辑</button>
6. hidden

用于隐藏页面元素，使其不显示在页面上。

<button onclick="var target=document.getElementById('comment');
    target.hidden=!target.hidden">
    开始/关闭评论
</button>
<!--here-->
<section id="comment" hidden="false">
    <header>
        <h2>写入评论</h2>
    </header>
    <textarea name="commentArea" id="commentArea" spellcheck="true">输入你的评论</textarea>
    <button>发送评论</button>
</section>

css样式中的display属性,设置 display:none;作用同上,但使用的目的不同

特性 hidden 属性 display: none
作用 语义化隐藏（HTML 层面） 样式化隐藏（CSS 层面）
DOM 是否保留 ✅ 保留 ✅ 保留
是否影响布局 ❌ 不占空间 ❌ 不占空间
JavaScript 操作 element.hidden = true element.style.display="none"
动画支持 ❌ 不能过渡 ✅ 可结合 opacity 动画
适用场景 条件渲染、JS 控制显示/隐藏 响应式布局、动态 UI 切换
7. spellcheck

告诉浏览器检查拼写和语法,若未配置该属性则会基础父元素的spellcheck状态

<textarea spellcheck="true">
	comment
</textarea>

HTML文本

graph TD A[HTML] --> B["标题文本✨"] A --> C[普通文本] A --> D["段落文本✨"] A --> E[功能性文本] C --> C1[斜体,下划线,删除线] C --> C2[上标与下标] C --> C3[代码片段] D --> D1[段落标签] D --> D2[换行标签] D --> D3[预格式文本] D --> D4[段落缩进] E --> E1[标记文本] E --> E2[折叠块] E --> E3[进度信息] E --> E4[刻度标签] E --> E5[标题信息]

标题文本✨

标题一共分为1~6级

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
示例
标题文本

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

普通文本

1. 斜体,下划线,删除线
<!-- 斜体 -->
<em>有语义的斜体</em>
<i>无语义的斜体</i>
<!-- 下划线 -->
<u>有语义的下划线</u>
<span style="text-decoration: underline;">无语义的下划线(推荐)</span>
<!-- 删除线 -->
<del>有语义的删除线</del>
<s>有语义的删除线(内容过时但未删除)</s>
<span style="text-decoration:line-through">无语义的删除线</span>
<!-- 粗体-->
<strong>有语义的粗体</strong>
<b>无语义的粗体</b>
2. 文字的上标与下标

一种特殊的文字修饰效果

<h3>X<sup>3</sup> + X <sup>2</sup> - 3 = 0</h3>
<h3>3X<sub>1</sub> + X <sub>2</sub> = 10</h3>

X3 + X 2 - 3 = 0

3X1 + X 2 = 10

3. 代码片段

专门用于标记计算机代码内容。

<code>...</code>

示例

段落文本✨

1. 段落标签
<p>这是一个段落</p>
2. 换行标签
<br/>
3. 预格式化文本

专门用于保留文本中的原始排版格式。以下是关于该标签的详细解析

<pre>
	...
	...
</pre>
4. 引用块

可以实现页面文字的缩进

<blockquote>
    ...
</blockquote>

功能性文本

1. 标记文本

用于表示页面中需要突出显示或高亮显示的一段文本

<mark>
	content
</mark>

content

2. 细节展示元素(折叠)

提供了一个可折叠的区域,

<details>
	<summary>这是一个折叠框</summary>
    <h1>内容</h1>
</details>
这是一个折叠框

内容

值得一提的是,可以给该元素设置 open属性,使其默认打开

3. 进度信息

用来表示一个任务完成的进度,这个进度可以是不确定的

属性:

属性 值 备注
value [num] (当前进度) max > value,value > 0
max [num] (总进度) max > 0 
<progress value="0.2" max="1"</progress>
<progress></progress>

4. 刻度信息

用来表示规定范围内的数量值

属性:

属性 值 备注
value [num] (当前进度) max > value,value > 0
min [num] (最大值) min > 0
max [num] (最小值) max > 0
low [num] (低值区) ...
optimum [num] (最佳值) ...
high [num] (高值区) ...

[min]--[low]--[optimum]--[high]--[max]

<meter value="2" min></meter>
5. 标题信息

有语义的表示作品的标题

<cite>句号</cite>

我们终于来到一个句号

--句号

表格✨

<table> </table>

表格标题

<caption>...</caption>设置表格标题

<caption>用户信息</caption>

表行

<tr></tr>,表示表格中的一行

<table>
    <tr>
    	...
    </tr>
</table>

表头

<th></th>表示表格的表头

<table>
    <tr>
    	<th>姓名</th>
        <th>电话</th>
        <th>邮箱</th>
    </tr>
    <tr>
    	<td>Char</td>
        <td>19130635357</td>
        <td>sakura_net@163.com</td>
    </tr>
</table>

表单元

<td></td>表示表格中的一个单元

<table>
    <tr>
    	<th>姓名</th>
        <th>电话</th>
        <th>邮箱</th>
    </tr>
    <tr>
    	<td>Char</td>;
        <td>19130635357</td>
        <td>sakura_net@163.com</td>
    </tr>
</table>
用户数据
姓名 电话 邮箱
Char 19130635357 sakura_net@163.com

合并单元格✨

<td colspan="合并的列数" rowspan="合并的行数">...</td>
用户数据
角色 昵称 邮箱 照片
超级管理员 char sakura_net@163.com char.png
杏菜 sakura_net@163.com 杏菜.png
青雀 sakura_net@163.com 青雀.png

列表

列表共有三类,第一类是 有序列表,第二类是 无序列表,第三类是 定义列表

无序列表

一种不编号的列表,它通常用一个符号作为每个列表项的符号

无序列表通常使用 <ul>,<li>标签和 type属性

<ul type="circle"> 
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
type属性值 列表符号 备注
disc ● 默认样式
circle ○
square ■

需要注意的是,该属性已在HTML5中废弃,改用css实现
list-style-type: disc | circle | square | none; /* 实心圆/空心圆/方块/无 */

有序列表

使用编号来编排项目,通常采用 数字或 字母开头

有序列表通常使用 <ol>,<li>标签和 type,start属性

<ol type="a" start="b">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
type属性值 列表符号 备注
1 1. 2. 3. 默认样式
a a. b. c.
A A. B. C.
i i. ii. iii.
I I. II. III

需要注意的是,该属性已在HTML5中废弃,改用css实现
list-style-type: decimal|lower-alpha|upper-alpha|lower-roman;

定义列表

定义列表常用来解释名词,它包含两个层次的列表

第一层是要解释的名词,第二次是具体的解释

定义列表通常使用 <dl>,<dt>,<dd>

<h5>小鸡词典</h5>
<dl>
    <dt>六六六</dt>
    <dd>形容某事很六</dd>
    <dt>yyds</dt>
    <dd>永远的神</dd>
    <dt>xxs</dt>
    <dd>小学生</dd>
</dl>
小鸡词典
六六六
形容某事很六
yyds
永远的神
xxs
小学生

链接

用于创建超链接，让用户可以点击跳转到其他页面或资源。

<a href="链接地址">可点击的文字或图片</a>

常见属性

属性 作用 示例
href 设置链接地址 href="page.html"
target 控制打开方式 target="_blank"（新标签页打开）
title 鼠标悬停提示 title="点击查看详情"
rel 安全/SEO控制 rel="noopener"（防黑客）

打开方式

属性值 效果 适用场景 注意事项
_self 原地打开（ 默认） 自己的网站链接 会覆盖当前页面
_blank 新建标签页 外部网站（比如微博、淘宝） 记得加 rel="noopener" 防黑客
_parent 在父框架打开（很少用） 老式框架网页 现在基本没人用框架了
_top 跳出所有框架 防止网页被恶意嵌套 安全防护时用
自定义名 指定窗口名重复使用 聊天窗口、后台系统 要自己起名字如 target="chat"

最常用的两种链接

(1) 普通网页链接
<a href="https://www.qq.com">腾讯网</a>
(2) 页面内的锚点链接
<!-- 先定义锚点 -->
<h2 id="section1">第一章</h2>

<!-- 跳转到锚点 -->
<a href="#section1">跳转到第一章</a>

特殊用法

(1) 打电话/发邮件
<a href="tel:13800138000">拨打电话</a>
<a href="mailto:service@qq.com">发送邮件</a>
(2) 下载文件
<a href="report.pdf" download>下载报告</a>

表单

用于收集用户输入数据的交互元素，广泛应用于注册、登录、调查问卷、订单提交等场景。它由多个输入控件（如文本框、单选按钮、复选框等）组成，用户填写后可将数据提交至服务器进行处理。

自定义表单

核心属性
属性 值/类型 说明 示例
action URL 表单数据提交的目标地址（后端处理程序） action="/submit.php"
method get/post 数据提交方式： -get：数据附加在URL中（可见） - post：数据在请求体中（不可见） method="post"
enctype application/x-www-form-urlencoded（默认） multipart/form-data（文件上传） text/plain（纯文本） 表单数据的编码类型 enctype="multipart/form-data"
target _self（当前窗口） _blank（新窗口） _parent/_top（框架用） 响应显示的位置 target="_blank"
name 字符串 表单名称（用于JS/DOM操作） name="loginForm"
功能增强属性
属性 说明 示例
autocomplete 是否启用自动填充：on（默认）/off autocomplete="off"
novalidate 跳过HTML5表单验证（用于自定义验证） novalidate
accept-charset 指定表单提交的字符编码（如 UTF-8） accept-charset="UTF-8"

input

基本属性
属性 说明 示例
type 定义输入字段类型 type="text"
name 标识字段名称，提交表单时使用 name="username"
value 设置输入字段的初始值 value="默认文本"
placeholder 显示提示文本，输入时消失 placeholder="请输入用户名"
required 指定字段为必填项 required
disabled 禁用输入字段 disabled
readonly 字段只读，不可编辑 readonly
功能增强属性
属性 说明 示例
autocomplete 是否启用自动填充：on（默认）/off autocomplete="off"
novalidate 跳过HTML5验证（用于自定义验证） novalidate
autofocus 进入页面自动获得光标焦点 autofocus
list 与 <datalist>绑定 list="datalisr1"
text

最基本的文本输入框

<input type="text" name="username" placeholder="请输入用户名">

相关属性

属性 值 说明
size number 文本框的宽度
maxlength number 文本框最大容纳量
pattern 正则表达式 文本的格式要求

需要注意的是,不要与 input的属性混淆

password

输入内容会显示为掩码：

<input type="password" name="password" placeholder="请输入密码">

可以通过 JavaScript实现"显示密码"功能：

document.getElementById('showPwd').onclick = function() {
  document.getElementById('pwd').type = 'text';
}

相关属性

属性 值 说明
size number 文本框的宽度
maxlength number 文本框最大容纳量
pattern 正则表达式 文本的格式要求
radio

用于多选一场景：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

注意事项：

  • 同一组的单选框必须设置相同的 name属性
  • 使用 checked属性设置默认选项
checkbox

用于多选场景：

<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="sports">运动

特点：

  • 同一组的单选框必须设置相同的 name属性
  • 选中时提交 value值，未选中则不提交
  • 也可使用 checked设置默认选中
submit

提交表单数据：

<input type="submit" value="提交">

样式简陋,建议使用 <button>代替

reset

重置表单内容：

<input type="reset" value="重置">

样式简陋,建议使用 <button>代替

button

普通按钮:

<input type="button" value="buttonValue" oncilk="function()">

样式简陋,建议使用 <button>代替

date/time
<input type="date">  <!-- 日期选择 -->
<input type="month">  <!-- 月份选择 -->
<input type="time">  <!-- 时间选择 -->
<input type="week">  <!-- 周数选择 -->
<input type="datetime-local">  <!-- 本地日期时间 -->
file

使用 type="file"实现文件上传功能：

<input type="file" name="avatar" accept="image/*">

注意事项：

  • 表单必须设置 enctype="multipart/form-data"
  • accept属性可限制文件类型
hidden

使用隐藏字段传递不需要用户看到的数据：

<input type="hidden" name="user_id" value="12345">
特殊输入类型
<input type="email">  <!-- 邮箱地址，会自动验证格式 -->
<input type="url">    <!-- URL地址，会自动验证格式 -->
<input type="tel">    <!-- 电话号码 -->
<input type="number"> <!-- 数字输入，可设置min/max/step -->
<input type="range">  <!-- 滑块控件, 可设置min/max/step -->
<input type="color">  <!-- 颜色选择器 -->
<input type="search"> <!-- 搜索框，可能有清除按钮 -->

select/option

创建下拉菜单的核心元素，它为用户提供了从预定义选项中选择一个或多个值的便捷方式。

<select name="选项名称">
  <option value="值1">显示文本1</option>
  <option value="值2">显示文本2</option>
  <option value="值3">显示文本3</option>
</select>
<select> 属性
属性 说明 示例
name 表单提交时的字段名称 name="city"
multiple 允许多选 multiple
size 可见选项数量 size="4"
disabled 禁用下拉菜单 disabled
required 必填字段 required
form 关联的表单ID form="form1"
<option> 属性
属性 说明 示例
value 提交到服务器的值 value="bj"
selected 默认选中项 selected
disabled 禁用该选项 disabled
label 替代显示文本 label="北京市"

datalist

它允许开发者为输入字段提供一组预定义的选项，用户可以从下拉列表中选择或继续手动输入。

<input name="input_name" list="datalist-id">
<datalist id="datalist-id">
  <option value="选项值1">显示文本1</option>
  <option value="选项值2">显示文本2</option>
  <option value="选项值3">显示文本3</option>
</datalist>
  • <input> 元素的 list 属性必须与 <datalist> 的 id 属性匹配
<datalist>属性
属性 说明 示例
id 唯一标识，与input的list属性对应 id="country-list"
<option>属性
属性 说明 示例
value 提交到服务器的值 value="CN"
label 替代显示文本（可选） label="中国"

button

<button> 是 HTML 表单中最重要的交互元素之一，它比 <input type="button"> 更灵活、功能更强大。

<button type="按钮类型">按钮文本</button>
常见属性
属性 说明 示例
type 按钮类型（submit/reset/button） type="button"
name 表单提交时的字段名 name="save-btn"
value 表单提交时的值 value="save-data"
disabled 禁用按钮 disabled
form 关联的表单ID form="form1"
formaction 覆盖表单的action属性 formaction="/save"
formenctype 覆盖表单的enctype属性 formenctype="multipart/form-data"
formmethod 覆盖表单的method属性 formmethod="get"
formnovalidate 跳过表单验证 formnovalidate
formtarget 覆盖表单的target属性 formtarget="_blank"
基本类型
类型 说明 示例
submit 提交表单（默认类型） <button type="submit">提交</button>
reset 重置表单 <button type="reset">重置</button>
button 普通按钮（需配合JavaScript） <button type="button">点击</button>

需要注意的是,如果不指定 type 属性，默认行为是 submit，这可能导致意外提交表单。

label

点击标签文本即可聚焦到对应表单控件,能显著提升表单的可访问性和用户体验

<!-- 隐性关联 -->
<label for="控件id">标签文本</label>
<input type="text" id="控件id">
<!-- 显性关联 -->
<label>
	标签文本
	<input type="text">
</label>

output

专门用于表示计算或用户操作的结果

    <form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
  <input type="number" id="num1" value="0">
  +
  <input type="number" id="num2" value="0">
  =
  <output name="result" for="num1 num2">0</output>
</form>

属性

属性 说明 示例
name 标识输出结果的名称 name="sum"
for 指定关联的输入元素id（多个用空格分隔） for="num1 num2"
form 关联的表单id form="calcForm"

表单内的关联关系

关联属性 作用元素 关联目标 主要用途
for <label>, <output>, <datalist> 其他元素的**id** 建立可访问性关联/计算关系
form 所有表单元素 表单的**id** 让元素在表单外部也能归属表单
list <input> <datalist> 的 id 为输入框提供选项列表

口诀

  1. for 永远找 id
    (label、output、datalist 都如此)
  2. form 是"远程归属"
    (让元素能远程属于某个表单)
  3. list 是输入框的"智能提示"
    (关联 datalist 的 id)
  4. 单选组靠 name 团结
    (相同 name 的单选按钮互斥)

表单验证

自动验证

通过在元素中使用属性的方法,在表单被提交的时候执行自动验证

输入类型验证
输入类型 自动验证行为
email 验证电子邮件格式
url 验证URL格式
number 只允许数字
tel 移动端会调出数字键盘
date/time 验证日期时间格式
属性驱动验证
属性 验证行为
required 字段必填
minlength/maxlength 文本长度限制
min/max 数字/日期范围
step 元素值的增加减少的增量
pattern 正则表达式验证
checkValidity显式验证

checkValidity() 检查单个表单元素或整个表单是否通过所有验证约束,返回布尔值,且会自动触发浏览器显示验证提示（当元素无效时）

<script>
function check(){
    var email = document.getElementById('email');
    if (!email.checkValidity()) {
      email.setCustomValidity('邮箱无效');
      return false;
    ...
}
</script>
<form onsubmit="return check()">
    <input id="emali" type="email" ...>
    ...
    <button type="submit">提交</button>
</form>
避免验证
表单关闭验证
<form novalidate ...>
	...
</form>
单个输入框关闭验证
<form ...>
    <input type="text" formnovalidate>
    ...
</form>

需要注意,的是在实际开发中,应加强验证强度!

自定义错误提示
<script>
function check(){
    var email = document.getElementById('email');
    if (!email.checkValidity()) {
      email.setCustomValidity('邮箱无效');//自定义错误提示
      return false;
    ...
}
</script>
<form onsubmit="rturn check()">
    <input id="emali" type="email" ...>
    ...
    <button type="submit">提交</button>
</form>

图像

图像的基本格式

格式 压缩方式 色彩深度 透明度支持 动画支持 文件大小 主要用途
JPG 有损压缩 24位（1600万色） ❌ ❌ 小 网页照片、摄影
PNG 无损压缩 8/24/32位 ✔（Alpha） ❌ 较大 透明图标、高质量图像
GIF 无损压缩 8位（256色） ✔（1位） ✔ 小 简单动画、低色彩图形
WebP 有损/无损 24/32位 ✔ ✔ 较小 网页优化（替代JPEG/PNG）
SVG 无损（代码） 无限（矢量） ✔ ✔（JS/CSS） 小 网页图标、矢量图形

Img

<img> 标签是 HTML 中用于在网页上嵌入图像的基本元素。

<img src="图片地址" alt="替代文本">
属性 描述 示例
src 指定图像路径（必需） src="images/logo.png"
alt 替代文本（图像无法显示时显示） alt="logo"
width 设置图像宽度（像素或百分比） width="200"
height 设置图像高度（像素或百分比） height="100"
title 鼠标悬停时显示的提示文本 title="点击查看大图"
loading 控制懒加载行为 loading="lazy"
srcset 响应式图像，不同分辨率提供不同图像 srcset="small.jpg 480w, large.jpg 1080w"
sizes 与srcset配合使用，定义显示条件 sizes="(max-width: 600px) 480px, 800px"
响应式图像
<img src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 768px, 1200px"
     alt="响应式图像示例">

值得一提的是,尺寸设置建议 HTML属性+css

Img Map

图像热区链接（Image Map）允许在单个图片上定义多个可点击区域，每个区域可以链接到不同的目标。这是创建交互式图片的强大工具，常用于地图、产品图、导航菜单等场景。

图像热区链接由两部分组成：

  1. <img> 标签（添加 usemap 属性）
  2. <map> 标签（定义热区）
  3. <area> 标签 (定义范围)

<area>属性:

属性 描述 必需 示例
shape 定义热区形状 是 rect, circle, poly, default
coords 定义热区坐标 是 rect:右,上,左,下
href 链接目标 否 URL
alt 替代文本 是 描述性文本
target 打开方式 否 _blank, _self 等
title 悬停提示 否 提示文本 
<img src="image.jpg" alt="示例图片" usemap="#examplemap">

<map name="examplemap">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="区域1">
  <area shape="circle" coords="100,100,50" href="page2.html" alt="区域2">
  <area shape="poly" coords="10,20,40,60,100,80" href="page3.html" alt="区域3">
</map>

需要注意的是,这里将 <img>和 <map>链接起来的是 name

视频

标签

标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 
<video width="640" height="360" controls poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持 HTML5 video 标签。
</video>

主要属性

  1. <video>
属性 描述 示例
src 视频文件路径 src="video.mp4"
controls 显示播放控件 controls
autoplay 自动播放 autoplay
loop 循环播放 loop
muted 静音 muted
poster 视频封面图 poster="poster.jpg"
width/height 设置尺寸 width="640" height="360"
preload 预加载方式 preload="auto" metadata none
  1. <source>
    属性 值 描述
    src URL 规定媒体文件的 URL。
    type MIME_type 规定媒体资源的 MIME 类型。

视频格式

格式 MIME 类型 浏览器支持
MP4 video/mp4 所有现代浏览器
WebM video/webm Chrome, Firefox, Edge
Ogg video/ogg Firefox, Opera

音频

与 <video>标签基本相同,没有 封面和 尺寸元素

音频格式

  • MP3 (audio/mpeg)
  • OGG (audio/ogg)
  • WAV (audio/wav)
  • AAC (audio/aac)

绘图

Canvas

创建canvas元素
  • Canvas 是 HTML5 提供的 <canvas> 标签，允许通过 JavaScript 动态绘制 2D 图形。
  • 适用于数据可视化、游戏开发、图像处理等场景
<canvas id="myCanvas" width="500" height="300"></canvas>
获取2D渲染上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
  • getContext("2d") 是绘制 2D 图形的核心方法
绘制基本图形
  1. 线条

moveTo(x, y) + lineTo(x, y) + stroke()

  1. 圆形

arc(x, y, radius, startAngle, endAngle, anticlockwise)

  1. 矩形
  • fillRect(x, y, width, height)（填充）、strokeRect(x, y, width, height)（描边）
  • rect(x, y, width, height) + stroke()/fill()

值得一提的是,前者适合绘制 快速绘制,后者适合 复杂路径组合

核心API与绘制方法
路径绘制
  • beginPath()：开始新路径（避免样式污染）
  • closePath()：闭合路径（自动连接起点和终点）
  • fill() / stroke()：填充或描边路径。
样式设置

  • 颜色：fillStyle（填充色）、strokeStyle（描边色）

  • 线宽：lineWidth（默认 1px）

    lineJoin属性决定了当两条线相交时如何连接它们，有三个可选值：

    1. miter（默认值）：创建一个尖角连接
    2. bevel：创建一个斜角连接
    3. round：创建一个圆角连接

    lineCap属性决定了线条端点如何绘制，有三个可选值：

    1. butt（默认值）：线条末端以方形结束，不超出端点
    2. round：线条末端以圆形结束，超出端点线宽的一半
    3. square：线条末端以方形结束，超出端点线宽的一半
文本渲染
  • fillText(text, x, y,maxWidth)：填充文字
  • strokeText(text, x, y,maxWidth)：描边文字
  • font = "[font-style] [font-weight] [font-size] [font-family]"：设置字体样式
    • 所有参数都是可选的，但至少需要指定 font-size 和 font-family。
    • 顺序不能乱，必须按照 CSS 规范书写。
参数 可选值 示例
font-style normal默认, italic斜体, oblique伪斜体，浏览器可能渲染为 italic "italic 16px Arial"
font-weight normal, bold, 100~900 "bold 16px Arial"
font-size px, em, % "20px Arial"
font-family 字体名称（支持备选）,用逗号分隔 "Arial, sans-serif"

字体样式

  • "Arial"（无衬线字体）
  • "Times New Roman"（衬线字体）
  • "Courier New"（等宽字体）
  • "Microsoft YaHei"（微软雅黑，中文常用）
  • "sans-serif"（通用无衬线字体，fallback 选项）
  • 自定义字体
图像处理
  • drawImage(img, x, y)：绘制图片到 Canvas
  • getImageData() / putImageData()：像素级操作（可用于滤镜效果）
坐标变换
  • translate(x, y)：移动原点
  • rotate(angle)：旋转画布
  • scale(sx, sy)：缩放

SVG

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图像格式，用于在网页和应用程序中显示各种图形。与位图不同，SVG 图像由数学公式描述的线条和曲线组成，因此可以无限缩放而不失真

使用SVG
直接内联
 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="red"/>
     ...
  </svg>
<img>/css背景
<!-- img-->
<img src="image.svg" alt="SVG图像描述" width="100" height="100">

<!-- css背景 -->
 background-image: url('image.svg');
<object>
<object type="image/svg+xml" data="image.svg" width="100" height="100">
  <!-- 后备内容 -->
  <img src="fallback.png" alt="SVG后备图像">
</object>
总结

  1. 优先考虑交互性时：

    • 首选：内联 SVG
    • 次选：object 标签

  2. 静态内容性能优先时：

    • 首选：img 标签
    • 次选：CSS 背景
基本图形
矩形
<rect x="10" y="10" width="80" height="60" fill="blue" stroke="black" stroke-width="2"/>

属性：

  • x, y：左上角坐标
  • rx,ry:圆角半径
  • width, height：宽高
  • fill：填充颜色
  • stroke：边框颜色
  • stroke-width：边框宽度
圆形
<circle cx="50" cy="50" r="40" fill="red"/>

属性：

  • cx, cy：圆心坐标
  • r：半径
椭圆
<ellipse cx="50" cy="50" rx="40" ry="30" fill="green"/>

属性：

  • cx, cy：圆心坐标
  • rx：x轴半径
  • ry：y轴半径
直线
<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2"/>

属性：

  • x1, y1：起点坐标
  • x2, y2：终点坐标
折线
<polyline points="10,10 40,40 10,70 40,100" fill="none" stroke="black" stroke-width="2"/>

属性：

  • points：一系列坐标点，用空格分隔
路径
<path d="M10 10 L90 10 L50 90 Z" fill="purple"/>
命令 等价写法 说明
M moveto 移动画笔
L lineto 画直线
H - 水平线
V - 垂直线
C curveto 三次贝塞尔
S smooth curveto 平滑三次贝塞尔
Q quadratic curveto 二次贝塞尔
T smooth quadratic curveto 平滑二次贝塞尔
A arcto 椭圆弧
Z closepath 闭合路径
文字
<text x="20" y="30">这是SVG文字</text>
属性 说明 示例值
x 文字起始x坐标 数字（如20）
y 文字基线y坐标 数字（如30）
属性 说明 示例值
font-family 字体 "Arial", "微软雅黑"
font-size 字号 "16px", "1.2em"
font-weight 字重 "normal", "bold"
font-style 字体样式 "normal", "italic"
text-decoration 文本装饰 "none", "underline"
letter-spacing 字符间距 "2px", "0.1em"
word-spacing 单词间距 "5px"
text-anchor 文本锚点 "start", "middle", "end"
dominant-baseline 基线对齐 "hanging", "middle"
变换
<rect ... transform="变换函数1 变换函数2 ...">
英文函数名 中文翻译 语法 描述 示例
translate() 平移 translate(tx, ty) 移动元素 translate(10, 20)
scale() 缩放 scale(sx, sy) 改变元素尺寸 scale(2, 1.5)
rotate() 旋转 rotate(angle, cx, cy) 围绕点旋转 rotate(45, 50, 50)
skewX() X轴倾斜 skewX(angle) 沿X轴倾斜变形 skewX(15)
skewY() Y轴倾斜 skewY(angle) 沿Y轴倾斜变形 skewY(30)
matrix() 矩阵变换 matrix(a, b, c, d, e, f) 6值矩阵变换 matrix(1,0.5,-0.5,1,0,0)

Css3

选择器

简单选择器

名称 选择器 例子 例子描述
类选择器 .class .intro 选取所有 class="intro" 的元素。
id选择器 #id #firstname 选取 id="firstname" 的那个元素。
通用选择器 * * 选取所有元素。
元素选择器 element p 选取所有

元素。
分组选择器 element,element,.. div, p 选取所有
元素和所有

元素。

组合器选择器

名称 选择器 示例 示例描述
后代选择器 element element div p 选择
元素内的所有

元素。
子选择器 element>element div > p 选择其父元素是
元素的所有

元素。
相邻兄弟选择器 element+element div + p 选择所有 紧随
元素之后的

元素。
通用兄弟选择器 element1~element2 p ~ ul 选择前面有

元素的每个

    元素。

伪类选择器

伪类用于定义元素的特殊状态。

选择器 例子 例子描述
:active a:active 选择活动的链接。
:checked input:checked 选择每个被选中的 元素。
:disabled input:disabled 选择每个被禁用的 元素。
:empty p:empty 选择没有子元素的每个

元素。
:enabled input:enabled 选择每个已启用的 元素。
:first-child p:first-child 选择作为其父的首个子元素的每个

元素。
:first-of-type p:first-of-type 选择作为其父的首个

元素的每个

元素。
:focus input:focus 选择获得焦点的 元素。
:hover a:hover 选择鼠标悬停其上的链接。
:in-range input:in-range 选择具有指定范围内的值的 元素。
:invalid input:invalid 选择所有具有无效值的 元素。
:lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的

元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个

元素。
:last-of-type p:last-of-type 选择作为其父的最后一个

元素的每个

元素。
:link a:link 选择所有未被访问的链接。
:not(selector) :not(p) 选择每个非

元素的元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个

元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个

元素，从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个

元素的每个

元素，从最后一个子元素计数
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个

元素的每个

元素。
:only-of-type p:only-of-type 选择作为其父的唯一

元素的每个

元素。
:only-child p:only-child 选择作为其父的唯一子元素的

元素。
:optional input:optional 选择不带 "required" 属性的 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 元素。
:required input:required 选择指定了 "required" 属性的 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid input:valid 选择所有具有有效值的 元素。
:visited a:visited 选择所有已访问的链接。

伪元素选择器

选择器 例子 例子描述
::after p::after 在每个

元素之后插入内容。
::before p::before 在每个

元素之前插入内容。
::first-letter p::first-letter 选择每个

元素的首字母。
::first-line p::first-line 选择每个

元素的首行。
::selection p::selection 选择用户选择的元素部分。

属性选择器

选择器 例子 例子描述
[attribute] [target] 选择带有 target 属性的所有元素。
[attribute=value] [target=_blank] 选择带有 target="_blank" 属性的所有元素。
[attribute~=value] [title~=flower] 选择带有包含 "flower" 一词的 title 属性的所有元素。(独立单词,空格)
[attribute*=value] a[href*="w3school"] 选择其 href 属性值包含子串 "w3school" 的每个 元素。
[attribute^=value] a[href^="https"] 选择其 href 属性值以 "https" 开头的每个 元素。
[attribute$=value] a[href$=".pdf"] 选择其 href 属性值以 ".pdf" 结尾的每个 元素。
[attribute|=value] [lang|=en] 选择带有以 "en" 开头的 lang 属性的所有元素。(后面只能跟连字符)

CSS的使用

外部引用

<link rel="stylesheet" type="text/css" href="mystyle.css">

内部引用

<head>
    <style>
    	...
    </style>
</head>

行内引用

<div style="...">
    ...
</div>

背景

背景颜色

background-color 属性指定元素的背景色。

body {
  background-color: lightblue;
}

背景图片

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

body {
  background-image: url("paper.gif");
}
背景重复

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

body {
  background-repeat: repeat|no-repeat|repeat-x|repeat-y;
}
名称 值
重复 repeat
不重复 no-repeat
x重复 repeat-x
y重复 repeat-y
背景位置
body {
	background-position: top|bottom|left|right;
}

值得一提的是,position的值最多可以填写两个,例如 :top right;

背景附着

该 background-attachment属性指定背景图像是否应滚动或固定（不会随页面的其余部分滚动）

body{
    background-attachment:fixed|scroll;
}

边框

CSS border 属性允许您指定元素边框的样式、宽度和颜色

边框样式*

border-style 属性指定要显示的边框类型。

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

边框宽度

border-width 属性指定四个边框的宽度,也可以设置一到四个值（用于上边框、右边框、下边框和左边框）

p{
  border-style: solid;
  border-width: 5px ;
}

边框颜色

border-color 属性用于设置四个边框的颜色。

p{
  border-style: solid;
  border-color: red;
}

单边

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

圆角

border-radius 属性用于向元素添加圆角边框

p {
  border: 2px solid;
  border-radius: 5px;
}

外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

  1. 为元素的每一侧指定外边距的属性：
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  1. 所有外边距属性都可以设置以下值：
  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

值得一提的是,这里的外边距可以设置负值

  1. auto

您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

  1. CSS 拥有用于为元素的每一侧指定内边距的属性：
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  1. 所有内边距属性都可以设置以下值：
  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距

值得一提的是,这里的内边距不可以设置负值,并且auto无效

宽度和高度

height 和 width 属性用于设置元素的高度和宽度。

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

height 和 width 属性定义的是元素内容框(content box)的尺寸，不包含padding、border和margin所占用的空间。

height 和 width 属性可设置如下值：

  • auto - 默认。浏览器计算高度和宽度。
  • *length* - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。
属性 描述
height 设置元素的高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

盒子模型

image-20250720141837972

  • 内容 - 框的内容，其中显示文本和图像。
  • 内边距 - 清除内容周围的区域。内边距是透明的。
  • 边框 - 围绕内边距和内容的边框。
  • 外边距 - 清除边界外的区域。外边距是透明的。

值得一提的是,背景应用于由 内容和 内边距、边框组成的区域。

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

属性 描述
outline 简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color 设置轮廓的颜色。(invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）)
outline-offset 指定轮廓与元素的边缘或边框之间的空间。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。

轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

文字

颜色

使用 color 属性设置字体颜色

p{
    color="blure"
}

文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

p{
    text-align="left|center|right|justify"
}

竖直对齐

vertical-align 属性设置元素的垂直对齐方式。

p{
    vertical-align="top|middle|bottom"
}

文本方向

direction 属性可用于更改元素的文本方向：

p {
  direction: rtl|ltr;
}

文本装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

文本转换

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

文字间距

索引

text-indent 属性用于指定文本第一行的缩进：

p {
  text-indent: 50px;
}
字母间距

letter-spacing 属性用于指定文本中字符之间的间距。

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
字间距

word-spacing 属性用于指定文本中单词之间的间距。

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
行高

line-height 属性用于指定行之间的间距：

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}
空白区域

white-space 属性指定元素内部空白的处理方式。

p {
  white-space: nowrap;
}

文本阴影

text-shadow属性用于设置文本阴影

p{
    text-shadow: [x偏移值] [y偏移值] [模糊值] [颜色值];
}

字体

font-family用于规定文本的字体

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

**注释：**如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

p {
  font-family: "Times New Roman", Times, serif;
}

字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
p {
  font-style: normal;
}

font-weight 属性指定字体的粗细

p {
  font-weight: 700;
}

字体样式

font-size 属性设置文本的大小。

绝对尺寸(px...)：

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
  • 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸(rem/em...)：

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改文本大小

表格

边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为

、
和 元素规定了黑色边框：

image-20250724193431577

border-collapse 属性设置是否将表格边框折叠为单一边框

image-20250724193554705

条状表格

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数[even]（或奇数[odd]）表行添加 background-color

image-20250724193727770

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

image-20250724194010632

<div style="overflow-x:auto;">
<table>
... table content ...
</table>

</div>

JS

变量

声明

在JS中声明变量的方法有三种:

声明 作用域 变量提升 可变性 示例
const 块级作用域 声明也会提升，但不会初始化（暂时性死区） ❌ const = 123;
let 块级作用域 声明也会提升，但不会初始化（暂时性死区） ✅ let = 'abc';
var 函数作用域(在全局作用域声明时会成为 window 对象的属性 提升(可先使用再声明) ✅ var = true;

我们建议你在代码中尽可能多地使用 let，而不是 var。因为没有理由使用 var

命名标准

你可以给你的变量赋任何你喜欢的名字，但有一些限制。

  1. (0-9,a-z,A-Z) 和下划线字符。
  2. 变量名不要以 数字和 下划线开头
  3. 变量名大小写敏感
  4. 避免使用 JavaScript 的保留字给变量命名

在JS中我们建议你使用 小写驼峰命名法

常见变量类型

1. 数

你可以在变量中存储数字，不论这些数字是像 30（也叫整数）这样，或者像 2.456 这样的小数（也叫做浮点数）。与其他编程语言不同，在 JavaScript 中你不需要声明一个变量的类型。当你给一个变量数字赋值时，不需要用引号括起来。

let myAge = 17;
2. 字符串

字符串是文本的一部分。当你给一个变量赋值为字符串时，你需要用单引号或者双引号把值给包起来，否则 JavaScript 将会把这个字符串值理解成别的变量名。

let dolphinGoodbye = "So long and thanks for all the fish";

3. 布尔

Boolean 的值有 2 种：true 或 false。它们通常被用于在适当的代码之后，测试条件是否成立。举个例子，一个简单的示例如下：

let iAmAlive = true;

然而实际上通常是以下用法：

let test = 6 < 3;
4. 数组

数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。尝试在你的控制台输入以下行：

let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];

当数组被定义后，你可以使用如下所示的语法来访问各自的值，例如下行：

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

此处的方括号包含一个索引值，该值指定要返回的值的位置。计算机从 0 开始计数，而不是像我们人类那样的 1。

5. 对象

在编程中，对象是现实生活中的模型的一种代码结构。你可以有一个简单的对象，代表一个停车场，并包含有关其宽度和长度的信息，或者你可以有一个代表一个人的对象，并包含有关他们的名字，身高，体重，他们说什么语言，如何说 你好，他们，等等。

尝试在你的控制台输入以下行：

let dog = { name: "Spot", breed: "Dalmatian" };

要检索存储在对象中的信息，可以使用以下语法：

dog.name;

我们现在不会看对象了 - 你可以在将来的模块中了解更多关于这些对象的信息。

typeof()

可返回传入变量的变量类型

typeof myInt;
typeof myFloat;

运算符

关于运算符,这里只对 比较运算符 的部分进行讲解,实际中远不止这些

运算符 名称 作用 示例
=== 严格等于 测试左右值是否相同 5 === 2 + 4
!== 严格不等于 测试左右值是否不相同 5 !== 2 + 3

这里的 ===,!==与 ==,!=的区别在于:前者不仅会比较 值会比较 数据类型,而后者只会比较 值

字符串

创建字符串

在 JavaScript 中，你可以选择单引号（'）、双引号（"）或反引号（```）来包裹字符串。以下所有方法都可以：

const single = '单引号';
const double = "双引号";
const backtick = `反引号`;//反引号可解析模板字符串

文本处理

嵌入JavaScript

在模板字面量中，你可以在 ${ } 中包装 JavaScript 变量或表达式，其结果将被包含在字符串中：

🔥推荐

const name = prompt('请输入你的用户名:');
const greeting = `hello,${name}`;
console.log(greeting);

需要这主意的是只有``反引号 `才能解析模板字符串

当然你也可以使用 +来拼接字符串

const name = prompt('请输入你的用户名:');
const greeting = 'hello,' + name + '早上好!';
console.log(greeting);
类型转化

通过 Number(),String()函数可以将字符串转化为数字等

const str = '1234';
console.log(typeof(Number(str)));

const num = 123;
console.log(typeof(String(num)));

类似的方法还有...但不仅限于此:

方法 作用 示例
Number() 将值转换为数字 Number("123") → 123
String() 将值转换为字符串 String(123) → "123"
Boolean() 将值转换为布尔值 Boolean(1) → true
BigInt() 将值转换为大整数（ES2020） BigInt("123") → 123n
Symbol() 创建唯一的 Symbol 值 Symbol("desc")

String对象

常用属性
length

这很简单 — 你可以很轻松的使用 length属性。

const description = 'a JavaScript Class';
console.log(description.length); // => 18
...

当然,对象String的属性远不止此,你可以查看详细信息

常用方法
charAt()

想要实现它,你有两种方法:

  1. 使用 数组的方式获取
const str = 'Hello World';
console.log(str[0]); // => H
  1. 使用 函数获取
const str = 'Hello World';
console.log(str.charAt(0)); // => H

值得一提的是,计算机的索引是从0开始,因此要获取最后一个字符就应使用 str.charAt(str.length - 1)

indexOf()

这个函数可以帮助我们在一个字符串中查找某子字符串并返回起始索引,当然若是不包含,那么将返回 -1

const str = 'Hello World';
console.log(str.indexOf('World')); // => 6
console.log(str.indexOf('Char')); // => -1
slice()

这个函数可以帮助我们提取子字符串并返回

slice({Start},{End}) | slice({Start})

const str = 'Hello World';
console.log(str.slice(str.indexOf('World'))); // => World
console.log(str.slice(0,5)); // => Hello

需要注意的是,计算机在解析区间的时候采用 包左不包右的策略,这就是为什么上文 slice(0,5)而输出则是 Hello的原因

toUpperCase()/toLowerCase()

这个函数能将所有字符转换为小写或大写。例如，如果要在将数据存储在数据库中之前对所有用户输入的数据进行规范化，这可能非常有用。

const str = 'Hello World';
console.log(str.toUpperCase());
console.log(str.toLowerCase());
replase()

该函数能将字符串中的一个子字符串替换为另一个子字符串。

它需要两个参数 - 要被换下的字符串和要被替换上的字符串。

const str = 'Hello World';
console.log(str.replace('World', 'Char'));