前端快速入门笔记

原创 已于 2025-08-15 16:27:24 修改 · 2.1k 阅读 · 29 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#前端 #笔记 #html #css #javascript
于 2025-08-15 16:11:31 首次发布
该文章已生成可运行项目，

前言、

本文为前端快速入门自用笔记（学习视频参考B站视频BV1BT4y1W7Aw）

一、HTML（超文本标记语言）

1.1 概述

① HTML通过一系列的‘标签（又称元素）’来定义文本图像等内容。
② 一般而言HTML标签都是尖括号包围的关键字。
③ 标签一般成对出现，包含开始标签和结束标签（也称为双标签），内容位于两个标签之间。

例：

<p> 这是一个段落 </p>
<h1> 这是一个标题 </h1>
<!-- 这是一个备注 -->
④ 除了双标签，同样也存在单标签。

例：

<input type="text">
<br>
<hr>
⑤ 单标签用于没有内容的元素，双标签用于有内容的元素。
⑥ 文件结构
<!DOCTYPE html>放置文档的元信息（告诉浏览器这是 html 文件）
<html>HTML 文档的根元素，起始点，最外层容器
<head>文档的头部，包含一些文件的原信息
<body>实际显示在浏览器中页面的内容（文本、图像、链接）

1.2 常用文本标签

① 标题标签（h1~h6表示）
<h1> 一级标题标签 </h1>
<h2> 二级标题标签 </h2>
<h3> 三级标题标签 </h3>
<h4> 四级标题标签 </h4>
<h5> 五级标题标签 </h5>
<h6> 六级标题标签 </h6>
② 段落标签和更改文本样式
<p> 更改文本样式：<b>字体加粗</b> , <i>斜线</i> , <u>下划线</u> , <s>删除线</s> </p>
③ 比较复杂的标签

（1）有序列表和无序列表

<ul>
  <li> 无序列表元素 1 </li>
  <li> 无序列表元素 2 </li>
  <li> 无序列表元素 3 </li>
</ul>

</ol>
  <li> 有序列表元素 1 </li>
  <li> 有序列表元素 2 </li>
  <li> 有序列表元素 3 </li>
</ol>

（2）表格

<h1> table row </h1>
<h1> table data </h1>
<h1> table header </h1>

<table border=“1”>
  <tr>
    <th>列标题 1</th>
    <th>列标题 2</th>
    <th>列标题 3</th>
  </tr>
  <tr>
    <td>元素 1</td>
    <td>元素 2</td>
    <td>元素 3</td>
  </tr>
  <tr>
    <td>元素 21</td>
    <td>元素 22</td>
    <td>元素 23</td>
  </tr>
  <tr>
    <td>元素 31</td>
    <td>元素 32</td>
    <td>元素 33</td>
  </tr>
</table>
④ 运行结果

1.3 HTML标签属性

① 基本语法

（1）< 开始标签 属性名="属性值" >

（2）每个HTML元素可以具有不同的属性

（3）属性名称不区分大小写，属性值对大小写敏感

② 适用于大多数 HTML 元素的属性
class为 HTML 元素定义一个或多个类名（
id定义元素唯一的 id
style规定元素的行内形式
href定义了链接到的目标（可以是其他网页的 url 文件的路径）
target定义链接的打开方式

<a> 常用于创建链接到其他的网页位置

target的各项属性介绍：

_self表示链接会在当前窗口或者标签页打开（默认值）
_blank表示链接会在新的窗口或标签页打开
_parent表示链接会在父窗口或父框架中打开
_top表示链接会在顶层窗口或者顶层框架中打开
③ 具有特殊属性的标签
src定义了要显示的图像文件的路径
url图像文件的相对路径或绝对路径
alt定义图像的替代文本（如果图片无法加载就会显示出来 alt 属性中指定的文本

1.4 块元素和行内元素

① 块元素（block）

（1）块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。

（2）可以包含其他块级元素和行内元素。

（3）常见的块级元素包括 <div>，<p>，<h1>到<h6>，<ul>，<ol>，<li>，<table>，<form> 等。

② 行内元素（inline）

（1）行内元素通常在同一行内呈现，不会独占一行。

（2）它们只占据其内容所需的宽度，而不是整行的宽度。

（3）行内元素不能包含块级元素，但可以包含其他行内元素。

