HTML & CSS 学习总结

北辰eternal

已于 2023-06-27 00:28:54 修改

阅读量111

点赞数

文章标签： html css 学习

于 2023-06-27 00:13:31 首次发布

本文链接：https://blog.csdn.net/m0_64638598/article/details/131407540

版权

注：参考W3cSchool

HTML

什么是HTML

HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言 (Hyper Text Markup Language)

HTML不是一种编程语言，而是一种标记语言(markup language)

标记语言是一套标记标签 (markup tag)

HTML使用标记标签来描述网页

标签

HTML标签是由尖括号包围的关键词，如<html>，并且HTML标签通常成对出现，其中第一个标签为开始标签，第二个标签为结束标签。并且标签可以进行嵌套，可以将它们想象成括号，每个括号会进行配对，括号里面依旧可以加括号。

如：

常见的标签有：<h>标题、<img>图像、 <div>定义文档中的分区或节（俗称盒子）、 <span>用来组合文档中的行内元素、<p> 定义段落、<button>定义按钮、<a> 定义锚点链接、 <intput>定义输入控件等等。

这些标签不需要背，也不用背，遇到不会的可以直接查阅文档。

HTML文档

HTML文档包含HTML标签和纯文本，它是用来描述网页的，因此HTML文档也被称为网页。

其实，Web浏览器的作用就是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

元素

HTML 元素指的是从开始标签到结束标签的所有代码。当然，某些 HTML 元素具有空内容，空元素在开始标签中进行关闭（在开始标签中添加斜杠）。大多数 HTML 元素可拥有属性。

如

上图高达机体就为元素

属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，并且属性总是在 HTML 元素的开始标签中规定。最后，属性值应该始终被包括在引号内。

如：

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。比如<div>标签就为一个块元素，当它在浏览器中展示时，一个div就会占一行。

如：

内联元素在显示时通常不会以新行开始。比如<a>标签就为一个内联元素，我们可以在一行中放置多个链接。

如：

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

id属性指定 HTML 元素的唯一 ID。id属性的值在 HTML 文档中必须是唯一的。id属性用于指向样式表中的特定样式声明。

ID与类的区别就是，ID只能与一个（同一HTML文档中），而同一个类名可以加在不同HTML标签上。

文档类型

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

文件路径

文件路径描述了网站文件夹结构中某个文件的位置。文件路径会在链接外部文件时被用到。文件路径包括绝对路径和相对路径。

绝对文件路径是指向一个因特网文件的完整 URL，比如www.baidu.com。

相对路径指向了相对于当前页面的文件。其写法与Linux指令类似，“./”表示在前文件夹“../”表示上一级文件夹。

字符实体

在 HTML 中，某些字符是预留的，比如，在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签，如果想要正确地显示预留字符，则必须在 HTML 源代码中使用字符实体。字符实体形式为&+实体名字或&#+实体编号。如显示小于符号，可以写成 < 或 <

不间断空格。HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。比如如果我在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如果需要在页面中增加空格的数量，这时就需要使用   字符实体。

URL 也被称为网址。URL 可以由单词组成，比如 “www.baidu.com”，或者是因特网协议（IP）地址：192.168.1.253。

统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。网址，遵守以下的语法规则：

scheme://host.domain:port/path/filename

其中scheme 为定义因特网服务的类型（最常见的类型是 http）；host为定义域主机（http 的默认主机是 www）；domain为定义因特网域名，比如 “baidu.com”；:port为定义主机上的端口号（http 的默认端口号是 80）；path 为定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）；filename为定义文档/资源的名称。

一个HTML代码基本格式

<html>标签：是HTML文档的根标签，页面中的所有内容都必须包含在<html>与</html>之间。

<head>标签：一个网页文档从总体上可以分为头和主体两部分。<head>和</head>定义HTML文档的头部部分，它包含标题，文件MIME类型，样式表，脚本等。

<title>标签：用于设置HTML标题。当使用浏览器查看页面时，在浏览器的标题栏中将显示<title>标签中的内容。

<body>标签：<body>与</body>标签定义了文档的主体部分，用于设置页面实际需要呈现给用户的内容，如文字，图片，视频等。

值得一提的是，我们并不能记住HTML所有格式，标签以及提供的操作等，因此我们因该学会翻阅HTML文档。

CSS

什么是CSS

CSS是一种用于描述网页样式的语言。CSS主要用于控制网页的呈现样式，如网页中元素的大小、颜色、字体、布局等方面。与HTML和JavaScript一样，CSS是Web开发中最常用的技术之一，它为开发者提供了更精准、更灵活的网页排版和设计方式，让网页的视觉效果更加优美和易于理解。CSS可以与HTML结合使用，开发者可以使用CSS来控制网页的外观，而不需要改变网页的内容。CSS 节省了大量工作。它可以同时控制多张网页的布局。CSS可以通过内联样式、内部样式和外部样式表等方式来应用到网页中。

