前端三件套(HTML + CSS + JS)

06-01 1585阅读

前言：

前端三件套，会用就行

毕竟在后面学习JavaWeb，以及在学习vue的时候也有帮助

前端三件套：

HTML 定义网页的结构和内容。
CSS 负责网页的样式和布局。

JavaScript 添加动态交互和功能。

使用到的工具是Visual Studio Code 即VSCode

下载地址：Download Visual Studio Code - Mac, Linux, Windows

下载安装后，使用到的插件：

1.场景变为简体中文：

2.自动补全、智能提示和语法高亮，有助于提高开发的效率

3.页面的预览

注意：

想要在编写时，页面跟着标签的修改而实时变化，请打开自动保存

点击左上角的三条杠，找到文件，点击自动保存

4.在修改指标签时，修改前面的，后面的也会相应变化

一、HTML

1. HTML（超文本标记语言）

作用：

HTML 是网页的结构语言，用于创建和组织网页内容。它通过标记（tags）来定义不同的元素，如标题、段落、链接、图像等。

特点：

结构化内容：使用标签（如
,
, ）来组织信息。
无表现性： HTML 关注内容的结构，而不涉及样式或行为。

可扩展性：支持多种元素和属性，可以嵌套和组合。

2.常用标签的练习

1. 基本结构标签

: 定义HTML文档的根元素。
: 包含文档的元数据（例如标题、样式、脚本等）。
: 定义文档的标题，通常显示在浏览器的标题栏。

: 定义文档的主体，包含可见内容。

2. 文本格式化标签

到
: 定义标题，
为最大标题，
为最小标题。
: 定义段落。
: 插入换行符。
: 使文本加粗，表示重要性。
: 使文本倾斜，表示强调。

: 下划线文本。

3. 列表标签

: 列表项，用于

和

在创建好的.html文件中输入！，再按Tab键，可自动生成一个模板

html的常用标签练习

一级标题标签

二级标题标签

三级标题标签

四级标题标签

五级标题标签

段落标签

字体加粗、下划线、删除线、斜体

无序列表1
无序列表2
无序列表3

有序列表1
有序列表2
有序列表3

列名列属性列方法	列名列属性列方法	列名列属性列方法
元素1 元素2 元素3	元素1 元素2 元素3	元素1 元素2 元素3
元素1 元素2 元素3	元素1 元素2 元素3	元素1 元素2 元素3
元素1 元素2 元素3	元素1 元素2 元素3	元素1 元素2 元素3

预览的页面：

3.html属性

1.链接和图像标签

: 创建超链接，使用href属性指定链接目标。

: 插入图像，使用src属性指定图像源，使用alt属性提供替代文本。



    
    
    html属性练习

预览的页面：

4.html区块

1.其他常用标签

: 定义文档中的分区或块，用于布局。

: 定义文档中的行内元素，用于样式。

html区块练习链接1 链接2 链接3 链接4

文章标题

文章内容

这是第1个span标签
这是第2个span标签
这是第3个span标签
这是第4个span标签

链接点击这里链接

预览的页面：

5.html表单

1. 表单标签

: 定义表单，包含用户输入的区域。
: 创建输入字段，type属性定义输入类型（如text、password、submit等）。
: 为输入元素定义标签。
: 创建多行文本输入区域。

: 创建按钮。

预览的页面：

二、CSS

1. CSS（层叠样式表）

作用：

CSS 用于控制网页的外观和布局。它允许开发者设置颜色、字体、间距、布局等样式，从而美化网页。

特点：

样式分离： CSS 与 HTML 分离，增强了维护性和可重用性。
响应式设计：通过媒体查询，可以为不同设备设置不同样式。

层叠性：多个样式可以叠加应用，优先级可以通过选择器的特异性控制。

2.css样式

1. 内部样式

定义：内部样式是将CSS规则直接放在HTML文档的部分，通过标签定义。

2. 内联样式

定义：内联样式是将CSS规则直接添加到HTML元素的style属性中。

3. 外部样式

定义：外部样式是将CSS规则保存在独立的.css文件中，然后在HTML文档中通过标签引入。

