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>

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

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

相关文章

Unity3D控制人物移动的多种方法

Unity3D控制人物移动的多种方法

系列文章目录 unity知识点 文章目录 系列文章目录前言一、人物移动之键盘移动1-1、代码如下1-2、效果 二、人物移动之跟随鼠标点击移动2-1、代码如下2-2、效果 三、人物移动之刚体移动3-1、代码如下3-2、效果 四、人物移动之第一人称控制器移动4-1、代码如下4-2、效果 五、And…
阅读更多...
从编程中思考：大脑的局部与全局模式（一）

从编程中思考：大脑的局部与全局模式（一）

郭靖正在帐篷中用Unity写代码&#xff0c;刚写完一段代码。欧阳锋从帐篷外走进来&#xff0c;正要说点什么&#xff0c;郭靖反应敏捷&#xff0c;转身反手一招神龙摆尾击出&#xff0c;将欧阳锋震出帐篷&#xff0c;灰溜溜逃跑。 using UnityEngine;public class LocalGlobalD…
阅读更多...
Maven 综合案例

Maven 综合案例

1. 项目需求和结构分析 需求案例&#xff1a;搭建一个电商平台项目&#xff0c;该平台包括用户服务、订单服务、通用工具模块等。 项目架构&#xff1a; 用户服务&#xff1a;负责处理用户相关的逻辑&#xff0c;例如用户信息的管理、用户注册、登录等。 spring-context 6.0.…
阅读更多...
P1320 压缩技术（续集版）（C语言）

P1320 压缩技术（续集版）（C语言）

基本思路是&#xff1a; 1.读入字符串并计算n值 2.字符串连接&#xff08;要用到strcat&#xff09; 3.输出n值 4.计算字符数并输出 其中输出时第一个数字是0的个数&#xff0c;这个很容易被遗漏。 #include<stdio.h> #include<string.h> int main() {char a[…
阅读更多...
centos 7.6 进入单用户模式

centos 7.6 进入单用户模式

1、重启服务器&#xff0c;在选择内核界面使用上下箭头移动 2、选择内核并按“e” 将“RO”改成 rw ,删除 rhgb quiet 添加 init/bin/bash Ctrl X 进入单用户模式 为防止乱码&#xff0c;修改语言为英语 修改完密码建议输入&#xff1a;touch /.autorelabel 更新系统信…
阅读更多...
imgaug库图像增强指南（34）：揭秘【iaa.Clouds】——打造梦幻般的云朵效果

imgaug库图像增强指南（34）：揭秘【iaa.Clouds】——打造梦幻般的云朵效果

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…
阅读更多...
vue页面样式在微信中不生效

vue页面样式在微信中不生效

有几个可能的原因导致你的Vue页面样式在微信中不生效&#xff1a; 缓存问题&#xff1a;微信客户端可能会缓存页面的样式文件。你可以尝试在开发环境下清除缓存&#xff0c;或者在部署时给样式文件添加一个版本号&#xff0c;强制客户端重新加载最新的样式。 兼容性问题&#…
阅读更多...
mysql 导入数据 1273 - Unknown collation: ‘utf8mb4_0900_ai_ci‘

mysql 导入数据 1273 - Unknown collation: ‘utf8mb4_0900_ai_ci‘

前言: mysql 导入数据 遇到这个错误 1273 - Unknown collation: utf8mb4_0900_ai_ci 具体原因没有深究 但应该是设计数据库的 字符集类型会出现这个问题 例如: char varchar text..... utf8mb4 类型可以存储表情 在现在这个时代会用很多 以后会用的更多 所以不建议改…
阅读更多...
GBASE南大通用分享，适用于 GBase 8s ESQL/C的Insert 游标

GBASE南大通用分享，适用于 GBase 8s ESQL/C的Insert 游标

关闭 Insert 游标 由于 GBase 8s 在 SPL 例程中不支持 Insert 游标&#xff0c;本节有关 Insert 游标的讨论仅适用于 GBase 8s ESQL/C。在 SPL 例程中&#xff0c;只能执行 DECLARE 语句定义的 Select 或 Function 游标的 CLOSE 语句。&#xff08;SPL 的 FOREACH 语句在其语…
阅读更多...
SV-7101V网络音频终端产品简介

SV-7101V网络音频终端产品简介

SV-7101V网络音频终端产品简介 网络广播终端SV-7101V&#xff0c;接收网络音频流&#xff0c;实时解码播放。本设备只有网络广播功能&#xff0c;是一款简单的网络广播终端。提供一路线路输出接功放或有源音箱。18123651365微信 产品特点 ■ 提供固件网络远程升级■ 标准RJ…
阅读更多...
XML 注入漏洞原理以及修复方法