CSS语法

CSS的语法基本上遵循以下几种规则:

1. 选择器：选择器指的是要应用样式的HTML元素。可以使用元素的名称、类名、ID、属性、伪类等方式来定义选择器。

2. 属性：属性定义HTML元素的外观，如颜色、尺寸、字体等等。每个属性都有一个值，指定了这个属性的取值范围。

3. 值：属性的值可以是任何有效的CSS值，如颜色、大小、位置，以及其他简单或复杂的值。

4. 声明块：声明块是由一系列声明组成的，每个声明包括一个属性和一个值，用冒号隔开。多个声明块用花括号包围。

下面是一个CSS规则的示例：

其中，

1. 选择器以元素名称、ID、类名或其他属性定义。

2. 冒号（:）用于分隔属性和属性值。

3. 分号（;）用于分隔每个属性。

4. 花括号（{}）用于包裹声明块。

CSS支持大量的属性和值，可以灵活地控制网页的样式和排版。

CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）

如：

元素选择器

类选择器

Id选择器

通用选择器

组合选择器（根据它们之间的特定关系来选取元素）

如：

伪类选择器（根据特定状态选取元素）

例如，它可以用于：

设置鼠标悬停在元素上时的样式

为已访问和未访问链接设置不同的样式

设置元素获得焦点时的样式

如：当鼠标移动到a标签上时，颜色变为灰色

伪元素选择器（选取元素的一部分并设置其样式）

例如，它可用于：

设置元素的首字母、首行的样式

在元素的内容之前或之后插入内容

如：为所有 <p> 元素中的首行添加样式

属性选择器（根据属性或属性值来选取元素）

如：选择所有带有 target 属性的 <a> 元素

CSS的使用

CSS有三种使用方式，分别为内联样式、内部样式表和外部样式表。

内联样式：将CSS样式直接应用到HTML元素中，使用style属性来定义样式。例如：

内部样式是在 head 部分的 <style> 元素中进行定义。例如：

外部样式表：将CSS样式保存到独立的外部文件中，然后在HTML文档的<head>标签中使用<link>标签引用外部样式表。例如：

其中，href指向CSS文件的路径和文件名，rel属性指定链接的类型为样式表。

CSS属性

CSS属性有很多，它们用于控制HTML元素的外观和布局。

下面是一些常用的CSS属性:

background：指定网页元素的背景颜色或背景图案。

color：指定文本的颜色。

font-family：指定文本的字体。

font-size：指定文本的大小。

font-weight：指定文本的粗细程度。

text-align：指定文本的对齐方式。

text-decoration：指定文本是否加上下划线、删除线或其他修饰。

margin：指定网页元素外边距的大小。

padding：指定网页元素内边距的大小。

border：指定网页元素的边框样式。

display：指定CSS元素的显示方式。

float：指定元素的浮动方式。

position：指定元素的定位方式。

z-index：指定元素的层叠顺序。

width和height：指定元素的宽度和高度。

CSS属性与HTML标签一样，不需要背，只需要在需要使用时查询文档即可。

CSS盒子模型

CSS盒子模型是网页布局的基础概念，指的是把HTML元素看作是一个矩形的盒子，由内容、内边距、边框和外边距四个部分组成。

具体可看为：
内容：HTML元素所包含的文本、图像等内容即为盒子模型中的内容。内容的大小由width和height属性来指定。

内边距：指的是内容与边框之间的空间，是一个可选的属性，由padding-top、padding-right、padding-bottom、padding-left四个属性来指定内边距的大小。

边框（Border）：包围着内容和内边距，并为HTML元素提供了一个边缘的框架。边框的大小和颜色由border-width、border-style、border-color三个属性来指定。

外边距：位于边框和相邻元素之间的空白区域，是盒模型周围的空白区域，由margin-top、margin-right、margin-bottom、margin-left四个属性来指定外边距的大小。

总的来说，盒子模型的大小由内容、内边距、边框和外边距四个部分决定。盒子的实际大小就是width+padding+border+margin，其中width指定了内容的宽度，padding指定了内容和边框之间的间隔，border指定了边框的大小，margin指定了盒模型周围的空白区域。

弹性布局

CSS弹性布局也称为Flexbox布局，是一种用于创建灵活和自适应的布局模型。它可以方便地控制网页元素的位置、大小和对齐，而不需要使用复杂的CSS 代码。

