JavaWeb-【2】CSS和JavaScript

笔记系列持续更新,真正做到详细!!本次系列重点讲解后端,那么第一阶段先讲解前端【续上篇HTML

目录

一、CSS

1、CSS介绍

2、CSS快速入门

3、CSS语法

4、字体颜色和边框

5、背景颜色和字体样式

6、div和文本居中

7、超链接去下划线和表格细线

8、无序列表去掉样式

9、CSS使用方式

①、行内样式

②、head标签

③、引入外部CSS文件

10、CSS元素选择器

11、ID选择器

12、类选择器

13、组合选择器

14、选择器的优先级

15、CSS练习题

二、JavaScript

1、js基本说明

 2、JS弱类型特点

3、JS使用方式1在script中写

4、JS使用方式2在script中引入JS

5、如何在浏览器查看错误信息

6、JS变量定义的方式

7、JS的数据类型

8、JS的特殊值

9、String的注意事项

10、JS运算符

①运算符1

②运算符2

③运算符3

11、JS数组定义的4种方式

12、JS数组遍历

13、JS函数快速入门

14、JS函数定义方式1-function关键字

15、JS函数定义方式2-将函数赋给变量

16、JS函数注意事项和细节

17、JS函数练习布置

18、使用Object定义对象

19、使用{}定义对象

20、事件介绍

21、动态注册和静态注册

22、onload-页面加载完毕事件

23、onclick-点击事件

24、onblur失去焦点事件

25、onchange内容发生改变事件

26、onsubmit表单提交事件

①、静态注册 

②、动态注册

27、表单验证作业


一、CSS

1、CSS介绍

CSS即层叠样式表【Cascade Style Sheet

2、CSS快速入门

【beige:米黄色,浅褐色】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 快速入门</title>
<!--
1.在 head标签内,出现了 <style type="text/css"></style>表示要写 css内容
2. div{}表示对 div元素进行样式的指定 div就是一个选择器[元素/标签选择器]
3. width: 300px(属性);表示对 div样式的具体指定,可以有多个
4.如果有多个,使用;分开即可,最后属性可以没有;但是建议写上
5.当运行页面时,div就会被 div{}渲染,修饰
-->
<style type="text/css">
div {
width: 200px;
height: 100px;
background-color: beige;
}
</style>
</head>
<body>
<!--
先使用传统的方法-->
<div>hello, 北京</div>
<br/>
<div >hello, 上海</div>
<br/>
<div>hello, 天津</div>
<br/>
<div>hello, 深圳</div>
<br/>
</body>
</html>

3、CSS语法

4、字体颜色和边框

 

 

度/高度像素值:100px; 也可以是百分比值:50%;

比如上面width:50% 则整个宽度是占整个页面的50%

5、背景颜色和字体样式

 

6、div和文本居中

7、超链接去下划线和表格细线

 只需在之前代码中利用CSS即可

8、无序列表去掉样式

 

9、CSS使用方式

①、行内样式

②、head标签

③、引入外部CSS文件

创建CSS文件 New directort->New StyleSheet

 

10、CSS元素选择器

 

 

11、ID选择器

12、类选择器

 

13、组合选择器

 

14、选择器的优先级

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

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

相关文章

持续集成03--Jenkins的安装与配置

前言 在持续集成/持续部署&#xff08;CI/CD&#xff09;的实践中&#xff0c;Jenkins作为一个开源的自动化服务器&#xff0c;扮演着至关重要的角色。本篇“持续集成03--Jenkins的安装配置”将带您走进Jenkins的世界&#xff0c;深入了解如何在Linux环境中安装并配置Jenkins。…

VUE:跨域配置代理服务器

//在vite.config。js中&#xff0c;同插件配置同级进行配置server:{proxy:{"/myrequest":{//代理域名&#xff0c;可自行修改target:"https://m.wzj.com/",//访问服务器的目标域名changeOrigin:true,//允许跨域configure:(proxy,options) > {proxy.on(&…

C4D各版本软件下载+自学C4D 从入门到精通【学习视频教程全集】+【素材笔记】

下载链接&#xff1a; 迅雷网盘https://pan.xunlei.com/s/VO1tydOxEo-Az_QCM-Jz2R4RA1?pwdvxg4# 夸克网盘https://pan.quark.cn/s/fe7450b02d80 百度网盘https://pan.baidu.com/s/1Omj4WL93F1DNdA2iP4SiMQ?pwdwmb8

[C++] 深度剖析C_C++内存管理机制

