HTML和CSS学习-EW帮帮网

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 static
         relative
         fixed
         absolute
         sticky

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

颜色块变色和滑动效果

HTML和CSS学习

HTML学习

注释

组成

标题段落

一级标题标签

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

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

图片

空格划线换行

表格

表单

div标签

span标签

CSS3

html中引用css3

注释

CSS选择器

CSS颜色

背景

文本颜色

边框颜色

CSS字体

表格

边框

高度和宽度

边框

样式

宽度

颜色

简写

外边距

内边距

浮动

定位

动画

网站公告

今日签到

热门文章

最新发布

HTML和CSS学习

HTML学习

注释

组成

标题 段落

一级标题标签

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

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

图片

空格 划线换行

表格

表单

div标签

span标签

CSS3

html中引用css3

注释

CSS选择器

CSS颜色

背景

文本颜色

边框颜色

CSS字体

表格

边框

高度和宽度

边框

样式

宽度

颜色

简写

外边距

内边距

浮动

定位

动画

网站公告

今日签到

热门文章

最新发布

标题段落

空格划线换行