（4）常见的行内元素包括 <span>，<a>，<strong>，<em>，<img>，<br>，<input> 等。

③ 使用例
<div>（块级标签）通常用于创建一个包含其他 HTML 元素的容器块，通常没任何语意，仅用于组织内容（常用于创建页面的布局结构）
<span>（行内元素）相当于没有元素的 a 标签和 img 标签，主要作用是把一小部分文本给包装起来便于使用（给文本的一部分应用样式或者标记）

1.5 HTML表单

① form 属性：表单中所有元素必须包含在 form 标签内部（最常见的为 input）
input一个单标签（输入内容的）
type规定了 input 元素的类型
placeholder在文本框中显示内容（提示）
value规定 input 元素的值 

二、CSS（层叠样式表）

2.1 概述

① 用于定义网页样式和布局样式的语言
② 通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
③ CSS 与 HTML 的关系：类似于建筑骨架与装修

2.2 CSS 语法

选择器{
   属性1: 属性值1;
   属性2: 属性值2;
}
① 选择器的声明中可以写无数条属性
② 声明的每一行属性，都需要以英文分号结尾
③ 声明中所有的属性和值都是以键值对这种形式出现的

2.3 导入方式

① 内联样式（Inline Styles）

     css 样式可以直接放在 HTML 元素的标签中，因为都有 style 属性，所以可以在其中直接定义样式。

② 内部样式表（Internal Stylesheet）

     在 HTML 文档的 head 标签中定义即可

③ 外部样式表（External Stylesheet）

     把 css 样式单独放在 css 文件中然后在 head 标签里面使用另一个标签把它链接到我们这个 HTML 文档中。（允许在多个页面上重复使用相同的样式）

④ 三种导入方式的优先级：内联样式 > 内部样式表 > 外部样式表

使用例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 导入方式</title>
    <link rel="stylesheet" href="./style.css">

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

        h2{
            color: green;
        }
    </style>
</head>
<body>
    <p>这是一个应用了css样式的文本</p>
    <h1 style="color: red;">这是一个一级标题标签,使用内联样式</h1>
    <h2>这是一个二级标题标签,使用内联样式</h2>
    <h3>这是一个三级标题标签,使用内联样式</h3>
    
</body>
</html>
h3{
    color: yellowgreen;
}

2.4 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 选择器</title>
    <style>
        /* 元素选择器 */
        h2 {
            color: aqua;
        }
        /* 类选择器 */
        .highlight {
            background-color: yellow;
        }
        /* ID 选择器 */
        #header {
            font-size: 35px;
        }
        /* 通用选择器 */
        * {
            font-family: 'KaiTi';
            font-weight: bolder;
        }
        /* 子元素选择器 */
        .father > .son{
            color: yellowgreen;
        }
        /* 后代选择器 */
        .father p {
            color: brown;
            font-size: larger;
        }
        /* 相邻元素选择器 */
        h3 + p{
            background-color: red;
        }
        /* 伪类选择器 */
        #element:hover{
            background-color: blueviolet;
        }

        /*
         选中第一个子元素 :first-child
                        :nth-child()
                        :active
        */

        /* 伪元素选择器
           ::after
           ::before
        */
    </style>
</head>
<body>
    <h1>不同类型的 CSS 选择器</h1>
    
    <h2>这是一个元素选择器示例</h2>
    <h3 class="highlight">这是一个类选择器示例</h3>

    <h3>这是另一个类选择器示例</h3>
    <h4 id="header">这是一个ID选择器示例</h4>

    <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>
    </div>
    <p>这是一个普通的 p 标签</p>
    <h3>这是一个相邻兄弟选择器示例</h3>
    <p>这是另一个 p 标签</p>

    <h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

2.5 常用属性

 ① 行内块元素（Inline-block）

（1）水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性

（2）行内块元素可以包含其他行内元素或块级元素

② 使用例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 常用属性</title>

    <style>
       .block {
        background-color: aqua;
        width: 150px;
        height: 100px;
       }
       .inline {
        background-color: brown;
        width: 200px;
        height: 200px;
       }

       .inline-block {
        width: 100px;
        height: 150px;
       }

       .div-inline {
        display: inline; 
        background-color: aquamarine;
       }
       .span-inlinee-block {
        display: inline-block;
        background-color: blueviolet;
        width: 300px;
       }
    </style>
