HTML & CSS 学习总结-CSDN博客

本文链接：https://blog.csdn.net/m0_63587398/article/details/125699286

本文详细介绍了HTML的基本概念、标签、文档结构，以及CSS的样式设置、选择器、定位和浮动等内容。通过实例展示了如何使用HTML创建网页结构，以及如何利用CSS实现页面的布局和美化，包括颜色、尺寸和对齐方式的设定。同时，解释了盒子模型和定位方法，帮助理解网页元素的布局原理。

摘要由CSDN通过智能技术生成

HTML总结

1.什么是HTML?

HTML是用来描述网页的一种语言，即我们用HTML来构建Web页面即所谓的网页。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2.HTML标签

HTML标记标签通常被称为HTML标签。

HTML 标签是由尖括号包围的关键。
HTML 标签通常是成对出现的，但也有可以单独出现的标签，我们称之为自闭合标签。
标签对中的第一个标签是开始标签，第二个标签是结束标签。
标签是存在各种属性的，给属性赋不同的值可以实现不同的效果。

3.HTML文档结构

一个HTML文档就是通常意义上的一个网页。它里面包含HTML标签和纯文本，Web浏览器的作用就是读取HTML文档，并以网页的形式显示出来。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。而一个HTML文档的结构大致分为两个部位：头部和身体部。所谓头部即是head标签里面包含的内容；而身体部则是body标签里包含的内容。注意：body标签里面的内容才是会被渲染到Web页面上的，因此我们在编写HTML文档时，编写的内容都一定要放在body标签里面。

4.HTML常用标签

标题标签：是通过 h1 - h6 等标签进行定义的。h1 定义最大的标题。h6 定义最小的标题。
段落标签：段落是通过 p 标签定义的。
换行标签：在HTML中换行是通过br标签实现的。
超链接标签：超链接是通过a标签实现的，在实际应用中，我们经常给文本、图片等加上超链接。

如图便是通过a标签实现用户点击百度一下，便可去访问百度官网的效果。

div标签：定义文档中的节。
form标签：定义供用户输入的 HTML 表单。
ol标签：定义有序列表。
ul标签：定义无序列表。
table标签：定义表格。
input标签：定义输入框。

CSS总结

1.什么是CSS？

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

2.CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

实例:

p {
  color: red;
  text-align: center;
}

在此例中，所有 p元素都将居中对齐，并带有红色文本颜色。其中p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：p）；color 是属性，red 是属性值；text-align 是属性，center 是属性值。

3.CSS选择器

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

我们可将CSS选择器分为五类：

简单选择器（根据名称、id、类来选取元素）。
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

最为常用的是元素选择器、id选择器和类选择器。

1.元素选择器：元素选择器根据元素名称来选择 HTML 元素。

p {
  color: red;
  text-align: center;
}

在这里，页面上的所有 p 元素都将居中对齐，并带有红色文本颜色。

id选择器：id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
```
#para1 {
  text-align: center;
  color: red;
}       
```

这条 CSS 规则将应用于 id=“para1” 的 HTML 元素。

3.类选择器：类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，需要写一个句点（.）字符，后面跟类名。

.center {
  text-align: center;
  color: red;
}

这条 CSS 规则所有带有 class=“center” 的 HTML 元素将为红色且居中对齐。

4.CSS如何生效？

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。

有三种插入样式表的方法：

外部CSS
内部CSS
行内CSS

外部CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观。每张 HTML 页面必须在 head 部分的 link 元素内包含对外部样式表文件的引用。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部样式在 HTML 页面 head 部分内的 link元素中进行定义。外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。但注意：外部 .css 文件不应包含任何 HTML 标签。

内部CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 style 元素中进行定义。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

内部样式在 HTML 页面的 head 部分内的 style 元素中进行定义。

行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。如需使用行内样式，需要将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

行内样式在相关元素的 “style” 属性中定义。

当为某个 HTML 元素指定了多个样式时，样式优先级从高到底依次是：行内样式、内部样式表或外部样式表、浏览器缺省样式。