HTML 基本语法特性与 title 标签介绍-CSDN博客

本文链接：https://blog.csdn.net/chinayun_6401/article/details/141346652

title标签

在 HTML 中，<title>标签起着至关重要的作用，它主要用于定义文档的标题。通常情况下，<title>标签被放置在<head>标签内部，是网页不可或缺的重要组成部分。

浏览器显示：

<title>标签的内容会在浏览器的标签栏中呈现，使用户能够迅速了解网页的主题。当用户将网页添加至收藏夹或者书签时，<title>标签的内容也会作为该网页的名称进行显示。

搜索引擎优化（SEO）：

搜索引擎会依据<title>标签的内容来判定网页的主题与相关性。一个清晰、准确且包含关键词的<title>标签，对于提升网页在搜索引擎中的可见性起着极为重要的作用。

用户体验：

一个优质的<title>标签能够助力用户快速判断网页是否与自身需求相关，进而提高用户的点击率以及在网页上的停留时间。

示例代码如下：

<title>我是文档的标题</title>

HTML 的基本语法特性

对换行和缩进不敏感

在 HTML 中，页面的结构并非由缩进来体现嵌套关系，其主要取决于标签之间的包裹关系。这就意味着，HTML 标签无论是否进行换行操作以及是否存在缩进，都不会对页面的最终呈现结构产生任何影响。

例如，以下三种写法在功能方面完全等效，具体代码如下所示：

不换行不缩进：

<body>  
<div><h1>标题</h1><p>段落</p></div>  
</body>

换行不缩进：

<body>  
<div>  
<h1>标题</h1>  
<p>段落</p>  
</div>      
</body>

换行缩进（推荐）：

<body>  
    <div>  
        <h1>标题</h1>  
        <p>段落</p>  
    </div>  
</body>

分析：无论采用上述哪种写法，浏览器在对页面进行解析和渲染时，都会依据标签的层次结构准确无误地展示内容。

运行结果：

空白折叠现象

在 HTML 中，所有文字之间的空格、换行以及缩进（tab）都会被折叠为一个空格进行显示。

这种特性使得页面在呈现时不会因为过多的空白字符而出现布局混乱的情况。例如，如果在 HTML 代码中有多个连续的空格或者换行，在浏览器中最终显示的效果只会是一个单一的空格分隔文字内容。

示例代码如下：

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

运行结果：

标签要严格封闭

HTML 标签必须严格封闭，以避免出现错误。如果标签没有正确封闭，可能会导致意想不到的结果。

例如，如果<title>标签的结束标签没有封闭，从<title>开始直到</head>、…、</body>、</html>之间的所有标签、文字和内容都有可能显示在浏览器的标题栏中，这显然不是预期的行为。

为了确保页面的正确性和稳定性，在编写 HTML 代码时，应始终确保所有的标签都被正确地封闭，遵循良好的编码规范。

示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
    <title>标签要严格封闭<title>  
</head>  
<body>  
    <div>  
        <p>段落</p>  
    </div>  
</body>  
</html>

运行结果：