前端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定义了多根轴线的对齐方式 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度挖掘商品信息,jd.item_get API助您呈现商品全面规格参数

深度挖掘商品信息&#xff0c;特别是在电商平台上&#xff0c;对于商家、开发者和用户来说都至关重要。jd.item_get API作为京东开放平台提供的一个强大工具&#xff0c;能够帮助用户轻松获取商品的全面规格参数&#xff0c;进而为商品分析、推荐、比较等提供有力的数据支撑。 …

using和typename在C++中的用法

using关键字有两个主要用途&#xff1a; 1.类型别名&#xff1a;使用using可以为类型创建新的名称&#xff0c;这在模板编程中尤其有用。 using integer int; integer a 5; // 这里的integer就是int类型2.命名空间&#xff1a;using可以用来引入命名空间中的名字&#xff0c…

Liquid的Covenants:处理比特币脚本中的金额

1. 引言 Covenants契约是一种允许introspection自省的结构&#xff1a; 交易output可以对花费其的交易施加条件&#xff08;超出特定的“必须提供自身的有效签名和特定的公钥”&#xff09;。 Rusty Russell 之前研究过Covenants: Examining ScriptPubkeys in Bitcoin Scrip…

两相欠压继电器 WY-35A3 额定输入电压100V 导轨安装 JOSEF约瑟

系列型号&#xff1a; WY-35A4电压继电器&#xff1b;WY-35B4电压继电器&#xff1b; WY-35C4电压继电器&#xff1b;WY-35D4电压继电器&#xff1b; WY-35A4D电压继电器&#xff1b;WY-35A4T电压继电器&#xff1b; WY-35B4D电压继电器&#xff1b;WY-35B4T电压继电器&#xf…

人工智能时代过失犯理论的挑战与应对—以自动驾驶汽车交通肇事为例

内容提要以自动驾驶汽车为代表的人工智能产品致害所涉犯罪主体复杂多样、前置性规范缺失, 以及人工智能产品固有的自主与黑箱特性等问题给过失犯理论带来了变革的压力与挑战。传统过失犯理论、新过失犯理论以及客观归责理论都无法解决人工智能产品致害所涉过失犯罪认定问题。人…

【VMware】虚拟机及镜像Ubuntu安装

Vmware 一.VM是什么&#xff1f;有什么用&#xff1f;二.下载VMware Wworkstation Pro三.安装虚拟机四.安装镜像 一.VM是什么&#xff1f;有什么用&#xff1f; vmware是一款运行在windows系统上的虚拟机软件&#xff0c;可以虚拟出一台计算机硬件&#xff0c;方便安装各类操作…

K8s学习七(服务发现_2)

Ingress Service 主要用于集群内部的通信和负载均衡&#xff0c;而 Ingress 则是用于将服务暴露到集群外部&#xff0c;并提供灵活的 HTTP 路由规则。在实际应用中&#xff0c;它们通常结合使用&#xff0c;Service 提供内部通信和负载均衡&#xff0c;Ingress 提供外部访问和…

网络工程师笔记18(关于网络的一些基本知识)

网络的分类 介绍计算机网络的基本概念&#xff0c;这一章最主要的内容是计算机网络的体系结构-ISO 开放系统互连参考模型&#xff0c;其中的基本概念&#xff0c;例如协议实体、协议数据单元&#xff0c;服务数据单元、面向连接的服务和无连接的服务、服务原语、服务访问点、相…

蓝桥杯练习题 —— 高精度加法(python)

python优势 # encoding utf-8 # 开发者&#xff1a;xxx # 开发时间&#xff1a; 16:48 # "Stay hungry&#xff0c;stay foolish."a int(input()) b int(input())print(a b) 正常 # encoding utf-8 # 开发者&#xff1a;xxx # 开发时间&#xff1a; 16:48 #…

大数据分层存储架构:ODS、DWD、DWM与DWS详解

