前端 on My New Hugo Project

JS

xxx@example.com (scqwq) — Sun, 03 May 2026 11:00:00 +0800

JS

Author: scqwq(xxx@example.com)

JavaScript

1.导入方式:

同样有三种:

1.头部添加 👇

2.body添加 👇

<script>   script>

3.外部添加,设根目录下的JS文件夹下有一个data.js文件: (路径为相对路径)

<script src = "./JS/data.js"> script>

2.变量、数据类型、控制语句

<script>
        var x;            //var具有函数作用域
        let y = 5;			//let的变量具有块级作用域 let更安全灵活 尽量使用let
        const PI = 3.14;
    	console.log(x,y,114514);//数字可以直接输出，文字不行，文字可定义变量
    	let name = "scqwq"
        console.log(name);
    	
    	let i = 0;
    	if(i < 0){//条件语句 
            console("i < 0");
        }	else if(i > 0){
            console("i > 0");
        } 	else {
            console.log("i = 0");
        }
    
    	for(i = 0;i < 5;i++){		//循环语句
            console.log("i = ",i);
        }
    //for与while循环都与C同理
    
script>

3.函数

function name(参数1,参数2){
	
	return xx;//可选
}

参数前不需要加类型声明

需要改变原变量推荐将原变量作为数字之类的储存，之后传参可理解为传进了数组的指针

※4.事件

能与用户交互做出相应的重要部分,常用的如下图：

Published on 2026-05-03 at My New Hugo Project, last modified on 2026-05-03

HTML

xxx@example.com (scqwq) — Sun, 03 May 2026 11:00:00 +0800

HTML

Author: scqwq(xxx@example.com)

HTML：

  //告诉浏览器这是一个HTML文件
<html>  //文档起始点 or 最外层容器
    <head>   //表示文档头部 包含一些文件原信息(如标题 编码格式)
        <title>Documenttitle> //标题
        <meta charset="UTF-8">  //编码格式
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	
    head>
    
    <body>   //body标签对
        //实际显示在浏览器的内容 比如文本图片与链接
    body>
html>

//多提一嘴如果你直接在根目录下命令框打code .可以直接在vscode里打开

//同时直接输入!补齐上述需要标签就行

标题标签与段落标签:

<body>
    <h1>一级标签h1> //标题标签 h后面可跟1~6
    <h2>二级标签h2>
    
    <p>
        114514  //段落标签
        <b>加粗标签b> //Bold == strong
        <i>斜体i>
        <u>下划线u>
        <s>删除线s>
    p>
body>

有序列表&&无序列表

<body>
    <ul>  //ul表示无序列表  在外部显示·
        <li>元素1li>
        <li>元素2li>
        <li>元素3li>
    ul>
    
    <ol> //ol表示有序列表  在外部显示数字
        <li>元素1li>
        <li>元素2li>
        <li>元素3li>
    ol>
body>

表格标签

<table border = "1"> //有行有列 border表格边框
    <tr>
    	<th>表格标题 table headerth>  //表头
    tr>
    
    <tr> //table row 表格行 //table data 表格列
        <td>元素1td>
        <td>元素2td>
        <td>元素3td>
    tr>
    
     <tr>
    	<td>元素21td>
        <td>元素22td>
        <td>元素23td>
    tr>
table>

换行分割标签:

<br> 换行标签
<hr> 水平分割线标签

有一些元素默认独占一行有一些可以共用一行想共用一行换行则br

Published on 2026-05-03 at My New Hugo Project, last modified on 2026-05-03

CSS

xxx@example.com (scqwq) — Sun, 03 May 2026 11:00:00 +0800

CSS

Author: scqwq(xxx@example.com)

CSS

CSS:层叠样式表，用于定义网页样式和布局的样式表语言,与HTML一起构筑Web页面

HTML:结构和内容 CSS:外观和样式

CSS -> 各个元素的颜色、字体、大小、间距、边框、背景 -> 更精确的页面设计

房子:HTML 结构大纲位置 CSS:装修

1.CSS组成:

通常由选择器、属性和属性值组成，多个规则可以组合在一起,每个属性分号结尾(C++)

选择器{
 属性1:属性值1;
 属性2:属性值2;
}

例如:p1标签选择器，此时所有p1标签都被选中,此时可以作为样式放在部分

<style>
p1{
    color: blue;
    font-size: 16px;
}
style>

此后在body中该样式可以被调用,例如在body中:

<p1>这是一个应用了css样式的文本p1>

2.CSS的导入方式:

1.内联样式:直接放在HTML元素标签中因为都有style属性(也就是直接写) 2.内联样式表:如上例，在head标签中定义 3.外部样式表:把CSS样式单独放在CSS文件中，再在head中使用另一个标签把这个CSS文件链接进来

优先级:内敛 > 内部 > 外部

1.例如:

<h1 style = "color: red;font-size: 27">
    标题
h1>

2.略

3.例如: css文件在根目录的相对目录的"CSS_data"文件夹中,名字叫"test.css",则在head中:

<link rel = "stylesheet" herf = "./CSS_data/test.css">

补充:link的属性有:

rel值	用途	示例
`stylesheet`	主样式表，立即应用
`preload`	预加载资源，不立即执行
`prefetch`	预获取未来可能需要的资源
`icon`	网站图标
`canonical`	规范URL

3.CSS选择器

是CSS的关键部分，允许你针对特定元素或一组元素定义样式

Published on 2026-05-03 at My New Hugo Project, last modified on 2026-05-03

前端 on My New Hugo Project

JS

JS

JavaScript

1.导入方式:

同样有三种:

2.变量、数据类型、控制语句

3.函数

※4.事件

HTML

HTML

HTML：

标签:

开头:

标题标签与段落标签:

有序列表&&无序列表

表格标签

换行分割标签:

CSS

CSS

CSS

1.CSS组成:

2.CSS的导入方式:

3.CSS选择器