当前位置：首页 > article >正文

HTML基础内容2

article 2025/3/19 9:04:11

HTML标题

标题使用<h1>到<h6>来定义
<h1>定义非常重要的标题，<h6>定义不太重要的标签

<h1> 标题 1</h1>
<h2> 标题 2</h2>
<h3> 标题 3</h3>
<h4> 标题 4</h4>
<h5> 标题 5</h5>
<h6> 标题 6</h6>

搜索引擎标题索引页面的结构和内容，用户浏览网页的标题，使用标题来显示文档结构。<h1>应该用于主标题，其次是标题<h2>，然后不重要的<h3>依次递减。

HTML水平线

标签用来划分不同的专题，通常显示为一条水平线

<h1>标题</h1>
<p>段落</p>
<hr>

<h2>标题</h2>
<p>段落</p>
<hr>

HTML`<head>`元素

<head> 元素和HTML标题无关
<head>元素是 metadatya的一个容器，metadata是关于HTML文档的数据。Metadata不显示.<head>元素放在<html>和<body>标签之间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>段落</p>
</body>
</html>

HTML段落

HTML段落由<p>定义

  <p>段落</p>
  <p>段落</p>

HTML显示

HTML如何显示无法确定，屏幕可大可小，和窗口的调整会产生不同的结果。在HTML中，不能在代码中添加额外的空格和空行来改变输出。当页面显示时，浏览器会自动移除任何额外的空间和线条。

<p>
    这是一个段落
    在源码中包含很多行
    但是浏览器会将它们合并为一个空格
</p>
<p>
    这是 一个     段落
    在源码      中包含       很多空格
    但是浏览器会将它们合并为一个空格
</p>
<p>
    段落的行数和窗口的大小有关，如果浏览器窗口太小也会发生变化，以下是具体实例
</p>

网页效果显示

结束标签非常重要，任何请路况下都不能忘记添加结束标签

HTML换行

HTML<br>元素定义了一个换行。使用<br>后，换行不需要开始一段新的段落

<p>
    这是<br>换行<br>的效果
</p>

代码网页显示效果

HTML`<pre>`元素

HTML<pre>元素定义预处理格式化文本。元素中的文本以固定宽度字体显示，并且保留空格和换行符，一下是效果对比：

<P>未使用pre效果展示<br></P>
<p>
    人生得意须尽欢，

    莫使金樽空对月。

    天生我材必有用，

    千金散尽还复来。
</p>
<p>这是pre元素处理后效果<br></p>
<pre>
    人生得意须尽欢，
    莫使金樽空对月。
    天生我材必有用，
    千金散尽还复来。
</pre>