Web前端

Web前端:

1.建立web开发的息维模式写代码不仅仅是为了实现某个功能,更是学习解决问题的思维方式

2.先使用,再理解,会导致刚开始比较懵,不知其所以然.切忌不可深陷其中,

3.涉及简单的软件工程的设计思想(前后端分离思想,后端工程的分层思想)

4.理解前后端交互的过程

5.遇到的问题更加多样,除了代码带来的问题,还有环境带来的问题(各种缓存,导致现象看起来莫名其妙).

6.需要大量的反复练习,来加深对这个知识点的理解,

7.知识点上下文会经常有关联,需要仔细听才能搞懂各个知识点的逻辑关系,

前端三剑客:HTMLCSS JS

 HTML:页面上有哪些元素组成CSS:这些元素的样式,布局,排版等JS:这些元素之间如何交互.

HTML

表格:

 一个table标签,4个tr,每个tr有3个td

用户名:<input type="text"><br/>
密码:<input type="password"name=""id=""><br/>
性别:<input type="radio" name="gender"id="male"><labelfor="male">男</label>
        <input type="radio"name="gender'id="female"<labelfor="female>女</label>

一组单选按钮,name需要一致 

 <form action="hello.html">

用户名:<input type="text"name="userName"><br/>

密码:<input type="password" name="password" id=""><br/>

性别:<input type="radio" name="gender" id="male"><label for="male">男</label>

<input type="radio" name="gender" id="female"> <label for="female">女</label><br/>

兴趣爱好: <input type="checkbox" name="" id="basketball"><label for="basketball" >篮球</label><input type="checkbox" name="" id="">rap <input type="checkbox" name="" id="">听歌

<br/>

<input type="submit" value="提交">

</form>

有input 框,不代表一定需要form标签需要提交数据时,且使用form表单的方式提交数据时,才需要加form标签.

CSS

标签选择器:对标签就行选择,进行修饰

div{
color:red;
}

类选择器:对class进行选择,进行修饰 

.a{
color:red;
}

id选择器:对指定的id进行选择,进行修饰 

#a{
color:red;
}

复合选择器:以上两个或者多个进行选择修饰。

div  a{
color:red;
}
通配符选择器
*{
color:red;
}

a:个数不确定

div:单选择器的形式不确定可以为标签选择器class选择器,id选择器

ul a{
color: rebeccapurple;
}

不一定挨着,只要是子孙就可以.

ul>a{
color:green>一定得是儿子
}

一定是父子关系。 

.c1 a{
color:red;
}

这是类型选择器。通过id来指引

.font32{
font-size32px;
font-weight:700
}

700加粗400正常取值100-900 

box

font-size

font-size: 设置字体⼤⼩

color

.text1{
 color: red;
}

 border

border边框

padding

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

您的游戏端被攻击了怎么办,德迅云安全的应用加速来帮您

游戏行业DDoS攻击的主要原因是因为游戏产品生命周期偏短&#xff0c;而DDoS供给成本又不高&#xff0c;只要发起攻击&#xff0c;企业为确保游戏稳定运营而不得不快速做出让步&#xff0c;致使敲诈勒索的成功率相对更高。在遭受DDoS攻击后&#xff0c;游戏公司的日损失甚至多达…

AI 绘画零基础想入门学习AIGC,该如何学习呢?

近年来&#xff0c;随着人工智能的兴起&#xff0c;人工智能逐渐进入制造业、医疗、服务业等越来越多的行业。这些行业大多是劳动密集型行业&#xff0c;大多数人认为人工智能只能在劳动密集型行业执行任务&#xff0c;而创意领域是人工智能的禁区。但实际情况是&#xff0c;人…

倍福:驱动电机两种控制方式对比

驱动电机两种控制方式对比 验证用修改Override值控制电机转速的实际效果 规定反复启动Mc_MoveVelocity功能块为方法一&#xff0c;修改Override值为方法二 control_drive.cpp #include <ros/ros.h> #include <geometry_msgs/Twist.h> #include "myAds.hpp&…

【基础】LwM2M 通讯协议

【基础】LwM2M 通讯协议 LwM2M 协议基础LwM2M 简介LwM2M 基本架构LwM2M 资源定义 LwM2M 协议实现开源协议实现Java LwM2M Client LwM2M 协议基础 LwM2M 简介 LwM2M 的全称为 Lightweight Machine-To-Machine&#xff0c;是一种适用于物联网设备的轻量级的通讯协议&#xff0c…

再也不怕消息遗漏了,团队协作最强辅助:可道云teamOS协作通知功能,及时通知项目进展,让协作更高效

大家是否曾遇到过这样的困扰&#xff1a;在网盘中进行协作时&#xff0c;由于无法及时了解文件的最新变化&#xff0c;导致信息滞后&#xff0c;影响工作效率&#xff1f;甚至因为未能及时跟进文件更新&#xff0c;阻碍团队协作和项目推进&#xff0c;从而给团队造成严重后果。…

技巧:合并ZIP分卷压缩包

如果ZIP压缩文件文件体积过大&#xff0c;大家可能会选择“分卷压缩”来压缩ZIP文件&#xff0c;那么&#xff0c;如何合并zip分卷压缩包呢&#xff1f;今天我们分享两个ZIP分卷压缩包合并的方法给大家。 方法一&#xff1a; 我们可以将分卷压缩包&#xff0c;通过解压的方式…

C#——break、continue、goto关键字的使用

