HTML基础标签使用手册

一、HTML文档基本结构

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>页面标题</title> </head> <body>   <!-- 页面内容 --> </body> </html> 

结构说明：

<!DOCTYPE html>：HTML5文档声

<html>：文档根元素

<head>：包含元信息

<body>：包含可见内容

二、核心标签详解

1. 元信息标签

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

charset：定义字符编码

viewport：控制移动端显示

2. 内容容器

<div class="container">   <p>段落内容</p> </div> 

div：通用容器

class：CSS类选择器

3. 导航菜单示例

<nav class="menu">   <a href="#home">首页</a>   <a href="#about">关于</a> </nav> 

三、标签使用规范

标签闭合：

正确：<p>内容</p>

错误：<p>内容

属性使用：

属性值必须用引号：class="header"

布尔属性可简写：disabled

嵌套规则：

块级元素可包含内联元素

列表项必须放在<ul>或<ol>中

四、特殊元素说明

body与框架入口

<body id="root">   <!-- 前端框架挂载点 --> </body>

id="root"：React/Vue等框架的默认挂载点

五、完整示例

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>示例页面</title> </head> <body id="root">   <header>     <h1>欢迎页面</h1>   </header>   <main>     <p>这是一个HTML5示例文档。</p>   </main> </body> </html> 

六、注意事项

用语义化标签

保持代码缩进

重要属性：

href：链接地址

src：资源路径

alt：图片替代文本

标签：无

你的评论