WEB前端IDE的使用以及CSS的应用
IDE的使用
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ol><!-- emmet命令 *符号可以指定生成几个子项 --><!-- []中填写标签的属性 --><!-- {}中填写内容 --><!-- ctrl + k 可以将代码进行格式化处理--><!-- ctrl + s 可以保存代码 --><li style="border:1px solid red">子项1</li><li style="border:1px solid red">子项2</li><li style="border:1px solid red">子项3</li><li style="border:1px solid red">子项4</li><li style="border:1px solid red">子项5</li><li style="border:1px solid red">子项6</li><li style="border:1px solid red">子项7</li><li style="border:1px solid red">子项8</li><li style="border:1px solid red">子项9</li></ol></body>
</html>
表单标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><!-- 奥卡姆剃刀原则：如非必要 勿增实体 --><body><!-- action属性 表示填写信息提交的服务器处理函数 --><!-- get 会将信息明文的形式拼接在url后面 --><!-- post 会将的信息保存在request包中，通过浏览器提交 --><!-- get和post的区别 --><!-- 1.安全性上的不同 get会拼在url上所以 安全性不高 post实在request包体中--><!-- 2.参数位置上的不同 get在url中写参数 post在request --><!-- 3.参数长度的不同 get会因为浏览器的限制而有可能不能完整的传递参数 post无此顾虑--><!-- 4.缓存方式不同 get会保存在浏览器的历史记录中 post不会--><!-- enctype urlencoded会使用url编码方式将表单信息进行编码--><!-- form-data一般用来上传文件时使用 它使用二进制的数·据流传递信息 --><!-- text/plain 使用明文--><form action="#" method="get" enctype="text/plain"><!-- input标签 使用交信息的标签 可在各种类型的input标签传递各种类型数据 --><!-- type属性决定了标签的形式 --><!-- name属性决定了提交表单信息时键值对键的名字 如果没有name input标签将成为摆设 不具备数据提交的能力--><!-- size可以用来设置 标签的宽度 --><!-- maxlenth可以设置字符的数量 --><!-- checked 可以让单选/复选默认选中 --><!-- readonly 只读属性 用户无法修改 --><!-- disable 失效 用户无法修改的同时 标签也是失效了 不再进行上传 --><!-- placehoder属性 可以用来预制一些提示信息 --><!-- autofocus属性 可以自动聚焦到某个标签-->用户名:<input type="text" name="username" maxlength="6" placeholder="请输入你的用户名"> <br><!-- password用于输入密码 -->密 码:<input type="password" name="password" value="11111"/><br><!-- checkbox多选框 -->爱 好:<input type="checkbox" name="fav" value="bk" checked>篮球<input type="checkbox" name="fav" value="sing" checked>唱<input type="checkbox" name="fav" value="jump" checked>跳<input type="checkbox" name="fav" value="rap" checked>Rap <br><!-- radio是单选框 使用name属性将多个radio进行关联 -->性 别:<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<input type="radio" name="sex" value="跨性别" checked>跨性别 <br><!-- email是一个输入框 会进行内容的检测 只有你输入内容符合邮箱的格式 提交时才不会报错 -->邮 箱:<input type="email" name="email" autofocus/><!-- submit 提交按钮 点击时会将表单中所有的信息提交到action指定的服务数据处理接口 --><input type="submit"><!-- button同submit --><button>上传</button><!-- file 类型 用于上传文件--><input type="file" name="avarta"><div style="width: 100px;height: 100px;"></div><!-- reset类型 是重置按钮 一旦点击 之前录入用户信息全部清空 --><input type="reset" ><!-- image类型是图片按钮 可以设置开发者想要的或者更优化按钮效果 本质上还是提交按钮 --><input type="image" name="avarta" src="img/button.jpg" width="250px" height="100px"><!-- hidden隐藏域 一些无需用户键入信息可以自动获取的信息，可以使用hidden类型来上传--><input type="hidden" name="location" value="西安"><!-- h5推出的新标签 --><!-- 颜色选择器 --><input type="color"><!-- 日期选择器 --><input type="date"><!-- 时期时间选择器 --><input type="datetime-local"><!-- 时间 --><input type="time" name="" id=""><!-- url输入框 规则是必须在起始部分写入https：//--><input type="url"><!-- 范围选择 --><input type="range" max="100" min="20"></form></body>
</html>
CSS 部分
css层叠样式表（cascading style sheet）
- 外链样式的好处
- 首先提高代码的复用性
- 他可以降低代码的耦合性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 第二种使用CSS的方式 页面样式 --><style type="text/css">div{width: 100px;height: 200px;background-color: black;}/* 第四种方式 @import */@import url("css/new_file.css");</style><!-- 第三种方式 外链样式 --><!-- <link rel="stylesheet" href="css/new_file.css"> --></head><body><!-- 第一种使用CSS的方式 ：行内样式--><!-- <div style="border: 1px solid rebeccapurple;width: 100px;height: 100px;">1</div> --><div></div><span></span></body>
</html>
基本选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 优先级关系 id > class > 标签 > * *//* 通配符选择器：一般用于重置页面样式 */*{/* 间距 */margin: 0px;/* 边距 */padding: 0px;background-color: black;}/* id选择器 :对指定id的标签进行样式修整*/#first_div{width: 200px;height: 200px;border: 1px dotted red;}/* 类选择器：对引用该类的标签使用样式 */.div_class{width : 300px;height: 300px;background-color: aqua;}/* 标签选择器 ：作用于页面中所用相同的标签*/div{width: 100px;height: 100px;border:1px solid rebeccapurple;}</style></head><body><div id="first_div"></div><div class="div_class"></div><div class="div_class"></div></body>
</html>
包含选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 逗号选择器，可以将样式代码赋给多个选择器，选择器种类任意 */div,.span_class,p{padding: 10px;background-color: aqua;border: 1px dashed firebrick;}/* 子代选择器 *//* ul > li{border: 1px solid red;} *//* 后代选择器 */ul li{border: 1px solid red;}</style></head><body><ul><li>子项1</li><li>子项2</li><li>子项3</li><li><ol><li>子项的子项1</li><li>子项的子项2</li><li>子项的子项3</li><li>子项的子项4</li></ol></li></ul></body>
</html>
相关文章：
WEB前端IDE的使用以及CSS的应用
IDE的使用 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, i…...
python中排序函数sorted的简单运用
# 假设a里面的()分别对应的x,y,w,h 即 (x,y,w,h) a [(2,3,1,2),(4,1,2,2),(1,6,2,1)] # a:传入的列表 # key 排序的数据 keylambda x:x[n] 是固定写法,里面的n代表你按照()中第几个数据的值排序 # eg：我们这里是x:x[0]表示我们按x排序, 如果改成x:x[1]则按y排序 # …...
k8s的helm
1、在没有helm之前，部署deployment、service、ingress等等 2、helm的作用：通过打包的方式，deployment、service、ingress这些打包在一块，一键部署服务、类似于yum功能 3、helm：官方提供的一种类似于仓库的功能&#…...
[MySQL]基础的增删改查
目录 1.前置介绍 2.数据库操作 2.1显示当前数据库 2.2创建数据库 2.3 使用数据库 2.4 删除数据库 3.常用数据类型 3.1整型和浮点型 3.2字符串类型 4.表的操作 4.1查看表结构 4.2创建表 4.3删除表 5.重点 5.1操作数据库 5.2常用数据类型 5.3操作表 1.前置介绍 …...
简易播放器 以及触发的异常
jl 1.0.jar 架包导入步骤： 1.读取到MP3音频文件 2.创建播放器对象,传入音频文件 3.开始播放 package com.ztt.Demo01;import java.io.FileInputStream; import java.io.FileNotFoundException;import javazoom.jl.decoder.JavaLayerException; import javazoom.jl.…...
【Flutter跨平台插件开发】如何实现kotlin跟C++的相互调用
【Flutter跨平台插件开发】如何实现kotlin跟C的相互调用 kotlin 调 c 在 Kotlin 中，可以使用 JNI (Java Native Interface) 来调用 C 代码 调用步骤: 创建 C 文件并实现函数。 // example.cpp #include <jni.h>extern "C" JNIEXPORT jstring J…...
Apache SeaTunnel社区荣获“2023快速成长开源项目”奖项
在这个开源理念推动技术创新和全球协同发展的时代，SeaTunnel社区在开放原子开源基金会举办的2023年开源项目评选中脱颖而出，荣获“2023快速成长开源项目”殊荣。 这个奖项不仅仅是对Apache SeaTunnel社区过去一年发展速度和质量的认可，更是对…...
Unity 桥接模式（实例详解）
文章目录 示例1：角色与装备系统示例2：UI控件库示例3：渲染引擎模块示例4：AI决策树算法示例5：物理模拟引擎 在Unity游戏开发中，桥接模式（Bridge Pattern）是一种设计模式，它…...
Xftp连接不上Linux虚拟机的原因解决方法
前言： 在当今数字化时代，远程连接到Linux虚拟机是许多开发者和系统管理员日常工作的一部分。然而，有时候，面对Xftp连接不上Linux虚拟机的问题，我们可能感到困惑和无措。这个看似小问题可能导致工作中断，因…...
代码随想录刷题笔记 DAY12 | 二叉树的理论基础 | 二叉树的三种递归遍历 | 二叉树的非递归遍历 | 二叉树的广度优先搜索
Day 12 01. 二叉树的理论基础 1.1 二叉树的种类 满二叉树：除了叶子节点以外，每个节点都有两个子节点，整个树是被完全填满的完全二叉树：除了底层以外，其他部分是满的，底部可以不是满的但是必须是从左到右连…...
Linux问题 apt-get install时 无法解析域名“cn.archive.ubuntu.com”
问题描述: 在安装程序时会出现无法解析域名的错误 解决办法: 1、编辑文件 sudo vim /etc/resolv.conf 2、在最后加上(按键 i 进入编辑模式) nameserver 8.8.8.8 3、保存退出(:wq)...
蓝桥--鸡哥的购物挑战OJ(4169)
题目： 思路： 暴力： 直接枚举所有得偶数区间，找最大值，n2超时 优化： 分类讨论，只要醉倒不重不漏得分类不出意外就能AC了 图中的选择方式很简单了，不做解释了。 AC代码(我的代码可…...
MySQL--删除数据表(6)
MySQL中删除数据表是非常容易操作的，但是你在进行删除表操作时要非常小心，因为执行删除命令后所有数据都会消失。 语法 以下为删除 MySQL 数据表的通用语法： DROP TABLE table_name ; -- 直接删除表，不检查是否存在 或 DROP…...
常用界面设计组件 —— 时间日期与定时器
2.7 时间日期与定时器2.7.1 时间日期相关的类2.7.2 日期时间数据与字符串之间的 转换2.7.3 QCalendarWidget日历组件2.7.4 定时器 2.7 时间日期与定时器 2.7.1 时间日期相关的类 时间日期是经常遇到的数据类型，Qt中时间日期类型的 类如下： QTime &…...
GO 中高效 int 转换 string 的方法与高性能源码剖析
文章目录 使用 strconv.Itoa使用 fmt.Sprintf使用 strconv.FormatIntFormatInt 深入剖析1. 快速路径处理小整数2. formatBits 函数的高效实现 结论 Go 语言 中，将整数（int）转换为字符串（string）是一项常见的操作。 本文…...
YOLOv7调用摄像头检测报错解决
yolov7detect.py文件调用本地摄像头，把source参数设为0 parser.add_argument(--source, typestr, default0, helpsource) # file/folder, 0 for webcam 报错：cv2.error: OpenCV(3.4.2) 一堆地址:The function is not implemented. Rebuild the library…...
Git学习 -- 分支合并、版本修改相关
目录 learn GIT Learn Git Branching merge和rebase的使用 基础命令 版本回退 工作区和暂存区 管理修改 撤销修改 删除修改 learn GIT Learn Git Branching 这是Gitee上的Git学习教程 Learn Git Branching Git Rebase Learn Git Branching 最终的实操 merge和rebase的…...
【小呆的力学笔记】弹塑性力学的初步认知二：应力应变分析(2)
文章目录 1.4 主应力空间、八面体应力1.5 应变分析1.6 特殊应力、应变定义 1.4 主应力空间、八面体应力 一点的应力状态不论如何变化，其主应力和主方向一致的话，该点的应力状态就是唯一确定的。因此，我们用主应力方向建立一个三维坐标系来描…...
【学网攻】 第(6)节 -- 三层交换机实现VLAN间路由
文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻】 第(4)节 -- 交换机划分Vlan【学网攻】 第(5)节 -- Cisco VTP的使用 前言 网络已经成为了我们生活中不可或缺的一部分，它连接了…...
C++之内联函数
函数调用在执行时，首先要在栈中为形参和局部变量分配存储空间，然后还要将实参的值复制给形参，接下来还要将函数的返回地址（该地址指明了函数执行结束后，程序应该回到哪里继续执行）放入栈中，最后…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...