HTML与CSS复习笔记（重点）

最新推荐文章于 2024-08-18 21:08:41 发布
最新推荐文章于 2024-08-18 21:08:41 发布
阅读量41 收藏
点赞数 1
分类专栏： 前端 文章标签： html css 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxy2467HG/article/details/131933099
版权

暑假自学Java项目，为了更好的实现项目，所以对前端的一些重点知识进行复习，并通过发布博客促进自己的学习，若有错误也请各位大佬改正。

文章目录

一、HTML

1、html头部

  1. head元素包含了所有头部信息(脚本、样式文件和各种meta信息)

  2. base元素描述了基本的链接地址（为html文档的所有链接的前缀）

  3. link元素定义了文档与外部资源的关系

  4. meta描述了一些基本的元数据

  5. script元素用于加载脚本文件

2、html css
  1. 没有下划线的链接：
text-decoration:none
  1. 使用css的三种方式
  • 内联样式
  • 内部样式表
  • 外部引用
<head>
	<link rel="stylesheet" type="text/css" href="链接名.css">
</head>

优先级：内联>内部>外部>浏览器默认

注意：若外部样式放在内部样式的后面，则外部样式会覆盖内部样式

  1. 基本样式
  • 背景颜色：background-color
  • 字体颜色、大小：color、font-size
  • 文本对齐方式：text-align（水平）、vertical-align（垂直）
3、html图像
  1. 定义：
<img src="url" alt="some_text">

alt属性：当浏览器无法加载图像时，替换文本告诉用户失去的信息

  1. 高度height和宽度width
  2. 图像浮动：float（与段落对齐）
4、html表格
  1. 定义：

  • table

    • thead：表格的标题部分

      • tr（行）

      • th（列标题）：加粗居中

    • tbody：表格的主体部分

      • tr（行）
      • td（列）
  1. 边框：border（若需要无边框，则设置为0）
  • 若想只显示一个表的单个边框，则添加border-collapse:collapse（在table中）

  1. 跨行or跨列：rowspan or colspan

  2. 单元格边距：cellpadding（文字与单元格）

在这里插入图片描述

  1. 单元格间距：cellspacing（单元格与单元格）

在这里插入图片描述

  1. 表格的宽度width和高度height
  2. 边框与表格内容的间距padding
5、html列表
  1. 无序列表：ul+li
  2. 有序列表：ol+li
  3. 自定义列表：dl+dt+dd
  4. 设置无序列表点的样式：list-style-type

  • 圆点：disc

  • 圆圈：circle

  • 正方形：square

    若要删除圆点，则使用

    list-style-type:none
  1. 设置有序列表序号样式：type
6、html区块
  1. 块级元素
  • 在浏览器显示时，通常以新行开始
  • 可以容纳其他块级和行内元素，用于创建页面结构和布局
  • 常见块元素：div、p、h、li
  1. 内联元素
  • 显示时通常不以新行开始
  • 可以包裹文本和其他行内元素
  • 常见内联元素：span、a
7、html表单
  1. 定义：
<form>
input 元素
</form>
  1. 作用：收集用户的输入信息
  2. 输入元素input
  • 文本域：text
  • 文本框：textarea（不用使用input）
  • 密码：password
  • 单选按钮：radio
  • 复选框：checkbox
  • 下拉列表：select+option
    • 若在其中一个元素中加上selected，则为预选
  • 提交按钮：submit
  1. 表单属性method
  • post：表单数据会包含在表单体内然后发送给服务器，一般用于敏感信息
  • get： 表单数据会附加在action属性的 URL 中，并以?作为分隔符 ，一般用于不敏感信息
8、html框架

  1. 定义：

    <iframe src="URL"></iframe>

  2. 作用：在同一个浏览器窗口显示不止一个页面

二、css

1、Background
  1. 背景图片
background-image:url('图片地址')
  • 默认在水平与垂直方向上平铺
  • 设置平铺background-repeat
    • repeat-x：水平
    • repeat-y：垂直
    • no-repeat：不平铺
  • 设置图像位置background-position
  • 设置图片是否固定

在这里插入图片描述

2、Text
  1. 对齐方式text-align
  • justify：每一行左右对齐并且宽度相等
    • 随着浏览器的窗口大小变化而变化
  1. 文本转换text-transform
  2. 文本缩进text-indent
  3. 指定字符之间的距离letter-spacing
  4. 指定行与行之间的距离line-height
3、Font
  1. 字体样式font-style
  • normal：正常
  • italic、oblique：斜体
    • oblique可以让没有斜体的字体倾斜
  1. 字体大小font-size
  • 默认16px(1em)
  • 使用百分比方式可以适应所有浏览器
  1. 字体粗细font-weight
  • bold（700）
  • normal（400）
4、Link
  1. 链接样式
  • a:link：未访问过
  • a:visited：已访问过
  • a:hover：鼠标悬停在上方
  • a:active：被点击时

