2021级Web作业01(未完成)

Mahiru
2023-05-19
1358
原创

HTML和CSS学习总结

写在前面:
因为之前学过html和css,css学得比较浅,所以对于html来说,html的篇幅可能比较少

HTML

一.html文档结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
    填写页面代码
</body>
<html>

1.`<title>页面标题</title>`里面写标签页的标题
2.在body标签中写自己的代码

二.html中的元素分为区块元素和内联元素

1.区块元素（block）

区块元素有`<h1>,<pre>,<ul>,<ol>，<table>,<div>,<form>`等
区块元素的特点是总是在一行显示,一行只能有1个区块元素;
在css中,可以用`display:inline`使区块元素变成内联元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <style>
    div{
        display: inline;
    }
  </style>
</head>
<body>
    <div>
        adad
        <div>
            jdadan
        </div>
    </div>
</body>
<html>

2.内联元素(inline)

内联元素有`<img>,<input>,<label>,<br>,<span>`等
内联元素的特点是可以有多个内联元素在一行内显示;
在css中,可以用`display:block`使内联元素变成区块元素

三.html中的元素可以嵌套,但是不是所有元素都可以在标签内填写内容

比如说,对于div标签,可以在里面写文字,也可以嵌套元素,但是img标签不能:

<body>
    <div>
        adad
        <div>
            jdadan
        </div>
    </div>
  <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1686934800&t=3cf1d5d69f19ab91a330f6a29f78daf2" alt="">
</body>

四.相对路径和绝对路径

绝对路径:就是文件从盘开始的路径
比如`:C:/Users/19081/Desktop/Course/Web/homework/html.md`
绝对路径:文件相对当前文件的路径
`./html.md`和`html.md`都是当前目录下的文件
`../html.md`是上一个目录下的文件
`../../html.md`是上上个目录下的文件
在`<a>`和`<img>`标签内的路径除了本地的路径,还可以填写网上的路径;

四.html最好只拿来填充内容,而不是进行页面的布局;

虽然html中也能设置样式,但是不推荐,应该采用css对页面进行美化

CSS

一.如何正确使用css

1.引入css

引入css有3种方式,最常用的就是在head里面加上link元素,通过href引入,其他2种方式分别
是在head里面用style元素或者直接在需要css样式的元素里加上style;

<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>

2.选择器

选择器分为简单选择器:全局选择器,类型选择器,class选择器,id选择器等
和组合选择器:后代选择器和子代选择器等
2.1 全局选择器,类型选择器,class选择器,id选择器
/* 全局选择器 */
*{
    color: rgb(184, 27, 71);
}
/* 类型选择器(元素选择器) */
h1{
    color: red;
}
/*class选择器  */
.title{
    color: blue;
}
/* id选择器 */
#title{
    color: green;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>
<body>
    <h1 id="title" class="title">
        标题
    </h1>   
    <div>
        文本
    </div>
</body>
<html>

