HTML — 基本标签_html——基本标签-CSDN博客

本文链接：https://blog.csdn.net/2403_89893216/article/details/147035539

HTML介绍

HTML（超文本标记语言，HyperText Markup Language）是构建网页和Web应用的基础技术，用于定义网页的结构和内容。它通过一系列标签（如<p>、<a>、<img>）来标记文本、图片、超链接等元素，并使用属性（如 href、src、class）提供额外信息或功能。一个标准的HTML文档包含<html>根元素，内部由<head>（定义标题、字符集等元数据）和<body>（存放可见内容）组成。

HTML是静态网页的核心，但需结合CSS（控制样式）和JavaScript（实现交互）才能构建现代网页。它遵循 W3C 制定的开放标准，确保跨浏览器和跨平台兼容性。作为前端开发的三大基石之一，HTML简单易学，是入门Web开发的必经之路，也是SEO优化和响应式设计的基础。

基本标签

HTML基本标签是构建网页的核心元素，以下是HTML中最基本和常用的标签，掌握它们可以构建简单的网页结构。

文档结构标签

HTML文档结构由<!DOCTYPE html>声明和<html>根元素组成，其中<head>定义元信息，<body>包含页面可见内容。这四个核心标签构建了网页的基础框架，是所有HTML文档的必备结构。

<!DOCTYPE html>  <!-- 声明文档类型为HTML5 -->
<html>          <!-- HTML文档的根元素 -->
<head>          <!-- 包含文档的元信息 -->
    <title>页面标题</title>  <!-- 浏览器标签页显示的标题 -->
</head>
<body>          <!-- 包含网页的可见内容 -->
    <!-- 页面内容放在这里 -->
</body>
</html>

文本标签

HTML文本标签用于定义内容结构和样式，包括标题<h1>-<h6>、段落<p>、换行<br>以及强调文本的<b>等。这些标签帮助组织文本内容并控制其在网页中的显示方式。

<h1>到<h6>      <!-- 标题标签，h1最大，h6最小 -->
<p>段落文本</p>  <!-- 段落标签 -->
<br>            <!-- 换行（空标签，无需闭合） -->
<hr>            <!-- 水平线（空标签） -->
<b>加粗文本</b>  <!-- 强调文本，通常显示为加粗 -->
<span>行内容器</span>    <!-- 用于对行内元素分组 -->

链接和图片

HTML链接：使用<a>标签创建超链接，通过href属性指定目标地址，实现页面跳转或资源访问。

HTML图片：通过<img>标签嵌入图像，src属性定义图片路径，alt属性提供替代文本以增强可访问性。

<a href="url">链接文本</a>  <!-- 超链接 -->
<img src="image.jpg" alt="描述文本">  <!-- 图片（空标签） -->

列表

分为有序列表<ol>（数字排序）和无序列表<ul>（项目符号），列表项用<li>标签定义。

<ul>            <!-- 无序列表 -->
    <li>项目1</li>
    <li>项目2</li>
</ul>

<ol>            <!-- 有序列表 -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

表格

使用<table> 标签定义，包含行<tr>、表头<th>和单元格<td>，用于结构化展示数据。

<table>         <!-- 表格容器 -->
    <tr>        <!-- 表格行 -->
        <th>表头单元格</th>  <!-- 表头 -->
        <th>表头</th>
    </tr>
    <tr>
        <td>数据单元格</td>  <!-- 表格数据 -->
        <td>数据</td>
    </tr>
</table>

表单

通过<form>标签定义，包含输入元素（如<input>,<select>），用于收集和提交用户数据到服务器。

<form action="处理程序地址" method="post/get">
    <input type="text" name="字段名" placeholder="提示文本">
    <input type="password" name="密码字段">
    <input type="submit" value="提交按钮">
    <select name="下拉列表">
        <option value="值1">选项1</option>
        <option value="值2">选项2</option>
    </select>
    <button type="button">普通按钮</button>
</form>

分区标签

使用<div>作为通用块级容器，配合<spam>作为内联容器，用于结构化布局和样式控制。

<div>块级容器</div>      <!-- 块级元素，常用于布局 -->
<span>行内容器</span>    <!-- 行内元素 -->

总结

HTML是构建网页的核心语言，通过标签定义内容结构和样式。文档以<!DOCTYPE html>开头，<html>作为根元素包裹整个页面，其中<head>包含元信息如标题和引用的资源，<body>则承载所有可见内容。文本内容通过标题标签<h1>至<h6>、段落<p>和换行<br>等标签组织，而<b>等标签用于文本格式化。

超链接<a>和图片<img>实现了资源跳转与嵌入，列表通过<ul>、<ol>和<li>展示条目化内容，表格则用<table>、<tr>和<td>结构化数据。表单<from>整合输入控件如<input>、<select>，支持用户数据提交。布局上，通用容器<div>和<span>结合CSS控制样式。这些标签共同构成了网页的基础框架，为内容展示和交互功能提供支持。