HTML和CSS学习

HTML学习

注释

<!--  -->

组成

告诉浏览器我是html文件<!DOCTYPE html>         
<title>浏览器标签</title>
<body>             <!---  其中是主要内容    --->
<p> 段落 </p>    
</body>
</html>   (结束点)

标题 段落

  1. **

    **开始标签 **

    **结束标签 也叫双标签 这里面是

  2. 一级标题标签

    ； 还有

    这是二级标签，相比一级字体变小了；一共有6级标签

字体改变，有序，无序标签的使用

<em> 强调斜体文字   </em> <br>
<u>下划线文字</u><br>
<i>斜体文字</i><br>
<small>小文字</small><br>
<mark>高亮文字</mark><br>
<del>表示内容删除文字</del><br>
<ins>下划线文字</ins>


![image-20250904155404744](bi jii/image-20250904155404744.png)

有序列表

  1. 列表一
  2. 列表二
  3. 列表三

无序列表

  • 苹果
  • 香蕉
  • 橙子

图片

‘<!— img src= —>’

  • alt可以给图片说明

空格 划线换行

’
’

’

表格

  • td data数据
  • th header标题
  • row 行
<table>
<tr>
<th> 姓名</th>
<th> 年龄</th>
</tr>
<tr>
<td> 张三</td>
<td>李四</td>
</tr>
<tr>
<td>10</td>
<td>9</td></table>

ps:若想要其中表格有分割线，则在table后写border=" "

表单

用于搜集不同类型的用户输入

input标签

纯文本:
<input type=text" name=firstname>性别选择：（单选）
<input type="radio" name="sex"value="female" checked>
<input type="radio" name="sex"value="male"checked><br>密码：
<input type="password" name="pwd">  <br>提交文件：
<input type="file"><br>提交按钮：
<input type="submit">选择颜色
<input type="color"><br>

<form action="#"><p><label>用户名 <input type="text" placeholder="请输入内容"></label></p><p><label>密码 <input type="password" placeholder="请输入密码"></label></p><p>性别：<label><input type="radio" name="gender"> 男</label><label><input type="radio" name="gender"> 女</label><label><input type="radio" name="gender"> 其他</label></p><p>爱好：<label><input type="checkbox" name="hobby"> 唱</label><label><input type="checkbox" name="hobby"> 跳</label><label><input type="checkbox" name="hobby"> rap</label><label><input type="checkbox" name="hobby"> 篮球</label></p><p><input type="submit" value="提交"></p>
</form><!-- p标签的使用可以让每行间距更大 更美观 --->
<!-- 被label包围住的标签只要点击文字也可以选中框 -->
<!-- type是固定的  name value名字不是固定的

div标签

  • 块级元素
  • 一个个盒子 可以给页面分块
  • 单单的div是看不见的 要与css结合
<div class=a>
<h1>标题</h1>
<p>主要内容</p>
<p>主要内容</p>
</div>

span标签

  • 行内元素 和div相像
  • 给段落中某段字某种样式
  • 配合css使用
<h2>变<span style="color:blue">色</span>了</h2>

CSS3

html中引用css3

注释

/*  */

优先级：外部CSS < '

1. 外部CSS
.html中
<head>    
<title>我的网站标签</title>  <link rel="stylesheet" href="./css/css1.css">
</head>.css中
body{
background-color:lightblue'
}2.内部CSS
.html的head 和 body中间
<style>h1{background-color: lightblue}p{background-color: black;}
</style>3.行内CSS
<body><h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p></body>

CSS选择器

class类名

  • 可以有好几个
<div class="my-box">
<h2>第一个标题</h2><p>第一个模块</p><p>第二个模块</p>
</div><hr>
<div class="my-box"><h2>第二个标题</h2><p>第三个模块</p><p>第四个模块</p>
</div>.my-box{
background-color:lightblue;
padding:10px;
border:1px solid #ccc;
}

id

  • 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素
  • 一般给table , div之类的 命名
<div id="unique-box"><h2>第一个标题</h2><p>第一个模块</p><p>第二个模块</p>
</div>#unique-box{background-color: rgb(144, 166, 238);padding: 10px;
}

通用选择器

*{
text-align:center;
color:blue;}

分组选择器

h1 {text-align: center;color: red;
}h2 {text-align: center;color: red;
}p {text-align: center;color: red;
}

CSS颜色

背景

background-color:rgb(255, 99, 71);
<h1 style="background-color:DodgerBlue;">China</h1>

文本颜色

color:tomato;
h1 style="color:Tomato;">China</h1>

边框颜色

border:2px solod Tomato
<h1 style="border:2px solid Tomato;">Hello World</h1>

