HTML标签和属性「主体结构浅析」-猿码集

1. HTML基础概述

HTML是Web页面开发的根本，是HyperText Markup Language的简称，是一种标记语言，用于创建和组织文本、图像和其他多媒体资源的网页。HTML定义了一个有意义的Page结构，通过使用不同的标签和属性来定义组成网页的不同元素。

HTML标签是构成网页的基本单元，它们以角括号<>界定，并且大多成对出现，包括一个开始标签和一个结束标签。开始标签通常包含一个命令，告诉浏览器如何显示元素，而结束标签则是把元素包裹其中的内容。在开始标签中，还可以包含多个属性，例如id、class、style、title等，这些属性为元素提供额外的信息，使其与其他元素区分开来，同时还可以控制元素的外观和行为等。


<标签名 属性1="值1" 属性2="值2">内容</标签名>

HTML中的标签有很多种，并且不断更新和扩展。在这些标签中，有一些是必不可少的，例如：<html>、<body>、<head>等，它们构成了页面的主体结构。

2. HTML主体结构

2.1 <!DOCTYPE>声明

<!DOCTYPE>声明出现在HTML文档的第一行，用于告诉浏览器使用哪个HTML版本解析文档。HTML5的doctype声明如下：

<!DOCTYPE html>

该声明告诉浏览器按照HTML5的规范解析文档，这个声明可以让浏览器正确的渲染文档，使浏览器在渲染时按照最新的标准进行。一些老旧的浏览器可能不支持HTML5，此时可以选择使用在声明中使用旧版本的doctype声明，以使浏览器可以正确的对HTML文档进行解析。

2.2 HTML页面结构

HTML主体结构由三部分组成：<html>、<head>和<body>。其中，<html>是HTML文档的顶级元素，它包含了整个文档的内容。

<head>元素包含了页面的元数据，例如页面的标题、样式表、JavaScript代码等。<body>元素则包含了页面的所有可视元素，例如文本、图像、表单、多媒体等。


<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>页面内容</h1>
    <p>页面格式化内容</p>
    <img src="image.png" alt="图片">
    <form>
        <input type="text" name="username">
        <input type="password" name="password">
        <button type="submit">提交</button>
    </form>
</body>
</html>

当浏览器解析上述代码时，首先读取<!DOCTYPE html>声明，然后识别<html>标签作为文档的根元素，并且开始构建页面结构。<head>元素包含了页面的标题、字符编码、响应式设计和外部样式表等内容。<body>元素中包含了页面的可视内容，包括标题、段落、图片、表单等。

3. HTML常用标签和属性

3.1 文本格式标签

HTML提供了很多的标签用于格式化文本。这些标签可以让文本变得更加易于阅读和理解，并且可以增加页面的可读性和美观性。下面是一些常用的文本格式标签：

<h1> - <h6>：定义标题。

<p>：定义段落。

<br>：定义换行。

<hr>：定义水平线。

<b>：定义粗体文本。

<i>：定义斜体文本。

<u>：定义下划线文本。

<strong>：定义加粗文本。

<em>：定义着重文本。

标签的属性可以设置文本的颜色、字体、大小等样式效果，并且可以设置文本的对齐方式、行间距、字间距等排版效果。下面是一些常用的文本属性：

style：定义元素的样式（颜色、字体、大小等）。

class：定义元素的样式类。

id：定义元素的唯一标识符。

title：定义元素的工具提示文本。

align：定义元素的对齐方式。

3.2 图像标签

HTML中，<img>标签用于插入图像，src属性指定图像的URL地址，alt属性可以为图像定义一个替代文本，当图像无法正常显示时，会显示这个文本。

<img src="logo.png" alt="网站logo">

img标签是一个空元素，不需要闭合标签。

3.3 超链接标签

HTML中，<a>标签用于创建超链接，href属性指定链接的URL地址，可以是其他Web页面、图像、视频、音频文件等。

<a href="http://www.example.com">链接文本</a>

a标签中的文本被称为“链接文本”，它可以是任何文本或图像。当用户点击链接文本时，浏览器将访问href属性指定的URL地址。同时，可以通过target属性来指定链接的打开方式，_blank表示在新的窗口或标签中打开链接，_self表示在当前窗口或标签中打开链接。

3.4 表格标签

HTML中，<table>标签用于创建表格，<tr>标签用于定义表格行，<td>标签用于定义单元格，<th>标签也用于定义单元格，但是它具有更强的语义化，表示表格的头部单元格。


<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
        <td>男</td>
    </tr>
</table>

表格标签的属性可以定义表格的宽度、边框、对齐方式、行间距、列间距等一系列格式化效果。

3.5 表单标签

HTML中，<form>标签用于创建表单，<input>标签用于定义表单的输入字段，<label>标签用于定义输入字段的名称。


<form>
    <label>用户名:</label>
    <input type="text" name="username"><br>
    <label>密码:</label>
    <input type="password" name="password"><br>
    <button type="submit">提交</button>
</form>

表单标签还有一些其他的属性，例如：action、method、enctype等，它们用于设置表单的处理方式、提交方法和编码方式等。

4. 总结

HTML是Web页面开发的基础，通过使用HTML标签和属性，可以创建有意义的页面结构，并且可以定义页面的文本格式、图像、超链接、表格和表单等多种元素。学习HTML是Web开发的入门基础，下一步还需要学习CSS和JavaScript等进一步的技术。

HTML的发展日新月异，新标签和新属性不断涌现，学习HTML需要不断地学习和更新。同时，需要注意HTML的语义化，选择合适的标签和属性来描述文档结构，让文档的语义更加明确。

HTML标签和属性「主体结构浅析」