HTML的基础知识
1. <hr/>
<hr/>定义: <hr/>是HTML标记，表示水平分割线。它通常用于在网页中创建分隔内容的线条。该标记将在网页中创建一条水平线，与页面的宽度相同。
然后我举个例子:
<h1>This is header </h1>
<hr />
<p>This is a text</p>运行结果:
在HTML中，<hr/>标签表示水平线（horizontal rule），用于在页面中创建一条水平分割线。它常用于将文本、章节或其他内容分隔开来，以提高可读性和视觉效果。可以使用CSS样式来控制<hr/>的高度、颜色、边距等属性,在HTML中，<hr/>标签在过去常用于创建水平分割线，但随着页面设计的发展和CSS的广泛应。
它的使用频率有所下降。现在更多的是使用CSS来创建自定义的分割线效果，比如使用border、background、margin等属性来实现更灵活的样式。不过，<hr/>标签仍然是HTML规范中的一部分，而且在某些情况下仍然可以方便地使用，尤其是在简单的内容分隔或者传统的文档结构中。
HTML 与 XHTML 之间的差异:
1.)在 HTML 中，<hr> 标签没有结束标签。
2.)在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。
3.)在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。
4.)在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈现属性均不被支持。
2.<p></p>标签
<p>标签用于定义HTML文档中的段落（paragraph）。它是最常用的文本容器元素之一。当使用<p>标签时，浏览器会自动在段落前后添加一些默认的间距，以使段落内容在页面上更好地呈现。
例如，下面的代码演示了如何在HTML文档中创建一个段落：
<p>这是一个段落。</p>
在上面的例子中，文本"这是一个段落。"被包含在<p>和</p>标签之间，表示这是一个段落的内容。当浏览器渲染该段落时，会自动进行换行，并根据默认样式进行缩进或其他样式调整。
可以通过CSS来自定义<p>标签的样式，包括字体、颜色、对齐方式等。例如：
<p style="color: blue; font-size: 16px;">这是一个自定义样式的段落。</p>
上述代码将该段落的文本颜色设置为蓝色，字体大小设置为16像素。
还有一点要注意不要忘记结束标签</p>
总之，<p>标签提供了一种简单而方便的方式来创建段落，并在网页设计中扮演着重要的角色。
3.<br/>标签
<br/>标签是HTML中的一个空标签，表示换行（line break），用于在文本中强制插入一行空白。与<p>标签不同，<br/>标签不会创建新的段落，所以使用它不会在文本前后添加额外的间距。
例如，下面的代码演示了如何在HTML文档中使用<br/>标签：
<p>这是第一行<br/>这是第二行</p>
在上面的例子中，<br/>标签被用于分隔第一行和第二行文本，并使其在页面上显示为两行。当浏览器渲染该段落时，第二行文本将从新的一行开始显示。
需要注意的是，<br/>标签是一个空标签，不需要结束标记。此外，由于它不是块级容器元素，不能被用来包含其他的HTML元素。
总之，<br/>标签是一种简单并且常用的标签，用于在HTML文本中插入换行符，使文本在页面上显示为多行。
例子:
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
</body>
</html>
结果:
4.<style>标签
当您使用<style>标签时，可以在其中编写CSS代码来定义网页的样式。以下是一些常见的CSS属性和用法示例：
1. 设置背景颜色：
<style>
body {
background-color: lightblue;
}
</style>2. 设置文本颜色和字体：
<style>
p {
color: red;
font-family: Arial, sans-serif;
}
</style>3. 设置边框样式和宽度：
<style>
.box {
border: 1px solid black;
}
</style>4. 设置元素尺寸和布局：
<style>
.container {
width: 500px;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>5. 设置元素动画效果：
<style>
.box {
animation: spin 2s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>些只是一些简单的示例，您可以根据需要自由发挥，并根据CSS的各种属性和选择器进行更复杂的样式定义。记住，在<style>标签中编写的CSS代码将应用于页面中所有匹配选择器的元素。
<style>相应的类型
<style>标签用于在HTML文档中嵌入CSS代码，它本身并没有具体的类型。然而，可以通过在<style>标签内部编写的CSS代码的内容和用途来将其分类为不同的类型。以下是一些常见的<style>标签使用的类型：
1. 内联样式（Inline Styles）：直接在HTML元素的style属性中使用<style>标签来定义样式。这种方式通常适用于单个元素或特定情况下的样式定义。例如：
<p style="color: red;">这是一个红色文字段落。</p>
2. 内部样式表（Internal Style Sheet）：在<head>标签内使用<style>标签，将CSS代码直接嵌入到HTML文档中。这种方式适用于整个HTML文档或多个页面都共享相同的样式定义。例如：
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>这是一个蓝色文字段落。</p>
</body>
3. 外部样式表（External Style Sheet）：将CSS代码保存为独立的外部文件（通常是以.css扩展名），并通过<link>标签将其链接到HTML文档中。这种方式适用于多个页面共享同一样式定义，实现样式与内容的分离和复用。例如：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个外部样式表定义的文字段落。</p>
</body>
无论使用哪种方式，在<style>标签中编写的CSS代码都能够为HTML元素提供样式和布局定义。您可以根据具体需求选择适合的方式来组织和使用CSS代码。
5.HTML 注释
注释标签 <!-- 与 --> 用于在 HTML 插入注释。
<!DOCTYPE html>
<html>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>一个段落。</p>
</body>
</html>
和语言注释一样这样图片都可以注释掉
<!-- 此时不显示图片
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
-->
好了今天的内容就到这里。
本文作者：2c237c6
本文链接：https://www.cnblogs.com/27dCnc/p/18568712
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix