HTML基础知识总结

HTML 简介

HTML（Hyper Text Markup Language）是用于创建网页的主要语言，它是一种标记语言，通过使用标签（tag）来描述页面的结构和内容。当浏览器加载HTML文件时，会根据标签对页面进行解析，并在页面中显示相应的内容。

HTML 基本结构

HTML文档由三部分组成：文档类型声明、HTML标签和文档内容。

<!DOCTYPE html>  <!-- 文档类型声明，用来定义文档的类型 -->
<html>          <!-- HTML标签，包含了整个页面内容 -->
  <head>        <!-- head标签，用于定义文档的头部信息 -->
    <title>页面标题</title>  <!-- title标签，用于定义页面的标题 -->
  </head>
  <body>        <!-- body标签，用于定义文档的主体内容 -->
    <!-- 文档内容 -->
  </body>
</html>

其中，<!DOCTYPE html>用于声明文档类型为HTML5，<html>标签包含了整个页面的内容，<head>标签用于定义文档的头部信息，包含了元数据和文档的标题，而<body>标签用于定义文档的主体内容，包含了网页中显示的实际内容。

HTML 标签

HTML标签是用于定义网页内容和结构的元素，它们由尖括号括起来，并且通常是成对出现的。

<!-- 标签的基本格式： -->
<tagname>content</tagname>

<!-- 示例：定义一个段落 -->
<p>This is a paragraph.</p>

在上面的例子中，<p>标签用于定义一个段落，</p>则表示结束标签。

除了普通标签之外，还有很多其它类型的标签可用于不同的场景，比如表格、图片、链接等，这些标签都有自己特俗的属性和应用方式，以下是一些常用的标签及其属性。

<a>：用于创建链接，其属性包括href、title等。
<img>：用于插入图片，其属性包括src、alt、height、width等。
<table>：用于创建表格，其属性包括border、width、height、cellspacing、cellpadding等。
<form>：用于创建表单，其属性包括action、method、name、target等。
<input>：用于创建表单中的输入控件，其属性包括type、name、value、checked等。

HTML 属性

HTML标签可以包含属性，属性用于定义标签的额外信息，它们通常被用于指定标签的行为和样式。属性需要指定名称和对应的值，以name="value"的形式出现。

<!-- 示例：定义一个带链接的图片 -->
<a href="https://www.someurl.com">
  <img src="image.jpg" alt="图片描述">
</a>

在上面的例子中，<a>标签包含了href属性，用于指定链接的地址，<img>标签则包含了src和alt属性，用于指定图片的地址和描述。

HTML 注释

HTML中的注释用于添加备注或说明，并不会被浏览器解析或显示在页面上。注释用包围起来，与打开标签类似，但其不需要一个相应的结束标签。

<!-- 这是一个注释 -->
<p>This is a paragraph.</p>

注释可以在代码中用于添加说明或者临时禁用某段代码，但应避免在代码中出现过多的注释，以免降低可读性。

示例1：创建一个简单的网页

<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的网页例子。</p>
  </body>
</html>

在上面的例子中，我们创建了一个简单的HTML网页，包含了一个页面标题和一个段落。

示例2：创建一个链接和图片

<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <a href="https://www.baidu.com" target="_blank">
      <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度">
    </a>
  </body>
</html>

在上面的例子中，我们添加了一个链接和图片，通过<a>标签创建了一个包含百度链接的图片，并且在点击图片后会在新的浏览器标签页中打开。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML基础知识总结 - Python技术站