XML 注入漏洞原理以及修复方法

漏洞名称&#xff1a;XML注入 漏洞描述&#xff1a;可扩展标记语言 (Extensible Markup Language, XML) &#xff0c;用于标记电子文件使其具 有结构性的标记语言&#xff0c;可以用来标记数据、定义数据类型&#xff0c;是一种允许用户对自己的标记语言进行定义的源语言。 XM…
阅读更多...
CSS之边框样式

CSS之边框样式

让我为大家介绍一下边框样式吧&#xff01;如果大家想更进一步了解边框的使用&#xff0c;可以阅读这一篇文章&#xff1a;CSS边框border 属性描述none没有边框,即忽略所有边框的宽度(默认值)solid边框为单实线dashed边框为虚线dotted边框为点线double边框为双实线 代码演示&…
阅读更多...
教你怎么用Docker 部署前端

教你怎么用Docker 部署前端

越来越多的前端团队选择用 Docker 部署前端项目&#xff0c;方法是将项目打包成一个镜像&#xff0c;然后在服务端直接拉镜像启动项目。这种方式可以忽略服务器环境差异&#xff0c;更容易做版本管理。 但我们平常使用 Docker 拉取镜像时&#xff0c;默认会从 Docker Hub 这个…
阅读更多...
PWM调光 降压恒流LED芯片FP7127：为照明系统注入新能量（台灯、GBR、调光电源、汽车大灯）

PWM调光 降压恒流LED芯片FP7127：为照明系统注入新能量（台灯、GBR、调光电源、汽车大灯）

目录 一、降压恒流LED芯片FP7127 二、降压恒流LED芯片FP7127具有以下特点&#xff1a; 三、降压恒流LED芯片FP7127应用领域&#xff1a; LED照明和调光的新纪元随着LED照明技术的不断发展&#xff0c;人们对于照明调光的需求也越来越高。PWM调光技术作为一种常用的调光方法&…
阅读更多...
一、认识 JVM 规范（JVM 概述、字节码指令集、Class文件解析、ASM）

一、认识 JVM 规范（JVM 概述、字节码指令集、Class文件解析、ASM）

1. JVM 概述 JVM&#xff1a;Java Virtual Machine&#xff0c;也就是 Java 虚拟机 所谓虚拟机是指&#xff1a;通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的计算机系统。 即&#xff1a;虚拟机是一个计算机系统。这种计算机系统运行在完全隔离的环境中…
阅读更多...
【心得】java反序列化漏洞利用启蒙个人笔记

【心得】java反序列化漏洞利用启蒙个人笔记

目录 前置基础概念 java的反序列化利用概念baby题 例题1 例题2 java反序列化启蒙小结&#xff1a; URLDNS链 一句话总结&#xff1a; 简单分析&#xff1a; 利用点&#xff1a; 示例&#xff1a; 前置基础概念 序列化 类实例->字节流 反序列化 字节流->类实…
阅读更多...
c#入门

c#入门

目录 1. C#简介2. 开发环境3. 基本语法3.1 Hello World3.2 变量和数据类型3.3 控制流和循环 4. 函数和类5. 学习资源 C#&#xff08;读作C Sharp&#xff09;是一种由微软开发的面向对象的编程语言&#xff0c;它结合了C和C的优点&#xff0c;具有强大的功能和广泛的应用领域。…
阅读更多...
卡尔曼滤波器原理By_DR_CAN 学习笔记

卡尔曼滤波器原理By_DR_CAN 学习笔记

DR_CAN卡尔曼滤波器 Kalman Filter Recursive Algorithm迭代过程 数学基础正态分布和6-SigmaData FusionCovariance MatrixState Space Representation离散化推导 linearizationTaylor Series2-DSummary Step by Step Derivation of Kalman Gain矩阵求导公式 Prior / Posterio…
阅读更多...
如何在Docker上运行Redis

如何在Docker上运行Redis

环境: 1.windows系统下的Docker deckstop 1.Pull Redis镜像 2.运行Redis镜像 此时,Redis已经启动&#xff0c;我们登录IDEA查看下是否连接上了 显示连接成功&#xff0c;证明已经连接上Docker上的Redis了
阅读更多...
积分梳状滤波器CIC原理与实现

积分梳状滤波器CIC原理与实现

CIC&#xff08;Cascade Intergrator Comb&#xff09;&#xff1a;级联积分梳状滤波器&#xff0c;是由积分器和梳状滤波器级联而得。滤波器系数为1&#xff0c;无需对系数进行存储&#xff0c;只有加法器、积分器和寄存器&#xff0c;资源消耗少&#xff0c;运算速率高&#…
阅读更多...
最新文章

Copyright @ 2022~2023