HTML5与CSS3学习：布局、动画与表格

“web第二期学习笔记，主要是布局，HTML5” 在web开发中，布局和HTML5的新特性是至关重要的。这些笔记涵盖了前端开发的一些关键概念，包括HTML5中的新元素，CSS3的布局和动画效果，以及表格的高级用法。 首先，笔记提到了 `<span>` 标签，它是一个行内元素，用于组合文档中的小段落或在不换行的情况下插入文本。`<span>` 与 `<div>` 的主要区别在于，`<div>` 是块级元素，会占据一整行，而 `<span>` 则在当前行内显示。`<div>` 可以包含 `<span>`，但反之则不行，这体现了它们在结构和布局上的差异。 接着，笔记介绍了CSS3的伪类选择器 `:before` 和 `:after`，这两个选择器允许我们在元素前后添加额外的内容，从而实现更丰富的视觉效果和布局设计。 在第七周的作业中，重点学习了 `transform` 属性，这是CSS3的一个强大工具，可以用于实现2D和3D转换。例如，`translate()` 用于位移元素，`rotate()` 用于旋转元素，`scale()` 用于缩放元素，`skew()` 用于倾斜元素，而 `matrix()` 则是一个通用的转换函数，可以组合多个变换。此外，还学习了 `rotateX()`, `rotateY()`, `rotateZ()` 用于3D旋转，以及 `perspective` 属性，它用于创建透视效果，使元素看起来更具有立体感。 在Z7-4部分，`:hover` 伪类的使用被提及，它允许我们在鼠标悬停在元素上时改变其样式或影响关联元素的样式。同时，`animation-fill-mode:forwards;` 的作用是在动画结束后保持元素的最终状态，而不是恢复到初始位置。 在Z7-5和Z7-6中，表格的高级特性被讲解，如 `rowspan` 和 `colspan` 属性，它们分别用于合并行和列，提供了创建复杂表格布局的可能性。另外，`align` 属性用于设置单元格的水平对齐方式，而 `cellspacing` 和 `cellpadding` 分别控制单元格之间的距离和内容与边框的距离，提供了自定义单元格间隔的手段。 最后，第八周的作业涉及到 `<ruby>` 标签，这是HTML5中用来为汉字添加拼音或注音的元素，对于多语言支持和阅读辅助特别有用。 这些笔记覆盖了前端开发中HTML5的基本元素、CSS3的布局和动画技术，以及表格的高级使用，这些都是构建现代网页所必需的基础知识。通过深入理解和实践这些概念，开发者可以创建更加动态、美观且功能丰富的网页。