前端html+css+js常用总结快速入门

🔥博客主页: A_SHOWY
🎥系列专栏:力扣刷题总结录 数据结构  云计算  数字图像处理  力扣每日一题_  

学习前端全套所有技术性价比低下且容易忘记,先入门学会所有基础的语法(css+js+heml),常用示例,再根据项目上手练习,哪里不会查哪里是最好的学习方式

搭建环境

下载VSCode,然后安装三个插件,中文插件,HTML CSS Support(写CSS快捷神器),Live Server(实时预览页面的变化),Auto Rename Tag(修改HTMl标签时候,同步修与之匹配的另一个标签)

HTML(超文本标记语言)

——为网页提供结构

他负责告诉浏览器某个部分是段落,图片视频还是列表,他是通过一系列的标签,双标签成对出现,开始标签和结束标签,内容在其之中。单标签没有结束标签,用于没有内容的元素。

HTML文件结构

  1. 告诉浏览器这是一个html文件
  2. html双标签,根元素,是html文档的最外层容器,也是起始点
  3. head标签对:放置文档的源信息,比如文档的标题,编码格式,外部的样式表,css,js文件
  4. body标签对:实际显示浏览器页面的内容,文本,链接,图像等等

标签

 

可以观察页面

1.标题标签
2.段落标签

相比于段落标签,标题标签明显有一个加粗

3.有序列表标签
4.无序列表标签
5.表格标签

 border就是table标签的一个属性,里面的值边框的粗细

HTML属性

 1.a标签(href,target)

常用于链接位置,href属性定义链接的目标,target表明打开方式:_self是一个默认值,在当前窗口打开,_blank是在新窗口打开。_parent父窗口打开,_top在顶层窗口打开 

补:换行和下划线分割 
 2.img标签(src,alt,width,height)

src属性是可以是这个目录下直接写图像的名称,或者是网上的链接

alt属性是如果这个图像无法加载显示的字

 块元素和行内元素

块元素

行内元素 

div标签

 块级标签,通常用于创建一个可以包含其他HTML元素的容器块,没有语义,用于组织内容,创建页面的布局结构,页眉,导航栏什么的

快捷键

 

 span标签

行内元素,作用是相当于没有特殊元素的a标签和img标签,把一些文本包装起来。便于对他们使用一些样式CSS,或者JS行为

表单 

1.input标签

1.placeholder&value

他有很多属性,placeholder是给一个提示,value是直接给一个值

2.label 

加一个span标签就能实现这样,但是input有自己对应的一个属性label

3.type = test/radio

这个text属性是输入的形式,test就是文本 ,radio的话就是选择框

4.实现单选 +name

如果要实现单选,需要加一个name属性,而且这些name属性必须相一致,比如性别都是gender

5.for属性 

一般与input中的id所对应的,id对于每个标签每个元素来说都是唯一的,在单选框用就不合适,可以在用户名中使用 

6.密码暗文 

 直接把类别改成password

7.多选框

checkbox属性

8.type =submit & form的action属性

需要后端提供给我们的API指定提交到哪里 

CSS (层叠式样表)

 HTML和CSS的关系

CSS语法 

 CSS导入方式

一共三种导入方式,注意优先级

1.内部样式表

CSS样式放在html文档的head标签中

2.内联样式

把CSS样式直接放在标签中 

3.外部样式表

单独放在一个css文件中,在head里面使用link链接过来,允许多个页面重复使用相同样式。

效果

以下是三种样式的一个组合

 选择器

1.元素选择器

上文已经演示过了

2.类选择器 

.+类名

3.id选择器 

4.通用选择器

5.子元素选择器

 选择直接位于父元素内部的子元素,也就是一个大标签嵌套一个小标签

6.后代选择器

 注意看这里要区别一下子代和后代的区别,第一个儿子p变成了黄绿色,而包含在里面的孙子没有变

注意一个顺序:id > 类 > 标签名 ,所以上面那个标签还是保持黄绿色,见下图

7.相邻元素选择器选择器 

只渲染这个选定的标签之后的选择器

 8.伪类选择器