文章目录 内存分布内存分布图解 C语言中动态内存管理方式malloc:callocrealloc C内存管理方式内置类型**自定义类型** operator new & operator deleteoperator new & operator delete函数operator newoperator delete **new T[N]** 与**delete[]** **定位new表达式(pl…

vue 实现下拉框的数据是树状结构

页面显示效果 vue实现代码 <el-form-item label"公司名称" prop"comName"><el-select ref"select" v-model"queryParams.comName" placeholder"请选择公司名称" clearable size"small"change"handl…

可学习激活函数 Maxout

可学习激活函数 Maxout 是一种神经网络中的激活函数&#xff0c;它在特征提取的过程中能够学习到最优的激活方式&#xff0c;从而提高模型的表达能力和性能。Maxout 由 Ian Goodfellow 等人在2013年提出&#xff0c;是一种能够在训练过程中自适应地选择激活函数的模型。 Maxou…

在 Windows 上开发.NET MAUI 应用_1.安装开发环境

开发跨平台的本机 .NET Multi-platform App UI (.NET MAUI) 应用需要 Visual Studio 2022 17.8 或更高版本&#xff0c;或者具有 .NET MAUI 扩展的最新 Visual Studio Code。要开始在 Windows 上开发本机跨平台 .NET MAUI 应用&#xff0c;请按照安装步骤安装 Visual Studio 20…

分布式 I/O 系统Modbus TCP 耦合器BL200

BL200 耦合器是一个数据采集和控制系统&#xff0c;基于强大的 32 位微处理器设计&#xff0c;采用 Linux 操作系统&#xff0c;可以快速接入现场 PLC、SCADA 以及 ERP 系统&#xff0c; 内置逻辑控制、边缘计算应用&#xff0c;支持标准 Modbus TCP 服务器通讯&#xff0c;以太…

Blender使用(二)点线面基本操作

Blender使用之点线面 1.编辑模式 tab键进行切换&#xff0c;为了方便菜单调出&#xff0c;可以设置键位映射为拖动时的饼菜单。 设置好后&#xff0c;按住tab键移动鼠标(注意不要点击鼠标)&#xff0c;即可弹出编辑菜单。 默认是点模式&#xff0c;在左上角可进行点线面的切换…

电脑型号数据源的性能提升:新一代技术的突破

随着科技的不断发展&#xff0c;电脑型号的数据源性能也得到了显著的提升。新一代技术的突破使得电脑型号的数据源更加准确、全面且易于使用。本文将从代码的角度解释这一突破&#xff0c;并参考挖数据平台的内容&#xff0c;向大家介绍电脑型号数据源的性能提升。 首先&#…

自学鸿蒙HarmonyOS的ArkTS语言<十二>wrapBuilder:组件工厂类封装

// FactoryComponent.ets Builder function Radio1() {Column() {Text(单选组件&#xff1a;)Row() {Radio({ value: 1, group: radioGroup })Text(选项1)}Row() {Radio({ value: 2, group: radioGroup })Text(选项2)}}.margin(10) }Builder function Checkbox1() {Column() {T…

DP(5) | 完全背包 | Java | 卡码52, LeetCode 518, 377, 70 做题总结

完全背包 感觉越写越糊涂了&#xff0c;初始化怎么做的&#xff1f;递推公式怎么来的&#xff1f; 卡码52. 携带研究材料 https://kamacoder.com/problempage.php?pid1052 import java.util.*;public class Main {public static void main(String[] args) {Scanner sc new …

Java面试八股之Redis集群是怎么选择数据库的

在Redis集群中&#xff0c;数据被水平分割&#xff08;sharding&#xff09;到各个节点上&#xff0c;这意味着所有的键空间被分成16384个哈希槽&#xff08;hash slots&#xff09;&#xff0c;这些槽均匀地分布在集群中的各个节点上。Redis集群并不支持传统的数据库切换&…

xiuno兔兔超级SEO插件(精简版)

xiuno论坛是一个一款轻论坛产品的论坛&#xff0c;但是对于这个论坛基本上都是用插件实现&#xff0c;一个论坛怎么能离开网站seo&#xff0c;本篇分享一个超级seo插件&#xff0c;自动sitemap、主动提交、自动Ping提交。 插件下载:tt_seo.zip

实验11 数据库日志及数据库恢复

一、 实验目的 了解Mysql数据库系统中数据恢复机制和主要方法。 二、 实验环境 操作系统&#xff1a;Microsoft Windows 7旗舰版&#xff08;32&64位&#xff09;/Linux。 硬件&#xff1a;容量足以满足MySQL 5.7&#xff08;8.0&#xff09;安装及后续实验的使用。 软件…

Python | Leetcode Python题解之第232题用栈实现队列

题目&#xff1a; 题解&#xff1a; class MyQueue:def __init__(self):self.A, self.B [], []def push(self, x: int) -> None:self.A.append(x)def pop(self) -> int:peek self.peek()self.B.pop()return peekdef peek(self) -> int:if self.B: return self.B[-1…

C++树(二)【直径,中心】

目录&#xff1a; 树的直径&#xff1a; 树的直径的性质&#xff1a; 性质1&#xff1a;直径的端点一定是叶子节点 性质2&#xff1a;任意点的最长链端点一定是直径端点。 性质3&#xff1a;如果一棵树有多条直径,那么它们必然相交&#xff0c;且有极长连…

服务端渲染框架:Nuxt.js 与 Next.js 的区别和对比

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

掌握这些技巧,让你成为画册制作高手

在数字化的时代背景下&#xff0c;电子画册以其便捷的传播方式、丰富的视觉表现形式&#xff0c;赢得了大众的喜爱。它不仅能够在个人电脑上展现&#xff0c;还能通过智能手机、平板电脑等多种移动设备随时随地被访问和浏览。这种跨平台的支持&#xff0c;使得无论你身处何地&a…

leetcode刷题总结——字符串匹配

KMP&#xff08;字符串匹配算法&#xff09; 主串或目标串&#xff1a;比较长的&#xff0c;我们就是在它里面寻找子串是否存在&#xff1b; 子串或模式串&#xff1a;比较短的。 前缀&#xff1a;字符串A和B&#xff0c;A BS&#xff0c;S非空&#xff0c;则B为A的前缀。 …