多仔 - 前端三剑客 HTML + CSS + JavaScript 基础复习串讲
前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 06-CSS3 动画
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：速度恒速（匀速运动）ease-in：速度越来越快（渐显效果）ease-out：速度越来越慢（渐隐效果）ease-in-out：速度先加速再减速（渐显渐隐效果）过渡延迟时间指定一个动画开始执行的时间，单位秒或者毫秒正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发负值：元素过渡效果会从该时间点开始显示，之前的动作被截断0：默认值，元素过渡效果立即执行示例：过渡效果入口页面（index.html）： Title 示例效果：过渡触发机制会触发过渡效果的情况，即让一个元素有多态样式的情况有：伪类触发：如 hover、active、focus、checked 等。媒体查询：通过 @media 属性判断设备的尺寸、方向等。JavaScript 触发。CSS3 动画动画属性animation 属性用于实现动画效果。使用 CSS 实现动画效果，需要先通过关键帧声明一个动画。@keyframes 的基本用法：@keyframes 动画名称 { from { /* 开始时，即0%时的CSS样式 */ } xx% { /* xx%时的CSS样式 */ } to { /* 结束时，即100%时的CSS样式 */ } }示例：设置关键帧入口页面（index.html）： Title 关键帧设置完成后，需要找到要设置动画的元素，调用关键帧声明的动画。animation 属性的基本用法：animation: 动画名称 动画时间 动画方式 延迟时间 播放次数 播放方向 播放状态 动画时间外的状态; animation-name: 动画名称; animation–duration: 动画时间; animation-timing-function: 动画方式; animation-delay: 延迟时间; animation-iteration-count: 播放次数; animation-direction: 播放方向; animation-play-state: 播放状态; animation-fill-mode: 动画时间外的状态;animation 属性的基本参数：名称描述动画名称调用 @keyframes 定义的动画名称动画时间同过渡时间动画方式同过渡方式延迟时间同过渡延迟时间播放次数infinite：动画无限次播放默认值为 1播放方向normal：动画每次都是循环向前播放alternate：动画播放为偶数次则向前播放播放状态running：将暂停的动画重新播放paused：将正在播放的元素动画停下来动画时间外的状态forwards：动画在结束后继续应用最后关键帧的位置backwards：在向元素应用动画样式时迅速应用动画的初始帧both：元素动画同时具有 forwards 和 backwards 的效果示例：添加动画入口页面（index.html）： Title 示例效果：过渡和动画对比实现动画的方式不同：transition 过渡属性通过指定属性的初始状态样式和结束状态样式，在两个状态之间进行平滑过渡实现动画效果。animation 动画属性通过设置关键帧、调用关键帧的方式来实现动画效果，支持复杂的动画效果。触发动画的方式不同：transition 过渡属性实现动画需要触发一个事件，如 hover 事件等。animation 动画属性实现动画可以在不触发任何事件的情况下也能随着时间的变化来实现动画效果。
前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 05-浮动与定位
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 这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本 示例效果：解决父级边框塌陷当父盒子内的子元素为浮动、且父盒子没有固定高度时，子元素脱离文档流浮动已经无法撑起来父盒子的边框，父盒子的边框会出现塌陷情况。解决父级边框塌陷的方案：设置父元素的高度。该方案简单，但限定了父元素的高度不具备弹性效果。在浮动元素后添加空 div，结合 clear 属性清除浮动。该方案会造成 HTML 代码冗余。在父元素中添加 overflow 属性。该方案在有下拉列表框的场景中失效。在父元素中添加 after 伪类。该方案写法复杂，但没有副作用。示例：设置父元素高度以解决父级边框塌陷问题入口页面（index.html）： Title item（左浮动） 示例效果：示例：使用空 div + clear 属性以解决父级边框塌陷问题入口页面（index.html）： Title item（左浮动） 示例效果：示例：在父元素中添加 overflow 属性以解决父级边框塌陷问题入口页面（index.html）： Title item（左浮动） 示例效果：示例：在父元素中添加 after 伪类以解决父级边框塌陷问题入口页面（index.html）： Title item（左浮动） 示例效果：inline-block 与 float 的区别inline-block 属性的特点：inline-block 属性可以让元素排在一行，且支持宽度和高度，添加该属性的元素在标准文档流中。inline-block 位置方向不可控制，元素和元素之间会解析空格。float 的特点：float 浮动可以让元素排在一行且支持宽度和高度，可以决定排列的方向。float 浮动以后元素脱离文档流，会对周围元素产生影响。定位position 属性position 属性用于设置盒子的位置（即定位）。position 属性的基本用法：position: 定位方式;定位方式：名称描述static（默认值）没有定位，元素按标准文档流进行布局relative相对定位absolute绝对定位fixed固定定位静态定位static 定位方式为默认值，表示盒子保持在原本应该在的位置，没有任何移动效果。示例：静态定位入口页面（index.html）： Title item1 item2 item3 示例效果：相对定位relative 定位方式表示盒子相对于它在标准文档流中的默认位置为基准进行位置偏移。设置相对定位的盒子会相对它原来的位置，通过指定偏移到达新位置。设置相对定位的盒子仍在标准文档流中，它对父盒子和相邻盒子都没有任何影响。设置相对定位的盒子原来的位置会被保留下来。相对定位一般很少自己单独使用，会配合绝对定位使用。相对定位的基本用法：position: relative; top: 偏移量; bottom: 偏移量; left: 偏移量; right: 偏移量;偏移量：取值描述偏移量>0top 向下偏移，left 向右偏移偏移量<0top 向上偏移，left 向左偏移示例：相对定位入口页面（index.html）： Title item1 item2 item3 示例效果：绝对定位absolute 定位方式表示盒子以它最近的一个已经定位的祖先元素为基准进行位置偏移。已经定位：position 属性被设置且属性值非 static。祖先元素：从标准文档流的任意节点开始，走到跟节点，经过的所有节点都是它的祖先。设置绝对定位的盒子会脱离标准文档流，宽度也变为仅能容纳里面的文本宽度。设置绝对定位的盒子可以设置外边距，且不会与其他边距合并。设置绝对定位的盒子没有设置偏移量，那么它将保持在原来的位置。一般情况下，绝对定位用在下拉菜单、弹窗等场景。示例：绝对定位入口页面（index.html）： Title item1 item2 item3 示例效果：固定定位fixed 定位方式表示盒子以浏览器窗口为基准进行位置偏移。偏移量不会随着滚动条的移动而移动。固定定位一般用于网页两边的固定广告、返回顶部图标、吸顶导航栏等场景。示例：固定定位入口页面（index.html）： Title item1 item2 item3 示例效果：重叠层样式z-index 属性z-index 属性用于调整元素定位时重叠层的上下位置。示例：z-index入口页面（index.html）： Title box1 box2 示例效果：网页元素透明度opacity 属性和 filter 属性用于设置网页元素的透明度。网页元素透明度的基本用法：opacity: a; filter: alpha(opacity=b);网页元素透明度：名称描述aa 的取值范围为 0~1，a 越小越透明bb 的取值范围为 0~100，b 越小越透明示例：opacity入口页面（index.html）： Title box1 box2 示例效果：
前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 04-盒子模型
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 属性让元素水平居中，要求元素必须是块元素。元素必须要有固定宽度。示例：margin 水平居中入口页面（index.html）： Title 示例效果：内边距padding 属性用于设置盒子模型的内边距。padding 属性的基本用法：padding: 所有方向的内边距; padding: 上下内边距 左右内边距; padding: 上内边距 右内边距 下内边距 左内边距; padding: 上内边距 左右内边距 下内边距; padding-top: 上内边距; padding-bottom: 下内边距; padding-left: 左内边距; padding-right: 右内边距;示例：padding入口页面（index.html）： Title 示例效果：盒子模型尺寸盒子模型总尺寸 = 边框 + 内边距 + 外边距 + 内容宽度。box-sizingbox-sizing 属性用于设置盒子模型尺寸的解析方式。box-sizing 属性的基本用法：box-sizing: 解析方式;盒子模型尺寸解析方式：名称描述content-box（默认值）W3C 盒子模型 / 标准盒子模型盒子模型总尺寸 = 边框 + 内边距 + 外边距 + 内容宽度border-boxIE 盒子模型 / 怪异盒子模型盒子模型总尺寸 = 内边距 + 外边距 + 内容宽度inherit盒子模型继承父元素的盒子模型模式示例：box-sizing入口页面（index.html）： Title 示例效果：圆角边框border-radius 属性用于为盒子模型添加圆角边框。border-radius 属性的基本用法：border-radius: 四个角的圆角半径; border-radius: 左上右下 右上左下; border-radius: 左上 右上 右下 左上; border-radius: 左上 左下右上 右下; border-top-left-radius: 左上; border-bottom-left-radius: 左下; border-top-right-radius: 右上; border-bottom-right-radius: 右下;示例：border-radius入口页面（index.html）： Title 示例效果：制作特殊图形使用 border-radius 属性制作圆形：元素的宽度和高度必须相同。圆角半径为 50%。示例：制作圆形入口页面（index.html）： Title 示例效果：使用 border-radius 属性制作半圆形：制作上半圆或下半圆时，元素宽度 = 2 * 元素高度，圆角半径 = 元素高度。制作左半圆或右半圆时，元素高度 = 2* 元素宽度，圆角半径 = 元素宽度。示例：制作半圆形入口页面（index.html）： Title 示例效果：使用 border-radius 属性制作扇形：实际上是使用 border-radius 属性制作四分之一圆形。三同：元素宽度、元素高度、圆角半径相同。一不同：圆角位置不同，就可以制作出左上、右上、右下、左上的扇形。示例：制作扇形入口页面（index.html）： Title 示例效果：盒子阴影box-shadow 属性用于设置盒子模型的阴影。box-shadow 属性基本用法：box-shadow: 阴影类型 x轴位移 y轴位移 模糊半径 阴影颜色;box-shadow 属性的基本配置项：名称描述阴影类型阴影类型可选如果不设置，默认投影方式为外阴影inset：内阴影。x 轴位移x>0 时阴影向右偏移y 轴位移y>0 时阴影向下偏移y 轴位移y>0 时阴影向下偏移模糊半径模糊半径值越大阴影越模糊阴影颜色如果不设置，默认使用浏览器的默认颜色示例：box-shadow入口页面（index.html）： Title 示例效果：
前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 03-初识 CSS3
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-child(n)n=数字时，匹配 E 元素的第 n 个子元素 Fn=even 时，匹配 E 元素的偶数位的子元素 Fn=odd 时，匹配 E 元素的奇数位的子元素 FF 元素必须是 E 元素下的第 n 个子元素E F:first-of-type匹配 E 元素下类型为 F 的第一个子元素E F:last-of-type匹配 E 元素下类型为 F 的最后一个子元素E F:nth-of-type(n)匹配 E 元素下类型为 F 的第 n 个子元素示例：E F:first-child 选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：示例：E F:last-child 选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：示例：E F:nth-child(n) 选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：示例：E F:nth-child(even) 选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：示例：E F:nth-child(odd) 选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：示例：E F:firs-of-type 选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：示例：E F:last-of-type 选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：示例：E F:nth-of-type 选择器入口页面（index.html）： Title p1 p2 p3 p4 p5 p6 p7 a1 p8 页面层级分析：示例效果：属性选择器属性选择器在 CSS 中用来根据元素的属性及其值来选择这些元素。属性选择器的基本用法：名称描述E[attr]匹配具有 attr 属性的 E 元素E[attr=val]匹配具有 attr 属性且 attr 属性值为 val（区分大小写）的 E 元素E[attr^=val]匹配具有 attr 属性且 attr 属性的值以 val 开头的 E 元素E[attr$=val]匹配具有 attr 属性且 attr 属性的值以 val 结尾的 E 元素E[attr*=val]匹配具有 attr 属性且 attr 属性的值包含 val 的 E 元素示例：E[attr] 选择器入口页面（index.html）： Title p1 p2 p3 示例效果：示例：E[attr=val] 选择器入口页面（index.html）： Title p1 p2 p3 示例效果：CSS3 美化字体字体类型font-family 属性用于设置字体类型。同时设置英文字体和中文字体时，要把英文字体写在中文字体之前。字体类型可以设置多个，并按顺序匹配字体。设置字体类型时，需要检查计算机中是否有该字体的存在。font-family 属性的基本用法：font-family: 字体名称, 字体名称;示例：font-family入口页面（index.html）： Title 这是一段文本 示例效果：字体大小font-size 属性用于设置字体大小。font-size 属性的基本用法：font-size: 字体大小;字体大小单位：名称描述px指定字体大小为固定的像素值rem相对于根元素（即 HTML 元素）的字体大小默认情况下 1rem=16pxem相对于父元素的字体大小示例：font-size入口页面（index.html）： Title 这是一段文本 这是一段文本 示例效果：字体风格font-style 属性用于设置字体风格。font-style 属性的基本用法：font-style: 字体风格;字体风格：名称描述normal（默认值）标准字体样式italic斜体字体样式（直接设置倾斜字体）oblique倾斜字体样式（让没有倾斜字体的文本有倾斜效果）示例：font-style入口页面（index.html）： Title 这是一段文本 示例效果：字体粗细font-weight 属性用于设置字体风格。font-weight 属性的基本用法：font-weight: 字体粗细;字体粗细：名称描述normal（默认值）标准的字体bold粗体字体bolder更粗的字体lighter更细的字体100～900定义由细到粗的字体400 等同于 normal，700 等同于 bold示例：font-weight入口页面（index.html）： Title 这是一段文本 这是一段文本 示例效果：字体属性font 属性用于设置字体的所有属性。font 属性的基本用法：font: 字体风格 字体粗细 字体大小 字体类型;示例：font入口页面（index.html）： Title 这是一段文本 示例效果：CSS3 美化文本排版文本颜色color 属性用于设置文本颜色。color 属性的基本用法：color: 文本颜色;颜色值表示法：名称使用方式描述单词表示法/如：red 表示红色、green 表示绿色，blue 表示蓝色等RGB 表示法rgb(r, g, b)RGB 即红绿蓝三原色模式 r、g、b 参数的取值范围为 0～255十六进制表示法#FAFAFARGB 的十六进制表示方式可以和 RGB 表示法相互转换RGBA 表示法rgba(r, g, b, alpha)在 RGB 的基础上增加了 alpha 透明度，取值范围为 0～1，0 为完全透明示例：color入口页面（index.html）： Title 这是一段文本 这是一段文本 这是一段文本 这是一段文本 示例效果：文本水平对齐方式text-align 属性用于设置文本水平对齐方式。text-align 属性的基本用法：text-align: 文本水平对齐方式;文本水平对齐方式：名称描述left（默认值）左对齐right右对齐center居中对齐justify两端对齐示例：text-align入口页面（index.html）： Title 这是一段文本 这是一段文本 这是一段超长的文本 这是一段超长的文本 示例效果：文本垂直对齐方式vertical-align 属性用于设置文本垂直对齐方式，该属性比较不常用。vertical-align 属性的基本用法：vertical-align: 文本垂直对齐方式;文本垂直对齐方式：名称描述baseline（默认值）基线对齐middle垂直居中top顶部对齐bottom底部对齐示例：vertical-align入口页面（index.html）： Title 这是一行文本 示例效果：文本首行缩进text-indent 属性用于设置文本首行缩进。text-indent 属性的基本用法：text-indent: 文本首行缩进大小;示例：text-indent入口页面（index.html） Title 这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。 示例效果：文本行高line-height 属性用于设置文本行高。line-height 属性的基本用法：line-height: 文本行高大小/倍数;示例：line-height入口页面（index.html）： Title 这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。 示例效果：文本装饰text-decoration 属性用于设置文本装饰。text-decoration 属性的基本用法：text-decoration: 文本装饰;文本装饰：名称描述none（默认值）标准文本underline设置文本下划线overline设置文本上划线line-through设置文本删除线示例：text-decoration入口页面（index.html）： Title 点我跳转 点我跳转 这是一段文本 这是一段文本 这是一段文本 示例效果：文本阴影text-shadow 属性用于设置文本阴影。text-shadow 属性基本用法：text-shadow: 阴影颜色 x轴位移 y轴位移 模糊半径;text-shadow 属性的基本配置项：配置描述阴影颜色如果不设置，默认使用文本颜色x 轴位移x>0 时阴影向右偏移y 轴位移y>0 时阴影向下偏移模糊半径模糊半径值越大阴影越模糊示例：text-shadow入口页面（index.html）： Title 这是一段文本 示例效果：CSS3 美化超链接超链接伪类超链接标签 a 标签会根据用户单击访问前、鼠标悬浮在超链接上、单击未释放、单击访问后的四个状态显示不同的超链接样式。通过超链接伪类，可以设置超链接标签的多态样式。超链接伪类：名称描述a:link单击访问前的超链接样式a:visited单击访问后的超链接样式a:hover鼠标悬浮在其上的超链接样式a:active单击未释放的超链接样式伪类的设置顺序，必须遵循 link、visited、hover、active 的顺序。示例：超链接伪类入口页面（index.html）： Title 跳转到duozai.cn 示例效果：CSS3 美化列表列表样式list-style-type/list-style 属性用于设置列表样式。list-style-type/list-style 属性的基本用法：list-style-type: 列表样式; list-style: 列表样式;列表样式：名称描述none无标记符号disc实心圆点circle空心圆点square实心正方形decimal数字示例：list-style入口页面（index.html）： Title 列表项1 列表项2 列表项3 示例效果：CSS3 美化背景背景颜色background-color 属性用于设置网页元素的背景颜色。background-color 属性的基本用法：background-color: 背景颜色;示例：background-color入口页面（index.html）： Title box1 示例效果：背景图片background-image 属性用于设置网页元素的背景图片。background-image 属性的基本用法：background-image: url("背景图片路径");示例：background-image入口页面（index.html）： Title box1 示例效果：背景平铺background-image 属性设置的背景图片默认情况下会自动向水平方向和垂直方向重复平铺。background-repeat 属性用于设置网页元素背景图片的平铺方式。background-repeat 属性的基本用法：background-repeat: 背景平铺方式;背景平铺方式：名称描述repeat沿水平和垂直两个方向平铺no-repeat不平铺，背景图片只显示一次repeat-x只沿水平方向平铺repeat-y只沿垂直方向平铺示例：background-repeat入口页面（index.html）： Title box1 示例效果：背景定位background-position 属性用于设置网页元素背景图片的定位。background-position 属性的基本用法：background-position: 背景定位方式;背景定位方式：名称描述Xpos Ypos使用像素值表示背景图片的位置Xpos 表示水平偏移，X>0 时背景图片向右偏移Ypos 表示垂直偏移，Y>0 时背景图片向下偏移X% Y%使用百分比表示背景图片的位置方向关键字使用方向关键字自由组合，默认为 center方向关键词：left、right、center、top、bottom示例：background-position入口页面（index.html）： Title box1 box2 box3 示例效果：背景尺寸background-size 属性用于设置网页元素背景图片的尺寸。background-size 属性的基本用法：background-size: 背景尺寸;背景尺寸：名称描述auto背景图片尺寸保持原样X% Y%使用百分比表示背景图片的尺寸大小cover背景图片缩放充满整个容器contain在背景图片保持宽高比的情况下，缩放到宽度或高度正好适合整个容器示例：background-size入口页面（index.html）： Title box1 box2 示例效果：背景属性background 属性用于简写背景样式。background 属性的基本用法：background: 背景颜色 背景图片 背景定位 背景平铺;CSS3 渐变线性渐变线性渐变是颜色沿着一条直线过渡：从左到右、从上到下等。线性渐变的基本用法：background-image: linear-gradient(渐变方向, 颜色1, 颜色2);渐变方向：名称描述to bottom颜色 1 从顶部到底部向颜色 2 渐变to right颜色 1 从左边到右边向颜色 2 渐变to top left颜色 1 从右下到左上向颜色 2 渐变不同的浏览器对渐变的支持不一样，为了适配浏览器，在编写样式的时候需要在用法上加上每种浏览器对应的前缀。浏览器样式前缀：名称描述-ms-适配 IE 浏览器-webkit-适配 Chrome 内核浏览器和 Safari 浏览器-o-适配欧朋浏览器-moz-适配 Firefox 火狐浏览器示例：linear-gradient入口页面（index.html）： Title box1 示例效果：
前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 02-媒体元素与表单
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多选框button普通按钮submit提交表单请求按钮reset重置表单内容按钮file文件上传选择按钮email邮箱输入框url网址输入框number数字输入框range滑块search搜索框hidden隐藏表单域示例：表单元素 input入口页面（index.html）： 用户名： 密码： 请选择性别： 男 女 请选择爱好： 吃饭 睡觉 打豆豆 年龄： 关键词： 示例效果：表单元素 textareatextarea 标签用于定义多行文本框。textarea 标签的基本用法： xxx textarea 标签的基本属性：名称描述cols多行文本框可见宽度rows多行文本框可见行数示例：表单元素 textarea入口页面（index.html）： 欢迎使用textarea 示例效果：表单元素 select 和 optionselect 标签用于创建下拉框，option 标签用于创建下拉框中的每一个选项。select 标签和 option 标签的基本用法： xxx option 标签的基本属性：名称描述value选项的值selected选项默认被选中示例：表单元素 select 和 option入口页面（index.html）： 请选择一个汽车品牌： 奥迪 比亚迪 吉利 沃尔沃 示例效果：表单元素 buttonbutton 标签用于创建按钮。在 button 元素内部，可以放置文本、图像、图标等标签，这是用 input 元素创建的按钮所不能做到的。button 标签的基本用法： xxx button 标签的基本属性：名称描述type按钮类型button：普通按钮submit：表单提交按钮（默认）reset：重置表单按钮示例：表单元素 button入口页面（index.html）： 点击我！ 表单初级验证表单验证的好处：减轻服务器的压力。保证数据的可行性和安全性。实现表单初级验证：可以使用 placeholder 描述表单元素期待用户输入何种内容。设置表单元素的类型，限定输入的数据类型。使用 pattern 进行正则表达式校验。示例：表单初级验证入口页面（index.html）： 提交 示例效果：
前端三剑客 HTML + CSS + JavaScript 基础复习串讲之 01-HTML5 基础与列表、表格
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 注释的基本用法： HTML 特殊符号如果要在 HTML 文档中显示特殊符号，需要使用相应的 HTML 代码标识。参考文档：https://www.runoob.com/charsets/ref-html-symbols.html列表无序列表ul、li 标签用于定义无序列表。无序列表的特点：没有顺序，每个 li 标签独占一行。默认 li 标签项前面有个实心小圆点。示例：使用无序列表标签定义列表入口页面（index.html）： 热搜 新闻1 新闻2 新闻3 示例效果：有序列表ol、li 标签用于定义有序列表。有序列表的特点：有顺序，每个 li 标签独占一行。默认 li 标签项前面有个顺序标记。示例：使用有序列表标签定义列表入口页面（index.html）： 题目1 题目2 题目3 示例效果：定义列表dl、dt、dd 标签用于定义定义列表。定义列表是标题及列表项的结合。dl 标签作为列表的开始。dt 标签作为每个列表项的开始。dd 标签作为每个列表项。定义列表的特点：没有顺序，每个 dt、dd 标签独占一行。默认没有标记。示例：使用定义列表标签定义列表入口页面（index.html）： 食物列表 水果 苹果 菠萝 橘子 蔬菜 生菜 黄瓜 西红柿 示例效果：表格表格基本结构表格由单元格、行、列组成。定义一个表格的规范步骤：使用 table 标签定义表格。使用 thead 标签定义表头。使用 tr 标签在 thead 标签中定义表头的第一行，可以有多行。使用 th 标签在 thead-tr 标签中定义表头的单元格。使用 tbody 标签定义表格内容主体。使用 tr 标签在 tbody 标签中定义表格内容的第一行，可以有多行。使用 td 标签在 tbody-tr 标签中定义表格内容的单元格。表格的基本结构： 表格标签的基本属性：名称描述border设置 table 表格边框align设置内容的对齐方式，可以让表格在网页内居中，也可以让表格内容在单元格居中 left：左对齐right：右对齐center：居中对齐color设置内容颜色width设置内容宽度height设置内容高度示例：使用表格标签定义表格入口页面（index.html）： id name 1 张三 2 李四 示例效果：表格跨列表格跨列是指单元格的横向合并。示例：表格跨列入口页面（index.html）： 学生列表 示例效果：表格跨行表格跨行是指单元格的纵向合并。示例：表格跨行入口页面（index.html）： 张三 语文 98 数学 89 示例效果：