前端三件套学习笔记(持更)

目录

1、HTML,CSS,JS区别

2、HTML结构

1、HTML,CSS,JS区别

结构写到 HTML 文件中, 表现写到 CSS 文件中, 行为写到 JavaScript文件中。

2、HTML结构
<!DOCTYPE html>
<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        很高兴,开始了我的web前端之旅!
    </body>
</html>
3、<div>和<span>
  • <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子
  • <span> 标签用来布局,一行上可以多个 <span>。小盒子
4、相对路径

4d7c0d572f69430a8c603e37e0fadbdb.png

5、符号
24d5fa407e90441c81d8a37c6820f4f3.png6、表格
  • th(table header cell):标头单元格
  • tr(table row):一行
  • td(table data cell):一个单元格
7、表格合并

跨行合并:rowspan="合并单元格的个数"

跨列合并:colspan="合并单元格的个数"

8、标签
48d4bebb8ad6442481f3a6873a18d534.png9、表单域

<form action=“url地址” method=“提交方式” name=“表单域名称">
     各种表单元素控件
</form>

10、<input type="属性值">
8495949cafff4474892c6102835e4310.png11、选择器

1)基础选择器

id 选择器和类选择器最大的不同在于使用次数上。id 选择器是唯一的。

110c227acd704bab98557fb8e5060b9a.png

2)复合选择器

包括:后代选择器、子选择器、并集选择器、伪类选择器

//后代选择器
ol li a {
      color: red;
   }

//亲儿子选择器
 div>a {
       color: red;
   }

//并集选择器
div,
   p,
   .pig li {
       color: pink;
   }

//伪类选择器
        /* 1. a:link  默认,未访问过,把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }
        
        /* 2. a:visited 已访问过,选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }
        
        /* 3. a:hover 悬停,选择鼠标经过的那个链接 */
        a:hover {
            color: pink;
        }
        
        /* 4. a:active 点击,选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }

        /* 5. :focus 选取获得焦点的表单元素
        input:focus {
            background-color: red;
            color: blue;
        }
12、字体复合属性 

font: font-style font-weight font-size/line-height font-family;

13、em

是一个相对单位,就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小,则会按照父元素的 1 个文字大小

14、CSS引入方式/样式表

行内,内部,外部

15、元素显示模式

658e88467a264641a48bc1227cc1e228.png

块元素:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

行内元素:<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

行内块元素:<img />,<input />,<td>

转换

  • 转换为块元素: display: block;
  • 转换为行内元素:display: inline;
  • 转换为行内块元素:display: inline-block;
16、单行文字垂直居中

CSS 没有给我们提供文字垂直居中的代码

解决方案: 让文字的行高=盒子的高度

17、背景复合写法

 background: pink url(logo.png) no-repeat center left;

18、CSS三大特性

1、层叠性:相同的选择器设置相同的样式,此时一个样式会被覆盖(层叠)掉另一个冲突的样式,层叠性主要解决的是冲突的问题。

2、继承性:子标签会继承父标签的某些样式,比如说文本的颜色和字号。高度、宽度、盒子模型的内外边距是【不可以】被继承的

        行高的继承:

  • 行高可以跟单位,也可以不跟单位
  • 如果子元素没有设置行高,就会继承父亲元素的行高的1.5倍
  • 此时子元素的行高是:当前子元素的文字大小的1.5倍

3、优先级

19、选择器优先级/权重

7f2dfb21fe1743268a33f34f99a1ae23.png

  •  权重不会有进位
  • !important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 继承或者通配符选择器
  • 继承的权重为0,如果该元素没有被直接选中,不管父元素权重多高,子元素得到的权重都是0
20、CSS盒子

包括:边框、外边距、内边距和实际内容

21、内边距

padding 影响盒子实际大小,如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子;

如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

22、外边距合并
  • 相邻块元素垂直外边距的合并

        当上下相邻的两个块元素(兄弟元素)相遇时,如果上面的元素有下外边距 margin-bottom , 下面的元素有上外边距 margin-top , 则它们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是:【取两个值中的较大者】

解决方案:尽量只给一个盒子添加 margin 值。

  • 嵌套块元素垂直外边距的塌陷

    对于两个嵌套关系(父子关系)的块元素,父元素有上外边距,同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:

  • 为父元素定义 上边框
  • 为父元素定义 上内边距
  • 为父元素添加 overflow: hidden
  • 其他方法:浮动,固定定位,绝对定位

以上都是标准流,下面是浮动

多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动

23、浮动

1)含义:float 属性用于创建浮动框,将其移动到一边,直到左边缘或者右边缘触及包含块或另一个浮动块的边缘

2)作用:

  • 实现多个块级元素没有空白缝隙的一行展示
  • 实现两个盒子左右对齐

3)加了浮动之后的元素,会具有很多特性:

  • 浮动元素会脱离标准流(脱标,漂浮在普通流的上面,不占原有的位置)
  • 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动的元素会具有行内块元素的特性
    • 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动之后,它的大小根据内容来决定
    • 浮动的盒子中间是没有缝隙的,是紧挨着一起的
  • 浮动的盒子【不再保留原先的位置】

4)如果行内元素有了浮动,则不需要转换块级/行内块元素,可直接给高度和宽度

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

5)网页布局一般采取的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则

6)为什么需要清除浮动?
        父级盒子很多情况下,不方便给高度,但是内部的子盒子浮动之后又不占据位置(脱标),最后父级盒子的高度就是0,那么就会影响下面的标准流盒子

  • 如果父元素本身有设置高度,则不需要清除浮动
  • 没有高度,内容需要浮动,则需要清除浮动
  • 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准文档流了
  • 清除浮动不是清楚浮动本身,而是清楚浮动对其他元素的影响

清除浮动的策略是:闭合浮动(只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。)

d0a9de51453f4fc5ac3744f071ef0b24.png

24、定位

标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子-空)

1)相对定位
position: relative;

特点
    1. 它是相对于自己原来的位置来移动的。(移动位置的时候参照点是原来自己的位置,和父元素、浏览器无关)
    2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来的位置)
    3. 相对定位,并没有脱离标准文档流,最典型的应用是给绝对定位当爹的

2)绝对定位

元素在移动位置的时候,是相对于它 祖先元素  来说的。
position: absolute;

特点
    1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准进行定位。(Document文档)
    2. 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
    3. 绝对定位不再占有原有的位置。(脱标

3)子绝父相

因为父级需要占据位置,因此是相对定位(不脱标),子盒子不需要占据位置,则是绝对定位(完全脱标——不会占据原有位置)

5fbacd5416514d39a068ef6217c98665.png

25、闭包,冒泡,委托

闭包(Closure):
闭包是由函数及其相关的引用环境(包括函数创建时所处的作用域)组合而成的包裹,从内部函数访问外部函数的作用域

事件冒泡(Event Bubbling):
当一个元素上发生了某个事件(例如点击事件),这个事件会按照从内向外(从目标元素向祖先元素)的顺序进行传播,直至传播到最外层的祖先元素或到达文档的根节点

事件委托(Event Delegation):
适用于处理大量相似元素上。它利用事件冒泡的机制,将事件处理程序绑定到它们的共同祖先,而不是绑定到每个单独的元素上。这样一来,只需一个事件处理程序即可管理一组元素上的事件。

26、边框算进高度里面

box-sizing: border-box; /* 让边框算进高度里面 */

