多仔 - 前端三剑客 HTML + CSS + JavaScript 基础复习串讲
type: channel
link: https://www.duox.dev/tag/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%89%91%E5%AE%A2-HTML-CSS-JavaScript-%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%B2%E8%AE%B2/
items: 前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 06-CSS3 动画
items: 前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 05-浮动与定位
items: 前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 04-盒子模型
items: 前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 03-初识 CSS3
items: 前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 02-媒体元素与表单
items: 前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 01-HTML5 基础与列表、表格

前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 06-CSS3 动画
type: item
date: 2024-07-10T09:31:00+00:00
description: AI 摘要 文章系统梳理 CSS3 动画三大技术：transform 变形（translate、scale、skew、rotate 及其 3D 扩展）、transition 过渡（属性、时长、缓动、延迟及触发机制）、animation 关键帧动画（@keyframes 定义、animation 八参数调用）。通过按钮与方块示例对比过渡与动画差异，强调前者依赖事件驱动、后者可自运行并支持复杂时序，为前端动效开发提供完整语法与实战参考。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结CSS3 变形变形属性在网页中实现动画效果，可以使用动态图片、Flash、JavaScript 来完成。借助 CSS3 可以轻松倾斜、缩放、移动和翻转元素，实现动画效果。CSS3 变形是一些效果的集合（如平移、旋转、缩放、倾斜等），包括 2D 变形和 3D 变形。每一个效果都可以称之为变形（transform）。变形的基本用法：transform: none | 变形函数;2D 变形函数：名称描述translate()位移函数scale()缩放函数skew()倾斜函数rotate()旋转函数3D 变形函数：名称描述translate3d()位移函数scale3d()缩放函数rotate3d()旋转函数2D 位移translate 函数可以将元素从一个位置移动到另一个位置上，即位移。translate 函数的基本用法：transform: translate(x, y); transform: translate(x); transform: tranxlateX(x); transform: translateY(y);translate 函数的基本参数：名称描述xx 轴位移量x>0 时元素向右移动yy 轴位移量y>0 时元素向下移动示例：2D 位移入口页面（index.html）： Title 点我！ 示例效果：2D 缩放scale 函数可以缩放元素大小。scale 函数的基本用法：transform: scale(x, y); transform: scale(x); transform: scale(x); transform: scale(y);scale 函数的基本参数：名称描述xx 轴缩放比例0.99>x>0 时 x 轴缩小，x>1 时 x 轴放大yy 轴缩放比例0.99>y>0 时 y 轴缩小，y>1 时 y 轴放大示例：2D 缩放入口页面（index.html）： Title 点我！ 示例效果：2D 倾斜skew 函数可以让元素倾斜显示，可将元素以其中心位置围绕着 x 轴和 y 轴按照一定角度倾斜。skew 函数会改变元素的形状。skew 函数的基本用法：translate: skew(x, y); translate: skew(x); translate: skewX(x); translate: skewY(y);skew 函数的基本参数：名称描述xx 轴方向（水平方向）的倾斜角度，单位为 deg（度）x>0deg 时向左倾斜yy 轴方向（垂直方向）的倾斜角度，单位为 deg（度）y>0deg 时向上倾斜示例：2D 倾斜入口页面（index.html）： Title 点我！ 示例效果：2D 旋转rotate 函数可以让元素在二维空间里绕着一个指定的角度旋转。rotate 函数不会改变元素的形状。rotate 函数的基本用法：translate: rotate(a);rotate 函数常见的参数：名称描述a旋转角度a>0deg 时元素顺时针旋转示例：2D 旋转入口页面（index.html）： Title 点我！ 示例效果：CSS3 过渡过渡属性过渡是指元素从一种样式逐渐改变为另一种样式的效果。过渡属性的基本用法：transition: 过渡属性 过渡所需时间 过渡动画函数 过渡延迟时间; transition-property: 过渡属性; transition-duration: 过渡所需时间; transition-timing-function: 过渡动画函数; transition-delay: 过渡延迟时间;过渡属性的基本参数：名称描述过渡属性定义转换动画的 CSS 属性名称property：指定的 CSS 属性，如 width、height、background-color 属性等all：指定所有元素支持 transition-property 属性的样式none：没有属性会获得过渡效果过渡所需时间定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒过渡动画函数指定浏览器的过渡速度，以及过渡期间的操作进展情况通过给过渡添加一个函数来指定动画的快慢方式ease：速度由快到慢（默认值）linear…

