前述

因为本人只需要一点点的前端知识能够用来分享自己的小牢骚，所以没有往深处学习，页面看起来会很简陋，见谅。

正式开始

前端快速入门，我是看的这个教程：点我跳转

前端入门大致需要学习三个工具：1.HTML 2.CSS 3.JS

我们可以在VsCode中下载下面三个插件来提高我们写代码的体验感：

1. HTML CSS Support : 据说这能提升写css文件的便捷性。

2. Live Server : 这个用于实时预览浏览器页面的变化。

3. Auto Rename Tag : 这个用于修改标签统一性。遇到双标签，修改开始标签，结束标签就会同步修改。

HTML(Hypertext Markup Language)(超文本标记语言)

HTML通过一系列标签来标识文字的作用。
标签可以分为单标签和双标签。
单标签用于无内容元素，例如换行标签 br 。
双标签则用于有内容元素，比如段落标签 p 。

HTML有一定的结构：

        <!DOCTYPE html>
        <html>
            <head>
                <title></title>
                <meta charset="UTF-8">
            </head>
            <body>

            </body>
        </html>

下面是一些常用的文本标签：

标题标签：<h1~h6>

段落标签：<p>

字体加粗标签：<b> <strong>

斜体标签：<i>

下划线标签：<u>

删除线标签：<s>

无序列表标签：<ul>

列表元素标签：<li>

有序列表标签：<ol>

表格标签：<table>

列标签：<tr>

表格元素标签：<td>

列标题标签：<th>

超链接标签：<a>

换行标签：<br>

换行且有水平分割线：<hr>

图片标签：<img>

块标签：<div>

包装小文本标签：<span>

#块标签和包装小文本标签一般要搭配CSS和JS使用

表单标签：<form>

输入标签：<input>

小文本标签：<label>

样式设计标签：<style>

导入文件标签：<link>

按钮标签：<button>

原样显示标签：<pre>

HTML标签属性

属性名不区分大小写，但是属性值是有区分大小写的。

大多数HTML元素拥有的属性：
1. class : 定义类名
2. id : 定义元素唯一的id
3. style : 规定元素的样式---这个一般会和css联动
4. color : 设置字体颜色
5. font-size : 设置字体大小
6. background : 设置背景色
7. font-family : 设置字体样式
8. font-weight : 设置字体宽度

超链接标签<a>的属性：
href : 定义链接到的目标（比如网址）
target : 定义链接的打开方式：
   _self : 当前窗口打开（默认值）
   _blank : 新窗口打开
   _parent : 父窗口打开
   _top : 顶层窗口打开

图片标签<img>的属性：
src : 图片文件路径
alt : 当图片无法加载时显示的文本
width : 设置图片宽度
height : 设置图片高度

输入标签<input>的属性：
type : 规定接收的元素的类型
   text : 文本框
   radio : 单选框
   password : 有遮挡输入字符的效果
   checkbox : 多选框
   submit : 提交框
   name : 定义标签属于哪一类
placeholder : 定义文本框默认显示内容
value : 定义默认的接收值

小文本标签<label>的属性：
for : 用于与<input>的id绑定

表单<form>的属性：
action : 填入URL，用于接收数据

按钮标签<button>的属性：
onClick : 填入点击触发函数名。函数放在<script>中。

块元素与行内元素

块元素：占据整行
行内元素：不会独占一整行

CSS(Cascading Style Sheets)(层叠样式表)

        语法：
        选择器{
            属性1:属性值1
            属性2:属性值2
        }

选择器可以是HTML标签，这种类型的选择器叫做元素选择器，还有其他类型的选择器：
类选择器：.类名{}
id选择器：#id命{}
通用选择器：*{}
伪类选择器：
鼠标悬停：#id名:hover{}

样式标签<style>也可以是标签的属性。

CSS有三种导入方式：
内联样式：通过设置标签的style属性。
内部样式：在<head>中设置<style>标签的属性。
外部样式：样式设计写在 .css 文件中，后面再在<head>中用<link>导入。

CSS常用属性声明：
line-height : 设置行高
display : 转换类型

有个很经典的盒子模型：

大概就是说，在计算机中，每一段对象都有这些东西。

JS(JavaScript)

JS的导入方式：
内联：通过<script>标签设置
外联：.js文件中写<script>，再通过<link>引入。

JS的一些语法：这个和编程语言就很像了
console.log(内容) : 在控制台显示输出内容
alert(内容) : 在网页中弹窗显示内容

JS变量与数据类型：
JS的变量声明和C语言类型，但是数据类型是 1.var 2.let 3.const
那有朋友就要问了，兄弟兄弟，这个var和let有什么区别呀？区别在于作用域：var是函数作用域，let是块作用域。

JS控制语句：这个也和C语言很像，就是条件语句和循环语句
条件语句：同C语言
循环语句：同C语言(for, while, do while, break, continue)

JS函数：
语法：
function 函数名(形参1, 形参2···){}
这个虽然没有函数返回值，但是可以有 return 语句。

JS事件：
大概就是，信号-槽那种感觉。比如说点击某个按钮之后，触发什么效果。

一些零散知识：

转义：
< --- <
> --- >
  --- 不换行空格
& --- &

href : Hypertext Reference (超文本引用)

编辑时间：记录一下

初版：2026.7.26 23:00
增加了导航栏：2026.7.28 22:56