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

【JavaWeb】day01-HTMLCSS

news 2025/9/11 6:58:05

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>

image-20231229003040629

  • 超链接：<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>
  • 表格标签

image-20231229005916336

<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>

image-20231229010037085

  • 表单标签

    • <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>

image-20231229010738787

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选择器

  • 元素选择器

image-20231229003331647

  • id选择器

image-20231229003426053

  • 类选择器

image-20231229003617817

  • 优先级：id > 类 >元素

盒子模型

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

image-20231229004814834

属性：

  • 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 图片标签&#xff1a;<img> src&#xff1a;指定图像URL&#xff08;绝对路径/相对路径&#xff09;width&#xff1a;图像宽度&#xff08;像素/相对于父元素的百分比&#xff09;height&#xff1a;图像高度&#xff08;像素/相对于父元素的百…...

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

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

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

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

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

文章目录 一、前言二、漫反射贴图三、镜面光贴图3.1、采样镜面光贴图 一、前言 在跟着LearnOpenGL学习11–材质中&#xff0c;我们讨论了让每个物体都拥有自己独特的材质从而对光照做出不同的反应的方法。这样子能够很容易在一个光照的场景中给每个物体一个独特的外观&#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中&#xff0c;不难发现比如自定义控制器中获取参数&#xff0c;hyperf.php中容器获取&#xff0c;传入的都是接口&#xff0c;而不是实体类。 这是因为框架中的配置文件有设置对应抽象类的子类&#xff0c;框架加载的时候将其作为数组&#xff0c;使用的…...

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

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

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

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

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

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

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

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

大致报错日志如下&#xff1a; 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开发的世界中&#xff0c;理解Session、Session ID、Cookie和Token之间的区别至关重要。实际上&#xff0c;这些概念并不复杂&#xff0c;只需几句话就能澄清它们的核心区别。 首先&#xff0c;我们需要区分Session和Session ID。Session实际上是存储在服务器端的数据&am…...

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

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

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

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

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

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

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

macos管理本地golang的多版本sdk

背景 无论你是哪个编程语言的开发者&#xff0c;例如 Java、Go 等&#xff0c;通常在本地开发过程中&#xff0c;你经常需要安装相应的 SDK。由于各种原因&#xff0c;往往需要在不同的项目中来回切换多个版本的 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)创建加密分区解密创建的加密分区以便挂载格式化设备未具体的格式&#xff08;这里为ext4格式&#xff09;创建挂载点目录挂载加密的文…...

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

STL——遍历算法

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

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

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

题目&#xff1a;有一个已经排好序的数组。现输入一个数&#xff0c;要求按原来的规律将它插入数组中。 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};//排序&#xff08;选择排序&#xff09…...

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

Linux磁盘阵列

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

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

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

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

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

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

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

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

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/8/28 23:03:34

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/9/10 3:41:08

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/8/24 18:47:31

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2025/9/9 10:06:25

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

编程新知 2025/8/12 15:57:53

Appium下载安装配置保姆教程（图文详解）

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

编程新知 2025/9/2 16:45:41

基于Uniapp的HarmonyOS 5.0体育应用开发攻略

一、技术架构设计 1.混合开发框架选型 &#xff08;1&#xff09;使用Uniapp 3.8版本支持ArkTS编译 &#xff08;2&#xff09;通过uni-harmony插件调用原生能力 &#xff08;3&#xff09;分层架构设计&#xff1a; graph TDA[UI层] -->|Vue语法| B(Uniapp框架)B --&g…...

编程新知 2025/7/6 5:29:05

python基础语法Ⅰ

python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器&#xff0c;来进行一些算术…...

编程新知 2025/9/9 10:01:57

高保真组件库：开关

一：制作关状态 拖入一个矩形作为关闭的底色：44 x 22，填充灰色CCCCCC，圆角23，边框宽度0，文本为”关“，右对齐，边距2,2,6,2，文本颜色白色FFFFFF。 拖拽一个椭圆，尺寸18 x 18，边框为0。3. 全选转为动态面板状态1命名为”关“。 二：制作开状态 复制关状态并命名为”开…...

编程新知 2025/9/9 10:01:11