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;对于提高系统的可用性、性能和扩…

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

近年来&#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;影响企业的正常经营活动。该电子科技有限公司在发展中也遇到员工离职管理不善带来的问题。…

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

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

查看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…

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…

运维SRE-02 正则表达式、grep

1.特殊符号补充 1.1位置相关的特殊符号 . 当前目录 .. 当前目录的上级目录 ~ 当前用户家目录 / 根目录 cd - 返回上次所在目录1.2熟练掌握 # 注释符号,root命令提示符 | 管道符号.1.3了解其他特殊符号 $ 取值(取出变量的值),普通用户的提示符 ! % ^ & * (){} [] ; ? \…

深入解析与实践:基于VUE-cli的Element-UI应用指南

一、前言 ​ 本文介绍 Element-UI快速入门&#xff0c;基于vue-cli构建的基础项目。关于 vue-cli 构建项目的详细流程&#xff0c;可参考博文&#xff1a; 使用vue脚手架构建项目 二、简介 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库&#xff0c;方便程序员进行…

前端JavaScript篇之let、const、var的区别

目录 let、const、var的区别 let、const、var的区别 let、const和var是JavaScript中用于声明变量的关键字&#xff0c;它们之间有一些区别。 首先&#xff0c;var是在ES5中引入的关键字&#xff0c;而let和const是在ES6中引入的。在ES6之前&#xff0c;我们只能使用var来声明…

思腾合力邀您共赴CNCC 2023中国计算机大会

思腾合力作为行业领先的人工智能基础架构解决方案商&#xff0c;受邀参加本次盛会。在会上展出思腾AI算力服务器&#xff0c;诚挚邀请众多参会嘉宾莅临展位&#xff0c;共同探讨人工智能与智能算力的产业趋势&#xff0c;共话技术创新发展&#xff0c;交流优秀产品与解决方案。…

【操作系统·考研】文件系统

1.概述 文件系统(File System)提供高效和便捷的磁盘访问&#xff0c;以便允许存储、定位、提取数据。 严格来说&#xff0c;VFS并不是一种实际的FS&#xff0c;它只存在于内存中&#xff0c;不存在与任何外存空间中。 VFS在系统启动时建立&#xff0c;在系统关闭时消亡。 2.结…