在Flexbox布局中，我们可以将父元素设置为一个Flex容器，然后通过对Flex容器设置不同的flex属性和flex子元素的属性来实现灵活的布局：

display:flex：将容器设置为Flex布局。

flex-direction：设置子元素的排列方向，可以是行方向(row)或列方向(column)。

justify-content：设置子元素的主轴对齐方式（flex-start, flex-end, center, space-between, space-around等）。

align-items：设置子元素的交叉轴对齐方式（flex-start, flex-end, center, stretch, baseline等）。

flex-wrap：控制子元素是否换行（wrap, nowrap, wrap-reverse）。

flex-grow：控制子元素占据剩余空间的比例。

flex-shrink：控制子元素收缩宽度的比例。

align-self：在单个元素上设置交叉轴对齐方式。

Flexbox布局是一种非常强大和灵活的CSS布局方法，它可以轻松地实现按比例分配空间、动态布局、弹性对齐等复杂端效果的布局。但是，在使用Flexbox布局时需要注意一些兼容性问题。

转换

CSS转换是指通过对HTML元素应用CSS属性来改变元素的外观或布局。在CSS中，有多种类型的转换，包括：

位移转换（Translate）：通过位移转换可以让元素沿着X和Y轴方向移动。

旋转转换（Rotate）：通过旋转转换可以让元素绕着中心点旋转。

缩放转换（Scale）：通过缩放转换可以让元素的大小变化，可以放大或缩小元素。

扭曲转换（Skew）：通过扭曲转换可以让元素沿着X或Y轴扭曲变形。

比如：

上图就为按钮添加了一个转换，当鼠标经过按钮时，按钮将会放大大1.05倍

过渡

CSS过渡（transition）是一种控制CSS属性变化的动画效果，它可以使CSS属性发生变化时，从初始值变化到最终值，产生流畅的渐变过渡效果。过渡可以用于任何CSS属性，包括颜色、大小、位置、透明度等。

使用CSS过渡需要指定一些属性，包括：

transition-property：指定需要产生过渡效果的CSS属性。

transition-duration：指定过渡效果的持续时间，通常使用秒（s）或毫秒（ms）为单位。

transition-timing-function：指定过渡效果的时间函数，控制过渡的加速度。

transition-delay：指定过渡效果的延迟时间，例如在某个事件触发后等待一段时间再开始过渡。

例如下图代码就为一个当鼠标指针悬停在盒子上时，背景颜色会从红色渐变到蓝色，过渡效果持续一秒钟的过渡。

动画

CSS动画（animation）也是一种可以在浏览器中创建动画的技术。与CSS过渡不同，CSS动画可以使用多个关键帧来定义动画效果，可以在动画过程中控制元素的属性，并且可以使用循环、反向、延迟等选项来更精细地控制动画效果。

使用CSS动画需要定义以下属性：

animation-name：指定动画的名称（必需）。

animation-duration：指定动画的持续时间（可选）。

animation-timing-function：指定动画的时间函数（可选）。

animation-delay：指定动画的延迟时间（可选）。

animation-iteration-count：指定动画的循环次数（可选）。

animation-direction：指定动画的播放方向（可选）。

animation-fill-mode：指定动画完成后元素的最终状态（可选）。

例如：

上图代码会让一个红色的盒子在3秒钟内从红色变成蓝色，再变回红色。

上图代码就给li标签定义了一个动画效果，li标签会从屏幕底部一直运动到屏幕顶部，并会在运动过程中进行旋转，而且运动会一直持续下去。

总结：

HTML负责网页的结构和内容，标记文本、图片、视频等内容，并定义网页中的各种元素和语义。CSS负责网页的样式和布局，为网页添加颜色、字体、布局样式、动画效果等高级视觉效果，并控制网页的响应式布局。就像画画一样，我们先用HTML进行网页大体框架的编写，再用CSS为其美化上色。

	HTML	CSS
角色	页面结构和内容	页面样式和布局
功能	标记文本、定义元素和语义	添加颜色、字体、布局样式、动画效果
作用	负责网页结构、内容和语义	控制网页的外观和布局
实现	使用标签、属性和内容来创建网页	使用选择器和属性来控制样式
目标	创建可读性和可访问性强的网页	创建具有高级视觉效果的网页

北辰eternal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML & CSS 学习总结

HTML是用来描述网页的一种语言。HTML指的是超文本标记语言 (Hyper Text Markup Language)HTML不是一种编程语言，而是一种标记语言(markup language)标记语言是一套标记标签 (markup tag)HTML使用标记标签来描述网页CSS是一种用于描述网页样式的语言。CSS主要用于控制网页的呈现样式，如网页中元素的大小、颜色、字体、布局等方面。
复制链接

扫一扫