HTML+CSS

real代码渣渣

已于 2022-06-29 17:07:06 修改

阅读量784

点赞数

文章标签： html css 前端

于 2022-06-26 23:41:37 首次发布

本文链接：https://blog.csdn.net/qq_42765662/article/details/125469591

版权

一、进制

1、十进制

日常使用
特点：满10进1
计数：0 1 2 3 4 5 6 7 8 9 10 11 12
单位数字：10个（0-9）

2、二进制

计算机底层
特点：满2进1
计数：0 1 10 11 100 101 110 111
单位数字：2个（0-1）
扩展：所有数据在计算机底层都是以二进制的形式保存

3、八进制

用的较少
特点：满8进1
计数：0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17 20
单位数字：8个（0-7）

4、十六进制

和二进制搭配使用
特点：满16进1
计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 1a 1b 1c 1d 1e 1f 20
单位数字：16个（0-f）

二、meta标签

用于设置网页中的一些元数据，用户看不到
charset: 指定网页的字符集
name：指定数据的名称
content：指定数据的内容

keywords 表示网站的关键字，可以同时指定多个关键字，用逗号隔开

<meta name="keywords" content="aaa, bbb, ccc">

description 用于指定网站的描述

<meta name="description" content="网站的描述内容">

网站的描述会显示在搜索引擎的搜索结果中

title 标签的内容会作为搜索结果的超链接上的文字显示

1、重定向

<meta http-equiv="refresh" content="3; url=https://www.baidu.com">

将页面重定向到另一个网站

3 表示时间
url 表示要跳转的网站

三、语义化标签

1、块元素（block element）

会独占一行

title 标签
h 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

hgroup 标签用来标题分组，将一组相关的标题同时放到hgroup中

<hgroup>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
</hgroup>

p 标签，段落标签

<p>p标签中的一个段落</p>

blockquote 表示长引用

2、行内元素（inline element）

em 用于强调语音语调的加重
strong 表示强调，重要内容
q 短引用

我说过：“<q>我很帅吗？</q>”

四、图片、音视频标签

1、图片标签

img标签用于在当前页面中引入图片，是一个自结束标签。
img属于替换元素（介于块元素和行内元素之间）
属性：

src：指定的是外部图片路径
alt：图片的描述，默认不显示。当图片无法加载时，会显示。搜索引擎会根据alt的内容识别图片，如果不写alt内容，不会被搜索引擎所识别。
width：图片的宽度，单位是像素。
height：图片的高度，单位是像素。当只改变一个属性时，另外一个属性也会随之改变。

<img src="路径" alt="说明" />

图片格式：

jepg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。
gif：支持颜色较少，支持简单透明，支持动图。颜色单一的图片、动图
png：支持颜色丰富，支持复杂透明，不支持动图。颜色丰富、复杂透明的图片（为网页而生）
webp：谷歌推出的，专门用于表示网页中的图片格式。具备以上格式的有点。缺点是兼容性差。

选的图片格式的规则：效果一样用小的，效果不一样用效果好的。

2、音频标签

audio标签用来在页面引入一个外部音频文件。
属性：

controls 是否允许用户控制
autoplay 音频文件是否自动播放
loop 是否循环播放

<audio src="路径" controls autoplay loop/>

<audio>
	对不起，您的浏览器不支持播放音频!请升级浏览器！
	<source src="路径1"/> <!-- 优先使用此文件，若不支持，向下选择-->
	<source src="路径2" type="audio/mp3"/>
</audio>

3、视频标签

video标签用来在页面引入一个外部视频文件。
属性：

controls 是否允许用户控制
autoplay 音频文件是否自动播放
loop 是否循环播放

<video src="路径" controls autoplay loop/>

<video>
	对不起，您的浏览器不支持播放音频!请升级浏览器！
	<source src="路径1"/> <!-- 优先使用此文件，若不支持，向下选择-->
	<source src="路径2" type="video/mp4"/>
</video>

五、CSS使用

1、内联样式（行内样式）

在标签内部使用style属性来设置标签样式。
使用内联样式时，样式只对当前标签生效。