前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 05-浮动与定位
type: item
date: 2024-07-06T02:55:00+00:00
description: AI 摘要 文章系统梳理了前端布局核心：先回顾标准文档流与 display 属性，再深入 float 浮动机制、clear 清除、overflow 处理及父级塌陷的四种解决方案；对比 inline-block 与 float 差异后，全面解析 position 四种定位方式，并演示 z-index 层叠与 opacity 透明控制，帮助开发者精准掌控页面元素排列与视觉层级。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结网页基本布局常见网页组成部分网页的组成部分：网站导航：一般包括品牌 logo、导航菜单及一些其他信息等。网页主体：一般包括网页呈现给浏览者的内容。网页底部：一般包括网站声明、版权信息和相关链接等。侧边栏：一般包括分类菜单及一些次要信息等。每一个网页的组成部分都有着重要的作用，一起协作布局，就能给呈现出一个完整的网页。标准文档流标准文档流是指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。块级元素（block）：h1~h6、p、div、li 等。内联元素（inline）：span、a、img、strong 等。内联标签可以包含于块级标签中，成为它的子元素。元素布局属性display 属性display 属性用于指定 HTML 标签的显示方式。display 属性的基本用法：display: 显示方式;显示方式：名称描述block元素被显示为块元素inline元素被显示为行内元素inline-block元素被显示为行内块元素，可以控制元素排到一行元素既具有行内元素的特性，也具有块元素的特性none元素不会被显示示例：display入口页面（index.html）： Title 我是div 我是span 示例效果：浮动float 属性float 属性用于定义网页元素在哪个方向浮动。设置为浮动后，元素会脱离文档流。没有设置浮动的文字会浮动在浮动元素周围显示，这是浮动的特殊情况。浮动的文字段落在没有设置宽度的情况下会占满一行。float 属性的基本用法：float: 浮动方向;浮动方向：名称描述left元素向左浮动right元素向右浮动none（默认值）元素不浮动示例：float入口页面（index.html）： Title item（右浮动） item（左浮动） （没有浮动的文本环绕浮动元素）这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这 （浮动的文本没有设置宽度会占满一行）这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段 示例效果：clear 属性clear 属性用于规定哪一侧不允许其他元素浮动，用于清除浮动。清除浮动的本质是清除浮动元素造成的影响。可能会产生内边距、外边距显示错误的问题。可能会影响背景图片的正常显示。可能会影响排版问题。clear 属性的基本用法：clear: 清除方向;清除方向：清除方向描述left元素左边不允许存在浮动元素right元素右边不允许存在浮动元素both元素左右两边不允许存在浮动元素none（默认值）允许浮动元素出现在元素两侧示例：clear入口页面（index.html）： Title item（右浮动） item（左浮动） （没有浮动的文本环绕浮动元素）这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这 （浮动的文本没有设置宽度会占满一行）这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段 示例效果：overflow 属性overflow 属性用于规定当内容溢出盒子时发生的事情，如隐藏溢出部分等。overflow 属性基本用法：overflow: 溢出处理方式;溢出处理方式：名称描述visible（默认值）溢出的内容不会被修剪，呈现在盒子外面hidden溢出的内容会被修剪，且不可见scroll溢出的内容会被修剪，且会显示滚动条以便查看其余内容auto如果内容被修剪，浏览器会显示滚动条以便查看其余内容示例：overflow入口页面（index.html）： Title 这是一段文本，这是一段文本，这是一…