</head>
<body>
    <h1 style="font:bolder 50px 'KaiTi';"> 这是一个 font 复合属性案例 </h1>
    <p style="line-height: 40px"> 这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>

    <div class="block">这是一个块级元素 </div>
    <span class="inline"> 这是一个行内元素 </span>
    <img src="./home.png" alt="" class="inline-block">
    <img src="./home.png" alt="" class="inline-block">
    <img src="./home.png" alt="" class="inline-block">
    <h2>display</h2>
    <div class="div-inline">这是一个转换成行内元素的div 标签</div>
    <span class="span-inlinee-block">这是一个转换成行内块元素的span 标签</span>

</body>
</html>

2.6 盒子模型

① 概述

属性说明
内容（Content）盒子包含的实际内容，比如文本、图片等
内边距（Padding）围绕在内容的内部，是内容与边框之间的空间。可以使用 ‘Padding’ 属性来设置
边框（Border）围绕在内边距的外部，是盒子的边界。可以用 ‘border’ 属性来设置
外边距（Margin）围绕在边框的外部，是盒子与其他元素之间的空间。可以用 ‘margin’ 属性来设置

② 使用例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 盒子模型</title>
    <style>
        .border-demo {
            background-color: yellow;
            width: 300px;
            height: 200px;
            border-style: solid;
            border-width: 10px;
            border-color: blueviolet;
            /* border-left: 10px solid brown */
        }

        .demo {
            background-color: aquamarine;
            display: inline-block;
            border: 5px solid yellowgreen;
            padding: 50px;
            margin: 40px;
        }
    </style>
</head>

<body>
    <div class="demo">B 站搜索小映一枝</div>
    <div class="border-demo"> 这是一个边框示例 </div>
</body>

</html>

2.7 浮动和定位

① 传统网页布局方式

（1）标准流（普通流、文档流）：网页按照元素的书写顺序依次排列

（2）浮动

（3）定位

（4）‘Flexbox’ 和 ‘Grid’ （自适应布局）

注：‘标准流’ 是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素

② 浮动（元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向）

（1）‘浮动’ 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。

（2）语法：

选择器 {
    float: left/right/none;
}

（3）注：浮动是相对于父元素浮动，只会在父元素的内部移动

③ 浮动的三大特性

（1）脱标：脱离标准流

（2）一行显示，顶部对齐

