前端学习笔记

小乙说

已于 2025-02-27 15:22:04 修改

阅读量310

点赞数 4

文章标签：学习笔记

于 2025-02-11 12:28:38 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52144597/article/details/145523620

版权

Visual Studio Code工具

VSCode的使用

1.双击打开软件。
2.新建文件(Ctrl+N )。
3.保存(Ctrl+S),注意移动要保存为.html文件
4. Ctrl + 加号键，Ctrl+减号键可以放大缩小视图
5.生成页面骨架结构。
输入! 按下 Tab 键。
6.利用插件在浏览器中预览页面:单击鼠标右键，在弹出出口中点击“OpenIn Default Browser”

VSCode插件安装

1.vscode下载完毕是英文版的，先安装这个插件，改为中文版，所以是我们第一个安装的插件

2.Auto Rename Tag
修放开始标签，结束标签跟着自动变化，比较好用。

3.One Dark Pro 颜色主题

4.格式化设置

5.浏览器预览页面

6.实时预览

7.Easy LESS 编译less文件
我们写的less不能直接引入到html文件中，通过这个插件可以自动帮我们生成
css来件

8. 会了吧（翻译）

VSCode快捷键

1.快速复制一行
快捷键: shift+alt+ 下箭头(上箭头)
或者 ctr+c 然后 ctrl+v

2.选定多个相同的单词
快捷键: ctrl + d
先双击选定一个单词，然后按下 ctr+d 可以往下依次选择相同的单词。
这样同时修改相同
的单词就非常方便

3.添加多个光标
快捷键: Ctrl + Alt + 上箭头(下箭头)

4.全局替换某些单词
当我们一个页面需要修改大量相同的文字的时候，我们一个的修改超级麻烦，此时我们可以使
用全局替换
快捷键: ctrl + h
注意选择全部替换即可

5.快速定位到某一行
当我们页面比较长的时候，上下滚动页面布方便，其实我们可以利用快捷键，快速的调到指定
的行数上。
快捷键：ctrl+ g

6.选择某个区块
可以选择一个区块进行操作
快捷键:
按住shift + alt 然后拖动鼠标

7.放大缩小整个编辑器界面
快捷键:ctrl+ +/-
ctrl+加号或者减号

8.自定义快捷键

锚点链接

一、定义

锚点链接是指在网页内（既可在同一页面内，也可以在不同网页中）设置一个锚点（书签），然后创建指向该锚点（书签）的超链接。它允许用户点击链接后，快速跳转到页面内的指定位置，而不是跳转到另一个页面。

二、用途

锚点链接通常用于长页面或包含大量内容的页面，方便用户快速定位到页面的特定部分。例如，在电子书上，点击目录中的章节标题，就可以导航到相应内容。此外，锚点链接也常用于创建“回到顶部”的按钮，方便用户快速回到页面顶部。

三、创建方法

创建锚点链接通常需要两个步骤：

定义锚点：在页面的目标位置（通常是页面中的某个元素）处添加一个具有唯一标识符的锚点。这可以通过在HTML元素（如<a>、<h2>等）中添加id属性来实现。例如，<a id="section1"></a>或<h2 id="section1">Section 1</h2>。
创建链接：在页面的其他位置添加指向锚点的超链接。这可以通过在<a>标签的href属性中使用#加上锚点的id值来实现。例如，<a href="#section1">Jump to Section 1</a>。当用户点击这个链接时，浏览器会自动滚动到页面中id为section1的元素处。

表格

一、表格基本概念

定义：表格是一个带有边框的矩阵，用于将数据整齐地显示在浏览器中，方便用户使用和操作。
作用：在网页中展示结构化数据，如员工信息、产品信息、统计数据等。

二、HTML表格元素

<table>标签：用于定义整个表格。
<tr>标签：用于定义表格中的一行（table row）。
<th>标签：用于定义表格的头部单元格（table header），通常用于设置表格的标题，文本会加粗居中显示。
<td>标签：用于定义表格中的数据单元格（table data）。