注意：必须严格遵守上述顺序

  1. 删除链接下划线
text-decoration:none
5、盒子模型
1. 组成
  • margin:外边距
  • border:边框
  • padding:内边距
  • content:内容

在这里插入图片描述

2. 盒子的宽度和高度
  • 总宽度=宽度+左外边距+右外边距+左边框+右边框+左内边距+右内边距
  • 总高度=高度+上外边距+下外边距+上边框+下边框+上内边距+下内边距
3. 边框

  • 边框样式border-style

    • none：无边框

    • dotted：虚线点边框

    • dashed：虚线线边框

    • solid：实线边框

      可以设置1~4个值

      • 1个：四个边框
      • 2个：上下+左右
      • 3个：上+左右+下
      • 4个：上+右+下+左

    • 边框宽度border-width

      ​ 注意：单独使用不起作用

    • 边框颜色border-color

      ​ 注意：单独使用不起作用

  • 边框圆角border-radius

    ——可以设置1~4个值

    • 1个值：四个圆角值相同
    • 2个值：左上右下+右上左下
    • 3个值：左上+右上左下+右下
    • 4个值：左上+右上+右下+左下
4. 外边距

  • 单独设置

  • 简写设置margin

    ​ 可以设置1~4个值

5. 内边距/填充

​ 同上

6、Display与Visibility
  1. display:none与visibility:hidden的比较
  • 相同：都可以隐藏一个元素
  • 不同：display隐藏的元素不会占用任何空间（释放）；visibility隐藏的元素仍需占用未被隐藏前的空间（影响布局）
  1. Display与块级和内联元素

  • 块级元素可以控制宽度、高度和内外边距；而内联元素不可改变

  • 更改元素的显示

    1. display:inline

      显示为块级元素

    2. display:block

      显示为内联元素

    3. display:inline-block

      显示为内联块元素（同行显示并可改变宽高及内外边距）

7、Position
  1. static
  • 静态元素，HTML元素的默认定位
  • 不会受到top、bottom、left和right的影响（边偏移属性）
  1. relative
  • 相对定位，相对于其正常位置
  • 可以通过边偏移属性改变元素的位置，但其原来所占空间不会改变
  1. fixed
  • 固定定位，以浏览器窗口为参照物（窗口滚动它也不移动）
  1. absolute
  • 绝对定位，相对于最近的已定位的父元素
  • 不占据空间
  1. 重叠的元素

  • z-index指定元素的堆叠顺序

    拥有更高堆叠顺序的元素总会位于堆叠顺序较低的元素前面

    **注意：若没有指定，则最后定位在HTML代码中的元素将被显示在最前面 **

8、Overflow
  1. 作用：用于控制内容溢出时元素框的显示方式
  2. 属性值

在这里插入图片描述

9、Float

  1. 浮动方向：水平方向（左或右），使元素尽量向左或向右移动，直到外边缘碰到包含框（理解为包含它的盒子）或另一个浮动框

  2. 细节：

    • 浮动元素之前的元素不受影响，浮动元素之后的元素将围绕它
    • 浮动元素将会随着浏览器窗口的变化而发生排列的变化（往浮动方向靠，彼此相邻）

  3. 清除浮动——clear

    指定的元素两侧不能出现浮动元素，防止周围元素使指定元素的排列顺序混乱

    类似于固定某指定元素的位置

10、对齐
1. 元素居中对齐
margin:auto

必须指定width，且不能为100%

2. 文本居中对齐
text-align:center
3. 图片居中对齐
display:block;
margin:auto

注意：图片必须在块元素里

4. 左右对齐

  • 使用定位方式

    position:absolute;
right/left:0px;

    细节：

    • 使用position对齐元素时，通常最大的盒子需要设置margin和padding，避免在不同浏览器的差异
    • 绝对元素能够交叠元素

  • 使用float方式

    float：right/left

    细节：

    • 最好对最大的盒子设置margin和padding，避免在不同浏览器的差异

    • 如果子元素的高度大于父元素且子元素设置了浮动，那么子元素将溢出

      解决方法：在父元素上添加

      overflow:auto5
5. 垂直居中对齐
  • 使用padding
  1. 垂直居中：仅设置padding
  2. 水平垂直居中：设置padding和text-align

  • 使用line-height

    ​ ——设置line-height与height的属性值相等