（3）具备行内块的元素特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 浮动</title>
    <style>
        .father {
            background-color: aquamarine;
            /* height: 150px; */
            border: 3px solid brown;
            /* overflow: hidden; */

        }

        .father::after {
            content: "";
            display: table;
            clear: both;
        }

        .left-son {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }

        .right-son {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
        <p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
    </div>
</body>
</html>

④ 定位方式
相对定位相对于元素在文档流中的正常位置进行定位
绝对定位相对于最近的已定位祖先元素进行定位，不占据文档流
固定定位相对于浏览器窗口进行定位，不占据文档流。固定在屏幕上的位置，不随意滚动而移动
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .box1 {
            height: 350px;
            background-color: aqua;
        }

        .box-normal {
            width: 100px;
            height: 100px;
            background-color: purple;
        }

        .box-relative {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            left: 120px;
            bottom: 40px;
        }
        .box2 {
            height: 350px;
            background-color: yellow;
            margin-bottom: 300px;
        }
        .box-absolute {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
            left: 120px;
        }
        .box-fixed {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>

<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
    <h1>绝对定位</h1>
    <div class="box2"></div>
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-normal"></div>
    <h1>固定定位</h1>
    <div class="box-fixed"></div>
</body>

</html>

三、JS（JavaScript）

3.1 概述

① 一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性
② 一种客户端脚本语言，JavaScript 可以直接嵌入 HTML，并在浏览器中执行
③ 不同于 HTML 和 CSS，JS 使得网页不再是静态，而是可以通过用户的操作动态来变化
④ 作用
客户端脚本用于在用户浏览器中执行，实现动态效果和用户交互
网页开发与 HTML 和 CSS协同工作，使网页更具交互性和动态性
后端开发使用Node.js，JavaScript 也可以在服务器端运行，实现服务器端应用的开发

3.2 导入方式

① 内联式（在 JS 文件中直接嵌入 HTML 代码）
②外部引入（把 JS 代码保存在单独的外部文件中通过 script 标签的src属性引入）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 导入方式</title>

    <script>
        console.log('hello, head的标签内联样式')
    </script>

    <script src="./myscript.js"></script>
</head>
<body>
    <h1>JavaScript 的导入方式</h1>
    <script>
        console.log('hello, body的标签内联样式');
        alert("你好, 内联样式弹窗");
    </script>
</body>
</html>
console.log('hello, 外联样式');

3.3 变量及数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 基础语法</title>
</head>
<body>

    <SCript>
        var x;
        let y = 5;
        const PI = 3.14
        console.log(x, y, PI);
        let name = '映枝';
        console.log(name);
        let empty_value = null;
        console.log(empty_value);
</SCript>
    
</body>
</html>

3.4 控制语句

① 条件语句 （常用结构）

（1）' if ' 语句：常用于执行一个代码块，当指定条件为真（true）时执行。语法如下：

if(condition){
   //如果条件为真，执行这里的代码
}

（2）' else ' 语句：用于在上一个 if 和所有 else if 都为假时执行的代码块。语法如下：

if(condition) {
   //如果条件为真，执行这里的代码
} else {
   //如果条件为假，执行这里的代码
}

（3）' else if ' 语句：用于在上一个 if 语句条件为假时，检查另一个条件。可以有多个 else if 语句。语法如下：

if(condition1) {
    //如果条件1为真，执行这里的代码
} else if(condition2) {
    //如果条件2为真，执行这里的代码
} else {
    //如果以上条件都为假，执行这里的代码
}

（4）使用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 基础语法</title>
</head>
<body>

    <SCript>
        var x;
        let y = 5;
        const PI = 3.14
        console.log(x, y, PI);
        let name = '映枝';
        console.log(name);
        let empty_value = null;
        console.log(empty_value);

        let age = 19;

        if (age > 18){
            console.log('你已经成年了');
        } else {
            console.log('未成年')
        }

        let time = 21;
        if(time < 12) {
            alert('上午好');
        } else if (time < 18) {
            alert('下午好');
        } else {
            alert('晚上好');
        }
    </SCript>
    
</body>
</html>
② 循环语句

（1）' for ' 循环：是一种常见的循环结构，用于按照指定的条件重复执行代码块。语法如下：

for(初始化表达式; 循环条件; 迭代器) {
      // 循环体，执行这里的代码
}

（2）' while ' 循环：会在指定的条件为真时执行代码块。语法如下：

while (循环条件) {
     // 循环体，执行这里的代码
}

（3）break 与  continue (循环关键字)

break用于跳出循环，结束循环的执行
continue用于跳出当前循环中的剩余代码，继续下一次循环

3.5 函数和事件

① 函数：是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出
function function_name(参数1, 参数2, 参数3, ...){ //参数可不写，表示不传参
         // 函数体，执行这里的代码
         return 返回值; // 可选，返回值
}
② 作用域
全局作用域在函数外部声明的变量
局部作用域（函数作用域）在函数内部声明的变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 函数</title>
</head>
<body>
    <script>
        function hello() {
            console.log('hello, world!');
        }

        hello();

        function hello_with_return() {
            return 'hello, world! - 返回值'
        }

        let a = hello_with_return();
        console.log(a);
        console.log(hello_with_return);
        
        function hello_with_params(name) {
            console.log('hello, ' + name);
        }

        hello_with_params('映枝');
        hello_with_params('GESITE');

        //作用域

        let global_var = '全局变量';
        function local_var_function() {
            let local_var = '局部变量';
            console.log('函数内打印全局变量：' + global_var);
            console.log('函数内打印局部变量：' + local_var);
        }

        local_var_function();

        console.log('全局打印全局变量：' + global_var);
        console.log('全局打印局部变量：' + local_var);
    </script>
</body>
</html>

③ 事件

（1）事件种类

onClick点击事件
onMouseOver鼠标经过
onMouseOut鼠标移出
onChange文本内容改变事件
onSelect文本框选中
onFocus光标聚集
onBlur移开光标

（2）事件绑定

' HTML ' 属性
' DOM ' 属性
' addEventListener ' 方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
</head>
<body>
    <button onclick="click_event()">这是一个点击事件按钮</button>
    <input type="text" onfocus="focus_event()" onblur="blur_event() ">
    <script>
        // 点击事件
        function click_event() {
            alert('点击事件触发了');
        }

        // 聚焦事件
        function focus_event() {
            console.log('获取焦点');
        }

        // 失去焦点事件
        function blur_event(params) {
            console.log('失去焦点');
        }
    </script>
</body>
</html>

3.6 js DOM

① 概述

（1）当页面被加载时，浏览器会创建页面的文档对象模型，也就是 DOM（Document Object Model）

（2）每个 HTML 或 XML 文档都可以被视为一个文档树，文档树是整个文档的层次结构表示

（3）文档节点是整个文档树的根节点

（4）DOM 为这个文档树提供了一个编程接口，开发者可以使用 JavaScript 来操作这个树状结构

② 节点树

③ DOM 对象常用方法
appendChild()把新的子节点添加到指定节点
removeChild()删除子节点
replaceChild()替换子节点
insertBefore()在指定的子节点前面插入新的子节点
createAttribute()创建属性节点
createElement()创建元素节点
createTextNode()创建文本节点
getAttribute()返回指定的属性值

四、 移动端适配和rem

4.1 移动端布局（推荐使用火狐、谷歌或 Edge 浏览器）

① 响应式布局的实现方法

（1）通过 ' rem '、' vw/vh ' 等单位，实现在不同设备上显示相同比例进而实现适配

（小米商城）

（2）响应式布局，通过媒体查询 ' @media ' 实现一套 HTML 配合多套 CSS 实现搭配

② Viewport（ '视区' 或 '视口' ）

（1） 指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scakabke=no">

（2）解析：

width=device-width将视口的宽度设置为设备的宽度。这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局。
initial-scale=1.0设置初始的缩放级别为1.0。这也有助于确保页面在加载时以原始大小显示，而不是被缩小或放大
minimum-scale=1.0最小缩放比例为1
maximum-scale=1.0最大缩放比例为1
user-scalable=no不允许用户缩放

4.2 rem（在响应式网页和移动端布局时用 rem 而非 px）

① ' rem ' 是一个倍数单位，它是基于 html 标签中的 ' font-size ' 属性值的倍数
② 只要我们在不同的设备上设置一个合适的初始值，当设备发生变化 ' font-size ' 就会自动等比适配大小，从而在不同的设备上表现统一

五、 总结

至此前端开发入门已全部结束，进阶拓展可看博主的微信小程序开发笔记。

（后续博主应该会继续学习 Vue.js 以灵活运用前端 ）

感谢看到这里的你，有缘再会。

本文章已经生成可运行项目
前端笔记汇总
西楼的博客
01-06 6672
目录 目录 前端基础 HTML 1.基本标签 2.页面结构分析 3.高级标签 CSS 1.基础知识 2.美化网页 JS 1.基础知识 2.数据类型详解 3.函数 4.面向对象编程 5.操作BOM对象(重点) 6.操作DOM对象(重点） 7.操作form表单 8. jQuery 9.总结 前端基础 课程听的是b站狂神说：狂神说 笔记有些是借鉴：夜里的雨 HTML 1.基本标签 <!DOCTYPE html> <html...
前端学习笔记
m0_54828595的博客
04-23 3359
前端学习笔记 前端第一阶段代码由三部分组成： 1.文件头（类似于c语言的#include<… .h>） 2.head部分，其中又包括title部分 3.body部分。 <!DOCTYPE html>//文件头 <html> <head> <title>我的第一个网页</title>//负责网页的标签内容 </head> <body&g...
前端学习笔记（1） HTML、CSS、JS基本知识
最新发布
maydayofastora的博客
04-15 40
这篇文章是关于前端学习的基础知识笔记，主要包含HTML、CSS和JavaScript三部分内容： HTML部分介绍了基本文档结构、常用元素（标题、段落、链接等）和属性（id、class、事件处理等），并提供了DOM树概念和JavaScript交互示例。 CSS部分讲解了样式表的基本语法、选择器类型、优先级规则，详细说明了背景、文本、链接等常见样式属性，以及display布局属性的各种用法。 JavaScript部分重点介绍了变量声明方式（const、let、var的区别）、函数定义等基础知识。 文章以代码示
前端开发学习笔记
m0_57002446的博客
07-20 1958
前端常用组件：HTML，CSS，JavaScript，JQuery，BootStrapHTML->实现网站的骨架，CSS->使网站点缀更好，JavaScript->让网页动起来，JQuery->第三方模块，能够用少量的代码简单实现动态效果，相当于帮你封装了很多JavaScript的功能，BootStrap->为我们提供了很多CSS+JavaScript效果，帮你实现了80%的功能。
前端基础学习笔记
weixin_52840684的博客
02-22 450
前端基础学习笔记
前端知识笔记
mjs677的博客
04-23 4484
一.html 1.html基础 1.1html标题 html设置了-级标题 <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> 1.2html段落 html段落由标签进行定义 <p>This is a paragraph.</p> <p>This is another paragraph.&
Vue前端框架快速入门学习笔记
程哥哥的一亩三分地
09-05 969
心想着虽然自己不搞前端，但是一般的前端代码自己总得看得懂吧，那国内目前比较火的前端框架，那肯定是vue了，就花一天时间来学习一下吧，就当入个门。
狂神说笔记——大前端技能快速入门18
杨丙寅
09-25 832
大前端技能快速入门 1.前端开发工具 1.前端开发 前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。 最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。 由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。 在日本和一些人口比较稀疏的国家，例如加拿
前端AJAX、JSON、VUE初学笔记——快速入门
m0_51799816的博客
04-26 1951
AJAX: 概念:AJAX（Asynchronous JavaScript And XML):异步的JavaScript和XML jsp下，web网页运行流程 ajax下，web网页运行流程 Ajax的作用： 同步与异步： VUE 概念： 一套前端框架，免除原生JavaScript的DOM操作，简化书写。 基于MVVM（Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。 model与view实现双向绑定 使用VUE的步骤： VUE常用指令： 1. v
【Web学习笔记3】3小时学会Vue3，web前端快速入门实战
qq_57437052的博客
01-14 750
自用Web前端学习笔记，练习时使用的是公司电脑，代码文件全部留在上面了，所以借博文来记录一下学习过程。来源：邓瑞 Vue3快速入门教程 web前端视频课程【2024最新版】3小时学会Vue3，小白零基础视频教程，web前端快速入门实战课程前期准备：在项目文件夹里，html文件的同级目录下，下载并导入vue.esm-browser.js和vue.global.js。两份文件代码有点长，就不在此处展示，自行去官网下载。
【万字笔记】前端框架Vue.js快速入门
zgsdzzh的博客
07-29 2707
Vue萌新学习笔记
【Vue前端开发学习】_前端Vue基础快速入门_整合知识笔记及苍穹外卖前端板块开发示例
Fxy200466的博客
03-29 1709
本文汇总苍穹外卖项目前端学习三大模块（vue基础知识、员工模块、套餐模块），见目录可选择对应想要查看的板块，各位开始学习吧！
禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
热门推荐
宝码香车的博客
07-16 7万+
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
【前端开发---jQuery】想要快速入门JQuery？看这一篇文章就够了，笔记够详细，可以收藏学习。
m0_67844671的博客
09-22 561
jQuery快速入门，用jQuery框架款速高效的操作DOM，让开发效率提高好几倍；知识点包括JQuery入门，jQuery操作DOM，jQuery事件，jQuery函数，JQuery动画等等；
前端学习笔记之ES6快速入门
weixin_30251829的博客
07-11 98
0x1 let和const let ES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。 { let x = 10; var y = 20; } x // ReferenceError: x is not defined y // 20 var声明变量存...
前端自己总结笔记
qq_42717015的博客
06-02 1575
无摘要
前端学习笔记（一）：HTML+CSS基础
憬淮的博客
11-16 2853
前端笔记01，web端html+css基础
《前端》笔记整合
Guizy
10-28 2609
HTML、CSS、JavaScript、ES6、Vue、Node.js
个人前端笔记记录（不定期更新）
湖南新邑的知识小筑
03-18 280
一、基础篇 lang 常用en和zn-CN 表明html构写的文字类型 gbk（gb2312+big5） utf-8 表明代码存储的形式，跟别人请求有很大关系 空标签 增加一行线 空标签 强制换行 字段标签 设置内容字体为一号的标签 无含义 同行只能有一个div 无含义 换一行写一个span 但内容还是会显示在同一行 加粗 strong 斜体 em 删除线 del 下划线 ins 二、表格\表单\列表篇 表格-展示数据、列表-布局、表单-记录用户信息
CSS——前端笔记
qq_48721706的博客
04-21 3402
css前端笔记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值