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

【JavaWeb】day01-HTMLCSS

news 文章来源：https://blog.csdn.net/m0_50521311/article/details/135281112 2025/1/16 3:45:46

day01-HTML&CSS

HTML

图片标签：<img>
- src：指定图像URL（绝对路径/相对路径）
- width：图像宽度（像素/相对于父元素的百分比）
- height：图像高度（像素/相对于父元素的百分比）
标题标签：<h1> - <h6>
水平线标签：<hr>

<body><!-- img标签：src：图片资源路径width：宽度(px:像素; %:相对于父元素的百分比)height：高度(px:像素; %:相对于父元素的百分比)路径书写方式：绝对路径：1.绝对磁盘路径：D:\Desktop\JavaWeb学习\HTML\img\news_logo.png<img src="D:\Desktop\JavaWeb学习\HTML\img\news_logo.png">2.绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png相对路径：./  当前目录../ 上一级目录    -->  <img src="img/news_logo.png"> 新浪政务 > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr>2023年03月02日 21:50 央视网<hr></body>

超链接：<a>
- href：指定资源访问的url
- target：指定在何处打开资源链接
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开

<a href="http://gov.sina.com.cn/" target="_self">新浪政务</a><style>a:hover {color: #FF6600; /* 鼠标悬停时改变颜色 */}a {color: black;text-decoration: none;/* 去除下划线 */}
</style>

视频标签：<video>
- src：规定视频url
- controls：显示播放控件
- width：播放器宽度
- height：播放器高度
音频标签：<audio>
- src：规定音频url
- controls：显示播放控件
段落标签：<p>
文本加粗标签：<b>/<strong>

<!-- 视频 -->
<video src="video/1.mp4" controls width="950px"></video>
<!-- 音频 -->
<audio src="audio/1.mp3" controls></audio>
<style>p {text-indent: 2em;/* 设置段落首行缩进两个字符 */line-height: 40px;/* 设置行高为40px */}
</style>

表格标签

<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg"  width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>

表单标签
- <input>：定义表单项，通过type属性控制输入形式
- <select>：定义下拉列表
- <textarea>：定义文本域
- action：规定当提交表单时向何处发送表单数据，URL
- method：规定用于发送表单数据的方式。GET、POST

<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>

CSS

引入方式

行内样式
内嵌样式
外联样式

<head><title>焦点访谈</title><!-- 方案二：内嵌样式 --><style>h1 {color: #4D4F53;}</style> <!-- 方案三：外联样式 --><link rel="stylesheet" href="css/news.css">
</head>
<body>  <!-- 方案一：行内样式 --><h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>
</body>

颜色表示

关键字：red、green
rgb：rgb(255,0,0)、rgb(111,222,233)
十六进制：#ff0000、#cccccc、#ccc

h1 {/* color: red; *//* color: rgb(0, 0, 255); */color: #4D4F53;
}

CSS选择器

元素选择器

id选择器

类选择器

优先级：id > 类 >元素

盒子模型

组成： 内容（content）、内边距（padding）、边框（border）、外边距（margin）

属性：

width：设置宽度
height：设置高度
border：设置边框的属性，如：1px solid #000；
padding：内边距
margin：外边距
注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right …

布局标签

div标签：

一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）

span标签：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width、height）
外边距

布局标签

div标签：

一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）

span标签：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width、height）

【JavaWeb】day01-HTMLCSS

day01-HTML&CSS HTML 图片标签：<img> src：指定图像URL（绝对路径/相对路径）width：图像宽度（像素/相对于父元素的百分比）height：图像高度（像素/相对于父元素的百…...

编程日记 2023/12/30 20:15:45

【工具】windeployqt 在windows + vscode环境下打包

目录 0.背景简介 1.windeployqt简介 2.打包具体过程 1）用vscode编译，生成Release文件夹（也有Debug文件夹，但是发布版本一般都是用Release） 2）此时可以看下Release文件夹内，一般是.exe可执行…...

编程日记 2023/12/30 20:12:42

跟着LearnOpenGL学习12--光照贴图

文章目录一、前言二、漫反射贴图三、镜面光贴图3.1、采样镜面光贴图一、前言在跟着LearnOpenGL学习11–材质中，我们讨论了让每个物体都拥有自己独特的材质从而对光照做出不同的反应的方法。这样子能够很容易在一个光照的场景中给每个物体一个独特的外观&#xf…...

编程日记 2023/12/30 20:08:39

DotNet 命令行开发

DotNet 命令行开发下载安装下载 SDK安装 SDK绿色版下载绿化脚本常用命令创建 dotnet new运行 dotnet run发布应用 dotnet publish更多命令 VSCode 调试所需插件调试 CS 配置项目.csproj排除依赖关系 launch.jsontasks.json 参考资料下载安装下载 SDK 我们就下最新的好&am…...

编程日记 2023/12/30 20:03:34

hyperf console 执行

一、原理描述 hyperf中，不难发现比如自定义控制器中获取参数，hyperf.php中容器获取，传入的都是接口，而不是实体类。这是因为框架中的配置文件有设置对应抽象类的子类，框架加载的时候将其作为数组，使用的…...

编程日记 2023/12/30 19:59:31

第一篇设计模式引论 - 探索软件设计的智慧结晶

1. 设计模式的定义和起源设计模式，这个术语最初在建筑领域被广泛使用，用来描述在建筑设计中反复出现的问题及其解决方案。在软件工程中，设计模式同样指的是在软件设计过程中反复出现的、经过验证的最佳实践和解决方案。 1994年&#xff0c…...

编程日记 2023/12/30 19:58:30

HBase基础知识（六）：HBase 对接 Hive

1. HBase 与 Hive 的对比 1．Hive (1) 数据仓库 Hive 的本质其实就相当于将 HDFS 中已经存储的文件在 Mysql 中做了一个双射关系，以方便使用 HQL 去管理查询。 (2) 用于数据分析、清洗 Hive 适用于离线的数据分析和清洗，延迟较高。 (3) 基于…...

编程日记 2023/12/30 19:55:26

Java连接Mysql报错：javax.net.ssl.SSLException: Received fatal alert: internal_error

大致报错日志如下： The last packet successfully received from the server was 11 milliseconds ago. The last packet sent successfully to the server was 10 milliseconds ago.at sun.reflect.GeneratedConstructorAccessor275.newInstance(Unknown Source)…...

编程日记 2023/12/30 19:49:18

Mixtral 8*7B + Excel + Python 超强组合玩转数据分析

Mixtral 8*7B Excel Python 超强组合玩转数据分析 0. 背景1. 使用 Mixtral 8*7B pandas 实现数据导入和导出1.1 使用 Mixtral 8*7B pandas 导入 Excel 文件中的数据1.2 使用 Mixtral 8*7B pandas 导出 Excel 文件中的数据 2. 使用 Mixtral 8*7B pandas 实现单个文件数据的…...

编程日记 2023/12/30 19:48:17

深入浅出理解Web认证：Session、Cookie与Token

在Web开发的世界中，理解Session、Session ID、Cookie和Token之间的区别至关重要。实际上，这些概念并不复杂，只需几句话就能澄清它们的核心区别。首先，我们需要区分Session和Session ID。Session实际上是存储在服务器端的数据&am…...

编程日记 2023/12/30 19:47:16

智慧零售技术探秘：关键技术与开源资源，助力智能化零售革新

智慧零售是一种基于先进技术的零售业态，通过整合物联网、大数据分析、人工智能等技术，实现零售过程的智能化管理并提升消费者体验。实现智慧零售的关键技术包括商品的自动识别与分类、商品的自动结算等等。为了实现商品的自动识别与分类，…...

编程日记 2023/12/30 19:46:14

2012年第一届数学建模国际赛小美赛B题大规模灭绝尚未到来解题全过程文档及程序

2012年第一届数学建模国际赛小美赛 B题大规模灭绝尚未到来原题再现： 亚马逊是地球上现存最大的雨林，比地球上任何地方都有更多的野生动物。它位于南美洲大陆的北侧，共有9个国家：巴西、玻利维亚、厄瓜多尔、秘鲁、哥伦比亚、委…...

编程日记 2023/12/30 19:45:13

macos管理本地golang的多版本sdk

背景无论你是哪个编程语言的开发者，例如 Java、Go 等，通常在本地开发过程中，你经常需要安装相应的 SDK。由于各种原因，往往需要在不同的项目中来回切换多个版本的 SDK。安装步骤 1.安装homebrew /bin/bash -c "$(curl -…...

编程日记 2023/12/30 19:43:10

count distinct在spark中的运行机制

文章目录预备数据和执行语句Expand第一次HashAggregateShuffle and Second HashAggregate最后结果性能原文预备数据和执行语句 SELECT COUNT(*), SUM(items), COUNT(DISTINCT product), COUNT(DISTINCT category) FROM orders;假设源数据分布在两个1核的结点上&#xff0…...

编程日记 2023/12/30 19:42:09

创建加密分区或者文件

文章目录 [GParted 中已清除的分区与未格式化的分区](https://superuser.com/questions/706624/cleared-vs-unformatted-partition-in-gparted)创建加密分区解密创建的加密分区以便挂载格式化设备未具体的格式（这里为ext4格式）创建挂载点目录挂载加密的文…...

编程日记 2023/12/30 19:36:01

STL——遍历算法

1.for_each 函数原型： for_each(iterator beg, iterator end, _func);——// 遍历算法遍历容器元素； beg 开始迭代器；end 结束迭代器； _func 函数或者函数对象 #include<iostream> using namespace std; #include<ve…...

编程日记 2023/12/30 19:35:00

C语言经典算法【每日一练】20

题目：有一个已经排好序的数组。现输入一个数，要求按原来的规律将它插入数组中。 1、先排序 2、插入 #include <stdio.h>// 主函数 void main() {int i,j,p,q,s,n,a[11]{127,3,6,28,54,68,87,105,162,18};//排序（选择排序&#xff09…...

编程日记 2023/12/30 19:31:56

Linux磁盘阵列

一.RAID磁盘阵列介绍 RAID（Redundatnt Array of lndependent Disks），全称为：独立冗余磁盘阵列解释： RAID是一种把多块独立的硬盘（物理硬盘）按不同的方式组合起来形成一个硬盘组（逻…...

编程日记 2023/12/30 19:27:52

本地网络禁用了在哪里开启？

在当今数字化时代，网络已经成为人们生活中不可或缺的一部分。然而，有时我们可能需要禁用本地网络，无论是出于安全考虑、提高专注力还是其他原因。本文将探讨禁用本地网络的方法以及如何在需要时重新开启网络连接。第一部分：禁用…...

编程日记 2023/12/30 19:26:51

[mysql 基于C++实现数据库连接池连接池的使用] 持续更新中

目背景常见的MySQL、Oracle、SQLServer等数据库都是基于C/S架构设计的，即（客户端/服务器）架构，也就是说我们对数据库的操作相当于一个客户端，这个客户端使用既定的API把SQL语句通过网络发送给服务器端，MyS…...

编程日记 2023/12/30 19:24:49

【Flink SQL API体验数据湖格式之paimon】

前言随着大数据技术的普及，数据仓库的部署方式也在发生着改变，之前在部署数据仓库项目时，首先想到的是选择国外哪家公司的产品，比如：数据存储会从Oracle、SqlServer中或者Mysql中选择，ETL工具会从Informa…...

编程日记 2023/12/30 19:23:47

idea导入spring-framework异常：error: cannot find symbol

从github上clone代码spring-framework到本地后导入idea，点击gradle构建后控制台提示异常： 具体异常信息： /Users/ZengJun/Desktop/spring-framework/buildSrc/src/main/java/org/springframework/build/KotlinConventions.java:44: error:…...

编程日记 2023/12/30 19:22:47

Unity坦克大战开发全流程——开始场景——开始界面

开始场景——开始界面 step1：设置UI 反正按照这张图拼就行了 step2：写脚本前面的拼UI都是些比较机械化的工作，直到这里写代码的时候才真正开始有点意思了，从这里开始，我们就要利用面向对象的思路来进行分析&#xff1…...

编程日记 2023/12/30 19:18:42

【SpringCloud】从实际业务问题出发去分析Eureka-Server端源码

文章目录前言1.EnableEurekaServer2.初始化缓存3.jersey应用程序构建3.1注册jeseryFilter3.2构建JerseyApplication 4.处理注册请求5.registry（） 前言前段时间遇到了一个业务问题就是k8s滚动发布Eureka微服务的过程中接口会有很多告警，当时…...

编程日记 2023/12/30 19:14:39

Java 代理模式

一、代理模式概述代理模式是一种比较好理解的设计模式。简单来说就是我们使用代理对象来代替对真实对象(real object)的访问，这样就可以在不修改原目标对象的前提下，提供额外的功能操作，扩展目标对象的功能。代理模式的主要作用是扩展目标…...

编程日记 2023/12/30 19:11:35

【Java干货教程】JSON，JSONObject，JSONArray类详解

一、定义 JSON：就是一种轻量级的数据交换格式，被广泛应用于WEB应用程序开发。JSON的简洁和清晰的层次结构，易于阅读和编写；同时也易于机器解析和生成，有效的提升网络传输效率；支持多种语言，很多…...

编程日记 2023/12/30 19:10:34

2023年高级软考系统架构师考题参考

对于一些有实践经验的同学来说，感觉不难，但是落笔到纸面上，就差强人意了，平时这方面要多练习，所想所思要落到纸面上，或者表达清晰让别人听懂，不仅是工作中的一个基本素质，也是个非常…...

编程日记 2023/12/30 19:09:33

【c语言】飞机大战（1）

提前准备好游戏要的素材，可以到爱给网去找，飞机大战我们需要的是一个我方战机图片，一个背景图，三个敌方战机的图，我方战机的图片，敌方战机的图片，并且将图片和.cpp放在同一文件夹下. 这里创建.…...

编程日记 2023/12/30 19:03:28

关于 K8s 的一些基础概念整理

〇、前言 Kubernetes，将中间八个字母用数字 8 替换掉简称 k8s，是一个开源的容器集群管理系统，由谷歌开发并维护。它为跨主机的容器化应用提供资源调度、服务发现、高可用管理和弹性伸缩等功能。下面简单列一下 k8s 的几个特性： 自…...

编程日记 2023/12/30 18:55:19

Node.js-fs、path、http模块

1.初识Node.js 1.1 什么是Node.js 1.2 Node.js中的JavaScript运行环境 1.3 Node.js可以做什么 Node.js 作为一个JavaScript 的运行环境，仅仅提供了基础的功能和 AP1。然而，基于 ode.s 提供的这些基础能，很多强大的工具和框架如雨后春笋&…...

编程日记 2023/12/30 18:54:18

营销网站建设评估及分析/百度网址大全首页链接

目录 1.视图对象 1.1创建视图 1)简单视图 2）建立只读视图 3）复杂视图 1.2管理视图 1）查看视图定义 2）修改视图定义 3）重新编译视图 4）删除视图 2.索引 2.1索引概述 2.2创建索引 1&#xff09…...

编程日记 2025/1/16 3:27:38

外贸网站好做吗/网络推广是什么工作内容

介绍此款源码是彻底解放劳动人民的双手，全自动采集，模板代码也进行了全面优化，更加有助于SEO 下载链接 http://www.bytepan.com/iTHwNKE6vZD 图片...

编程日记 2025/1/15 23:55:46

做此广告的网站/长沙优化官网服务

在cmd命令行中切换到指定目录，或者直接使用绝对路径。 certutil -hashfile D:\file.txt MD5 certutil -hashfile D:\file.txt SHA1 certutil -hashfile D:\file.txt SHA256 如图生成文件MD5值。...

编程日记 2025/1/15 16:49:23

网站建设无锡/口碑营销的产品

在发送通知邮件的时候， 假如可以有漂亮的邮件模板就更好了，但是出于安全的原因， 邮件一般不支持 link 或者 style 样式，只能通过内联的方式。找到了 The Automatic CSS Inliner Tool。有了自动转换工具，那就简单了。首…...

编程日记 2025/1/15 15:51:24

有域名了怎么做网站/百度信息流推广技巧

目录一、RequestMapping1.作用范围：2.属性二、请求参数的绑定三、请求参数乱码问题四、自定义类型转换器1.定义一个转换类实现Converter接口2.在springmvc的配置文件中配置类型转换器3.在springmvc配置文件中引用配置的类型转换五、使用Servlet原生API六、一些常用注…...

编程日记 2025/1/15 14:28:41

襄城县城乡建设管理局网站/网络服务器价格

一、OAuth2.0授权协议一种安全的登陆协议，用户提交的账户密码不提交到本APP，而是提交到授权服务器，待服务器确认后，返回本APP一个访问令牌，本APP即可用该访问令牌访问资源服务器的资源。由于用户的账号密码并不与本AP…...

编程日记 2025/1/15 13:45:52

day01-HTML&CSS

HTML

CSS

引入方式

颜色表示

CSS选择器

盒子模型

布局标签

布局标签

相关文章：