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

Java Web学习笔记5——基础标签和样式

news 2026/1/1 16:19:26

<!DOCTYPE html>

html有很多版本，那我们应该告诉用户和浏览器我们现在使用的是HMTL哪个版本。

声明为HTML5文档。

字符集：

UTF-8：现在最常用的字符编码方式。

GB2312：简体中文

BIG5：繁体中文、港澳台等方式；

GBK：全部中文字符：是GB2312的扩展，加入对繁体字的支持，兼容GB2312  （国标的扩展）

记住：以后，我们统一使用UTF-8字符集，这样就避免出现字符集不统一而引起的乱码的情况。

图片标签：<img>

src: 指定图像的URL（绝对路径/相对路径）

绝对路径：

绝对磁盘路径

绝对网络路径

相对路径：

./  当前路径  ./可以省略

../ 上一级目录

修改好文件，要注意保存。

width：图像的宽度（像素px/相对于父元素的百分比）

height：图像的高度（像素px/相对于父元素的百分比）

标题标签：<h1>...<h6>

水平分割线：<hr>

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器的兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body><img src="img/news_logo.png"> 新浪政务 > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr>2024年6月4日 21:50 央视网<hr>
</body>
</html>

CSS的引入方式：

1）行内样式：写在标签的style属性中（不推荐）

<h1 style="XXX: XXX; XXX: XXX;">中国新闻网</h1>

属性名：属性值

2）内嵌样式：写在style标签中（可以写在页面的任何位置，但通常约定写在head

中）

<style>

h1 {

XXX: XXX;

XXX: XXX;

}

</style>

3）外联样式：写在一个单独的.css文件中（但需要通过link标签在网页中引入）。

h1 {

XXX: XXX;

XXX: XXX;

}

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器的兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title><!-- 方式二：内嵌样式 --><style>h1 {color: red;}</style><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><img src="img/news_logo.png"> 新浪政务 > 正文<!-- 方式一：行内的样式 不推荐<h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> --><h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr>2024年6月4日 21:50 央视网<hr>
</body>
</html>

颜色表示方法：

相关文章：

Java Web学习笔记5——基础标签和样式

<!DOCTYPE html> html有很多版本&#xff0c;那我们应该告诉用户和浏览器我们现在使用的是HMTL哪个版本。 声明为HTML5文档。 字符集&#xff1a; UTF-8&#xff1a;现在最常用的字符编码方式。 GB2312&#xff1a;简体中文 BIG5&#xff1a;繁体中文、港澳台等方式…...

编程日记 2024/6/5 7:49:39

01_深度学习基础知识

1. 感知机 感知机通常情况下指单层的人工神经网络，其结构与 MP 模型类似（按照生物神经元的结构和工作原理造出来的一个抽象和简化了模型，也称为神经网络的一个处理单元） 假设由一个 n 维的单层感知机，则： x 1 x_1 x1​ 至 x n x_n xn​ 为 n 维输入向量的各个分量w 1 j…...

编程日记 2024/6/5 7:48:38

60、最大公约数

最大公约数 题目描述 给定n对正整数ai,bi&#xff0c;请你求出每对数的最大公约数。 输入格式 第一行包含整数n。 接下来n行&#xff0c;每行包含一个整数对ai,bi。 输出格式 输出共n行&#xff0c;每行输出一个整数对的最大公约数。 数据范围 1 ≤ n ≤ 1 0 5 , 1≤n≤…...

编程日记 2024/6/5 7:47:37

设计模式在芯片验证中的应用——迭代器

一、迭代器设计模式 迭代器设计模式(iterator)是一种行为设计模式&#xff0c; 让你能在不暴露集合底层表现形式 &#xff08;列表、 栈和树等数据结构&#xff09; 的情况下遍历集合中所有的元素。 在验证环境中的checker会收集各个monitor上送过来的transactions&#xff0…...

编程日记 2024/6/5 7:45:36

imx6ull - 制作烧录SD卡

1、参考NXP官方的手册《i.MX_Linux_Users_Guide.pdf》的这一章节&#xff1a; 1、SD卡分区 提示&#xff1a;我们常用的SD卡一个扇区的大小是512字节。 先说一下i.MX6ULL使用SD卡启动时的分区情况&#xff0c;NXP官方给的镜像布局结构如下所示&#xff1a; 可以看到&#xff0c…...

编程日记 2024/6/5 7:40:31

使用chatgpt api快速分析pdf

需求背景 搞材料的兄弟经常要分析pdf&#xff0c;然后看到国外有产品是专门调用chatpdf来分析pdf的&#xff0c;所以就来问我能不能帮他也做一个出来。正好我有chatgpt的api&#xff0c;所以就研究了一下这玩意怎么弄。 需求分析 由于chatgpt是按字符算钱的&#xff0c;所以…...

编程日记 2024/6/5 7:37:29

Vue：状态管理pinia

安装 npm install pinia在 main.js 中注册 // main.jsimport { createApp } from vue import { createPinia } from "pinia"; import App from ./app.vueconst app createApp(App) const pinia createPinia(); app.use(pinia).mount(#app)创建 store // stores/…...

编程日记 2024/6/5 7:36:28

【Android Studio】导入import android.support.v7.app.AppcompatActivity；时报错

一、问题描述 在进行安卓项目开发时使用import android.support.v7.app.AppcompatActivity;报错&#xff1a; 运行后会有乱码出现&#xff1a; 二、解决办法 将import android.support.v7.app.AppcompatActivity;改为import androidx.appcompat.app.AppCompatActivity;基本上…...

编程日记 2024/6/5 7:34:26

