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:格式化

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

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

相关文章

Vulnhub-RIPPER: 1渗透

文章目录 一、前言1、靶机ip配置2、渗透目标3、渗透概括 开始实战一、信息获取二、rips的使用三、获取密码文件四、日志审查五、提权 一、前言 由于在做靶机的时候&#xff0c;涉及到的渗透思路是非常的广泛&#xff0c;所以在写文章的时候都是挑重点来写&#xff0c;尽量的不饶…

Ant Design Mini - 支付宝小程序官方推出的免费开源 UI 组件库,新增支持微信小程序,实用性大大增加

支付宝小程序官方的 UI 组件库开始支持运行在微信小程序上了&#xff0c;如果要开发这两家小程序平台&#xff0c;这套组件很合适。 Ant Design Mini 也简称 antd-mini &#xff0c;是一套运行在支付宝小程序的 UI 组件库&#xff0c;UI 设计遵循 Ant Design 规范&#xff0c;…

前端Vue select 下拉框详解以及监听事件

目录 简介 使用详解 演示示例 :key"option.value" :value"option.value" 区别 监听事件 简介 在 Vue 中&#xff0c;下拉框通常通过 <select> 元素与一系列的 <option> 元素来创建。Vue 的数据绑定和指令&#xff08;如 v-model 和 v-for…

color - 让你的输出带点颜色

color color 是一个可以让你输出带颜色文本的库。 安装 go get github.com/fatih/color示例 输出到控制台 // 这会直接输出到控制台 color.Cyan("Prints text in cyan.")// 每个调用末尾会自动加上换行 color.Blue("Prints %s in blue.", "text&…

composer常用命令

查看全局配置信息 composer config -gl 设置镜全局像地址 composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ 去掉-g&#xff0c;即表示只有当前项目使用该镜像 批量安装composer项目依赖 composer install 执行该命令后&#xff0c;会读取当…

1295584-83-6,NOTA 马来酰亚胺,可通过与铁离子结合增强MRI信号

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;1295584-83-6&#xff0c;NOTA Maleimide&#xff0c;NOTA Mal&#xff0c;NOTA马来酰亚胺 一、基本信息 产品简介&#xff1a;NOTA Maleimide has good water solubility and stability, which enables it to main…

不移其志,踏浪前行 | 北京智和信通召开2023年度工作总结大会

岁聿云暮&#xff0c;新元肇启&#xff0c;2024年1月24日&#xff0c;北京智和信通技术有限公司&#xff08;以下简称“北京智和信通”&#xff09;召开2023年度年终总结大会。会上&#xff0c;各部门负责人全面分析公司业务发展态势&#xff0c;各部门员工依次汇报主要工作情况…

Javaweb实现的学生宿舍管理系统

Javaweb实现的学生宿舍管理系统 文章目录 Javaweb实现的学生宿舍管理系统系统介绍技术选型成果展示源码获取账号地址及其他说明 系统介绍 Javaweb实现的学生宿舍管理系统采用jspservlet技术实现了如下功能模块&#xff0c;分别是宿舍管理员管理、学生管理、宿舍楼管理、缺勤记…

Solidworks 与 MATLAB 联合仿真

本文主要讲解了“MATLAB与SolidWorks的联合仿真怎么实现”&#xff0c;文中的讲解内容简单清晰&#xff0c;易于学习与理解&#xff0c;下面请大家跟着小编的思路慢慢深入&#xff0c;一起来研究和学习“MATLAB与SolidWorks的联合仿真怎么实现”吧&#xff01; 下载插件。 1、…

基于 LLM+LlamaIndex+NebulaGraph,构建大模型知识图谱的检索(RAG)方法

最近&#xff0c;围绕着利用 LLM&#xff08;Language Model&#xff09;和知识图谱&#xff08;KG&#xff0c;Knowledge Graphs&#xff09;构建RAG&#xff08;Retrieval Augmented Generation&#xff09;流程引起了很多关注。 在本文中&#xff0c;让我们通过利用 LlamaI…

leetcode189.轮转数组|超简单易于理解方法

题目 https://leetcode.cn/problems/rotate-array/description/https://leetcode.cn/problems/rotate-array/description/ 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输…

【模型微调】| 各类微调模型总结 P-Tuning,Prefix,P-tuning v2,LoRA

文章目录 1 微调背景1.1 Full fine-tuning 全参数微调&#xff08;FFT&#xff09;1.2 parameter-Efficient-fine-tuning 部分参数微调&#xff08;PEFT&#xff09; 2 提示词调整训练法2.1 P-Tuning2.2 Prefix2.3 P-Tuning v2 3 结构调整训练法3.1 Adapter tuning3.2 LoRA 微调…

永久删除 Elasticsearch 中的主节点

Elasticsearch 是一个开源分布式搜索和分析引擎&#xff0c;用于各种任务&#xff0c;例如全文搜索、日志分析和实时数据分析。 Elasticsearch 集群由一个或多个节点组成&#xff0c;每个节点可以具有多种角色&#xff0c;包括主节点&#xff08;master node&#xff09;、数据…

15. 三数之和(力扣LeetCode)

文章目录 15. 三数之和题目描述双指针去重逻辑的思考a的去重b与c的去重 15. 三数之和 题目描述 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 …

C# 使用 MailKit 接收邮件(附demo)

C# 使用 MailKit 接收邮件&#xff08;附demo&#xff09; 介绍安装包&#xff08;依赖&#xff09;简单代码获取附件核心代码完整代码 介绍 MailKit 是一个开源的 C# 邮件处理库&#xff0c;用于在应用程序中发送和接收电子邮件。它提供了一个强大且易于使用的 API&#xff…

2024最新版TypeScript安装使用指南

2024最新版TypeScript安装使用指南 Installation and Development Guide to the Latest TypeScript in 2024 By JacksonML 1. 什么是TypeScript? TypeScript is JavaScript with syntax for types. – typescriptlang.org TypeScript 是 JavaScript 的一个超集&#xff0c;…

【UE 材质】球形遮罩材质

效果 步骤 1. 新建一个材质&#xff0c;这里命名为“M_Mask” 打开“M_Mask”&#xff0c;混合模式设置为已遮罩&#xff0c;勾选双面显示 在材质图表中添加如下节点 此时我们将一个物体赋予材质“M_Mask”并放置在世界坐标原点&#xff0c;可以看到如下效果 2. 如果我们希望能…

页面切换导致echarts不加载的问题

1. 问题描述 在A页面写了echarts,初始化dom元素加载,显示正常.当切换到B页,再切换回A页面时,echarts加载不出来. f12召唤出来看看报错,没有问题,但是有这样的警告 渲染echarts的dom元素上多了一个" echarts_instance "的属性,这是用来表示唯一性的. 2. 问题解决 …

HIMO智能尾灯,让夜骑的你更加自信

现在选择骑车外出的朋友越来越多了&#xff0c;日常骑行的过程中&#xff0c; 夜间要尤其注意安全 &#xff0c; 特别是在一些光线不好的道路 &#xff0c; 有必要给车辆增加一些醒目的“标志” &#xff0c; 像是尾灯我觉得就很重要 &#xff0c; 我也是前几天新装了一枚 HIMO…

DataX介绍

一、介绍 DataX 是一个异构数据源离线同步工具&#xff0c;致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源之间稳定高效的数据同步功能。 github地址 详细文档 操作手册 支持数据框架如下&#xff1a; 架构 Reader&#xff1…