当前位置： 首页 > article >正文

javaweb -html -CSS

article 2025/7/27 15:49:09

HTML是一种超文本标记语言

超文本：超过了文本的限制，比普通文本更强大，除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签"<标签名>"构成的语言。

CSS:层叠样式表，用于控制页面的样式（表现）。

常见标签

类别标签说明

文本处理标签
 		<h1> - <h6>一级标题 - 六级标题(h1到h6字体逐渐变小)
<br>、<p>换行、段落
<strong>、<em>、<ins>、<del>文本加粗、倾斜、下划线、删除线（具有强调作用）
<a href="...">超链接（属性：href、target）
 图片 音视频标签
 		<img src="...">图片（路径：绝对路径、相对路径）
<audio src="...">、<video src="...">音频、视频
布局标签<div>、<span>没有语义的布局标签，配合CSS实现页面布局
表格标签<table>、<thead>、<tbody><br><tr> / <th>、<td>表格、表头、表格主体 行/单元格

表单标签
 		<form>定义表单（属性：action、method）
<input type="text/button">表单项（文本输入框、按钮...）
<select> / <option>表单项（下拉列表/选项）
类别属性说明
盒子模型width, height作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示<br>高度、宽度
box-sizing高度和宽度的计算方式；content-box, border-box
padding内边距（上、右、下、左；上下、左右）
border边框
margin外边距（上、右、下、左；上下、左右）
flex弹性布局display作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力。<br>flex: 使用flex布局
flex-direction设置主轴方向（row: x轴，水平方向；column: y轴，垂直方向）
justify-content子元素在主轴上的对齐方式

样式

若是需要更改某个标签下字体的颜色，有三种样式

1、内部样式

在style标签里直接定义需要标签字体的颜色（如以下代码style标签定义span标签内的字体颜色）

2、行内样式

在定义标签时直接在标签后跟需要的颜色（如以下代码<span style="color:gray">2024年05月15日 20:07</span>）

3、外部样式

通过调用外部css文件中的代码为某个标签定义颜色（如<link rel="stylesheet" href="css/news.css">）

下面为css文件中的内容

