HTML+CSS复习

已于 2023-03-11 09:39:39 修改
阅读量57 收藏 1
点赞数
分类专栏： 蓝桥杯备战 前端面试 文章标签： html css
于 2023-01-29 22:11:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33938234/article/details/128794425
版权

HTML+CSS部分复习(蓝桥杯参考)

文章目录

0. 考前准备

  • 插件安装
  • 设置：文件自动格式化

1. web标准

  • 结构(HTML)
  • 表现(CSS)
  • 行为(js)

2. 前端插件安装

在这里插入图片描述

3. img的border属性

  • 属性值：数字，单位：像素
  • 边框粗细

4. a标签target属性

  • 链接打开方式
  • 默认值_self当前窗口，_blank新的窗口

5. a标签实现锚点链接

在这里插入图片描述

6. 表格属性

在这里插入图片描述

7.table单元格合并

在这里插入图片描述

  • colspan:跨列，水平方向
  • rowspan:跨行，垂直方向

8.表单域form属性

在这里插入图片描述

9.input表单控件

在这里插入图片描述

10.单选框分组

<!-- 单选框 -->
        <!-- name属性用于分组，同组的只有一个可以被选中 -->
        <!-- checked属性用于默认选中 -->
        <p>性别： <input type="radio" name="性别" checked="">男  <input type="radio" name="性别">女</p>

11.单选框和多选框选中

在这里插入图片描述

  • 注意属性值为checked
  • 属性名checked
  • 也可以直接加上checked属性
<p>爱好：<input type="checkbox" checked>敲代码 <input type="checkbox"> 睡觉</p>

12. label标签

 <!--第一种 
        label将文本宇表单标签联系在一起 
        表单id与label的for一致
    -->
    <input type="radio" id="1" name="性别"><label for="1">男</label>
    <input type="radio" id="2" name="性别"><label for="2">女</label>

    <!-- 第二种 -->
    <!-- 用label标签将表单标签包裹起来，去掉for属性 -->
    <label > <input type="radio" name="性别">男 </label>
    <label > <input type="radio" name="性别">女 </label>

13. select控件

在这里插入图片描述

  • 注意属性值为selected

14. textarea设置默认值

<textarea>需要设置的默认值</textarea>
  • js
 <textarea id="topic" rows="10" name="topic"  ></textarea>
                          
     <script>
        document.getElementById("topic").value="helloword"
     </script>

15.css text-decoration

在这里插入图片描述

16 行间距

在这里插入图片描述

17. Emmet语法

在这里插入图片描述

  • 自增的使用
.demo$*5

// 结果代码

在这里插入图片描述

  • 闭合标签内部内容
div{666}

// 结果代码
<div>
    666
</div>

18.链接伪类选择器

在这里插入图片描述

19 :focus伪类选择器

在这里插入图片描述

20 块级元素

在这里插入图片描述

<p>
    <div>
        666
</div>
</p>

// 相当于

<p>
    
</p>

<div>
    666
</div>

21. 行内块元素

在这里插入图片描述

22.行高垂直居中

在这里插入图片描述

23. 背景图像固定

在这里插入图片描述

24. 边框合并css

在这里插入图片描述

25.padding不会撑大盒子的情况

在这里插入图片描述

26.外边距实现水平居中

在这里插入图片描述

27.边框圆角实现原理

  • border-radius

在这里插入图片描述

28.圆角边框特殊使用

在这里插入图片描述

  • 正方形可以写50%
  • 圆角矩形必须写高度的一半，写50%会成椭圆

29.盒子阴影

在这里插入图片描述

30 文字阴影

在这里插入图片描述

31. 浮动元素的特性

在这里插入图片描述

在这里插入图片描述

  • 无外边距塌陷现象

32. 清除浮动的原因

在这里插入图片描述

33. 清除浮动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

34. 行内块元素

  • 一起水平排列之间会有空隙

35.固定定位fixed固定在版心(其他盒子)右侧位置

