[后端浅了解]HTML和CSS

yuxialuozi

已于 2023-07-11 16:06:19 修改

阅读量80

点赞数

分类专栏：后端浅了解文章标签： html 前端

于 2023-07-11 15:53:12 首次发布

本文链接：https://blog.csdn.net/yuxialuozi/article/details/131661843

版权

后端浅了解专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML（HyperText Markup Language）是一种用于创建网页和Web应用程序的标记语言。它是构建Web内容的基本构件，用于定义文本、图像、链接、多媒体等元素在网页中的结构和呈现方式。

HTML使用标签（Tags）来描述文档中的不同内容和元素。标签是由尖括号（<>）包围的关键词，如<p>表示段落，<h1>表示标题等。通过使用不同的标签，我们可以指示浏览器如何解析和显示网页内容。

HTML标签具有一定的层次结构。例如，<html>标签包含整个HTML文档，<head>标签包含头部信息（如标题、样式表等），<body>标签包含网页的主要内容。标签可以包含属性，用于提供进一步的指令和控制，比如设置元素的样式、指定链接目标等。

除了基本的标记元素外，HTML还支持超链接、表单、图像、音频、视频以及其他各种多媒体元素。通过将这些元素和标签正确组合使用，我们可以创建出丰富多样的网页和Web应用程序。

HTML是一种通用的标记语言，可被不同的浏览器和设备解析和显示。它与CSS（层叠样式表）和JavaScript等技术结合使用，可以实现更复杂的网页布局、样式和交互效果。使用HTML，开发人员可以创建具有良好结构、可访问性和可维护性的网页。

在HTML中，标签（Tag）是用于定义和包围不同类型内容的关键词。标签通常由一对尖括号（<>）包围，并且放置在 HTML 元素的开头和结尾之间。

HTML 标签有多种类型，每个类型都代表了不同的元素或内容。例如，<p> 是表示段落的标签，<h1> 是表示最大标题的标签，<a> 是表示链接的标签等。

HTML 标签的基本语法为：

<标签名>内容</标签名>

其中，<标签名>是起始标签（Opening Tag），用于标记开始的地方，</标签名>是结束标签（Closing Tag），用于标记结束的地方。开始标签和结束标签一起组成了一个完整的 HTML 元素。

在一些情况下，某些标签没有实际的内容，这时可以使用自闭合标签来表示。自闭合标签在起始标签上添加一个斜杠（/），例如 <br> 标签用于表示换行，它是一个自闭合标签，不需要结束标签。

除了起始标签和结束标签，HTML 标签还可以包含属性。属性提供了更多的信息和控制，用于定制和设置 HTML 元素的行为和样式。属性位于起始标签内部，由标签名和属性值组成。

例如，以下是一个包含属性的标签示例：

<a href="https://www.example.com">点击这里访问例子网站</a>

在这个示例中，<a> 标签是用于创建链接的标签。它的 href 属性指定了链接的目标 URL（指向 "https://www.example.com"），并且链接文本是 "点击这里访问例子网站"。

使用正确的标签和属性，可以创建出具有不同结构和样式的网页内容。

CSS（层叠样式表）是一种用于描述HTML或XML等文档如何呈现的样式语言。它定义了网页元素的外观和布局，通过为文档添加样式和格式，可以使网页更加美观、易于阅读和交互。

使用 CSS，可以将样式应用到 HTML 元素中，从而控制它们的外观和行为。CSS 的设计目标是实现内容和样式的分离，使得可以单独修改网页的样式而无需改变其结构。

CSS 通过选择器来选择需要应用样式的元素，并使用属性值对这些元素进行样式设置。选择器可以根据元素的标签名、类名、ID等进行选择。例如，可以使用以下 CSS 规则给所有段落设置红色字体颜色：

p {
  color: red;
}

在 CSS 中，属性和属性值的组合被称为规则。上面的例子中，color 是属性，red 是属性值。该规则告诉浏览器对所有 <p> 元素应用红色字体颜色。

除了常见的字体颜色、背景颜色等样式设置，CSS 还支持众多其他功能，例如：

盒模型：通过设置边距、内边距、边框和尺寸等属性来控制元素的大小和位置。
布局和定位：使用浮动、定位和弹性布局等属性来进行元素的排列和定位。
动画和过渡效果：通过设置关键帧动画或过渡效果，实现元素的动态变化。
响应式设计：使用媒体查询和响应式单位等功能，根据设备的不同特性调整网页的布局和样式。

可以将 CSS 样式直接写在 HTML 文件的 <style> 标签中，也可以将样式定义在外部的 CSS 文件中，然后通过链接引入到 HTML 文件中。

总而言之，CSS 是一种强大的样式语言，用于控制网页的外观和布局。通过分离内容和样式，它使得对网页的样式修改更加灵活、可维护，并且能够为用户提供更好的浏览和交互体验。

以下是一个基本的HTML页面结构：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }
        h1 {
            color: blue;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是一个演示HTML的文本段落。</p>
    <img src="image.jpg" alt="图片">
    <a href="https://www.example.com">点击这里访问例子网站</a>
</body>
</html>

在这个示例中，<html>标签用于定义整个HTML文档的根元素。<head>标签包含了文档的头部信息，如标题(<title>)和样式表(<style>)。<body>标签用于包含页面的主要内容。

在样式表中，我们定义了一些简单的CSS样式规则，用于设置页面的背景颜色、标题的颜色和段落的颜色。

在<body>标签内部，我们使用<h1>标签创建了一个大标题，使用<p>标签创建了一个段落。通过使用<img>标签，我们可以插入一个图片，其中src属性指定了图片路径，alt属性提供了当图片无法显示时的替代文本。

最后，使用<a>标签创建了一个超链接，其中href属性指定了链接的目标URL，链接文本是"点击这里访问例子网站"。

您可以将上述代码复制到一个文本编辑器中，将文件保存为.html扩展名，并在浏览器中打开该文件，即可看到网页的效果。请确保将image.jpg替换为您自己的图片路径，并将链接的URL更改为您想要的目标网站。

yuxialuozi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[后端浅了解]HTML和CSS

属性提供了更多的信息和控制，用于定制和设置 HTML 元素的行为和样式。它定义了网页元素的外观和布局，通过为文档添加样式和格式，可以使网页更加美观、易于阅读和交互。通过分离内容和样式，它使得对网页的样式修改更加灵活、可维护，并且能够为用户提供更好的浏览和交互体验。CSS 的设计目标是实现内容和样式的分离，使得可以单独修改网页的样式而无需改变其结构。标签可以包含属性，用于提供进一步的指令和控制，比如设置元素的样式、指定链接目标等。使用正确的标签和属性，可以创建出具有不同结构和样式的网页内容。
复制链接

扫一扫