前端开发笔记：HTML与CSS基础详解

"这篇前端学习笔记涵盖了HTML基础和CSS基础的知识点，持续更新，旨在帮助学习者系统地掌握前端开发的基础技能。" 在HTML基础部分，笔记提到了以下几个关键概念： 1. `img`标签的`alt`属性：当图片无法加载时，`alt`属性提供的文字将作为替代信息显示，提高了网页的可访问性。 2. `a`标签的`target`属性：用于定义链接打开的新位置，不同的值有不同的效果： - `_blank`：在新窗口或标签页中打开链接。 - `_top`：在整个浏览器窗口中打开链接，取消所有框架限制。 - `_self`：默认值，链接在当前帧或窗口中打开。 - `_parent`：如果当前帧有父框架，链接在父框架中打开。 3. `input`标签的`require`属性：将输入框标记为必填项，当表单提交时，如果没有填写则会阻止表单的提交。 4. `input`标签的`radio`属性：用于创建单选按钮，用户只能选择其中一个选项。例如，性别选择中，`indoor`和`outdoor`，`男`和`女`都是单选按钮。 5. `label`标签的`for`属性：与`input`标签的`id`属性配合使用，点击标签时，可以将焦点自动移动到对应的输入元素，提高用户体验。 6. 更好的单选框可访问性实践：通过正确使用`<fieldset>`和`<legend>`元素，可以更好地组织和解释一组相关的单选按钮，例如，示例中的“What level ninja are you?”。 在CSS基础部分，笔记介绍了以下几个关键技巧： 1. 选择器的使用，包括类选择器（`.text`），ID选择器（`#text`），以及优先级的概念，`!important`用于强制应用某个样式。 2. CSS变量（Custom Properties）：可以定义全局或局部变量，简化代码，便于媒体查询。 3. 盒子阴影（`box-shadow`）：用于添加阴影效果，例如创建卡片样式的阴影。 4. `text-transform`属性：用于改变文本的大小写，支持`lowercase`（小写）、`uppercase`（大写）和`capitalize`（首字母大写）。 5. `position`属性中的`fixed`定位：元素相对于浏览器窗口定位，即使页面滚动，其位置保持不变。 6. 渐变色：`linear-gradient`用于创建线性渐变，`repeating-linear-gradient`用于创建重复的线性渐变，可以创建出条纹效果。 7. `transform`的`scale`函数：用于缩放元素的大小，例如`scale(2)`将元素放大两倍。 8. 使用`transform`的其他方法，如旋转、移动等，来改变元素的视觉表现。 这些笔记内容为初学者提供了一个全面的HTML和CSS基础学习框架，同时也提醒了开发者关注可访问性和用户体验的重要性。随着笔记的不断更新，更多前端技术将被涵盖，有助于持续提升前端开发能力。