优先级：内联 > 内部 >外部

外部样式

内部样式和内联样式



    
    
    Document


    p{
        color: blue;
        font-size: 16px;
    }
    h2{
        color:chocolate;
        font-size:20px;
    }


    这是一个内部样式，优先级次
    使用的是内联样式，优先级最高
    使用的是外部样式，优先级最低

预览的页面：

3.css选择器

通用选择器（*）：选择所有元素。
元素选择器（tag）：选择特定类型的元素。
类选择器（.classname）：选择具有特定类的元素。
ID选择器（#idname）：选择具有特定ID的元素。
属性选择器：根据元素的属性选择元素。
伪类选择器：选择元素的特定状态。

伪元素选择器：选择元素的一部分。

Document /* 元素选择器 */ h1{ color: red; } /* 类选择器 */ .header{ font-size: 20px; } /* id */ #big{ background-color: blue; } /* 通用选择器 */ *{ font-family: 'KaiTi'; font-weight: bolder; } /* 子类选择器 */ .father> .son{ color: aqua; } /* 后代选择器 */ .father p{ color:blueviolet; } /* 相邻选择器 */ h4 + p{ background-color: red; } /* 伪类选择器 */ #big1:hover{ background-color: mediumblue; } /* 伪元素选择器 ::after ::before */ /* 选择第一个子元素 :first-child :nth-child() :active */

这是一个元素选择器

这是一个类选择器

这一个id选择器

这是一个子类选择器

这一个后代选择器

相邻，但位于上方

这是一个相邻选择器，选中的是紧跟它之后的第一个标签

相邻，紧跟在后面的

这是一个伪类选择器

预览的页面：

这里伪类选择器的效果是，鼠标在上背景变紫色

4.css常用属性

颜色与背景
- color: 文字颜色。
- background-color: 背景颜色。
- background-image: 背景图像。
文本
- font-size: 字体大小。
- font-family: 字体类型。
- text-align: 文本对齐方式。
边距与填充
- margin: 外边距。
- padding: 内边距。
边框
- border: 边框的宽度、样式和颜色。
- border-radius: 圆角边框。

尺寸与位置

width: 元素宽度。
height: 元素高度。
display: 元素的显示类型（如 block, inline, flex 等）。

css常用属性 /* 块元素可以进行长宽的调整 */ .block{ background-color:blue; } /* 行内元素则不行 */ .inline{ background-color: aqua; } /* 行内块元素有行内和块两个元素的特点 */ .inline-block{ width: 200px; height: 200px; } /* 使用diplay进行相互的转换 .block{ display: inline-block; } .inline{ display: block; } .inline-block{ display: inline; } */

这是一个复合元素

这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本

这是一个块元素这是一个行内元素

预览的页面：

5.css盒子模型

盒子模型是CSS布局的基本概念，它描述了元素的结构，包括：

内容区域：元素的实际内容（文本、图像等）。
内边距（padding）：内容与边框之间的空间。
边框（border）：包围内边距和内容的线。

外边距（margin）：元素与其他元素之间的空间。



    
    
    css盒子模型


    .demo{
        background-color: red;
        width: 100px;
        height: 100px;
        border: 10px dashed blue;
        padding: 20px;
        margin: 30px;
    }
    
    /* soild:实线 dashed:虚线 dotted：点线  double: 双线*/
    /* padding 内边距 margin 外边距 */
    .broder-demo{
        background-color: aqua;
        width: 100px;
        height: 150px;
        border-style: solid dashed dotted double;
        border-color: brown red blue blueviolet;
        border-width: 50px 10px 0 20px;
        padding: 50px;
        margin: 30px;
    }


    这是一个盒子模型
    这是一个盒子模型的边框示例

预览的页面：

6.浮动

浮动（float）是CSS布局的一种方式，通常用于文本环绕和多列布局。使用浮动时，元素会向左或向右移动，其他元素会围绕它。使用浮动的常见方式：



    
    
    浮动


    .father{
        background-color: blueviolet;
        /* height: 100px; */
        /* 高度没有了，出现坍塌 */
        border: 5px red solid;
        /* 使用overflow或者::after */
        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: brown;
        float: right;
    }


    
        
            左浮动
        
        
            右浮动
        
    
    这是一段文本内容