在这里插入图片描述

36 粘性定位

在这里插入图片描述

37 定位特性，脱标特性

在这里插入图片描述
在这里插入图片描述

38 浮动，定位的区别

  • 浮动不脱离文档流
  • 定位脱离了文档流

在这里插入图片描述

39.visibility

在这里插入图片描述

40 CSS三角形

在这里插入图片描述

  • font-size:0,line-height:0;照顾兼容性问题

41.鼠标样式

在这里插入图片描述

42. 轮廓线

在这里插入图片描述

43. 防止拖拽文本域

在这里插入图片描述

44.vertical-align属性

在这里插入图片描述

45. 解决图片底部默认空白缝隙问题

在这里插入图片描述

46 单行文本溢出显示省略号

在这里插入图片描述

46 多行文本溢出显示省略号

在这里插入图片描述

47 margin负值的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M2boCwjl-1674998645419)(E:\已经完成的笔记\web前端代码\复习\QQ截图20230109152405.png)]
在这里插入图片描述

48.直角三角形

在这里插入图片描述

49 video标签兼容性

在这里插入图片描述

50 video标签属性

请添加图片描述

51. audio标签

请添加图片描述

52. HTML5新增input类型

请添加图片描述

53. HTML5新增表单属性

请添加图片描述

54. 修改placeholder颜色

请添加图片描述

55 CSS3新增选择器

请添加图片描述

56 CSS3权重问题

请添加图片描述

57.结构伪类选择器

在这里插入图片描述

58 nth-child()与nth-of-type的区别

在这里插入图片描述

59 伪元素选择器

在这里插入图片描述

60 CSS3盒子模型

在这里插入图片描述

61. CSS3滤镜

在这里插入图片描述

  • 是css属性

61. CSS3的Calc函数

在这里插入图片描述

62. CSS的过渡

在这里插入图片描述

  • 可以查阅css文档了解更多的信息

63 LOGO SEO优化

在这里插入图片描述

64 2D转换-translate

在这里插入图片描述

65 2D转换-rotate实现三角

  • html
<div>
    
</div>
  • css
div{
    position:relative;
    width:200px;
    height:50px;
    border:1px soild #ccc;
}

// 伪元素做三角
div::after{
    position:'absolute';
    content:'';
    
    width:10px;
    height:10px;
    
    right:0;
    top:0;
    
    // 我们只保留右边框和下边框
    
    // 然后旋转45deg
    
    border-right:1px soild #000;
    border-bottom:1px soild #000;
    
    transform:rotate(45deg);
    
}

在这里插入图片描述

66 rotate的转换中心点

在这里插入图片描述

67.2D转换复合写法

在这里插入图片描述

68 动画的基本使用

  1. 定义动画
@keyframes move{
    
    // 开始状态
    0%{
        transform:translateX(0px);
    }
    
    // 结束状态
    100%{
       transform:translateX(100px); 
    }
}
  1. 使用动画
.box{
    animation-name:move;
    animation-duration:3s;
    
    // 或者属性连写
    animation:move,3s;
}

在这里插入图片描述

  • 动画完整属性

在这里插入图片描述

69.焦点图综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>
  • 效果图

在这里插入图片描述

70 动画属性-animation-timing-function

  • 不止可以设置linear，easy
  • 设置布长steps
打字机效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

</html>

71 三维坐标系

在这里插入图片描述

72. 透视

在这里插入图片描述

73. 3D呈现

