HTML和CSS学习

aaaweiaaaaaa2025-09-09 22:57

HTML学习

注释

复制代码 
<!--  -->

组成

复制代码 
告诉浏览器我是html文件

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

标题 段落

  1. ****开始标签 **

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

一级标题标签

； 还有

这是二级标签，相比一级字体变小了；一共有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 行

    姓名 年龄
    张三 李四
    10 9

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

表单

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

input标签

html 复制代码 
纯文本:
<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>
html 复制代码 
<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结合

    标题

    主要内容

    主要内容

span标签

  • 行内元素 和div相像

  • 给段落中某段字某种样式

  • 配合css使用

    变色了

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

  • 可以有好几个

    第一个标题

    第一个模块

    第二个模块

    第二个标题

    第三个模块

    第四个模块

    .my-box{
    background-color:lightblue;
    padding:10px;
    border:1px solid #ccc;
    }

id

  • 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素

  • 一般给table , 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 static
         relative
         fixed
         absolute
         sticky
  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;}
}

颜色块变色和滑动效果

复制代码
相关推荐
键盘不能没有CV键29 分钟前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ1 小时前
WPF 联合 Web 开发调试流程梳理（基于 Microsoft.Web.WebView2）
前端·microsoft·wpf
大飞记Python1 小时前
部门管理｜“编辑部门”功能实现（Django5零基础Web平台）
前端·数据库·python·django
tsumikistep2 小时前
【前端】前端运行环境的结构
前端
你的人类朋友2 小时前
【Node】认识multer库
前端·javascript·后端
Aitter2 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
deng-c-f3 小时前
Linux C/C++ 学习日记（28）：KCP协议（四）：如何实现更复杂的业务：将连接状态的管理进行封装，用户只需实现发送、接收、断开的处理逻辑。
学习·网络编程·kcp
mapbar_front3 小时前
面试问题—上家公司的离职原因
前端·面试
云知谷4 小时前
【HTML】网络数据是如何渲染成HTML网页页面显示的
开发语言·网络·计算机网络·html
昔人'4 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05GitLab 零基础入门指南：从安装到项目管理全流程06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答082025软件测试面试八股文（含答案+文档）09KGG转MP3工具|非KGM文件|解密音频10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）