HTML

HTML 知识量:9 - 26 - 70

2.1 HTML结构><

HTML的基本结构- 2.1.1 -

HTML(HyperText Markup Language,超文本标记语言)的结构主要可以分为三大部分:HTML、头部(Head)和主体(Body)。

  1. HTML:HTML部分以<html>标签开始,以</html>标签结束。这个部分告诉浏览器这两个标签中间的内容是HTML文档。

  2. 头部(Head):头部部分以<head>标签开始,以</head>标签结束。这部分包含了显示在网页标题栏中的标题和其他在网页中不显示的信息。标题被包含在<title>和</title>标签之间。此外,头部还可能包含如字符集定义、CSS样式表链接、JavaScript脚本链接等元数据。

  3. 主体(Body):主体部分以<body>标签开始,以</body>标签结束。这部分包含了网页中显示的所有内容,如文本、图像、链接、表格、列表等。在<body>标签内部,可以使用各种HTML标签来定义和格式化内容。

文档声明- 2.1.2 -

文档声明,也称为DOCTYPE声明,是用于告知浏览器当前网页所使用的HTML版本或DTD(文档类型定义)的声明。这个声明位于HTML文档的最开始部分,位于<html>标签之前。

文档声明对于浏览器来说非常重要,因为它决定了浏览器如何解析和渲染页面内容。不同的HTML版本(如HTML4.01、XHTML1.0、HTML5等)有不同的文档声明,这些声明指定了不同的DTD和解析规则。

例如,HTML5的文档声明是<!DOCTYPE html>,它告诉浏览器当前页面使用的是HTML5标准,没有DTD,浏览器会按照HTML5的规范来解析和渲染页面。

而在HTML4.01中,文档声明会同时声明DTD,如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。这个声明告诉浏览器当前页面使用的是HTML4.01 Transitional标准,并指定了相应的DTD。浏览器会根据这个DTD来解析和渲染页面,确保内容的正确显示。

需要注意的是,文档声明应该始终放在HTML文档的最前面,位于<html>标签之前。否则,浏览器可能会按照默认的模式(如怪异模式)来解析页面,导致页面显示出现问题。

HTML标签- 2.1.3 -

HTML标签的作用,是告诉浏览器,这个页面是从<html>开始,然后到</html>结束的。

<html lang="en">
</html>

head标签- 2.1.4 -

<head> 标签是 HTML 文档中非常重要的一个部分,它位于 <html> 标签内,并且在 <body> 标签之前。<head> 标签用于包含文档的元信息,这些信息不会直接显示在页面上,但是对于浏览器、搜索引擎和用户来说都非常重要。

以下是 <head> 标签中常见的一些元素和它们的作用:

  • title:定义文档的标题,这个标题会显示在浏览器的标签页上。它是 <head> 部分中唯一必需的元素。

  • meta:提供有关页面的元信息,比如字符集定义、页面描述、关键词等。<meta> 标签通常用于搜索引擎优化(SEO)和页面显示设置。

  • link:用于链接外部资源,最常见的是链接 CSS 样式表文件,以便为页面应用样式。

  • style:用于包含内部 CSS 样式,直接在 HTML 文档中定义样式规则。

  • script:用于引入 JavaScript 代码,实现页面上的交互功能和动态效果。

  • base:为页面上的所有相对 URL 规定默认地址或默认目标。

<head> 标签内的元素通常是按照特定的顺序排列的,以确保浏览器能够正确地解析和渲染页面。通常,<meta> 标签会放在最前面,然后是 <title>、<link>、<style> 和 <script> 等标签。

<head> 标签中的内容对于页面的布局和显示并不重要,但是对于搜索引擎优化、页面性能和可访问性等方面有着深远的影响。因此,在编写 HTML 文档时,合理组织和利用 <head> 标签中的元素是非常重要的。

以下是一个包含 <head> 标签的 HTML 文档示例:

<!DOCTYPE html>  
<html>  
<head>  
    <!-- 字符集声明 -->  
    <meta charset="UTF-8">  
      
    <!-- 页面标题 -->  
    <title>页面标题</title>  
      
    <!-- 页面描述和关键词,用于搜索引擎优化 -->  
    <meta name="description" content="这是一个示例页面的描述">  
    <meta name="keywords" content="HTML, head标签, 示例">  
      
    <!-- 链接外部样式表 -->  
    <link rel="stylesheet" href="styles.css">  
      
    <!-- 内部样式 -->  
    <style>  
        body {  
            background-color: #f0f0f0;  
            font-family: Arial, sans-serif;  
        }  
        h1 {  
            color: #333;  
        }  
    </style>  
      
    <!-- 引入 JavaScript 文件 -->  
    <script src="script.js"></script>  
</head>  
<body>  
    <!-- 页面内容 -->  
    <h1>欢迎来到我的网页!</h1>  
    <p>这是一个包含 head 标签的 HTML 示例。</p>  
</body>  
</html>

body标签- 2.1.5 -

body标签是HTML文档中的一个重要元素,它表示网页的主体部分。在浏览器显示的网页内容中,所有在<body>和</body>标签之间的内容,如文本、图片、超链接、表格、列表等,都属于body标签的范围。

在CSS中,body标签也是一个重要的选择器,可以通过它来为整个网页设置样式。例如,可以设置网页的背景颜色、字体、行高、边距等属性。这些设置可以使网页看起来更美观、更易读。

以下是一个包含body标签的HTML文档示例:

<!DOCTYPE html>  
<html>  
<head>
    <style>  
        body {  
            background-color: #f0f0f0;  
            font-family: Arial, sans-serif;  
        }  
        h1 {  
            color: #333;  
        }  
    </style>    
</head>  
<body>  
    <!-- 页面内容 -->  
    <h1>欢迎来到我的网页!</h1>  
    <p>这是一个包含 head 标签的 HTML 示例。</p>  
</body>  
</html>