<div id="potato">#potato {border: 2px solid #333;    /* 边框 */padding: 5px;              /* 内边距 */border-radius: 8px;        /* 圆角 */background-image: url("..\GauKIM4aAAMbLnh.jpeg");background-image: ;background-size: cover;    让图片铺满整个div，等比缩放background-repeat: no-repeat; /* 不重复平铺 */background-position: center;  background-color: azure;
}

CSS字体

font-size: 24px;    /*文字大小*/
color: #ccc;       /*文字颜色*/
text-align: center;   /*默认left*/
letter-spacing:15px;   /*字间距 */
font-weight:bolid;   /*加粗*/

表格

<table id="table_css" border>#table_css{width: 300px;height: 300px;border-spacing: 5px;margin: 0 auto;   /* 让表格整体在中央 */
}
#table_css th{text-align: center;  /*单元格中的文本在中央*/}
#table_css td{text-align: center;}/*给某一行设置颜色*/
#table_css tr:nth-child(1) { background-color: rgb(131, 14, 30); } /* 第一行 */
#table_css tr:nth-child(2) { background-color: lightgreen; } /* 第二行 */
#table_css tr:nth-child(3) { background-color: pink; } /* 第三行 *//*给某列data设置颜色，不给head 上色*/
#table_css td:nth-child(2) { background-color: lightgreen; } /* 第二行 */

边框

高度和宽度

auto 浏览器默认高 宽
length 
%
initial 将高 宽设为默认值
inherit 从其父继承div{height:200px;width: 50%;background-color: powerblue;}

边框

样式
border-style
border-radius:5px  //圆角边框
border-top-style:dotted;  //上下左右单独边框
border-right-style: solid;
border-bottom-style:dotted;
border-left-style:solid;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

宽度
border-width
border-width:215px 10px 4px 35px
//对应 上 右 下 左
border-width:medium/thin/thick
颜色
border-color
border-color: red blue green yellow
//对应 上红 左蓝 下绿 右红色
简写
p{
border 5px solid red;
}或者单边定义
p{
border-left:6px solid red
}

外边距

p{
margin-top: 100px;
margin-bottom:100px;
margin-right: 150px;
margin-left: 80px;
}或者简写
margin: 25px 50px 75px 100px;
//上 右 下 左

内边距

padding 
div{padding-top:50px;padding-right:30px;padding-bottom:50px;padding-left:80px;
}

浮动

像word中的图片内嵌之类的

定位

一共五种

position staticrelativefixedabsolutesticky
  1. static

  • 静态定位的元素不受 top、bottom、left 和 right 属性的影响。

    .map{width: 400px;height: 400px;background-color: black;position:static;
}
  1. relative

  • position: relative; 的元素相对于其正常位置进行定位

    .map{width: 400px;height: 400px;background-color: black;position:relative;left:150px;top:0px;
}
  1. fixed

  • position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置

  • top、right、bottom 和 left 属性用于定位此元素。

    <style>