27、float,flexbox,position:relative区别
  • float实现一些简单的布局效果,如图片环绕等。
  • flexbox是一种更加现代和灵活的布局方式,适用于各种布局需求。
  • position:relative可以相对于原始位置微调元素的位置,但通常用于局部微调,而不是整个布局的设计

持续更新中...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/543742.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

城市选择器小程序实现

1.效果图 2.使用方法 # 城市选择器&#xff0c; 城市数据库可自己导出 ##后台数据API 由HotApp小程序统计提供并维护&#xff0c;如果需要导出并部署在公司的生产环境&#xff0c;最后有SQL导出下载地址 ## 使用方法 - 复制pages/district到你的项目目录 - 把样式文件distr…

4/11 QT_day5

服务器端 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> #include <QMessageBox> #include <QTcpSocket> #include <QList> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass …

Java应用CPU飙升和死锁排查实战教程

引言 在日常开发中&#xff0c;我们可能会遇到Java应用CPU飙升和死锁的问题。本文将通过实际案例&#xff0c;为大家介绍如何排查这些问题 Java应用CPU飙升和死锁排查步骤 先执行top命令&#xff0c;找到CPU占用比较高的进程再执行jstack 进程id > dump.txt找到进程中CPU…

[GDC24]TheFInals的破坏系统

GDC24上TheFinals的开发工作室–EmbarkStudios带来; TheFinals把实时破坏在主流游戏上提升到了新的高度,可以说是新的标杆,达成了: 可以出现大规模的任意破坏破坏之后充分影响gameplay,可以把建筑任意炸毁之后,坍塌的建筑继续保留&物理正确(有正确的网络同步),可以废墟中继…

2024HW --> 安全产品 Powershell无文件落地攻击

在HW中&#xff0c;除了了解中间件&#xff0c;web漏洞&#xff0c;这些攻击的手法&#xff0c;还得了解应急响应&#xff0c;安全产品&#xff0c;入侵排查&#xff0c;溯源反制...... 那么今天&#xff0c;就来说一下安全产品&#xff08;安全公司我就不说了&#xff0c;这个…

使用 ChatGPT-4 编码就像与一个醉酒的天才一起工作