<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>

2、内部样式表

将样式编写到head中的style标签中，通过css元素选择器来选择元素进行设置样式。
内部样式表只能对当前页面有效。

<head>
    <style>
        p{
            color:pink;
            border:blue 1px solid;
        }
    </style>
</head>

3、外部样式表

将css样式写在外部css文件中，然后通过link标签引入外部样式表。
好处：将样式写入外部css文件中，可以使用到浏览器的缓存机制。能够加快网页的加载速度，提高用户体验。

<link rel="stylesheet" type="text/css" herf="1.css">

六、CSS选择器

选择器的优先级：
内联样式（1000） > id选择器（0100） > 类和伪类选择器（0010） > 元素选择器（0001）
比较优先级时，需要将所有选择器优先级相加，总的优先级越高，越优先显示。

1、元素选择器

根据标签名选中指定的元素
语法：标签名{ 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        div{color: red;} /* div就是元素标签名 */
    </style>
</head>
<body>
    <div>CSDN博客网</div>
    <p>CSDN博客网</p>
    <span>CSDN博客网</span>
</body>
</html>

2、id选择器

根据元素的id属性值选定一个元素
语法：#id值{ 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        #first{color: red;} /* first为id属性值 */
    </style>
</head>
<body>
    <div id="first">CSDN博客网</div>
    <div>CSDN博客网</div>
    <div>CSDN博客网</div>
    <div>CSDN博客网</div>
</body>
</html>

3、class选择器

根据元素class属性值选择一组元素
用法：.class属性值 { 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        #first{color: red;}
        .one{color: lawngreen;} /* one为class属性值 */
    </style>
</head>
<body>
    <div id="first">CSDN博客网</div>
    <div>CSDN博客网</div>
    <div class="one">CSDN博客网</div>
    <div class="one">CSDN博客网</div>
</body>
</html>

4、复合选择器

1、交集选择器

选择同时符合多个条件的元素
语法：选择器1选择器2选择器3{ 样式 }
注意：交集选择器中如果有元素选择器，必须以元素选择器开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        p.a{color: red;}
    </style>
</head>
<body>
<h3 class="a">你好，CSS</h3>
<p class="a">你好，CSS</p>
<div>你好，CSS</div>
<span>你好，CSS</span>
</body>
</html>

2、分组选择器（并集选择器）

同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3{ 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        p, span{color: red;}
    </style>
</head>
<body>
    <h3>你好，CSS</h3>
    <p>你好，CSS</p>
    <div>你好，CSS</div>
    <span>你好，CSS</span>
</body>
</html>

5、关系选择器

1、子元素选择器

选择指定父元素的指定子元素
语法：父元素 > 子元素 { 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        div span{color: blue;}
    </style>
</head>
<body>
    <div>
        <p>CSDN</p>
        <p>CSDN</p>
        <p>CSDN</p>
        <span>CSDN</span>
    </div>
</body>
</html>

2、后代元素选择器

选择指定元素的指定后代元素
语法：祖先后代 { 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        .father1 div{color: red;}
        .father2 span{color: blue;}
    </style>
</head>
<body>
    <div class="father1">
        <div>CSDN</div>
        <div>CSDN</div>
    </div>

    <div class="father2">
        <p>CSDN</p>
        <p>CSDN</p>
        <p>CSDN</p>
        <span>CSDN</span>
    </div>
</body>
</html>

3、兄弟选择器

选择下一个兄弟元素
语法：当前元素 + 下一个元素{ 样式 }
选择后面所有的兄弟
语法：当前元素~后面的兄弟元素{ 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        p+span{
       		color: red;
       	}
       	p~span{
       		color: green;
       	}
    </style>
</head>
<body>
      <p>CSDN</p>
      <p>CSDN</p>
      <p>CSDN</p>
      <span>CSDN</span>
</body>
</html>

6、属性选择器

[属性名]：选择含有指定属性的元素
[属性名=属性值]：选择含有指定属性和属性值的元素
[属性名^=属性值]：选择含有指定属性和属性值以指定值开头的元素
[属性名$=属性值]：选择含有指定属性和属性值以指定值结尾的元素
[属性名*=属性值]：选择含有指定属性和属性值包含某值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        p[title]{ color: red}
        p[title='abc']{ color: red}
        p[title^='abc']{ color: red}
        p[title$='abc']{ color: red}
        p[title*='abc']{ color: red}
    </style>
</head>
<body>
    <p title="abc">鹅鹅鹅</p>
    <p title="abcde">曲项向天歌</p>
    <p title="helloabc">白毛浮绿水</p>
    <p>红掌拨清波</p>
    <p>我想吃鹅</p>
</body>
</html>

7、伪类

伪类用来描述一个元素的特殊状态
用法：一般:开头

:first-child 第一个元素
:last-child 最后一个元素
:nth-child(n) 选择第n个元素
2n 或 even 表示选择偶数位的元素
2n+1 或 odd 表示选择奇数位的元素
注意：上述三个伪类选择是对所有子元素进行选择
:first-of-type
:last-of-type
:nth-of-type(n)
注意：上述三个是在相同子元素中进行选择
:not() 除了某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul > li:first-child {
            color: red;
        }

        ul > li:last-child {
            color: green;
        }

        ul > li:nth-child(4) {
            color: orange;
        }

        ul > li:first-of-type {
            color: tomato;
        }

        ul > li:last-of-type {
            color: cadetblue;
        }

        ul > li:nth-of-type(2) {
            color: palevioletred;
        }
    </style>
</head>
<body>
<ul>
    <span>我是span标签</span>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
</ul>
</body>
</html>

七、布局（layout）

1、box model

css将页面中的所有元素都设置为一个矩形盒子，布局就是将盒子摆在不同的位置。

content （内容）：由weight和height控制内容区的大小。
border （边框）：需要设置三个样式，border-width（有默认值）、border-color、border-style。
padding（内边距）
margin （外边距）

盒子大小是指content+border+padding

box model

2、水平布局

元素在其父元素水平方向的位置由以下几个元素共同决定：

margin-left ：默认为0，可以设置为auto
border-left ：默认为0
padding-left ：默认为0
width ：可以设置为auto
padding-right ：默认为0
border-right ：默认为0
margin-right ：默认为0，可以设置为auto

水平布局必须满足以下等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区宽度
当以上等式不成立时，会自动调整，使得等式成立。
调整情况：

以上值都没有auto情况时，会自动调整margin-right的值。
如果某个值设置为auto，则自动调整设置auto的值以使等式成立。
如果将三个值都设置为auto，则外边距都为0，width为最大值。
若外边距都设置为auto，则宽度为固定值，外边距设置为相同的值。

3、盒子尺寸

默认大小为内容区宽度、内边距、边框共同决定的。
box-sizing 用来设置计算盒子尺寸的方式

content-box：默认值，宽度和高度用来设置内容区的大小。
border-box：宽度和高度用来设置盒子可见框的大小，width、height指的是内容区+内边距+边框的总大小。

4、阴影与圆角

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

第一个值，水平偏移量，设置阴影的水平位置，正值向右，负值向左
第二个值，垂直偏移量，设置阴影的垂直位置，正值向下，负值向上
第三个值，阴影的模糊半径
第四个值，阴影的颜色

box-radius 用来设置圆角

四个值：左上右上右下左下
三个值：左上右上/左下右下
两个值：左上/右下右上/左下
一个值：四个角
要设置一个圆时，border-radius：50%；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影的设置</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
			/* 用来设置阴影 */
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
            /* 用来设置圆角 */
            border-radius: 20px;
        }
    </style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

5、浮动（float）

通过float可以设置元素的浮动，使得一个元素向其父元素的左侧或右侧浮动。
float默认为none，left或right。
浮动的特点：

浮动元素会完全脱高文档流，不再占据文档流中的位置
设置浮动以后元素会向父元素的左侧或右侧移动，
浮动元素默认不会从父元素中移出
浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
浮动元素不会超过上边浮动的兄弟元素

解决高度塌陷和外边距重叠：

.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}