此外，还有以下用于表格分组的标签：

<thead>标签：用于定义表格的表头部分，通常包含一行或多行标题单元格。
<tbody>标签：用于定义表格的主体部分，包含数据行。使用<tbody>可以提高表格的渲染效率，因为浏览器可以优先显示已下载的内容。
<tfoot>标签：用于定义表格的表注（页脚）部分，通常包含总计行或其他总结信息。

三、表格属性

border属性：用于为表格添加边框。属性值为数字，表示边框的宽度。
width和height属性：用于设置表格的宽度和高度。属性值可以为像素值或百分比。
bgcolor属性：用于设置表格的背景颜色。属性值可以为颜色名称或十六进制颜色代码。
cellspacing属性：用于设置单元格与单元格之间的间距。属性值为数字，表示间距的宽度。
cellpadding属性：用于设置单元格内容与单元格边框之间的距离。属性值为数字，表示距离的大小。
align和valign属性：用于设置表格或单元格内容的水平对齐方式和垂直对齐方式。属性值包括left（左对齐）、center（居中对齐）和right（右对齐），以及top（顶部对齐）、middle（居中对齐）和bottom（底部对齐）。

四、表格的CSS样式

border属性：在CSS中，可以使用border属性为表格或单元格添加边框。例如，border: 1px solid blue;表示添加1像素宽的蓝色实线边框。
border-spacing属性：用于设置单元格与单元格之间的间距，与HTML中的cellspacing属性类似。
border-collapse属性：用于合并表格边框。当设置为collapse时，相邻单元格的边框会合并成一条边框。
empty-cells属性：用于设置是否显示空的单元格。属性值为hide时隐藏空单元格，为show时显示空单元格（默认值）。

五、表格设计注意事项

结构清晰：表格设计应结构清晰，便于用户理解和使用。
内容准确：确保表格中的数据准确无误，避免误导用户。
样式美观：通过CSS样式为表格添加合适的边框、背景颜色和对齐方式，提高表格的可读性和美观度。
响应式布局：考虑在不同设备和屏幕尺寸下表格的显示效果，确保表格在移动设备上也能良好显示。

表单

一、表单基本概念

定义：在HTML中，表单（Form）是一个包含表单元素的区域，用于收集用户输入的数据，并将这些数据提交到服务器进行处理。
组成：表单元素可以包括文本框、复选框、单选框、提交按钮等，还可以包含下拉菜单、文本域、字段集（fieldset）、图例（legend）和标签（label）等元素。

二、HTML表单元素

<form>标签：用于定义HTML表单。
<input>标签：用于创建单行文本输入字段、密码字段、单选按钮、复选框、提交按钮等。
- type属性：指定输入字段的类型，如text（文本）、password（密码）、radio（单选按钮）、checkbox（复选框）、submit（提交按钮）等。
<textarea>标签：用于创建多行文本输入字段。
<select>标签：用于创建下拉列表。
- <option>标签：定义下拉列表中的选项。
<button>标签：用于创建按钮。
<fieldset>和<legend>标签：用于将表单中的相关元素组合在一起，并为该组合提供标题。

三、表单属性

action属性：指定表单数据提交的URL。
method属性：指定表单数据提交的方式，常用的有GET和POST两种。GET方式会将表单数据附加在URL中，而POST方式会将表单数据打包在HTTP请求的正文中。
- GET方式的缺点：数据在URL中可见，不安全；URL长度有限制。
- POST方式的优点：数据在HTTP请求正文中，更安全；没有大小限制。
target属性：指定表单提交后响应的显示位置，如在新窗口、当前窗口、父框架等。
autocomplete属性：指定表单是否应打开自动完成功能。

四、表单验证

客户端验证：在用户提交表单之前，通过JavaScript或HTML5的内置功能检查输入数据的有效性。
- HTML5内置验证：如required属性标记必填字段，pattern属性使用正则表达式验证输入格式。
服务器端验证：在数据提交后，由服务器端进行二次验证，确保数据的安全性和完整性。