比如说鼠标放到一个标签上,有一些变化

鼠标悬停特效

 

CSS常用属性 

 1.复合元素

以font为例子,补:行高

2.行内元素、块级元素和行内块元素 & width &height

  • 行内块元素和块级元素都能设置宽和高
  • 行内块如果只设置宽会等比例变
  • 一行内可以有多个行内块,但是块级元素不行
  • 行内块元素经典的就是img(展示的商品列表啥的),行内元素经典的是span,块级元素经典div
  • 着一些div或span元素可以转换成行内块元素,三种元素可以相互转换

 3.相互转换

 *盒子模型

1.边框

边框会用了其他同理

 

浮动 

1.传统网页布局方式

 本质就是摆盒子,多种布局方式掺杂在一起

行内块不如这个浮动方便,而且这个浮动是在父元素中浮动的

2.左右浮动

 现在是还没有添加浮动

现在设置左浮动和右浮动,发现都和行内块一样,占满一行再占用下一行

 3.坍塌以及清除浮动

可以看到这时候设置了height,这个文本出现在后边 ,如果注释掉就出现了坍塌

 方式1:hidden

方式2:伪元素清除法 

4. 定位

浮动灵活不容易控制,定位可以精准定位 

1.相对定位 

可以看出不脱离文档流

2.绝对定位 

可以看出脱离文档流,紫色的那个块直接上去了 ,根据已经定位的父级元素进行定位的,这个是和固定定位有所区别的。

3.固定定位 

相对于浏览器窗口进行定位的,不管你怎么滑动滚轮,他这个位置是始终保持不变的

JavaScript

 javascript的作用

导入方式

三种导入方式,(1)head的内联,(2)head的外联,(3)body的内联。他们有一定顺序

alert弹窗打印

 除了在控制台打印,可以弹窗打印,用alert

 JS基本语法

undefined和null的区别

undefined是已被声明但是没有被赋值,可能将来被赋值,null被明确赋值为空或者不存在

JS控制语句 

1.条件语句

和别的语言差不多 if else 和else if和c++差不多

2.循环语句 

也和c++很像

 for和while都能实现

3.break和continue

和c++也是一模一样 

函数 

示例

 作用域:全局作用域和局部作用域

 在函数内都没问题,但在外部打印局部变量就会报错

事件处理 

常见事件

绑定事件的方法 

 demo(点击触发,获取焦点和失去焦点)

 DOM

简介

 节点树

常规操作(获取节点,修改节点)

可以理解为获取这些标签节点,来对标签本身进行操作

DOM属性绑定事件

按钮为例子,方式1:

 方式2

如果带上括号,直接触发,且按钮失效 

