HTML的基础知识

EvLast

于 2023-10-08 15:12:12 发布

阅读量469

点赞数 4

分类专栏： HTML基础知识文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/2303_79299383/article/details/133681301

版权

HTML基础知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>相应的类型

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">

-->

好了今天的内容就到这里。

EvLast

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML的基础知识

上述代码将该段落的文本颜色设置为蓝色，字体大小设置为16像素。
复制链接

扫一扫

专栏目录