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++之内联函数
函数调用在执行时，首先要在栈中为形参和局部变量分配存储空间，然后还要将实参的值复制给形参，接下来还要将函数的返回地址（该地址指明了函数执行结束后，程序应该回到哪里继续执行）放入栈中，最后…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...