我决定从头到尾使用 ChatGPT 来构建一个用于管理书签的 Chrome 扩展。在生成了 30,000 多行 JavaScript、HTML、CSS 和云后端后&#xff0c;我的收获是&#xff0c;使用 ChatGPT 进行编码就像与一个醉酒的编程天才一起工作&#xff1a;他很懒&#xff0c;患有记忆丧失&#xff…

二极管分类及用途

二极管分类及用途 通用开关二极管 特点&#xff1a;电流小&#xff0c;工作频率高 选型依据&#xff1a;正向电流、正向压降、功耗&#xff0c;反向最大电压&#xff0c;反向恢复时间&#xff0c;封装等 类型&#xff1a;BAS316 ; IN4148WS 应用电路: 说明&#xff1a;应用…

智能革命:未来人工智能创业的天地

智能革命&#xff1a;未来人工智能创业的天地 一、引言 在这个数字化迅速变革的时代&#xff0c;人工智能(AI)已经从一个边缘科学发展成为推动未来经济和社会发展的关键动力。这一技术领域的飞速进步&#xff0c;不仅影响着科技行业的每一个角落&#xff0c;更是为创业者提供了…

【python】python抓取古诗文内容保存(源码)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

Ubuntu-22.04安装KVM虚拟机并安装Windows10

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、KVM是什么&#xff1f;二、安装步骤1.检查虚拟化2.查看KVM虚拟化3.安装KVM4.启用后台进程5.添加用户组6.重启电脑 三、使用步骤1.添加虚拟机2.配置虚拟机3.…

高颜值登录页面(一键复制)

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web 开发工具合集 266篇…

leecode438 | 找到所有字符串中的异位词

题意大致是&#xff0c;给定两个字符串&#xff0c;s 和 p 其中 要在s 中找到由p的元素组成的子字符串&#xff0c;记录子字符串首地址 class Solution { public:vector<int> findAnagrams(string s, string p) {int m s.size(), n p.size();if(m < n)return {};vec…

python botos s3 aws

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/s3.html AWS是亚马逊的云服务&#xff0c;其提供了非常丰富的套件&#xff0c;以及支持多种语言的SDK/API。本文针对其S3云储存服务的Python SDK&#xff08;boto3&#xff09;的使用进行介绍。 …

每日一题——阶乘计算升级版

题目链接&#xff1a; 6-10 阶乘计算升级版 - 基础编程题目集 (pintia.cn) 题目&#xff1a; 6-10 阶乘计算升级版 分数 20 本题要求实现一个打印非负整数阶乘的函数。 函数接口定义&#xff1a; void Print_Factorial ( const int N ); 其中N是用户传入的参数&#xff…

解锁智能未来:用Ollama开启你的本地AI之旅

Ollama是一个用于在本地运行大型语言模型&#xff08;LLM&#xff09;的开源框架。它旨在简化在Docker容器中部署LLM的过程&#xff0c;使得管理和运行这些模型变得更加容易。Ollama提供了类似OpenAI的API接口和聊天界面&#xff0c;可以非常方便地部署最新版本的GPT模型并通过…

商业银行业务与管理

商业银行业务与管理 资产负债表恒等式中国商业银行的资产负债表商业银行的业务种类银行运行管理的案例银行管理的基本准则流动性管理资产和负债管理资本充足管理 资产负债表恒等式 &#xff08;一般&#xff09;资产负债所有者权益 一个公司的资产是由负债和所有者权益所构成…

欧拉回路算法

1 基本概念 1.1 欧拉路径和欧拉回路 欧拉路径&#xff1a;欧拉路是指从图中任意一个点开始到图中任意一个点结束的路径&#xff0c;并且图中每条边通过的且只通过一次。 欧拉回路:欧拉回路是指起点和终点相同的欧拉路。 注意&#xff1a;如果欧拉回路&#xff0c;那么一定存在…

策略模式【行为模式C++】

1.概述 策略模式是一种行为设计模式&#xff0c; 它能让你定义一系列算法&#xff0c; 并将每种算法分别放入独立的类中&#xff0c; 以使算法的对象能够相互替换。 策略模式通常应用于需要多种算法进行操作的场景&#xff0c;如排序、搜索、数据压缩等。在这些情况下&#x…

【C++]C/C++的内存管理

这篇博客将会带着大家解决以下几个问题 1. C/C内存分布 2. C语言中动态内存管理方式 3. C中动态内存管理 4. operator new与operator delete函数 5. new和delete的实现原理 6. 定位new表达式(placement-new) 1. C/C内存分布 我们先来看下面的一段代码和相关问题 int global…

Unity 通过权重做随机

我们可以通过Random.Range方法结合权重来实现随机选择。具体步骤如下&#xff1a; 首先&#xff0c;创建一个数组&#xff0c;其中包含你要选择的项目&#xff0c;并为每个项目分配一个权重值。 计算所有权重值的总和。 使用Random.Range生成一个介于0和总权重之间的随机数。…