break break是搭配循环语句使用的&#xff0c;用于跳出循环。 举例 : 当for循环执行到第5次时&#xff0c;使用break方法 跳出循环。 continue continue 语句的工作原理与 break 语句类似&#xff0c;但是 continue 语句并不会跳出整个循环&#xff0c;而是跳过本次循环继续执…

idea修改国际化语言教程

教程背景 第一种&#xff0c;如果以前的项目已经有国际化语言了&#xff0c;现在的项目是导入的。 第二种&#xff0c;你中途把idea删除卸载了&#xff0c;在安装了别的版本&#xff0c;把这个项目导入进来后的。 第三种&#xff0c;你下载或复制的别人的项目。 以上这三种…

# log.info(“消息发送成功“); 红色报错 解决方案

log.info(“消息发送成功”); 红色报错 解决方案 一、错误描述&#xff1a; 在使用 idea 创建 maven 项目导入 lombok 依赖时&#xff0c;出现 log.info 报红错误&#xff0c;检查导入依赖正确&#xff0c;网络正常&#xff0c;错误依旧。 二、解决方案&#xff1a; 1、在 i…

Vue3+.NET6前后端分离式管理后台实战(二十六)

1&#xff0c;Vue3.NET6前后端分离式管理后台实战(二十六)已经在微信公众号更新&#xff0c;有兴趣的扫码关注一起交流学习。

智能家居——Kompas.ai如何改变我们的生活

引言 在现代生活中&#xff0c;智能家居逐渐成为提升生活质量的重要手段。随着科技的进步&#xff0c;智能家居的应用越来越广泛。本文将探讨智能家居的发展趋势&#xff0c;并介绍Kompas.ai如何通过AI技术改变我们的家庭生活。 智能家居的发展及其重要性 智能家居的概念起源…

现在有一个生产计划,甲乙丙3个品类共16个产品,生产时间6天,每天甲品类可以生产1张单,乙3张,丙1张,请用MySQL写出H列的效果

现在有一个生产计划&#xff0c;甲乙丙3个品类共16个产品&#xff0c;生产时间6天&#xff0c;每天甲品类可以生产1张单&#xff0c;乙3张&#xff0c;丙1张&#xff0c;请用MySQL写出H列的效果吗&#xff1f; 最终展示结果要求为&#xff1a; 品类产品生产时间开始生产时间…

IIS 服务器,下载APK 文件,用于发布更新最新的APK包

IIS 默认情况下无法下载 .apk 文件&#xff0c;需要对 IIS 服务进行设置 1、打开 IIS 对应的应用 选中MIME 类型 右键 打开功能 2、右键添加 文件扩展名&#xff1a;.apk MIME 类型输入&#xff1a;application/vnd.android.package-archive 3、重启应用 4、浏览器访问 服务地…

开发构建一个体育数据资料库:不同数据的具体意义

构建一个体育数据资料库&#xff0c;应包括“赛程赛果”、“比赛阵容”、“比赛指数”、“比赛详情”、“统计数据”以及“榜单数据”等关键信息。而借助东莞梦幻网络科技的源码&#xff0c;您可以打造一个属于自己的体育直播平台。通过该平台的资料库展示模块&#xff0c;您能…

下载centos7镜像及在VMware上安装Linux (Centos7)操作系统详细教程

文章目录 下载centos7镜像文件及在VMware上安装centos7详细教程一、下载Centos7镜像二、 利用VM安装Centos7进入VM软件安装配置虚拟机 安装Centos7进入图形化界面配置 三、访问外网 配置IP地址结语Linux配置IP网卡Linux配置本地yum源 下载centos7镜像文件及在VMware上安装cento…

Cesium开发环境搭建

由于win7搭建很费事&#xff0c;重新安装了OS&#xff0c;win10的。 记录一下&#xff0c;搭建步骤&#xff1a; 1.下载node.js。百度搜索即可下载对应的版本。下载cesium。 2.安装node.js。安装后&#xff0c;输入node -v&#xff0c;显示版本信息&#xff0c;表示安装成功…

windows下使用命令清空U盘

1、CMD命令打开后输入diskpart命令打开磁盘分区管理工具 diskpart打开如下窗口 Microsoft DiskPart 版本 10.0.19041.3636 Copyright (C) Microsoft Corporation. 在计算机上: DESKTOP-TR9HQRP 2、输入查看所有磁盘命令 list disk打印如下windows 磁盘 ###  状态    …

并查集,CF1619G - Unusual Minesweeper

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1619G - Codeforces 二、解题报告 1、思路分析 考虑距离在k内的两点可以合并 那么不断合并可以得到若干连通块 每个连通块自然爆炸的时间取决于连通块内的最早爆炸时间 我们还可以在每个时间点…

海外转仓系统应用案例解读:如何高效快速解决海外仓补货需求

海外仓转仓在跨境电商中是一个非常重要的业务类型&#xff0c;所谓的海外仓转仓&#xff0c;也就是指客户讲货物发送到某个海外仓后&#xff0c;根据业务需求&#xff0c;将货物中专到另一个海外仓的过程。 主要是应用在补货、销售渠道调整或者临时仓储需求上。对海外仓来说&a…

空间数据采集与管理

你还在为找不到合适的数据而苦恼吗&#xff1f;你还在面对大量数据束手无策&#xff0c;不知如何处理吗&#xff1f;对于从事生产和科研的人员来说&#xff0c;空间数据的采集与管理是地理信息系统&#xff08;GIS&#xff09;和空间分析领域的关键环节。通过准确高效地采集和管…