在大数据领域中&#xff0c;ODS、DWD、DWM和DWS代表了数据仓库的不同层次&#xff0c;它们共同构成了大数据的分层存储结构。这种结构的设计有助于提高数据查询效率&#xff0c;降低成本&#xff0c;并满足不同的业务需求。 ODS&#xff08;Operational Data Store&#xff09…

计算机视觉领域主流优秀的模型的用处与区别,优劣。复合缩放方法,深度可分离卷积

目录 计算机视觉领域主流优秀的模型的区别,优劣 YOLO (You Only Look Once) ResNet、EfficientNet 优劣与应用场景

1.k8s简介

目录 k8s是什么 k8s不是什么 云原生 微服务 整体式架构与微服务架构 微服务的特性 微服务的优势 k8s是什么 Kubernetes 是一个可移植、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;可促进声明式配置和自动化。 Kubernetes 拥有一个庞大且快…

除了sql外还有那些查询语言

除了SQL&#xff08;结构化查询语言&#xff09;外&#xff0c;还有许多其他的查询语言&#xff0c;包括但不限于XQuery&#xff08;对XML的查询语言&#xff09;、MDX&#xff08;多维查询语言&#xff0c;用于分析数据仓库&#xff09;、DQL&#xff08;数据查询语言&#xf…

聊一聊,JMeter分布式性能测试!

在做后端服务器性能测试中&#xff0c;我们会经常听到’分布式’。但你是否了解分布式呢&#xff1f;今天&#xff0c;我们就来给大家讲讲&#xff0c;在企业实战中&#xff0c;如何使用分布式进行性能测试&#xff0c;实战过程中&#xff0c;又有哪些地方要特别注意&#xff1…

pyqtgraph 实时更新柱状图

import sys import numpy as np from PyQt5.QtWidgets import QApplication, QMainWindow import pyqtgraph as pgclass MainWindow(QMainWindow):def __init__(self):super().__init__()self.plot_widget pg.PlotWidget(title实时更新的柱状图)self.setCentralWidget(self.pl…

C++ //练习 11.22 给定一个map<string, vector<int>>,对此容器的插入一个元素的insert版本,写出其参数类型和返回类型。

C Primer&#xff08;第5版&#xff09; 练习 11.22 练习 11.22 给定一个map<string, vector<int>>&#xff0c;对此容器的插入一个元素的insert版本&#xff0c;写出其参数类型和返回类型。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具…

法向量估计

法向量估计 1. 求解点P法向量的原理2. 法向量估计的证明3. 为什么求点P的法向量&#xff0c;需要使用以P为中心的邻域内的点&#xff1f;4. 法向量估计的应用和思考5. 权重法向量估计 1. 求解点P法向量的原理 已知有一组点 P ( p 1 , p 2 , p 3 , . . . , p n ) , p i ∈ R 3…

算力在现实生活中的多方面应用!

算力在现实生活中的应用是多方面的&#xff0c;它已经成为推动现代社会发展的重要力量。 以下是算力在不同领域中的具体应用&#xff1a; 立即免费体验&#xff1a;https://gpumall.com/login?typeregister&sourcecsdn #分布式云服务#算力#GpuMall#GpuMall智算云#训练#…

零代码与低代码开发平台

1、什么是低代码开发平台&#xff1f;什么是零代码开发平台&#xff1f; 零代码开发平台&#xff1a; 指的是不需要写代码就能够快速开发出业务应用/系统的平台。我们在工作中使用的业务应用&#xff0c;主要提供数据收集、数据处理、数据流转和展示等功能。零代码开发平台能够…

理解vue2中的computed计算属性与缓存机制

vue实例组件初始化过程中&#xff0c;在执行initState(vm)方法初始化状态时&#xff0c;判断options.computed有值时会进行initComputed$1(vm,options.computed)处理 function initState(vm) {let options vm.$options;// 省略props methods data的处理// 处理计算属性comput…