实现表格的增删改查

 先写CSS和HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 100%;/*整个页面*/
            border-collapse: collapse;/*单元格之间的边框合并*/
            margin-top: 20px;/*外边距*/
        }
        th,td{
            border: 1px solid gray;
            text-align: center;
            padding: 8px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">表格的增删改查</h1>
    <button>新增数据</button>
    <table>
        <tr>
            <th>姓名</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
       <tr>
            <td>cpy</td>
            <td>1566545623</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
       </tr>
    </table>
</body>
</html>

再写JS部分

新增数据部分:

 完整部分

JS部分代码

//新增数据
function addRow(){
    var table = document.getElementById('table');
    // console.log(table);
    //获取插入的位置
    var length = table.rows.length;
    // console.log(length);
    //插入行节点
    var newRow = table.insertRow(length);
    console.log(newRow);
    //插入列节点
    var nameCol = newRow.insertCell(0);
    var phoneCol = newRow.insertCell(1);
    var actionCol = newRow.insertCell(2);

    //修改节点文本的内容
    nameCol.innerHTML =  '未命名';
    phoneCol.innerHTML = '无联系方式';
    actionCol.innerHTML='<button onclick="editRow(this)">编辑</button><button onclick= "deleteRow(this)">删除</button>'
   
  
 }
//删除数据
 function deleteRow(button){
    // console.log(button );
    //获取父节点
    var row = button.parentNode.parentNode;
    console.log(row);
    //父节点的子节点删除
    row.parentNode.removeChild(row);
 }

 //编辑数据函数

 function editRow(button){
    var row = button.parentNode.parentNode;
    var name = row.cells[0];
    var phone = row.cells[1];

    var inputName = prompt("请输入姓名")
    var inputPhone = prompt("请输入手机号")

    name.innerHTML = inputName;
    phone.innerHTML = inputPhone;
 }

HTML+CSS部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 100%;/*整个页面*/
            border-collapse: collapse;/*单元格之间的边框合并*/
            margin-top: 20px;/*外边距*/
        }
        th,td{
            border: 1px solid gray;
            text-align: center;
            padding: 8px;
        }
        th{
            background-color: #ddd;
        }
        button{
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">表格的增删改查</h1>
    <button onclick="addRow()">新增数据</button>
    <table id = 'table'>
        <tr>
            <th>姓名</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
       <tr>
            <td>cpy</td>
            <td>1566545623</td>
            <td>
                <button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
            </td>
       </tr>
    </table>
    <script src="./js/table.js"></script>
</body>
</html>

 移动端布局&rem

需要响应式布局适应不同大小和分辨率的移动设备屏幕 

 

 使用rem能保证一直占着屏幕宽度的一半

Flex盒子模型

flex-direction决定主轴方向 

flex-wrap选择换行方式 

justify-content定义项目在主轴上的对齐方式 

align-items决定了项目在交叉轴上的对齐方式 

align-content定义了多根轴线的对齐方式 

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

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

相关文章

Valkey是一个新兴的开源项目,旨在成为Redis的替代品,背后得到了AWS、Google、Oracle支持

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Windows 禁用 Defender

原文&#xff1a;https://blog.iyatt.com/?p8078 2024.4.4 Windows 11 专业版 23H2 Beta 预览版 进入安全中心&#xff0c;关闭所有&#xff0c;特别是篡改防护选项 打开注册表 地址栏粘粘路径 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defende…

Rust线程间通信通讯channel的理解和使用

Channel允许在Rust中创建一个消息传递渠道&#xff0c;它返回一个元组结构体&#xff0c;其中包含发送和接收端。发送端用于向通道发送数据&#xff0c;而接收端则用于从通道接收数据。不能使用可变变量的方式&#xff0c;线程外面修改了可变变量的值&#xff0c;线程里面是拿不…

使用libibverbs构建RDMA应用

本文是对论文Dissecting a Small InfiniBand Application Using the Verbs API所做的中英文对照翻译 Dissecting a Small InfiniBand Application Using the Verbs API Gregory Kerr∗ College of Computer and Information ScienceNortheastern UniversityBoston, MAkerrgccs…

RAG原理、综述与论文应用全解析

1. 背景 1.1 定义 检索增强生成 (Retrieval-Augmented Generation, RAG) 是指在利用大语言模型回答问题之前&#xff0c;先从外部知识库检索相关信息。 早在2020年就已经有人提及RAG的概念&#xff08;paper&#xff1a;Retrieval-augmented generation for knowledge-inten…

UE4_材质节点

UE4_材质节点 2017-12-07 13:56 跑九宫格 跑UV 评论(0)

AI技术助推汽车行业走向更光明的未来

我们在汽车上度过的时间很多&#xff0c;有时候由于交通、天气和其他路况问题&#xff0c;我们在汽车上度过的时间之久甚至会出乎意料。正因如此&#xff0c;保障旅途体验的舒适和安全就显得至关重要。交通事故每天都会发生&#xff0c;因此在车辆中采取额外的安全措施对于所有…

Windows下用CMake编译PugiXML及配置测试

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 PugiXML是什么&#xff1f; PugiXML 是一个用于解析和操作 XML 文档的 C 库。它提供了简单易用的接口&#xff0c;能够高效地加载…

0基础安装配置Linux-ubuntu环境

Vmtools的安装参见 0基础教你安装VM 17PRO-直接就是专业许可证版_vm17许可证-CSDN博客 在vmtools中安装ubuntu 等待安装 这时候发现没有继续按钮&#xff0c;我们关闭这个界面&#xff0c;进入系统中&#xff0c;先更改分辨率 点击这个三角&#xff0c;因为还么有安装成功&am…

WSJ0源数据处理,wv转换为wav

WSJO数据集原始 文件.wv1&.wv2转换成wav文件 ​ 最近做语音分离实验需要用到wsj0-2mix数据集&#xff0c;但是从李宏毅语音分离教程里面获取的wsj0-2mix只有一部分。从网上获取到了完整的WSJO数据集后&#xff0c;由于原始的语音文件后缀是wv1或者wv2&#xff0c;创建wsj0…

Java 7、Java 8常用新特性

目录 Java 8 常用新特性1、Lambda 表达式2、方法引用2.1 静态方法引用2.2 特定对象的实例方法引用2.3 特定类型的任意对象的实例方法引用2.4 构造器引用 3、接口中的默认方法4、函数式接口4.1 自定义函数式接口4.2 内置函数式接口 5、Date/Time API6、Optional 容器类型7、Stre…

稀疏矩阵的三元组表表示法及其转置

1. 什么是稀疏矩阵 稀疏矩阵是指矩阵中大多数元素为零的矩阵。 从直观上讲&#xff0c;当元素个数低于总元素的30%时&#xff0c;这样的矩阵被称为稀疏矩阵。 由于该种矩阵的特点&#xff0c;我们在存储这种矩阵时&#xff0c;如果直接采用二维数组&#xff0c;就会十分浪费…

Kubernetes(k8s)核心资源解析:Pod详解

Kubernetes核心资源解析&#xff1a;Pod详解 1、什么是Pod&#xff1f;2、Pod 的组成3、Pod 如何管理多个容器4、Pod 的网络5、Pod 的存储方式6、Pod 的工作方式6.1 自主式 Pod6.2 监控和管理 Pod6.3 Pod 的创建流程 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收…

基于单片机的测时仪系统设计

**单片机设计介绍&#xff0c;基于单片机的测时仪系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的测时仪系统设计是一个结合了单片机技术与测时技术的综合性项目。该设计的目标是创建一款精度高、稳定性强且…

前端学习<四>JavaScript基础——03-常量和变量

常量&#xff08;字面量&#xff09;&#xff1a;数字和字符串 常量也称之为“字面量”&#xff0c;是固定值&#xff0c;不可改变。看见什么&#xff0c;它就是什么。 常量有下面这几种&#xff1a; 数字常量&#xff08;数值常量&#xff09; 字符串常量 布尔常量 自定义…

重磅!openGauss6.0创新版本,带着新特性正式发布了!

&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&#x1f61c;&#x1f61c; 中国DBA联盟(ACD…

编程生活day6--回文子串、蛇形填充数组、笨小猴、单词排序

回文子串 题目描述 给定一个字符串&#xff0c;输出所有长度至少为2的回文子串。 回文子串即从左往右输出和从右往左输出结果是一样的字符串&#xff0c;比如&#xff1a;abba&#xff0c;cccdeedccc都是回文字符串。 输入 一个字符串&#xff0c;由字母或数字组成。长度5…

求m和n的最大公约数(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int remainder 1;int m 0;int n 0;int middle 0;//提示用户&#xff1b;printf("请输入整数m和n的值&#xff…

处理SAP报错:消息GLT2076 没有项目种类分配到科目 1481010102/1000

财务新建了个科目入账时报错&#xff1a;没有项目种类分配到科目。 查了下原因。原来是我们公司实施时启用了凭证分割功能。其中有个配置是这样的&#xff1a;给总账科目分类&#xff1a;IMG-财务会计&#xff08;新&#xff09;-总账会计核算-业务交易-凭证分解-为文档拆分给总…

分布式架构中一些常用算法的理解

对分布式算法 - 一致性Hash算法的理解 一致性哈希算法是一种分布式算法&#xff0c;用于解决数据分布和负载均衡问题。它通过将数据和节点映射到一个哈希环上&#xff0c;实现了数据在节点之间的均匀分布和最小化数据迁移。 一致性哈希算法的核心思想是将数据和节点都映射到哈…