JavaWeb前端——HTML/CSS

HTML/CSS概述

HTML:学习标签,CSS:学习样式

HTML

1. 不区分大小写。

2. 属性可以使用单引号/双引号

3. 在记事本/编辑器中编写html语言,通过浏览器解析渲染语言

4. 语法结构松散(编写时要尽量严谨)

VScode中后缀为html的文件中直接敲 ! + Enter:可自动生成html格式

绝对路径/相对路径:

推荐使用:相对路径

相对路径:. / 可以省略,. . / 不可以省略

图片:

宽度和高度:一般只设置一个,另一个等比例缩放

举例父元素:body

<span></span>标签:没有语义的标签,用于包裹行内元素​​​​​​​

HTML正文标签

HTML超链接标签

 

HTML表格标签

举例: 

HTML表单标签

 

表单项

 

 

HTML 和 XML 对比

XML:可扩展标记语言,类似HTML

XML设计宗旨:传输数据,HTML设计宗旨:显示数据

HTML 标签都是预定义好的,XML标签没有被预定义

相比于 XML,目前更加常用的是 JSON 用于传输数据

CSS

CSS 引入方式:

外联样式:

外部文件:

引入方式:

rel:relationship

herf:hypertxt reference

举例演示:

!!注意:样式间使用分号!!

颜色表示形式:

代码演示:

小 tips:使用识色器可以拿到颜色的 rgb 表示法

盒子模型

盒子不包含 margin

 页面布局常借用两个标签:<div>标签,<span>标签

<div>标签默认是父元素宽度:例如是<body>宽度,此时 <div> 标签元素会独占一行

<div>标签

使用<div>时:

1. 使用<div>标签将所有内容包裹起来 

2. 给该<div>设置id,在样式里面指定该 id 的属性

 <span>标签

行内标签,一行内可以使用多个<span>标签

CSS 选择器

 优先级:id选择器>类选择器>元素选择器

快捷键:

ctrl + shift + / :注释

alt + B:使用浏览器打开文件

ctr + alt + l:格式化

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

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

相关文章

搭建 idea 插件仓库私服

正常情况下&#xff0c;我们开发的 idea 插件会发布到 idea 官方商城中&#xff0c;这样用户就可以在 idea 的 Marketplace 中搜索安装。 但是在企业内部&#xff0c;有可能我们开发了很多内部插件&#xff0c;而不能发布到公共市场中&#xff0c;这种情况下我们就需要搭建一个…

探索微服务治理:从发展到实践构建高效稳定的系统|负载均衡技术解析

二、微服务治理的相关技术 微服务治理涉及多个方面&#xff0c;包括服务注册与发现、负载均衡、容错处理、服务配置管理等&#xff0c;这些技术共同确保微服务架构的稳定运行。 2、负载均衡 负载均衡作为服务治理中的核心技术之一&#xff0c;对于提高系统的可用性、性能和扩…

OSPF的拓展配置

一&#xff1a;OSPF的拓展配置 1&#xff1a;手工认证 --- OSPF邻居双方&#xff0c;发送的所有的数据报中包含认证信息&#xff0c;两边口令相同&#xff0c;则代表认 证成功&#xff1b;不同&#xff0c;则认证失败&#xff0c;将影响邻居关系建立。 2&#xff1a;接口认证…

网络空间测绘在安全领域的应用(上)

近年来&#xff0c;网络空间测绘已经跻身为网络通信技术、网络空间安全、地理学等多学科融合的前沿领域。 该领域聚焦于构建网络空间信息的“全息地图”&#xff0c;致力于建立面向全球网络的实时观测、准确采样、映射和预测的强大基础设施。 通过采用网络探测、数据采集、信…

华为FreeClip耳机可以调节音量大小吗?附教程!

不会只有我一个人吧&#xff1f;都用华为FreeClip耳机一段时间了&#xff0c;才发现它竟然不支持在耳机上直接调节音量&#xff0c;也是没谁了&#xff01;但是后来自己摸索了一下&#xff0c;发现了华为FreeClip耳机原来是几个简单有效的调节音量大小的方法滴~不得不说&#x…

在Android Studio中配置OpenCV

在Android Studio中配置OpenCV 1 下载OpenCV2 导入OpenCV模块3 修改配置4 增加依赖5 拷贝libopencv_java.so6 Activity中加入代码1 下载OpenCV 下载OpenCV的Android包并解压。 2 导入OpenCV模块 在Android应用中,导入OpenCV模块。 导入目录时选择Opencv Android中的sdk目…

TiDB架构设计和实践:高性能分布式数据库解决方案

摘要&#xff1a;TiDB是一个开源的分布式NewSQL数据库&#xff0c;具备强大的水平扩展能力和高性能查询能力。本文将介绍TiDB的架构设计和实践经验&#xff0c;帮助读者了解如何利用TiDB构建可靠、高性能的分布式数据库系统。 正文&#xff1a; ### 1. 引言 随着互联网规模的…

鸿蒙ArkUI下拉列表组件

