当前位置： 首页 > news >正文

WEB前端IDE的使用以及CSS的应用

news 2026/2/7 18:08:04

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…...

编程日记 2024/1/24 22:40:26

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&#xff1a;我们这里是x:x[0]表示我们按x排序, 如果改成x:x[1]则按y排序 # …...

编程日记 2024/1/24 22:38:24

k8s的helm

1、在没有helm之前&#xff0c;部署deployment、service、ingress等等 2、helm的作用&#xff1a;通过打包的方式&#xff0c;deployment、service、ingress这些打包在一块&#xff0c;一键部署服务、类似于yum功能 3、helm&#xff1a;官方提供的一种类似于仓库的功能&#…...

编程日记 2024/1/24 22:36:22

[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.前置介绍 …...

编程日记 2024/1/24 22:34:21

简易播放器 以及触发的异常

jl 1.0.jar 架包导入步骤&#xff1a; 1.读取到MP3音频文件 2.创建播放器对象,传入音频文件 3.开始播放 package com.ztt.Demo01;import java.io.FileInputStream; import java.io.FileNotFoundException;import javazoom.jl.decoder.JavaLayerException; import javazoom.jl.…...

编程日记 2024/1/24 22:32:19

【Flutter跨平台插件开发】如何实现kotlin跟C++的相互调用

【Flutter跨平台插件开发】如何实现kotlin跟C的相互调用 kotlin 调 c 在 Kotlin 中&#xff0c;可以使用 JNI (Java Native Interface) 来调用 C 代码 调用步骤: 创建 C 文件并实现函数。 // example.cpp #include <jni.h>extern "C" JNIEXPORT jstring J…...

编程日记 2024/1/24 22:29:16

Apache SeaTunnel社区荣获“2023快速成长开源项目”奖项

在这个开源理念推动技术创新和全球协同发展的时代&#xff0c;SeaTunnel社区在开放原子开源基金会举办的2023年开源项目评选中脱颖而出&#xff0c;荣获“2023快速成长开源项目”殊荣。 这个奖项不仅仅是对Apache SeaTunnel社区过去一年发展速度和质量的认可&#xff0c;更是对…...

编程日记 2024/1/24 22:28:16

Unity 桥接模式（实例详解）

文章目录 示例1&#xff1a;角色与装备系统示例2&#xff1a;UI控件库示例3&#xff1a;渲染引擎模块示例4&#xff1a;AI决策树算法示例5&#xff1a;物理模拟引擎 在Unity游戏开发中&#xff0c;桥接模式&#xff08;Bridge Pattern&#xff09;是一种设计模式&#xff0c;它…...

编程日记 2024/1/24 22:24:12

Xftp连接不上Linux虚拟机的原因解决方法

前言&#xff1a; 在当今数字化时代&#xff0c;远程连接到Linux虚拟机是许多开发者和系统管理员日常工作的一部分。然而&#xff0c;有时候&#xff0c;面对Xftp连接不上Linux虚拟机的问题&#xff0c;我们可能感到困惑和无措。这个看似小问题可能导致工作中断&#xff0c;因…...

编程日记 2024/1/24 22:23:11

代码随想录刷题笔记 DAY12 | 二叉树的理论基础 | 二叉树的三种递归遍历 | 二叉树的非递归遍历 | 二叉树的广度优先搜索

Day 12 01. 二叉树的理论基础 1.1 二叉树的种类 满二叉树&#xff1a;除了叶子节点以外&#xff0c;每个节点都有两个子节点&#xff0c;整个树是被完全填满的完全二叉树&#xff1a;除了底层以外&#xff0c;其他部分是满的&#xff0c;底部可以不是满的但是必须是从左到右连…...

编程日记 2024/1/24 22:18:07

Linux问题 apt-get install时 无法解析域名“cn.archive.ubuntu.com”

问题描述: 在安装程序时会出现无法解析域名的错误 解决办法: 1、编辑文件 sudo vim /etc/resolv.conf 2、在最后加上(按键 i 进入编辑模式) nameserver 8.8.8.8 3、保存退出(:wq)...

编程日记 2024/1/24 22:17:06

蓝桥--鸡哥的购物挑战OJ(4169)

题目&#xff1a; 思路&#xff1a; 暴力&#xff1a; 直接枚举所有得偶数区间&#xff0c;找最大值&#xff0c;n2超时 优化&#xff1a; 分类讨论&#xff0c;只要醉倒不重不漏得分类不出意外就能AC了 图中的选择方式很简单了&#xff0c;不做解释了。 AC代码(我的代码可…...

编程日记 2024/1/24 22:16:04

MySQL--删除数据表(6)

MySQL中删除数据表是非常容易操作的&#xff0c;但是你在进行删除表操作时要非常小心&#xff0c;因为执行删除命令后所有数据都会消失。 语法 以下为删除 MySQL 数据表的通用语法&#xff1a; DROP TABLE table_name ; -- 直接删除表&#xff0c;不检查是否存在 或 DROP…...

编程日记 2024/1/24 22:15:04

常用界面设计组件 —— 时间日期与定时器

2.7 时间日期与定时器2.7.1 时间日期相关的类2.7.2 日期时间数据与字符串之间的 转换2.7.3 QCalendarWidget日历组件2.7.4 定时器 2.7 时间日期与定时器 2.7.1 时间日期相关的类 时间日期是经常遇到的数据类型&#xff0c;Qt中时间日期类型的 类如下&#xff1a; QTime &…...

编程日记 2024/1/24 22:13:00

GO 中高效 int 转换 string 的方法与高性能源码剖析

文章目录 使用 strconv.Itoa使用 fmt.Sprintf使用 strconv.FormatIntFormatInt 深入剖析1. 快速路径处理小整数2. formatBits 函数的高效实现 结论 Go 语言 中&#xff0c;将整数&#xff08;int&#xff09;转换为字符串&#xff08;string&#xff09;是一项常见的操作。 本文…...

编程日记 2024/1/24 22:10:58

YOLOv7调用摄像头检测报错解决

yolov7detect.py文件调用本地摄像头&#xff0c;把source参数设为0 parser.add_argument(--source, typestr, default0, helpsource) # file/folder, 0 for webcam 报错&#xff1a;cv2.error: OpenCV(3.4.2) 一堆地址:The function is not implemented. Rebuild the library…...

编程日记 2024/1/24 22:09:58

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的…...

编程日记 2024/1/24 22:07:55

【小呆的力学笔记】弹塑性力学的初步认知二：应力应变分析(2)

文章目录 1.4 主应力空间、八面体应力1.5 应变分析1.6 特殊应力、应变定义 1.4 主应力空间、八面体应力 一点的应力状态不论如何变化&#xff0c;其主应力和主方向一致的话&#xff0c;该点的应力状态就是唯一确定的。因此&#xff0c;我们用主应力方向建立一个三维坐标系来描…...

编程日记 2024/1/24 22:06:54

【学网攻】 第(6)节 -- 三层交换机实现VLAN间路由

文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻】 第(4)节 -- 交换机划分Vlan【学网攻】 第(5)节 -- Cisco VTP的使用 前言 网络已经成为了我们生活中不可或缺的一部分&#xff0c;它连接了…...

编程日记 2024/1/24 22:05:53

C++之内联函数

函数调用在执行时&#xff0c;首先要在栈中为形参和局部变量分配存储空间&#xff0c;然后还要将实参的值复制给形参&#xff0c;接下来还要将函数的返回地址&#xff08;该地址指明了函数执行结束后&#xff0c;程序应该回到哪里继续执行&#xff09;放入栈中&#xff0c;最后…...

编程日记 2024/1/24 22:04:52

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/5 19:49:27

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/29 20:58:41

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53