前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 04-盒子模型
type: item
date: 2024-07-02T02:17:00+00:00
description: AI 摘要 文章系统梳理 CSS 盒子模型核心概念：从 content、padding、border、margin 四要素切入，详解 border-color、width、style 及复合写法，演示 margin auto 水平居中与 padding 撑开尺寸的技巧；剖析标准/怪异模式差异，引入 box-sizing 控制总宽计算；并拓展 border-radius 绘制圆、半圆、扇形及 box-shadow 添加阴影的实用技法，辅以开发者工具调试与代码示例，帮助前端新手快速掌握布局与视觉细节。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结盒子模型盒子模型原理在 CSS 中，矩形对象统称为盒子（box）。盒子模型由网页内容（content）、边框（border）、内边距（padding）、外边距（margin）组成。盒子模型的边框、内外边距有上（top）、下（bottom）、左（left）、右（right）四条边，设置样式时可以分别设置。盒子模型的组成：在浏览器中，可以借助开发者工具对盒子模型进行调试。盒子模型样式边框颜色border-color 属性用于设置盒子模型的边框颜色。border-color 属性的基本用法：border-color: 所有边框的颜色; border-color: 上下边框颜色 左右边框颜色; border-color: 上边框颜色 右边框颜色 下边框颜色 左边框颜色; border-color: 上边框颜色 左右边框颜色 下边框颜色; border-top-color: 上边框颜色; border-bottom-color: 下边框颜色; border-left-color: 左边框颜色; border-right-color: 右边框颜色;使用 border-color 属性给边框设置边框颜色时，遵循上右下左，没有找对边的原则。示例：border-color入口页面（index.html）： Title 示例效果：边框粗细border-width 属性用于设置边框粗细。border-width 属性的基本用法：border-width: 所有边框的粗细; border-width: 上下边框粗细 左右边框粗细; border-width: 上边框粗细 右边框粗细 下边框粗细 左边框粗细; border-width: 上边框粗细 左右边框粗细 下边框粗细; border-top-width: 上边框粗细; border-bottom-width: 下边框粗细; border-left-width: 左边框粗细; border-right-width: 右边框粗细;边框粗细：名称描述thin细的边框medium（默认值）中等边框thick粗的边框像素值具体的边框粗细边框样式border-style 属性用于设置边框样式。border-style 属性的基本用法：border-style: 所有边框的样式; border-style: 上下边框样式 左右边框样式; border-style: 上边框样式 右边框样式 下边框样式 左边框样式; border-style: 上边框样式 左右边框样式 下边框样式; border-top-style: 上边框样式; border-bottom-style: 下边框样式; border-left-style: 左边框样式; border-right-style: 右边框样式;边框样式：名称描述none（默认值）无边框dotted点线边框dashed虚线边框solid实现边框示例：border-style入口页面（index.html）： Title 示例效果：边框属性border 属性是一个复合属性，是 border-color、border-width、border-style 属性的简写形式，这三个属性的编写顺序没有限制，可以按照任意顺序设置。border 属性的基本用法：border: 边框颜色 边框粗细 边框样式;外边距margin 属性用于设置盒子模型的外边距。margin 属性的基本用法：margin: 所有方向的外边距; margin: 上下外边距 左右外边距; margin: 上外边距 右外边距 下外边距 左外边距; margin: 上外边距 左右外边距 下外边距; margin-top: 上外边距; margin-bottom: 下外边距; margin-left: 左外边距; margin-right: 右外边距;示例：margin入口页面（index.html）： Title 示例效果：margin 属性除了设置像素值的外边距外，还可以设置为 auto，可以使元素水平居中。magin 属性让元素水平居中，要求元素必须是块元素。元…