.map{width: 400px;height: 400px;background-color: black;position:fixed;left:150px;top:0px;
}
</style>
  1. absolute

  • position: absolute; 的元素相对于最近的定位祖先元素进行定位

  • 如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动

  • 跟随元素的div要放在父元素的div里面

 .map{width: 400px;height: 200px;background-color: rgb(44, 246, 65);position:fixed;top:150px;left:15px;}.map2{width: 200px;height: 100px;background-color: rgb(0, 0, 0);position:absolute;left:15px;top:50px; <div class="map"><div class="map2"></div></div>

  1. sticky

  2. 重叠元素

    <div class="bg-box"><h1>这是透明度</h1>
</div>.bg-box {background-image: url("https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1LMdmf.img?w=534&h=300&m=6");background-size: cover;   /* 让图片铺满 */background-position: center;width: 300px;height: 300px;
}后面这个方法不好 不推荐
img {position: absolute;left: 0px;top: 0px;z-index: -1;
}

    动画

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

一个颜色块逐渐变色效果

这整块内容都在>

div {width: 100px;height: 100px;background-color: red; animation-name: example1; animation-duration: 4s;
}
@keyframes example1{from{background-color:black;}to {background-color: blue;}
}

颜色块变色和滑动效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/96119.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/96119.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenTenBase vs MySQL vs Oracle，企业级应用数据库实盘对比分析

OpenTenBase vs MySQL vs Oracle，企业级应用数据库实盘对比分析

摘要 因为工作久了的缘故&#xff0c;接触过不少数据库。公司的管理系统用的MySQL&#xff0c;财务系统用的Oracle。随着时代发展&#xff0c;国产开源数据库已经在性能上能与这些国际知名顶尖数据库品牌相媲美&#xff0c;其中OpenTenBase以其开放环境和优越性能脱颖而出&…
阅读更多...
Oracle 备份与恢复常见的七大问题

Oracle 备份与恢复常见的七大问题

为了最大限度保障数据的安全性&#xff0c;同时能在不可预计灾难的情况下保证数据的快速恢复&#xff0c;需要根据数据的类型和重要程度制定相应的备份和恢复方案。在这个过程中&#xff0c;DBA的职责就是要保证数据库&#xff08;其它数据由其它岗位负责&#xff09;的高可用和…
阅读更多...
StringBuilder类的数据结构和扩容方式解读

StringBuilder类的数据结构和扩容方式解读

目录 StringBuilder是什么 核心特性&#xff1a; StringBuilder数据结构 1. 核心存储结构&#xff08;基于父类 AbstractStringBuilder&#xff09; 2. 类定义与继承关系 3. 数据结构的核心特点 StringBuilder数据结构的初始化方式 1. 无参构造&#xff1a;默认初始容量…
阅读更多...
LangChain实战（十七）：构建与PDF/PPT文档对话的AI助手

LangChain实战（十七）：构建与PDF/PPT文档对话的AI助手

本文是《LangChain实战课》系列的第十七篇，将专篇深入讲解如何构建能够与PDF和PPT文档进行智能对话的AI助手。通过学习本文，您将掌握复杂格式文档的解析技巧、文本与表格处理技术，以及实现精准问答的系统方法。 前言 在日常工作和学习中，PDF和PPT文档是我们最常接触的文档…
阅读更多...
鱼眼相机模型

鱼眼相机模型

鱼眼相机模型 最近涉及鱼眼相机模型、标定使用等&#xff0c;作为记录&#xff0c;更新很久不曾更新的博客。 文章目录鱼眼相机模型1 相机成像2 鱼眼模型3 畸变3.1 适用针孔和MEI3.2 Kannala-Brandt鱼眼模型4 代码实现1 相机成像 针孔相机&#xff1a;所有光线从一个孔&#xf…
阅读更多...
大语言模型提示词工程详尽实战指南

大语言模型提示词工程详尽实战指南

引言&#xff1a;与大型语言模型&#xff08;LLM&#xff09;高效对话的艺术大型语言模型&#xff08;LLM&#xff09;——例如我们熟知的GPT系列、Claude、Llama等——在自然语言处理&#xff08;NLP&#xff09;领域展现了惊人的能力&#xff0c;能够执行文本摘要、翻译、代码…
阅读更多...
HTTP 请求体格式详解

HTTP 请求体格式详解

1. 概览与概念 Content-Type&#xff1a;HTTP 请求/响应头&#xff0c;表示消息体的媒体类型&#xff08;MIME type&#xff09;。服务端用它决定如何解析请求体。常见场景&#xff1a; 纯结构化数据&#xff08;JSON&#xff09; → application/json表单 文件上传 → multip…
阅读更多...
事务设置和消息分发

事务设置和消息分发

事务 RabbitMQ是基于AMQP协议实现的&#xff0c;该协议实现了事务机制&#xff0c;因此RabbitMQ也支持事务机制. SpringAMQP也提供了对事务相关的操作&#xff0c;RabbitMQ事务允许开发者确保消息的发送和接收是原子性的&#xff0c;要么 全部成功&#xff0c;要么全部失败.| 前…
阅读更多...
Python 中 try / except / else / finally 异常处理详解

Python 中 try / except / else / finally 异常处理详解

1. 基本结构 try:# 可能会抛出异常的代码 except SomeException as e:# 捕获并处理异常 else:# 如果 try 中代码没有异常&#xff0c;就执行这里 finally:# 无论是否发生异常&#xff0c;最后都会执行这里2. 各部分的作用 try 用途&#xff1a;包含可能发生异常的代码段。如果代…
阅读更多...
冰火岛 Tech 传：Apple Foundation Models 心法解密（下集）

冰火岛 Tech 传：Apple Foundation Models 心法解密（下集）

引子 上集说到冰火岛冰屋内，谢逊、张翠山、殷素素三人亲见 “指令（Instructions）” 如何让 AI 脱胎换骨，从木讷报地名的 “愣头青”，变身为文采斐然的 “旅行作家”。 正当素素惊叹这 AI 武学的奇妙时，谢逊却突然神色一凛，指着手腕上用冰屑刻的 “4096” 字样道：“这等…
阅读更多...
Qt信号与槽机制全面解析

Qt信号与槽机制全面解析

✨ 1. 核心概念信号与槽是Qt独创的一种对象间通信机制&#xff0c;它使得一个对象的状态变化或事件发生能够自动通知其他对象作出响应&#xff0c;从而实现高度解耦的代码设计。1.1 信号&#xff08;Signals&#xff09;定义&#xff1a;信号是由对象在特定事件发生时发出&…
阅读更多...
2025年COR SCI2区，基于近似细胞分解的能源高效无人机路径规划问题用于地质灾害监测，深度解析+性能实测

2025年COR SCI2区，基于近似细胞分解的能源高效无人机路径规划问题用于地质灾害监测，深度解析+性能实测

目录1.摘要2.问题描述与数学模型3.能源网格混合元启发式算法4.结果展示5.参考文献6.代码获取7.算法辅导应用定制读者交流1.摘要 本文提出了一种能源高效的无人机路径规划方法&#xff08;EURP&#xff09;用于监测分散的地质灾害易发区域&#xff0c;通过建立无人机飞行模式的…
阅读更多...
LangChain关于提示词的几种写法

LangChain关于提示词的几种写法

上文中 <---->（可点击移步查阅），我们已经了解到LangChain如何编写调用大模型的一个基本框架， 在编写完这个基本框架后，就要与大模型进行交互了，这时候，就需要我们编写提示词了， 那么以下，就会介绍提示词的几种编写方式 1 可携带变量的提示词 1.1 PromptTempla…
阅读更多...
CyberPoC 是一个现代化的网络安全练习和竞赛平台，支持容器化部署的安全挑战，为用户提供实践网络安全技能的环境。

CyberPoC 是一个现代化的网络安全练习和竞赛平台，支持容器化部署的安全挑战，为用户提供实践网络安全技能的环境。

工具介绍 CyberPoC 是一个现代化的网络安全练习和竞赛平台&#xff0c;支持容器化部署的安全挑战&#xff0c;为用户提供实践网络安全技能的环境。 &#x1f680; 快速开始 使用 Docker Compose (推荐) 克隆项目 git clone https://github.com/dushixiang/cyberpoc.gitcd cy…
阅读更多...
【单片机day03】

【单片机day03】

UART串口通用异步收发器&#xff0c;2个串口(1个串口被用于ISP下载程序&#xff0c;1个串口被用于和主机之间的通信)全双工&#xff08;两根线TX、RX&#xff09;、串行、异步通信方式&#xff1a;单工&#xff1a;发送方和接收方是固定的&#xff0c;数据只能从发送方 发给 …
阅读更多...
react16到react19更新及底层实现是什么以及区别

react16到react19更新及底层实现是什么以及区别

好问题 &#x1f44d;。React 16 → 19 的更新跨度其实涵盖了 React 的几个“时代级”的演进&#xff1a;从 Fiber 架构 的重写、到 并发特性 的引入&#xff0c;再到 React Server Components 和 现代语法支持。我帮你梳理下主要更新点和底层实现的区别&#xff0c;方便你系统…
阅读更多...
【分享】基于百度脑图，并使用Vue二次开发的用例脑图编辑器组件

【分享】基于百度脑图，并使用Vue二次开发的用例脑图编辑器组件

偶然间发现了这个项目&#xff0c;分享出来。 【分享】基于百度脑图&#xff0c;并使用Vue二次开发的用例脑图编辑器组件1 项目地址2 项目简介3 项目部署3.1 安装node和npm3.2 项目下载3.3 修改npm镜像源3.4 部署4 项目中使用1 项目地址 基于百度脑图&#xff0c;并使用Vue二次…
阅读更多...
Kotlin中抽象类和开放类

Kotlin中抽象类和开放类

抽象类 (Abstract Class) 定义和特点 抽象类使用 abstract 关键字声明&#xff0c;是一种不能被直接实例化的特殊类&#xff0c;主要用于被其他类继承。 abstract class Base {open fun f() {} }abstract class Derived : Base() {override abstract fun f() // 抽象成员在类中…
阅读更多...
TensorFlow深度学习实战（37）——深度学习的数学原理

TensorFlow深度学习实战（37）——深度学习的数学原理

TensorFlow深度学习实战&#xff08;37&#xff09;——深度学习的数学原理0. 前言1. 反向传播历史2. 微积分相关概念2.1 向量2.2 导数和梯度2.3 梯度下降2.4 链式法则2.5 常用求导公式2.6 矩阵运算3. 激活函数4. 反向传播4.1 前向计算4.2 反向传播5. 交叉熵及其导数6. 批量梯度…
阅读更多...
1.1 汽车运行滚动阻力

1.1 汽车运行滚动阻力

汽车运行阻力由4部分构成&#xff1a;滚动阻力、空气阻力、坡度阻力、加速阻力。 1).汽车在水平道路上等速行驶时&#xff0c;必须克服来自地面的滚动阻力和来自空气的空气阻力。 2). 当汽车在坡道上上坡行驶时&#xff0c;还必须克服重力沿坡道的分力&#xff0c;称为坡度阻…
阅读更多...
最新文章

Copyright @ 2022~2023