预览的页面：

7.定位

定位用于控制元素在页面中的位置。常见的定位方式包括：

静态定位（static）：默认值，元素按正常流排列。
相对定位（relative）：相对于其原始位置进行定位。

绝对定位（absolute）：相对于最近的已定位父元素（非静态）进行定位。



    
    
    Document


    .box{
        height: 300px;
        background-color: yellow;
    }
    .box-normal{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .box-relative{
        width: 100px;
        height: 100px;
        background-color: pink;
        position:relative;
        left:120px;
        top:50px;
    }
    .box1{
        height: 300px;
        background-color: yellow;
        margin-bottom: 100px;
    }
    .box-absolute{
        width: 100px;
        height: 100px;
        background-color: pink;
        position:absolute;
        left:120px;
    }
    .box-fixed{
        width: 100px;
        height: 100px;
        background-color: red;
        position: fixed;
        right: 0;
        top: 300px;
    }


    相对定位
    
        
        
        
    
    绝对定位 
    
        
        
        
    
    固定定位

预览的页面：

绝对定位就是图中红色方块

三、JS（JavaScript）

1. JavaScript

先搞懂：这个与java无关，但重要！！！

JavaScript 的作用

其应用领域包括但不限于JavaScript 在前端开发中扮演着重要的角色

客户端脚本:用于在用户浏览器中执行，实现动态效果和用户交互。
网页开发:与HTML和 CSS 协同工作，使得网页具有更强的交互性和动态性。

后端开发:使用Node.js，JavaScrip也可以在服务器端运行，实现服务器端应用的开发

特点：

动态性：可以在页面加载后动态更新内容。
事件驱动：可以响应用户操作（如点击、滚动等）。

广泛应用：可以与后端服务交互，实现复杂的应用逻辑。

2.JavaScript 导入

外部导入

内部导入



    
    
    JS的导入方式
    
        console.log('Hello,head标签中内联样式');
    
    


    JavaScript的导入方式
    
        console.log('Hello,body标签中内联样式');
        alert('Hello,JS的导入方式');

预览的页面：

3.JavaScript 语法

基本语法：



    
    
    JS基本语法


    
        // var不常用
        // let 整数，字符串  const 精度
        var x;
        let y = 3;
        const p = 3.14 
        let name ="猪猪侠";
        let empty_value = null;
        console.log(x,y,p);
        console.log(name);
        console.log(empty_value);
        
        console.log('if语句');
        //if条件
        let time = 8
        if (time  12 && time  14 && time 左
           column         上->下
           column-reverse 下->上
        */
        /* flex-direction:column; */
        /* flex-wrap
           nowrap     不换行or列
           wrap       横向 上->下换行 纵向 下->上
           wrap-reverse   相反情况
        */
        /* flex-wrap: wrap-reverse; */
        /* justify-content
           flex-start
           flex-end
           center
           space-between
           space-around
         */
         /* justify-content: space-around; */
        /* align-items
           flex-start
           flex-end
           center
           baseline
           stretch
         */
         /* align-items:baseline; */
        /* align-content
           flex-start
           flex-end
           center
           space-between
           space-around
           stretch
        */
    }
    .item{
        width: 100px;
        font-size: 6rem;
    }


    
        1
        2
        3
        4
        5
        6

预览的页面：

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

前端三件套(HTML + CSS + JS)

前言：

一、HTML

1. HTML（超文本标记语言）

,

2.常用标签的练习

1. 基本结构标签

2. 文本格式化标签

到

: 定义标题，

为最大标题，

为最小标题。

3. 列表标签

3.html属性

1.链接和图像标签

4.html区块

1.其他常用标签

5.html表单

1. 表单标签

二、CSS

1. CSS（层叠样式表）

2.css样式

3.css选择器

4.css常用属性

5.css盒子模型

6.浮动

7.定位

三、JS（JavaScript）

1. JavaScript

2.JavaScript 导入

3.JavaScript 语法

相关阅读

目录[+]