前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 03-初识 CSS3
type: item
date: 2024-06-28T07:22:00+00:00
description: AI 摘要 文章系统梳理 CSS3 基础与进阶要点：从行内、内部、外部三种引入方式及优先级切入，详解标签、类、ID、层次、结构伪类、属性等选择器；覆盖字体、文本、列表、超链接、背景、渐变等美化技巧，含 font-family、text-shadow、background-size、linear-gradient 等实用属性与示例，帮助读者快速构建现代网页样式。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结CSS3 简介基本结构CSS 全称层叠样式表或风格样式表，用于美化 HTML 网页。CSS 的基本用法：选择器 { 样式属性: 值; 样式属性: 值; …… }在 HTML 中引入 CSS在 HTML 中引入 CSS，可以使用行内样式，即使用 HTML 标签的 style 属性设置 CSS 样式。示例：行内样式入口页面（index.html）： 这是一个标题 在 HTML 中引入 CSS，可以使用内部样式表，即使用 style 标签设置 CSS 样式。示例：内部样式表入口页面（index.html）： 在 HTML 中引入 CSS，可以使用外部样式表，即 CSS 代码保存在 .css 样式表中，在 HTML 文件中使用 link 标签引入样式表。示例：外部样式表入口页面（index.html）： 样式优先级：就近原则。越接近标签的样式优先级越高。行内样式优先级 > 内部样式表优先级 > 外部样式表优先级。示例：样式优先级入口页面（index.html）： Title 这是一个标题 示例效果：CSS3 基本选择器标签选择器一个 HTML 文件由很多标签组成，每种 HTML 标签都可以作为相应的标签选择器的名称。标签选择器直接应用于 HTML 标签。网页中相同的 HTML 标签，都会被设置样式。标签选择器的基本用法：标签名 { 样式属性: 值; 样式属性: 值; …… }示例：标签选择器入口页面（index.html）： Title 这是一个标题 这也是一个标题 这是另一个标题 示例效果：类选择器在 HTML 标签中，可以设置一个 class 属性，用于引用类样式。一个 HTML 标签可以引用多个类样式，类样式与类样式直接用空格隔开。具有相同类名的 HTML 标签都会被设置样式，类选择器可以在页面中多次使用。类选择器的基本用法：.类名 { 样式属性: 值; 样式属性: 值; …… }示例：类选择器入口页面（index.html）： Title 这是一个标题 这也是一个标题 这是另一个标题 示例效果：id 选择器在 HTML 标签中，可以设置一个 id 属性，用于引用特定的样式声明。id 属性的值在同一个 HTML 文档中必须是唯一的，即唯一标识符。id 选择器在同一个页面中只能使用一次。id 选择器的基本用法：#id名称 { 样式属性: 值; 样式属性: 值; …… }--示例：id 选择器入口页面（index.html）： Title 这是一个标题 这也是一个标题 这是另一个标题 示例效果：基本选择器优先级CSS3 基本选择器优先级：无论使用什么方式引入 CSS 样式，都遵循 id 选择器 > 类选择器 > 标签选择器。示例：基本选择器优先级入口页面（index.html）： Title 这是一个标题 示例效果：CSS3 高级选择器层次选择器层次选择器在 CSS 中用来根据元素在 HTML 文档树中的层次关系，选择一个元素的特定的子元素或后代元素。层次选择器的基本用法：名称描述E F（后代选择器）匹配 E 元素内的所有后代 F 元素E>F（子选择器）匹配 E 元素内的所有直接子 F 元素E+F（相邻兄弟选择器）匹配 E 元素后面同级的、紧邻的兄弟 F 元素E~F（通用兄弟选择器）匹配 E 元素后面同级的所有兄弟 F 元素示例：后代选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 页面层级分析：示例效果：示例：子选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 页面层级分析：示例效果：示例：相邻兄弟选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：示例：通用兄弟选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：结构伪类选择器结构伪类选择器在 CSS 中用来根据元素在文档结构中的特定位置或状态来选择元素。结构伪类选择器的基本用法：名称描述E F:first-child匹配 E 元素的第一个子元素 FE F:last-child匹配 E 元素的最后一个子元素 FE F:nth-chil…