hxy2567XD
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+CSS复习笔记
weixin_44921664的博客
12-07 181
HTML+CSS复习笔记 1.HTML 初识 HTML 指的是超文本标记语言 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 1.html作用: 网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。 2.所谓超文本，有2层含义： 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **） 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。 文档类型<!DOCTYP
HTML与CSS学习笔记（一）
qq_51484868的博客
06-20 114
我是Xiao白码，励志做一个有趣的人，来一起快乐的学习HTML和CSS吧！适用于零基础哦。本章节学习结构化标签和语义化标签。
CSS复习笔记
weixin_43599321的博客
06-04 950
绝对定位、固定定位会完全压住盒子以及下面标准流所有的内容，浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
HTML+CSS+JS复习笔记
03-07
在“HTML+CSS+JS复习笔记”中，你可能会学习到以下关键概念： 1. HTML基本结构：包括<!DOCTYPE>声明、<html>、和元素。 2. HTML元素：如至标题、段落、链接、图像、和无序列表、和有序列表等。 3. CSS选择器：如...
2021 web技术 期末复习笔记 山东大学.zip
12-28
其中，HTML5的新特性、CSS3的选择器与布局模式、JavaScript的异步处理与DOM操作等内容是重点复习部分，这些知识点在实际开发中也至关重要。 2020-2021山东大学软件学院Web技术期末考试回忆版（2020-2021山东大学...
The-interview-notes:前端面试复习笔记
04-06
【前端面试复习笔记】 在前端开发领域，面试是评估求职者技能和知识的重要环节。这份“前端面试复习笔记”旨在帮助准备面试的开发者系统性地复习和掌握关键知识点，以提高成功通过面试的可能性。以下是对笔记中可能...
07026网络应用程序设计复习资料.zip
07-24
8. **复习技巧与策略**：提供有效的学习方法，如时间管理、笔记整理、模拟试题的练习等，帮助考生高效备考。 9. **历年真题与解答**：过往的考试题目可以帮助考生了解考试风格和难度，通过分析解答，提升解题能力。...
移动互联网应用开发课堂笔记，web应用开发必备
08-15
此外，移动应用的性能优化、内存管理、权限请求和推送通知等主题也可能是笔记的重点内容。 资源达人分享计划表明这份资料是经过精选的，可能包含了实际项目案例、调试技巧和面试准备，帮助学习者将理论知识转化为...
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
2301_78945238的博客
08-15 422
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
2301_78945238的博客
08-14 1308
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
HTML知识点——CSS中几种常用的选择器
qq_62859013的博客
08-15 312
CSS中的几种常用的选择器
基础到实践：深入了解HTML和CSS
最新发布
2302_80084329的博客
08-18 577
通过学习和实践HTML和CSS，你可以开始构建自己的Web页面，并逐步掌握更高级的Web技术。理解这些基础知识将为你未来的Web开发旅程奠定坚实的基础。希望本博客能够帮助你入门HTML和CSS，并激发你探索更多Web开发技术的兴趣。通过此项目，你不仅可以实践HTML和CSS的基本应用，还可以探索如何将网页组织为一个完整的项目。每个部分的设计都有助于加深你对Web开发的理解，为更复杂的项目打下坚实的基础。希望这个实战案例能够激发你继续学习和探索Web技术的热情。
移动端的知识 以及 排静态网页的步骤
x15514104477的博客
08-14 1066
移动端的知识（基础知识） 以及 排静态网页的示例步骤
HTML静态网页成品作业(HTML+CSS)——家乡岳阳华容网页设计制作(1个页面)
2301_78945238的博客
08-14 453
HTML静态网页成品作业(HTML+CSS)——家乡岳阳华容网页设计制作(1个页面)
HTML补充——表格&表单
Fan_web的博客
08-14 1531
本文补充了HTML中的一些表格和表单的标签，下文继续分享CSS中的动画知识内容。
JavaScript HTML DOM 实例
wjs2024的博客
08-16 371
通过这些实例，我们可以看到JavaScript HTML DOM的强大功能。它可以让我们动态地添加、修改和删除页面元素，以及响应用户的交互操作。掌握DOM操作是前端开发的重要技能之一，希望这些实例能帮助您更好地理解和应用DOM操作。
HTML实现2048小游戏
m0_65134936的博客
08-18 560
JavaScript则是游戏逻辑的核心，它处理用户的输入（如键盘事件监听），控制游戏状态的更新（如瓷砖的移动和合并），以及动态地更新DOM以反映游戏状态的变化。通过这篇文章，你可以了解如何从头开始构建一个简单的 2048 游戏，包括 HTML、CSS 和 JavaScript 的使用。希望你能从中学习到有用的知识！HTML用于构建游戏的结构框架，包括游戏容器、网格布局以及可能的用户交互元素（如按钮或得分显示）。CSS则负责美化游戏界面，通过样式表定义网格的样式、瓷砖的外观、动画效果以及整体布局的视觉呈现。
HTML 拾色器
wjs2024的博客
08-18 464
HTML拾色器是一种实用的工具，它允许用户在HTML文档中选择和预览颜色。在网页设计和开发中，颜色选择是一个重要的环节，因为它直接影响到用户的视觉体验和网页的整体美观。HTML拾色器为用户提供了方便快捷的方式来挑选合适的颜色，从而提高设计和开发的效率。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值