以下均为没有内容的示例，可以自己往title等标签内加入内容测试。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><!-- 内部样式 --><style>span{/* 关键字 *//* color:gray; *//* RGB表示法 *//* color:rgb(255, 0, 0); *//* RGBA表示法 *//* color: rgba(255, 120, 0, 0.1); *//* 十六进制表示法 */color: #8e8282;}</style><!-- 方式三：外部样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><!-- 定义一个标题，标题内容：： --><h1></h1><!-- 定义一个超链接，里面展示 央视网 --><!-- a 超链接标签href 属性 超链接的地址target 属性 超链接打开方式1、_blank 新窗口打开2、_self 当前窗口打开（默认）3、_parent 父窗口打开内容 超链接的文本 --><a href="http://www.cctv.com" target ="_blank">央视网</a> <!-- span为没有语义的标签，此处用于修改字体颜色 --><!-- 方式一：行内样式 --><!-- <span style="color:gray">2024年05月15日 20:07</span> --><!-- 方式二：内部样式 --><span>2024年05月15日 20:07</span></body>
</html>

选择器

以上的设置样式的方法有缺陷，方式一、三会直接将所有span标签的字体都设为灰色，方式二书写步骤繁琐，但选择器可以解决这个问题。

选择器有元素选择器，类选择器与id选择器，其中元素选择器就是上文介绍的方法

类选择器

语法：在style标签内   .类名{这个类需要的修改}，使用时在标签后声明是哪个类就行（如 <span class="cls" id="time">2024年05月15日 20:07</span>）

id选择器

语法：在style标签内 #id名{此id需要的修改}   ，使用时标签内声明是哪个id即可（如 <span class="cls" id="time">2024年05月15日 20:07</span>）

优先级顺序如下（从高到低）：

  1. ID 选择器（#id）：优先级最高。

  2. 类选择器（.class）、属性选择器（如 [type="text"]）、伪类选择器（如 :hover）：优先级次之。

  3. 元素选择器（div, span 等）：优先级最低。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>  </title><!-- 内部样式 --><style>/* 元素选择器 *//* span{color:gray;} *//* 类选择器 *//* .cls{color:#f00;} *//* id选择器 */#time{color:#0000ff; }</style><!-- 方式三：外部样式 --><!-- <link rel="stylesheet" href="css/news.css"> --></head>
<body><!-- -----------------新闻标题------------------------ --><h1></h1><a href="http://www.cctv.com" target ="_blank">    </a> <span class="cls" id="time">2024年05月15日 20:07</span><!-- 换行 --><br></br><!-- -----------------新闻正文------------------------ --><!-- 定义一个视频，引入video/news.mp4 --><!-- video标签的属性src :视频地址没有播放控件视频不能播放controls :显示播放控件autoplay :自动播放width :视频宽度（建议宽度和高度只设计一个，另一个会等比例缩放）height :视频高度单位：像素px    % ：百分比（相对于父元素的百分比）--><video src="video/news.mp4" controls autoplay width="60%"></video><br></br><!-- 音频播放器 --><!-- <audio src="audio/news.mp3" controls autoplay></audio> --><!-- 段落标签：p --><p></p><P></P><!-- 定义一张图片，引入img/1.gif --><!-- img标签的属性src :图片访问地址:1、绝对路径1.1、绝对磁盘路径：D:\我的文档\桌面\HTML-CSS\img\1.gif1.2、绝对网络路径：https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif2、相对路径2.1、 ./ 表示当前目录(可以省略)2.2、../ 表示上一级目录alt :图片描述width :图片宽度height :图片高度（建议宽度和高度只设计一个，另一个会等比例缩放）--><img src="img/1.gif" width="60%"></img></body>
</html>

 

相关文章：

javaweb -html -CSS

HTML是一种超文本标记语言 超文本&#xff1a;超过了文本的限制&#xff0c;比普通文本更强大&#xff0c;除了文字信息&#xff0c;还可以定义图片、音频、视频等内容。 标记语言&#xff1a;由标签"<标签名>"构成的语言。 CSS:层叠样式表&#xff0c;用于…...

编程日记 2025/7/25 10:18:26

spring task定时任务快速入门

spring task它基于注解和配置&#xff0c;可以轻松实现任务的周期性调度、延迟执行或固定频率触发。按照我们约定的时间自动执行某段代码。例如闹钟 使用场景 每月还款提醒&#xff0c;未支付的订单自动过期&#xff0c;收到快递后自动收货&#xff0c;系统自动祝你生日快乐等…...

编程日记 2025/7/23 11:07:08

搭建nginx的负载均衡

1、编写一个configMap的配置文件 events {worker_connections 1024; # 定义每个worker进程的最大连接数 }http {# 定义通用代理参数&#xff08;替代proxy_params文件&#xff09;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-F…...

编程日记 2025/7/13 22:50:10

Appium+python自动化（八）- 认识Appium- 下章

1、界面认识 在之前安装appium的时候说过我们有两种方法安装&#xff0c;也就有两种结果&#xff0c;一种是有界面的&#xff08;客户端安装&#xff09;&#xff0c;一种是没有界面的&#xff08;终端安装&#xff09;&#xff0c;首先我们先讲一下有界面的&#xff0c;以及界…...

编程日记 2025/7/24 5:30:56

LabVIEW的MathScript Node 绘图功能

该VI 借助 LabVIEW 的 MathScript Node&#xff0c;结合事件监听机制&#xff0c;实现基于 MathScript 的绘图功能&#xff0c;并支持通过交互控件自定义绘图属性。利用 MathScript 编写脚本完成图形初始化&#xff0c;再通过LabVIEW 事件结构响应用户操作&#xff0c;动态修改…...

编程日记 2025/7/24 20:58:40

互斥锁与消息队列的架构哲学

更多精彩内容请访问&#xff1a;通义灵码2.5——基于编程智能体开发Wiki多功能搜索引擎更多精彩内容请访问&#xff1a;更多精彩内容请访问&#xff1a;通义灵码2.5——基于编程智能体开发Wiki多功能搜索引擎 一、资源争用的现实镜像 当多个ATM机共用一个现金库时&#xff0c;…...

编程日记 2025/7/7 18:42:12

每日Prompt：治愈动漫插画

提示词 现代都市治愈动漫插画风格&#xff0c;现代女子&#xff0c;漂亮&#xff0c;长直发&#xff0c;20岁&#xff0c;豆沙唇&#xff0c;白皙&#xff0c;气质&#xff0c;清纯现代都市背景下&#xff0c;夕阳西下&#xff0c;一位穿着白色露脐短袖&#xff0c;粉色工装裤…...

编程日记 2025/7/17 15:49:38

stress-ng 服务器压力测试的工具学习

一、stress-ng (下一代压力测试) 介绍 项目地址&#xff1a;https://github.com/ColinIanKing/stress-ng stress-ng 将以多种可选方式对计算机系统进行压力测试。它旨在锻炼计算机的各种物理子系统以及各种操作系统内核接口。stress-ng 的特点&#xff1a; 360 压力测试100 …...

编程日记 2025/7/7 19:05:55

6.8 note

paxos算法_初步感知 Paxos算法保证一致性主要通过以下几个关键步骤和机制&#xff1a; 准备阶段 - 提议者向所有接受者发送准备请求&#xff0c;请求中包含一个唯一的编号。 - 接受者收到请求后&#xff0c;会检查编号&#xff0c;如果编号比它之前见过的都大&#xff0c;就会承…...

编程日记 2025/7/23 13:18:58

面试心得 --- 车载诊断测试常见的一些面试问题

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程日记 2025/7/17 0:51:30

Vue项目PDF目录功能集成【一】——方案深度思考

文章目录 项目背景一、方案一&#xff1a;数据透传 外部开发模式二、方案二&#xff1a;内置组件 黑盒模式三、方案三&#xff1a;激活官方实现 可控定制总结 项目背景 本项目是Vue 3 项目&#xff0c;需要使用文件预览组件&#xff08;pdfjs 当前是作为sdk二次封装引入&am…...

编程日记 2025/7/9 0:55:20

服务器中僵尸网络攻击是指什么？

随着网络业务的不断发展&#xff0c;网络攻击的手段也变得越来越多&#xff0c;各个企业都会受到网络攻击的威胁&#xff0c;其中常见的网络攻击主要有DDOS攻击和CC攻击等类型&#xff0c;今天小编则为大家来介绍僵尸网络攻击是指什么&#xff01; 僵尸网络主要是指采用一种或者…...

编程日记 2025/7/25 15:52:42

Java编程中常见的条件链与继承陷阱

格式错误的if-else条件链 典型结构与常见错误模式 在Java编程中，if-else条件链是一种常见的多条件处理模式，其标准结构如下： if (condition1) {// 处理逻辑1 } else if (condition2) {// 处理逻辑2 } else...

编程日记 2025/7/8 0:39:04

跟进一下目前最新的大数据技术

搭建最新平台 40C64G服务器&#xff0c;搭建3节点kvm&#xff0c;8C12G。 apache-hive-4.0.1-bin apache-tez-0.10.4-bin flink-1.20.1 hadoop-3.4.1 hbase-2.6.2 jdk-11.0.276 jdk8u452-b09 jdk8终于可以不用了 spark-3.5.5-bin-hadoop3 zookeeper-3.9.3 trino…...

编程日记 2025/7/25 10:57:01

ubuntu 系统分区注意事项

ubuntu 系统分区大小&#xff0c;注意事项&#xff1a; 安装ubuntu系统时&#xff0c;需要进行分区&#xff0c;手动分区时&#xff0c;有一点需要注意。一开始我也没有注意&#xff0c;长时间使用后才发现的问题。 需要注意一点&#xff0c;如果不对 /usr 进行单独分区&…...

编程日记 2025/7/24 16:09:13

当前市场环境下，软件行业的突围之道：技术演进与商业模式重构

一、行业背景&#xff1a;软件行业进入结构性调整期 2024年至今&#xff0c;软件行业面临三重挑战&#xff1a; 宏观经济承压&#xff1a;全球经济放缓&#xff0c;企业IT预算趋于谨慎&#xff1b; 资本市场收缩&#xff1a;融资环境收紧&#xff0c;盈利能力成为生死线&…...

编程日记 2025/7/5 20:34:16

Redis——主从哨兵配置

目录 基础概念 ‌一、核心原理‌ ‌二、核心特性‌ ‌三、技术意义与应用价值‌ ‌四、典型应用场景‌ 案例部署 ‌一、主从复制配置命令‌ ‌二、哨兵模式部署命令‌ ‌关键注意事项‌ 基础概念 ‌一、核心原理‌ ‌内存存储与高性能‌ Redis 所有数据存储于内存中&…...

编程日记 2025/7/7 0:38:32

系统模块与功能设计框架

系统模块与功能设计框架&#xff0c;严格遵循专业架构设计原则&#xff0c;基于行业标准&#xff08;如微服务架构、DDD领域驱动设计&#xff09;构建。设计采用分层解耦模式&#xff0c;确保可扩展性和可维护性&#xff0c;适用于电商、企业服务、数字平台等中大型系统。 系统…...

编程日记 2025/7/24 15:33:53

我爱学算法之—— 前缀和（中）

一、724. 寻找数组的中心下标 题目解析 这道题&#xff0c;给定数组nums&#xff0c;要求我们找出这个数组的中心下标。 **中心下标&#xff1a;**指左侧所有元素的和等于右侧所有元素的和。 如果存在多个中心数组下标&#xff0c;就返回最左侧的中心数组下标。 算法思路 暴…...

编程日记 2025/7/21 13:33:52

leetcode sql50题

在中文站没找到对应的集合&#xff0c;想来自己动手拷贝过来&#xff0c;方便大家面试复习用&#xff0c;对应英文站点&#xff1a; https://leetcode.com/studyplan/top-sql-50/ Select #1757. 可回收且低脂的产品 链接: https://leetcode.cn/problems/recyclable-and-low-fa…...

编程日记 2025/7/8 20:54:10

word操作（持续更新）

1、图片前面&#xff08;无间隔格式&#xff09;&#xff0c;有像标题标记一样的黑点 word段落左边的黑色小方块小黑点是什么(段落的换行和分页属性)_哔哩哔哩_bilibili...

编程日记 2025/7/11 23:19:36

AURA智能助手在物联网（IoT）和数字化改造领域的使用

要设计一款在物联网（IoT）和数字化改造领域占据市场主导的AURA智能助手，产品经理需从行业痛点、技术架构、商业模式、生态整合四大维度切入，深度融合工业场景的特殊性。以下是系统性设计框架与落地策略： 一、精准定位：直击工业场景核心痛点 1. 解决企业级关键问题 场景痛…...

编程日记 2025/7/12 2:52:21

怎么把自己电脑设置成服务器？

将自己的电脑设置为服务器可以让您托管网站、文件共享或运行各种服务。以下是设置步骤&#xff1a; 基本设置步骤 ‌选择操作系统‌&#xff1a; Windows&#xff1a;可使用IIS&#xff08;Internet Information Services&#xff09;Linux&#xff1a;常用Apache、Nginx等mac…...

编程日记 2025/7/6 6:23:43

Elasticsearch从安装到实战、kibana安装以及自定义IK分词器/集成整合SpringBoot详细的教程ES（三）

DSL官方地址&#xff1a; DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;https://www.elastic.co/docs/explore-analyze/query-filter/languages/querydsl&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0…...

编程日记 2025/7/24 7:51:20

神经网络 隐藏层

神经网络中隐藏层的数量是一个超参数&#xff0c;其选择取决于任务复杂度、数据规模和计算资源。以下是常见的架构类型及其适用场景&#xff1a; 1. 单层隐藏层&#xff08;浅神经网络&#xff09; 结构&#xff1a;输入层 → 1 个隐藏层 → 输出层特点&#xff1a; 仅需调整…...

编程日记 2025/7/12 3:57:56

React Hooks 指南：何时使用 useEffect ?

在 React 的函数组件中&#xff0c;useEffect Hook 是一个强大且不可或缺的工具。它允许我们处理副作用 (side effects)——那些在组件渲染之外发生的操作。但是&#xff0c;什么时候才是使用 useEffect 的正确时机呢&#xff1f;让我们深入探讨一下&#xff01; 什么是副作用…...

编程日记 2025/7/26 8:54:24

API标准的本质与演进：从 REST 架构到 AI 服务集成

在当今数字化浪潮中&#xff0c;API 已成为系统之间沟通与协作的“语言”&#xff0c;REST&#xff08;Representational State Transfer&#xff0c;表述性状态转移&#xff09;是一种基于 HTTP 协议的 Web 架构风格。它不仅改变了 Web 应用开发的方式&#xff0c;也成为构建现…...

编程日记 2025/7/25 5:00:55

C++核心编程_继承同名成员处理方式

问题&#xff1a;当子类与父类出现同名的成员&#xff0c;如何通过子类对象&#xff0c;访问到子类或父类中同名的数据呢&#xff1f; 访问子类同名成员 直接访问即可 访问父类同名成员 需要加作用域 class Base { public:Base(){m_A 100;}void func(){cout << "B…...

编程日记 2025/7/8 23:33:49

PHP文件读取漏洞全面剖析：触发点与利用技术

PHP文件读取漏洞全面剖析&#xff1a;触发点与利用技术 引言 PHP作为Web开发中最流行的语言之一&#xff0c;其文件操作功能强大但也暗藏风险。文件读取漏洞是PHP应用中最常见的安全问题之一&#xff0c;攻击者利用这些漏洞可以读取服务器敏感文件&#xff0c;甚至实现远程代…...

编程日记 2025/7/7 13:07:16

解决SQL Server SQL语句性能问题（9）——SQL语句改写（2）

9.4.3. update语句改写 与Oracle类似，SQL Server中，update语句被用户相关技术人员广泛应用于现实日常工作中。但是，有些情况下，尤其是海量数据场景中，update语句也许会带来性能方面的严重问题或极大隐患。因此，为了解决和消除update语句导致的性能问题或隐患，我们将需对…...

编程日记 2025/7/6 6:22:53