前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 02-媒体元素与表单
type: item
date: 2024-06-24T07:08:00+00:00
description: AI 摘要 文章系统梳理了 HTML 媒体元素、结构标签、iframe 及表单全家桶。video/audio 详解 src、controls、autoplay、muted 等属性，提示静音方可自动播放；header、main、section 等语义化布局提升可读性；iframe 可内嵌页面但存在性能与安全隐患。form 部分覆盖 method、enctype，input 的 20 余种 type、textarea、select、button 用法，并示范 placeholder、required、pattern 等初级验证技巧，帮助开发者快速构建交互式网页。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结媒体元素视频元素video 标签用于加载视频。video 标签的基本用法： video 标签的基本属性：名称描述src视频的路径controls向用户显示视频播放控件autoplay视频就绪后立即播放loop循环播放视频preload视频在页面加载时加载，并预备播放muted静音播放width播放器宽度height播放器高度示例：播放视频入口页面（index.html）： 示例效果：虽然在 video 标签中加上 autoplay 属性，但在浏览器中，视频还是无法自动播放，有些浏览器禁止自动播放带有声音的音视频，如果要实现自动播放，可以将视频静音。示例：自动播放视频入口页面（index.html）： 示例效果：音频元素audio 标签用于加载音频。audio 标签的基本用法： audio 标签的基本属性：名称描述src音频的路径controls向用户显示音频播放控件autoplay音频就绪后立即播放loop循环播放音频preload音频在页面加载时加载，并预备播放muted静音播放width播放器宽度height播放器高度示例：播放音频入口页面（index.html）： 结构标签与 iframe结构元素一个页面大体可以由三部分组成：页面头部、页面主体、页面底部。在制作网页时，必须先划分结构，再编写内容。HTML 中具有语义化的结构标签：header 标签：定义页面头部。footer 标签：定义页面底部。main 标签：定义文档的主要内容，在整个 HTML 文档中只能出现一次。section 标签：定义页面中的某一个独立区域。article 标签：定义独立的文章内容。aside 标签：定义相关内容或应用，常用于侧边栏。nav 标签：定义导航类辅助内容。示例：使用结构标签布局页面入口页面（index.html）： 页面头部 新闻区域 文章区域 娱乐区域 页面底部 示例效果：iframeiframe 标签用于内联网页。iframe 标签的基本用法： iframe 标签的基本属性：属性描述name内联框架的名称src内联网页的地址，支持远程链接和本地文件width内联框架的宽度height内联框架的高度frameborder删除内联框架的边框，该属性已经被废弃示例：内联网页入口页面（index.html）： 在myIframe内联框架中跳转示例效果：iframe 存在的问题：iframe 需要加载嵌入的网页，因此会增加整体页面的加载时间。对搜索引擎不友好，搜索引擎通常会忽略 iframe 中的内容。恶意网站可以通过 iframe 来进行钓鱼、点击劫持等攻击，从而危害用户的隐私和安全。不同浏览器对 iframe 的支持程度不同。有些网站禁止被 iframe，如百度。表单表单元素 formform 标签的基本用法： form 标签的基本属性：名称描述method表单请求方式，GET（默认） / POSTaction表单请求地址enctype表单数据提交到服务器时应如何编码 application/x-www-form-urlencoded：默认编码multipart/form-data：文件上传编码表单元素 inputinput 标签用于定义输入字段，用户可以在其中输入数据。通常情况下，input 标签会使用 label 标签为元素定义标签。input 标签的基本用法： xxx： input 标签的基本属性：属性描述type表单元素的类型name表单元素的名称id表单元素的 idvalue表单元素的初始值maxlengthtype 为 text 或 password 时，输入的最大字符数checkedtype 为 radio 或 checkbox 时，指定按钮是否是被选中readonly表单元素只读disabled禁用表单元素required表单元素必填placeholder表单元素的提示信息input 标签的基本表单元素类型：名称描述text（默认值）普通文本输入框password密码框radio单选框checkbox多选框bu…

