当前位置：首页 > news >正文

html语法

news 2025/11/13 7:53:11

HTML基础与实战知识点汇总

HTML（超文本标记语言）是构建网页的基础，本文将汇总HTML的核心知识点，从基础结构到实战应用，帮助你系统掌握HTML编程。

一、HTML文档基础结构

HTML文档有固定的基本结构，所有网页都遵循这一框架：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>

核心组成部分说明：

<!DOCTYPE html>：声明文档使用HTML5规范
<html>：根元素，包裹整个HTML文档，lang属性指定页面语言（如zh-CN表示中文）
<head>：存放供机器处理的信息，不直接显示在页面上
- <meta charset="UTF-8">：指定字符编码为UTF-8，避免乱码
- <meta name="viewport">：用于响应式设计，确保移动端正常显示
- <title>：设置页面标题，显示在浏览器标签栏
<body>：包含页面的所有可见内容

二、HTML标签基础

1. 标签的基本概念

标签用尖括号<>``表示，分为**开始标签**（如
）和**结束标签**（如
`）
大部分标签是双标签（有开始和结束），少数是单标签（如<img>、<hr>）
标签可以嵌套，但不能交叉嵌套

2. 常用基础标签

标题标签（h1-h6）

用于表示不同层级的标题，从h1（最高级）到h6（最低级）：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- ... 直到h6 -->

标题文字默认加粗显示，独占一行
建议每个页面只使用一次h1，h2-h6根据内容结构合理使用（通常不超过3级）

段落标签（p）

用于定义文本段落，内容会自动换行：

<p>这是一个段落。段落文字会根据容器宽度自动换行，</p>
<p>多个p标签之间会有默认的间距。</p>

强调与格式化标签

用于对文本进行强调或格式化：

<strong>strong标签：表示重要内容，默认加粗显示</strong>
<em>em标签：表示强调内容，默认倾斜显示</em>
<ins>ins标签：表示插入的内容，默认下划线显示</ins>
<del>del标签：表示删除的内容，默认删除线显示</del>

水平线标签（hr）

单标签，用于添加水平线分隔内容：

<p>这是上方内容</p>
<hr>
<p>这是下方内容</p>

三、元素的分类

HTML元素分为块级元素和内联元素，两者在布局上有显著区别：

1. 块级元素

独占一行，宽度默认填满父容器
可以嵌套其他块级元素或内联元素
常见块级元素：p、h1-h6、div、header、nav、main、section、footer等

<!-- 块级元素示例 -->
<div>div是通用块级容器</div>
<h2>h标签是块级元素</h2>
<p>p标签也是块级元素</p>

2. 内联元素

不独占一行，多个内联元素可在同一行显示
通常用于包裹文本或其他内联元素，不能嵌套块级元素
常见内联元素：strong、em、a、span等

<!-- 内联元素示例 -->
<p>这是一段包含<span>span内联元素</span>和<a href="#">a链接</a>的文本</p>

四、语义化结构标签

HTML5引入了语义化结构标签，使代码更具可读性，同时帮助搜索引擎理解页面结构：

标签	含义	用途
`<header>`	头部	包含页面标题、Logo、导航等
`<nav>`	导航	存放主要导航链接
`<main>`	主要内容	页面核心内容，每个页面只应有一个
`<section>`	章节	对内容进行分块，包含相关主题的内容
`<article>`	文章	独立完整的内容（如博客、新闻）
`<aside>`	侧边栏	与主内容相关但非核心的内容（如注释、广告）
`<footer>`	页脚	包含版权信息、联系方式等

完整结构示例：

<body><header>页面头部（标题+导航）</header><nav>导航菜单</nav><main><section>第一部分内容</section><article>主要文章内容</article><aside>侧边栏信息</aside></main><footer>页脚信息</footer>
</body>

五、无语义标签

无语义标签不表示特定含义，主要用于布局和样式控制：

<div>：块级通用容器，用于组合其他元素

<div class="container"><h2>内容标题</h2><p>这是一段内容</p>
</div>

<span>：内联通用容器，用于包裹部分文本

<p>这是一段包含<span style="color: red;">红色文本</span>的段落</p>

六、超链接与锚点链接

超链接是网页导航的核心，通过<a>标签实现：

1. 基本语法

<a href="目标地址" 属性>链接文本</a>

2. 常见链接类型

外部链接：链接到其他网站

<a href="https://www.deepseek.com">跳转到DeepSeek官网</a>

内部链接：链接到同一网站的其他页面

<a href="11-音视频标签.html">跳转到音视频标签页面</a>

空链接：点击后停留在当前页面
```
<a href="#">空链接</a>
```

功能链接：

<a href="mailto:example@qq.com">发送邮件</a> <!-- 邮件链接 -->
<a href="tel:1234567890">拨打电话</a> <!-- 电话链接 -->
<a href="sms:1234567890">发送短信</a> <!-- 短信链接 -->

3. 常用属性

target：控制链接打开方式
- _blank：在新窗口打开
- _self：在当前窗口打开（默认）
```
<a href="https://www.deepseek.com" target="_blank">新窗口打开链接</a>
```

title：鼠标悬停时显示提示文字

<a href="https://www.deepseek.com" title="跳转到DeepSeek官网">悬停查看提示</a>

4. 锚点链接

用于在长页面中快速跳转到指定位置，步骤如下：

定义锚点目标（使用id属性）

<p id="section1">第一部分内容</p>

创建指向锚点的链接（使用#+id）

<a href="#section1">跳转到第一部分</a>

返回顶部示例（通常在页脚使用）

<a href="#top">返回顶部</a> <!-- 需在页面顶部元素设置id="top" -->

七、表格标签

表格用于展示结构化数据，核心标签如下：

标签	含义
`<table>`	表格容器
`<tr>`	表格行
`<th>`	表头单元格（默认加粗居中）
`<td>`	数据单元格
`<thead>`	表格头部
`<tbody>`	表格主体
`<tfoot>`	表格底部

1. 基本表格示例

<table><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>北京</td></tr><tr><td>李四</td><td>32</td><td>上海</td></tr></tbody>
</table>

2. 合并单元格

通过属性实现单元格合并：

colspan：水平合并（跨列）
rowspan：垂直合并（跨行）

示例：

<table><tr><th colspan="2">个人信息</th> <!-- 合并2列 --><th>城市</th></tr><tr><td>张三</td><td>28</td><td>北京</td></tr><tr><th rowspan="2">联系方式</th> <!-- 合并2行 --><td>电话：13800138000</td><td>北京</td></tr><tr><td>邮箱：zhangsan@example.com</td><td>北京</td></tr>
</table>

八、音视频标签

HTML5原生支持音视频播放，无需依赖插件。

1. 视频标签（video）

<video src="视频路径" controls poster="封面图路径"></video>

src：视频文件路径
controls：显示播放控制栏
poster：视频加载前显示的封面图

2. 音频标签（audio）

<audio src="音频路径" controls></audio>

src：音频文件路径
controls：显示音频控制栏

九、项目实践：综合应用

以下是一个科技新闻页面的综合示例，整合了上述大部分知识点：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>科技日报 - 探索未来科技</title><style>/* 样式省略，实际项目中会包含CSS美化 */</style>
</head>
<body><header><h1><a href="#" title="科技日报">科技日报</a></h1><p>探索未来科技，传递创新力量</p></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">科技动态</a></li><li><a href="#">国际科技</a></li></ul></nav><main><section><h2>量子计算机取得突破性进展</h2><p>中国自主量子计算机"本源悟空"实现重大突破...</p><img src="量子计算机.jpg" alt="量子计算机" title="量子计算机"></section><section><h3>行业数据</h3><table><tr><th>领域</th><th>投资额（亿美元）</th><th>增长率</th></tr><tr><td>人工智能</td><td>1200</td><td>23%</td></tr></table></section><section><h3>科技大讲堂视频</h3><video src="科技讲座.mp4" controls poster="讲座封面.jpg"></video></section></main><footer><p>© 2025 科技日报社 版权所有</p><a href="#top" class="back-to-top">↑ 返回顶部</a></footer><script>// 返回顶部功能（简单JS实现）const backToTop = document.querySelector('.back-to-top');backToTop.addEventListener('click', () => {window.scrollTo({ top: 0, behavior: 'smooth' });});</script>
</body>
</html>