前端学习笔记（二、HTML）

最新推荐文章于 2025-01-18 22:11:30 发布

陈同学-

最新推荐文章于 2025-01-18 22:11:30 发布

阅读量145

点赞数

文章标签： html html5 css

本文链接：https://blog.csdn.net/c_2862659264/article/details/120747357

版权

本文详细介绍了HTML的基础知识，包括标题、段落、水平线、换行、注释、超链接、图像、列表、文本格式化和特殊字符的使用方法。重点讲解了如何创建和使用这些元素，强调了它们在网页结构和内容呈现中的作用。

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

HTML

1.HTML标题

HTML 标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

< h1 > 定义最大的标题。 < h6 > 定义最小的标签。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标题</title>
</head>

<body>
    <h1>HTML标签</h1>
    <h2>HTML标签</h2>
    <h3>HTML标签</h3>
    <h4>HTML标签</h4>
    <h5>HTML标签</h5>
    <h6>HTML标签</h6>
</body>

</html>

注释：浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

标题很重要

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
一个标题独占一行。

2.HTML段落

段落是通过 <p> 标签定义的。它可以将整个网页分为若干个段落。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML段落</title>
</head>

<body>
    <p>狐狸说：“对我来说，你只是一个小男孩，就像其他成千上万个小男孩一样没有什么两样。我不需要你。你也不需要我。对你来说，我也只是一只狐狸，与其他成千上万的狐狸没有什么不同。但是，如果你驯养了我，我们就会彼此需要。对我来说，你就是我的世界里独一无二的了；我对你来说，也是你的世界里的唯一了。
    </p>
</body>

</html>

注意：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。
</p> 是块级元素

3.HTML水平线

< hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML水平线</title>
</head>

<body>
    <p>狐狸说