上面的代码同时对标题使用3个选择器,最后生效的是id选择器;
标题的颜色是绿色;这是因为id的specificity优先级是最大的;
2.2 伪类选择器,伪元素选择器,属性选择器
*{
    color: rgb(184, 27, 71);
    text-align: center;
    margin: 0 auto;
}
.title{
    display: inline;
}
/* 伪类选择器 */
.title:hover{
    color: green ;
}
div:nth-child(2n){
    color: green;
}
/* 伪元素选择器 */
/* 对于自闭合元素来说  伪元素选择器无法生效 */
input::after{
    content: "元"
}
span::after{
    content: "元"
}
/* 属性选择器 */
[type="text"]{
    color: blue;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>
<body>
    <div class="contain">
        <h1 id="title" class="title">
            标题,靠近我变绿
        </h1>   
        <div>
            <div>文本1</div>
            <div>文本2</div>
            <div>文本3</div>
            <div>文本4</div>
            <div>文本5</div>
            <div>文本6</div>
        </div>
        <input type="text" value="text">
        <span></span>
        <input type="password" style="display: block;" >
    </div>
</body>
<html>
2.3 子代选择器和后代选择器
*{
    text-align: center;
    margin: 0;
}

.container{
    min-height: 100vh;
}
/* 子代选择器 */
.container > *{
    margin: 2rem;
    color:  blue;
}
/*  后代选择器 */
.container span{
    color:  red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>
<body>
    <div class="container">
        <h1>
            container的子代
            <span>container的后代</span>
        </h1>
        <h2>
            container的子代
        </h2>
        <h3>
            container的子代
        </h3>
        <h4>
            container的子代
        </h4>
        <span>
            container的子代
        </span>
    </div>
</body>
<html>

除了以上2种组合选择器外,还有相邻兄弟选择器 通用兄弟选择器 和 直接后继选择器,但是不常用
2.4 优先级
在vscode中鼠标移动到选择器上可以看到优先级的值;
specificity:
id选择器 > 类选择器,属性选择器和伪类选择器 > 元素选择器和伪元素选择器 > 全局选择器
除了上面的选择器,内联样式即在元素内直接写style优先级是最高的,会覆盖上面的所有选择器;

二. 定位

定位分为static,relative,fixed,absolute,sticky,
使用position来分辨类型(默认是static),
relative是相对于默认(static)来定位,
使用top,left,button,right来指明位置,
还可以用z-index来标明显示的优先级,值越大就可以覆盖值小的,  

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgb(109, 207, 18);
  padding: 10px;
  /* 其他样式 */
}
.container {
  height: 500px;
  text-align: center;
  overflow-y: scroll;
}


/* 固定定位 */
[type="button"]{
    position: fixed;
    bottom: 2rem;
    right: 2rem;

    width: 5rem;
    height: 2.5rem;
}
/* 相对定位 */
.item{
  position: relative;
  top: 3rem;

  height: 150vh;
  background-color: red;
}
/* 
  绝对定位
  一个相对于item定位,一个相对于body,都是居中(大概)
 */
.child{
  position: absolute;
  top:50%;
  left: 50%;

  background-color: blue;
}
/* 粘性定位 */
.title {
  position: sticky;
  top: 0;

  background-color: rgb(151, 213, 6);
  padding: 10px;
  z-index: 1;
}
.container2{
  height: 200vh;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>
<body>
    <div class="container">
        <div class="navbar">navbar</div>
        <div class="title">title</div>
        <div class="item">
            item 相对于自己以前的位置
            <div class="child">
                item's child  相对于非static父类元素定位
            </div>
        </div>
        <a href="#"><input type="button" value="Button"></a>
        <div class="child">
            body's child 相对于body定位
        </div>
        
    </div>
    <div class="container2"></div>
</body>
<html>

关于fixed和sticky的区别,我也不是很清楚,大概是fixed是相对于视口,sticky是相对于父类;

三. 布局

1.弹性盒子布局

1.1使用弹性盒子

要使用弹性盒子,我们需要对其父类使用display: flex; 使用后便会出现以下属性: 他们都是默认值;

  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
1.2 flex-direction
flex-direction是指定弹性盒子中子元素排列的方向,默认是行,除此之外还有
row-reverse: 表示方向从右到左。
column：子元素垂直排列，从上到下。
column-reverse：子元素垂直排列，从下到上。

这个方向在弹性盒子里面就叫主轴,当主轴改变时,后面的属性也会相关联;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>
<body>
    <div class="container">
       <div class="item">
        div1
       </div>
       <div class="item">
        div2
       </div>
       <div class="item">
        div3
       </div>
       <br>
       <span class="item">span1</span>
       <span class="item">span2</span>
       <span class="item">span3</span>

    </div>
</body>
<html>



.container{
  /* display: flex; */

  /* flex-direction: column; */

}
.item{
  background-color: yellow;
}

在上面的代码中,如果不加弹性盒子,div就是区块元素,一行一个div,
span是内联元素,一行3个span;
但是如果我们取消注释,加上`display: flex;`,
就会发现div跟span一样全部跑到一行显示了,甚至把`<br>`换行给吞了

如果我们再加`flex-direction: column;`,
就会使弹性盒子垂直排列元素,
这样子span就像div一样,一行一个span元素;
1.3 flex-wrap
flex-wrap是弹性盒子中用来设置换行的属性;
我们来看下面的代码

.container{
  display: flex;
  /* flex-wrap: wrap; */
}

.item{
  margin: 3rem;
  width: 300px;
  height: 200px;
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>
<body>
    <div class="container">
        <div class="item">
            item
        </div>
        <div class="item">
          item
        </div>
        <div class="item">
          item
        </div>
        <div class="item">
          item
        </div>
        <div class="item">
          item
        </div>
    </div>
</body>
<html>

上面的代码中,我们写出了每个item的宽度为300px,但是因为弹性盒子把所有的item都放在一行了,
所以item的宽度已经变小了,没有到达300px;
为了让item的宽度不受影响,我们可以加上`flex-wrap:wrap`;
这样就可以让item不用全部挤在一行,从而使item变回300px;
1.4 justify-content , align-items , align-content
前面的`flex-direction`是设置排列的方向,
这3个属性是排列的方式;

justify-content:设置弹性容器内主轴的排列方式(默认主轴就是行,除非使用flex-direction改变主轴) 在下面的代码中,我们使用center就能居中,除此之外,还有其他排列方式;

.container{
  display: flex;

  justify-content: center;
  /* justify-content: start;
  justify-content: end;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly; */
}
.item{
  margin: 1rem;
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>
<body>
    <div class="container">
       <div class="item">
        div1
       </div>
       <div class="item">
        div2
       </div>
       <div class="item">
        div3
       </div>
       <br>
       <span class="item">span1</span>
       <span class="item">span2</span>
       <span class="item">span3</span>
    </div>
</body>
<html>

align-items 和 align-content : 这2个属性也是设置排列的方式,不过是设置交叉轴的,(默认交叉轴是column, 如果设置了主轴flex-direction为column,那么交叉轴就是row)

.container{
  height: 100vh;

  display: flex;
  flex-wrap: wrap;

  align-items: center;
  align-content: center;
}
.pic{
  max-width: 500px;
  max-height: 500px;
  margin: 1rem;
  background-color: yellow;
}
.text{
  width:200px;
  height: 200px;
  margin: 1rem;
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="myCss.css">
</head>
<body>
    <div class="container">
        <img class="pic" src="https://img.3dmgame.com/uploads/images/news/20220317/1647502475_454758.png" alt="">
        <span class="text">Unity是实时3D互动内容创作和运营平台。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者，借助Unity将创意变成现实。</span>
        <img class="pic" src="https://img.3dmgame.com/uploads/images/news/20220317/1647502475_454758.png" alt="">
        <span class="text">Unity是实时3D互动内容创作和运营平台。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者，借助Unity将创意变成现实。</span>
        <img class="pic" src="https://img.3dmgame.com/uploads/images/news/20220317/1647502475_454758.png" alt="">
        <span class="text">Unity是实时3D互动内容创作和运营平台。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者，借助Unity将创意变成现实。</span>
        
    </div>
</body>
<html>

2.网格布局

html
  • 作者: Mahiru (联系作者)
  • 发表时间: 2023/05/19 00:21
  • 更新时间: 2023/06/21 21:14
    •

    评论区

    留言 顶部