鸿蒙ArkUI下拉列表组件&#xff0c;官方提供的只是基础使用&#xff0c;在使用过程非常不方便&#xff0c;我们进行了组件的封装。 import {IDynamicObject} from ./IType /*** 自定义颜色*/ Component export default struct DiygwSelect{//绑定的值Link Watch(onValue) val…

如何做好员工离职风险防范和离职危机处理工作

员工退出与离职是企业发展中都会面临的一个普遍现象&#xff0c;这种现象本身没有什么问题&#xff0c;但是如果企业退出与离职管理不善&#xff0c;就会增加企业的管理成本&#xff0c;影响企业的正常经营活动。该电子科技有限公司在发展中也遇到员工离职管理不善带来的问题。…

发布订阅模式的应用:解决react中复杂层级的数据交互

以自定义事件为调度中心&#xff0c;创建一个EventCenter类&#xff0c;默认导出一个EventCenter实例 // 调度中心 class EventCenter {constructor() {// 创建一个事件中心&#xff0c;数据模型&#xff1a;{ event : [fn, fn] }this.eventCenter {};}/*** 订阅事件* eventNa…

151基于matlab的齿轮-轴-轴承系统的含间隙非线性动力学模型

基于matlab的齿轮-轴-轴承系统的含间隙非线性动力学模型&#xff0c;根据牛顿第二定律&#xff0c;建立齿轮系统啮合的非线性动力学方程&#xff0c;同时也主要应用修正Capone模型的滑动轴承无量纲化雷诺方程&#xff0c;利用这些方程推到公式建模&#xff1b;用MATLAB求解画出…

【Go】在 JSON 中解析 time.Duration

当解析 JSON 时&#xff0c;使用time.Duration可能是一个繁琐的过程&#xff0c;因为它需要在一秒的后面添加 9 个零&#xff08;即 1000000000&#xff09;。为了简化这个过程&#xff0c;我创建了一个名为 Duration 的新类型&#xff1a; type Duration time.Duration为了将…

查看docker服务的IP地址

要查看Docker容器服务的IP地址&#xff0c;可以使用以下命令&#xff1a; 如果你知道容器名称或容器ID&#xff0c;直接通过容器ID或容器名称来获取IP地址&#xff1a; # 使用容器ID获取IP地址 docker inspect -f {{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} …

jupyter notebook显示的扩展很少,只有四五个--解决方案

如下&#xff1a;安装好只有四五个扩展 可以先删除 conda remove jupyter_nbextensions_configurator 然后使用pip安装 pip install jupyter_contrib_nbextensions jupyter contrib nbextensions install --user pip install jupyter_nbextensions_configurator jupyter nbex…

c++学习第十四讲---STL常用容器---vector容器

vector容器&#xff1a; 1.vector基本概念&#xff1a; vector功能与数组类似&#xff0c;与数组不同的是&#xff0c;vector可以动态扩展。 2.vector构造函数&#xff1a; vector<T> v; //默认构造函数&#xff0c;创建数据类型T的容器 ve…

在linux操作系统上编译并运行wpa_supplicant

前提&#xff1a;安装ubuntu虚拟机 本文使用的linux发行版本&#xff1a;Ubuntu 20.04.6 LTS 1 编译wpa_supplicant软件 1.1 下载wpa_supplicant wpa_supplicant各版本下载页面&#xff1a;Index of /releases 在页面中&#xff0c;不同前缀开头的表示不同的程序&#xff…

JAVA操作Rabbitmq-原理讲的很详细

这篇文章来源于稀土掘金&#xff0c;来源&#xff1a;https://juejin.cn/post/7132268340541653005&#xff0c;主要用来收藏学习。 常见的消息队列很多&#xff0c;主要包括 RabbitMQ、Kafka、RocketMQ 和 ActiveMQ&#xff0c;相关的选型可以看我之前的系列&#xff0c;这篇文…

Quick BI中lod函数之lod_fixed

一、lod函数简介 LOD函数的全称是详细级别表达式&#xff08;Level Of Detail Expressisons&#xff09;。它主要是为了克服一些表达式之间计算颗粒度不一致的问题。比如&#xff0c;要计算第一季度各月销售收入占比&#xff0c;这里分子计算颗粒度为’月’&#xff0c;但是分…

Armv8-M的TrustZone技术之测试目标指令

为了允许软件确定内存位置的安全属性,使用了TT指令(Test Target)。 Test Target(TT)查询内存位置的安全状态和访问权限。 Test Target Unprivileged(TTT)查询内存位置的安全状态和访问权限,以进行对该位置的非特权访问。 Test Target Alternate Domain(TTA)和Test…

【Python】P1 Python3 简介

目录 什么是 PythonPython 历史Python 应用方向Python 缺点 什么是 Python Python 是一个具有编译性、解释性、高可读性、高度互动性和面向对象的高级脚本编程语言。 编译性&#xff1a;Python 是一种解释型语言&#xff0c;代码运行时由解释器逐行读取和执行&#xff0c;而非…