在这里插入图片描述

  • 药片翻转效果
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 400px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间 给父级添加的 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .box:hover .back {
            z-index: 2;
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }

        .front {
            background-color: pink;
            z-index: 1;
        }

        .back {
            background-color: purple;
            /* 像手机一样 背靠背 旋转 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">黑马程序员</div>
        <div class="back">pink老师这里等你</div>
    </div>
</body>

</html>

在这里插入图片描述

74 旋转木马的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        
        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }
        
        section div:nth-child(2) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>
  • 旋转好后—>坐标轴发生了改变，z轴方向为旋转后的面向外
    在这里插入图片描述

75.浏览器私有前缀

在这里插入图片描述

75.移动端视口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

76 物理像素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

77 移动端CSS初始化

在这里插入图片描述

78 . 移动端特殊样式

在这里插入图片描述

  • a标签点击高亮

79.移动端缩放限制

在这里插入图片描述

80 二倍精灵图

在这里插入图片描述

81. flex布局注意reverse

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0akiIEwm-1674998645431)(E:\已经完成的笔记\web前端代码\复习\QQ截图20230111152501.png)]

请添加图片描述

82 flex-侧轴上子元素对其方式（多行）

在这里插入图片描述

  • 注意是多行
  • 已经换行，行与行之间的排列方式

83. flex-属性连写

在这里插入图片描述

84. order布局子项常见属性

在这里插入图片描述

85 媒体查询

<style>
        /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */
        
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大于等于970 我们页面的颜色改为 红色 */
        
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 还有 and 必须带上不能省略的 */
        /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
    </style>
  • 注意
    • and关键字前后必须有空格

86.媒体查询引入资源

在这里插入图片描述

87. 响应式工具

在这里插入图片描述

凌歆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS基础复习
pigofzhou的博客
03-16 421
重新温故了一遍慕课网的HTML+CSS基础课程，总结了以下知识点：web前端开发基础技术：HTML、CSS、JavaScript语言HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，包含文字、图片、视频等。CSS样式是表现。比如标题字体、颜色变化、为标题加入背景图片、边框等等。JavaScript是用来实现网页上的特效效果。如鼠标滑过弹出下拉菜单，滑过表格的背景颜色变化，...
HTML+CSS复习笔记
weixin_44921664的博客
12-07 171
HTML+CSS复习笔记 1.HTML 初识 HTML 指的是超文本标记语言 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 1.html作用: 网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。 2.所谓超文本，有2层含义： 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **） 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。 文档类型<!DOCTYP
HTML、CSS复习
qq_61872431的博客
07-31 371
inputtype="text/password/submit/reset/radio/checkbox"value="确定/重置"name="名称"/>em1em----一个字符2em-----两个字符（自动适应用户所使用的字体大小）background-repeatrepeat/repeat-x/repeat-y/no-repeat(一张大图)border（-top\-left\-bottom\-right）(有方向)...
Html，CSS知识复习汇总
敦煌壁画的博客
03-07 196
Html，CSS知识复习汇总 1.html是网页内容的展示，比如文字，图片，视频，音频等等 2.css是网页内容的装饰，比如让文字的大小和字体更漂亮，设置图片和视频的位置等等 3.html是超文本标记语言，css是层叠样式表 4.网页文件的后缀名为 .html 5.在vscode中按！+tab可以添加网页模板 6.作用是声明文档类型，版本声明 7.是网页中最大的标签，即双标签，根标签 8.通常放一些附加信息，说明性信息 9.当前网页所有的html结构都放在这里面 10.单标签，通常meta里会写一些页面附
html，css复习
m0_58847961的博客
05-08 282
一.HTML新增 语义化标签，例如header，footer，section，article等 新增媒体元素，audio、video 用于绘画的canvas属性 新增本地存储方式：sessionStorage、localStorage 新的技术：webworker、websocket 新增的表单控件：calendar、date、time、email、url、search 二、进制 三、编码 四、盒模型（行内元素） 五、盒模型（块元素） 1、标准盒模型 设置的宽高为内
HTML及CSS常用知识点复习
申小兮和林小兮的博客宝
08-16 572
HTML和CSS：常用标签及对应的属性，常用易忘易错的样式属性，常用的样式设置，原神官网部分界面效果代码例子
CSS复习汇总
小白菜的博客
05-09 2050
1，CSS样式表的规则    CSS由两部分组成:选择器和声明，其中声明由属性和属性值组成，简单的CSS规则如下:body{margin:32px}(1)body:选择器  (2)margin:属性  (3)32px:属性值  (4){margin:32px}:声明选择器：选择器用于指定对文档中哪个标签进行定义。声明：声明包含在大括号"{}"中，在大括号中首先给出属性名，接着是冒号，然后是属性值。...
HTML+CSS+JS复习笔记
03-07
在“HTML+CSS+JS复习笔记”中，你可能会学习到以下关键概念： 1. HTML基本结构：包括<!DOCTYPE>声明、<html>、和元素。 2. HTML元素：如至标题、段落、链接、图像、和无序列表、和有序列表等。 3. CSS选择器：如...
Html+CSS知识手册
09-29
Html+CSS知识手册，适合小白从头开始学，也适合有一定水平的选手复习or参考，本文档的水平足以面对多数笔试和面试~建议仔细阅读
HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面（附完整答案和学生用要求及素材）
03-29
在本项目中，"HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面" 提供了一个实践性的学习机会，让学生深入理解并应用前端开发技术，特别是针对网页设计与制作。这个项目以“杭帮美食”为主题，...
html+css学生期末考试专用
12-17
总结来说，这个压缩包提供了一个学习和复习HTML与CSS基础知识的平台，特别是对使用DIV进行布局的实践。学生可以通过分析和修改这两个实例，深入了解HTML的结构，CSS的样式规则，以及如何利用`div`进行页面布局。这样...
HTML+ css+javascript复习题.docx
11-26
- 链入外部样式表：在HTML文件的部分使用标签引用一个.css文件，如`<link rel="stylesheet" href="styles.css" type="text/css">`。这种方法适用于多个页面共享同一套样式，方便管理和更新。 - 内部样式表：在HTML...
HTML+CSS+js复习总结
qq_45610112的博客
09-19 351
老师用两周的时间给我们复习了一些以前学过的内容，下面我对这两周所复习的内容做一个总结 1、基础标签 标题 <h1></h1> <h6></h6> 段落 <p></p> 图片 <img src=""/> 超链接anchor <a target="_blank" href=""...
HTML+CSS复习内容
weixin_48572596的博客
02-22 158
HTML+CSS复习内容 1.HTML主体格式基本结构 <!DOCTYPE html> <html> <head> <mate charset="utf-8"/> <title>标题</title> </head> <body> 主要内容 解说：整个HTML格式分为两大部分，一个是head部分，一个是body部分，其中head部分是用于书写网页样式，而body部分用于书写网页主题 2.常用标
HTML+CSS知识点总结（一）
MaRain
06-15 5157
Doctype 作用？ 标准模式与兼容模式各有什么区别?（ 1） <!DOCTYPE>声明位于位于 HTML 文档中的第一行， 处于 <html> 标签之前。 告知浏览器的解析器用什么文档标准解析这个文档。 DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。 （ 2） 标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。 在兼容 模式中，页面以宽松的向后兼容的方式显示,模拟
HTML和CSS复习知识点
SpencerYang的博客
02-01 720
HTML和CSS复习专用知识点（笔记）
html+css知识点复习
beeliang
04-12 311
html和css基础
前端开发网页设计(二)：CSS学习
weixin_43070331的博客
07-26 220
源码资料地址： CSS学习: 1.css的声明 2.css的选择器 3.css的常用样式 4.css的盒子模型 5.css的定位 6.css的布局 1.css的声明 三种声明方式： 1.head中 2.外部css中 3.需要特定样式的标签中 hr{ </*CSS外部声明，全部一次声明，随便使用*/> width: 50%; height: 20px; color: re...
html 关闭信息窗口
最新发布
cuisidong1997的博客
07-14 326
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
HTML+CSS笔试题目详解与答案
本资源是一份针对HTML+CSS技术的笔试题目及答案，适合用于复习和测试对这两种基础前端开发语言的理解。HTML（HyperText Markup Language）是网页制作的基础，负责网页的结构和内容展示，而CSS（Cascading Style ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值