前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 01-HTML5 基础与列表、表格
type: item
date: 2024-06-20T00:51:00+00:00
description: AI 摘要 文章系统梳理 HTML5 基础：从 DOCTYPE、html、head、body 文档骨架，到标题、段落、换行、水平线、图像、超链接等常用标签，并强调废弃标签的语义化替代；继而聚焦列表（无序、有序、定义）与表格（基本结构、跨行跨列）的完整用法，辅以示例代码与效果，帮助读者快速建立静态页面结构思维。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结HTML5 基础HTML 基本结构HTML 文档的基本结构： Title HTML 文档的基本结构是由三个部分组成：文档类型声明、head 标签和 body 标签。 ：位于 HTML 文档的第一行，告诉浏览器这是一个 HTML5 文件。html 标签：是 HTML 文档的根标签，lang 属性表示文档的语言。head 标签：定义文档的头部信息。只有一些特定的标签才允许放在 head 标签内，如 title 标题标签、meta 参数标签、scirpt 脚本标签、link 链接样式表标签、style 样式标签。body 标签：用于定义 HTML 文档的正文内容。HTML 网页中常见的标签：标题标签、段落标签等。body 等成对的标签，分别叫开放标签和闭合标签。单独呈现的标签（空标签）如 hr 水平标签 ，用 / 来关闭空标签。文档标题标签title 标签用于设置 HTML 文档的标题，标题会显示在浏览器的选项卡栏上。文档参数标签meta 标签用于设置网页的摘要信息，包括字符集编码、网页关键词、网页描述等。示例：使用文档参数标签设置网页的摘要信息入口页面（index.html）： 内容标题标签h1~h6 标签用于定义文档标题。示例：使用内容标题标签定义文档标题入口页面（index.html）： 这是标题 1 这是标题 2 这是标题 3 这是标题 4 这是标题 5 这是标题 6 示例效果：段落标签p 标签用于开始一个新的段落，当浏览器遇到 p 标签时，通常会在相邻的段落之间插入一些垂直的间距，这使得 p 标签内的文本内容形成了一个独立的段落。示例：使用段落标签定义段落入口页面（index.html）： 床前明月光 疑似地上霜 举头望明月 低头思故乡 示例效果：换行标签br 标签用于强制换行，它只是一个简单的换行符，不会在浏览器中创建额外的空间或边距。示例：使用换行标签实现文本换行入口页面（index.html）：床前明月光 疑似地上霜 举头望明月 低头思故乡 水平标签hr 标签用于展示一条水平线。示例：使用水平标签定义水平线入口页面（index.html）： 静夜思 床前明月光 示例效果：字体样式标签font 标签用于设置字体样式、字体大小、字体颜色。该标签在 HTML5 中已经废弃。b 标签用于设置文本为粗体。该标签已经被废弃，使用 strong 标签代替。small 标签用于设置小字体的描述、声明等文本。u 标签用于设置文本下划线。该标签已经被废弃，使用 ins 标签代替。i 标签用于设置文本倾斜。该标签已经被废弃，使用 em 标签代替。s 标签用于设置文本删除线。该标签已经被废弃，使用 del 标签代替。示例：使用字体样式标签设置字体样式入口页面（index.html）： 这是一行文本 加粗文字 加粗文字 全场5折仅限当天 文本下划线 文本下划线 文本倾斜 文本倾斜 文本删除 文本删除 示例效果：废弃标签：HTML 中以前存在一部分不是用来添加语义的标签，而 HTML 标签是用来添加语义的，这与我们的定义不相符，故会废弃一些标签。图像标签img 标签用于加载图像。img 标签的基本用法： img 标签的基本属性：名称描述src图像地址，支持本地图片和远程图片alt图像的替换文本title鼠标悬停时提示的文本width图像宽度height图像高度示例：使用图像标签定义图片入口页面（index.html）： 示例效果：超链接标签a 标签用于设置超链接。超链接的应用场景：页面间链接：从 A 页面跳转到 B 页面。锚链接：在 A 页面中从 A 区域跳转到 B 区域。功能性链接：从 A 页面跳转到发送邮箱窗口。a 标签的基本用法：texta 标签的基本属性：名称描述href要跳转的链接地址target目标窗口。_self：在当前窗口打开链接（默认值）_blank：在新窗口打开链接_parent：在父窗口打开链接_top：在顶层窗口打开链接示例：使用超链接标签定义超链接入口页面（index.html）：在当前窗口打开网页 在新窗口打开网页 发送邮件 跳转到box3 box1 box2 box3 示例效果：行内元素和块元素行内元素：左右都是行内元素的可以排在一行，如 a 标签。块元素：无论内容多少，该元素独占一行，如 h1～h6 标签。HTML 注释HTML 注释的基本用法： HTM…