汽车区域控制器技术分析

汽车区域控制器的起源与发展 随着汽车技术的不断发展，汽车电子电气架构也在经历着深刻的变革。汽车区域控制器作为一种新兴的技术，正逐渐成为汽车电子电气架构的重要组成部分。 在早期，汽车电子电气架构主要采用分布式架构。这种架构下，各个电子控制单元（ECU）分别负责不…...

编程日记 2024/6/5 7:33:25

myEclipse新手使用教程

myEclipse新手使用教程 一、引言 myEclipse是一款流行的Java集成开发环境&#xff08;IDE&#xff09;&#xff0c;它集成了众多的开发工具&#xff0c;为Java开发者提供了一个强大的开发平台。本文将详细介绍如何下载、安装和配置myEclipse&#xff0c;以及如何创建一个简单…...

编程日记 2024/6/5 7:31:22

【WPF编程宝典】第6讲：资源

研究了 WPF 资源系统使得在应用不同部分可以重用相同对象的原理&#xff0c;介绍了如何在代 码和标记中声明资源&#xff0c;如何提取系统资源&#xff0c;以及如何使用类库程序集在应用程序之间共享资源。 1.资源基础 1.1静态资源和动态资源 区别&#xff1a;静态资源只从资…...

编程日记 2024/6/5 7:30:21

容器化部署Pig微服务快速开发框架

系统说明 基于 Spring Cloud 、Spring Boot、 OAuth2 的 RBAC 企业快速开发平台&#xff0c; 同时支持微服务架构和单体架构 提供对 Spring Authorization Server 生产级实践&#xff0c;支持多种安全授权模式 提供对常见容器化方案支持 Kubernetes、Rancher2 、Kubesphere、E…...

编程日记 2024/6/5 7:26:16

Windows编程：图标资源、光标资源、字符串资源、加速键资源、WM_PAINT消息、绘图

承接前文&#xff1a; win32窗口编程windows 开发基础win32-注册窗口类、创建窗口win32-显示窗口、消息循环、消息队列win32-鼠标消息、键盘消息、计时器消息、菜单资源 本文目录 图标资源光标资源WM_SETCURSOR 消息 字符串资源加速键资源WM_PAINT 消息绘图绘图编程绘图基础基…...

编程日记 2024/6/5 7:25:14

【2024 短剧0元轻资产创业风口】做自己的老板，做新媒体的领路人

好省短剧邀请码2Urux1ZoQm(长按复制粘贴即可)大多数好省短剧推广活动都会通过官方渠道发布邀请码。您可以通过关注官方社交媒体账号、订阅电子邮件通知或参与官方网站上的活动，获得邀请码的机会。官方渠道通常会提前公布邀请码的获取方式和条件，您只需按照要求执行即可。好省…...

编程日记 2024/6/5 7:24:13

Docker安装Bitbucket

centos7版本 [rootlocalhost ~]# cat /etc/os-release NAME"CentOS Linux" VERSION"7 (Core)" ID"centos" ID_LIKE"rhel fedora" VERSION_ID"7" PRETTY_NAME"CentOS Linux 7 (Core)" ANSI_COLOR"0;31"…...

编程日记 2024/6/5 7:21:10

FlyMcu串口下载STLINK Utility

一、FlyMcu程序烧录软件 1、可以通过串口给STM32下载程序&#xff0c;如果没有STLINK&#xff0c;就可以用这个软件通过串口下载程序&#xff0c;和STC的51单片机的烧录软件STC-ISP一样&#xff0c;通过串口给单片机下载程序 2、创建串口下载所需要的HEX文件 3、选择串口和波…...

编程日记 2024/6/5 7:20:07

CSS（盒子模型，定位，浮动，扩展）

CSS 盒子模型&#xff1a;外边距&#xff1a;内边距&#xff1a;水平居中&#xff1a; 定位&#xff1a;相对定位&#xff1a;绝对定位&#xff1a;固定定位&#xff1a; 浮动&#xff1a;扩展&#xff1a; 盒子模型&#xff1a; 盒子模型(Box Model) 规定了元素框处理元素内容…...

编程日记 2024/6/5 7:19:06

AIGC如何改变人类生活20240529

AIGC如何改变人类生活 随着人工智能技术的不断发展&#xff0c;人类生活正经历着前所未有的变革。在这个过程中&#xff0c;AIGC&#xff08;人工智能生成内容&#xff09;的概念应运而生&#xff0c;它已经在很多领域产生了深远的影响。本文将探讨AIGC如何改变人类生活&#…...

编程日记 2024/6/5 7:18:05

【python】成功解决“TypeError: ‘method’ object is not subscriptable”错误的全面指南

成功解决“TypeError: ‘method’ object is not subscriptable”错误的全面指南 一、引言 在Python编程中&#xff0c;TypeError: method object is not subscriptable错误是一个常见的陷阱&#xff0c;特别是对于初学者来说。这个错误通常意味着你尝试像访问列表、元组、字典…...

编程日记 2024/6/5 7:17:04

若依 Spring Security 短信，扫码登录

1. 修改 LoginBody&#xff0c;添加登录类型字段 Data public class LoginBody {/*** 用户名*/private String username;/*** 用户密码*/private String password;/*** 验证码*/private String code;/*** 唯一标识*/private String uuid;/*** 登录类型*/private String logi…...

编程日记 2024/6/5 7:14:00

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/12/30 22:50:19

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/12/21 5:00:07

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/12/11 1:32:07

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/12/15 1:25:04

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/1/1 10:28:21

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/12/30 11:55:59

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/11/13 8:14:48

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2025/12/26 23:55:29