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

HTML和CSS学习

news 2025/9/9 10:59:28

HTML学习

注释

<!--  -->

组成

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

标题段落

**
**开始标签 **
**结束标签也叫双标签这里面是
一级标题标签
；还有
这是二级标签，相比一级字体变小了；一共有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)

有序列表

列表一
列表二
列表三

无序列表

苹果
香蕉
橙子

图片

‘<!— 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 选择器用于选择一个唯一的元素
一般给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

static

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

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

relative

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

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

fixed

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

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

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

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>

sticky

重叠元素

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

颜色块变色和滑动效果