前端HTML编程1：初识html

经过之前一段时间的python学习，相信大家也懂得了python的基本语法，面向对象和数据库的使用等一些重要知识点，那从今天我们就开始学习HTML，关于前端的一些知识，为什么要学习前端呢？答案也很简单，到时候我们会接触到fastapi等 Python Web 框架，会涉及到前后端交互的过程，而在这个过程中，我们就会涉及到前端的知识点，前端对于网页开发，全栈开发，以及大部分人喜欢的游戏开发都有一定的关联

所以废话不多说，准备开凿！！！

一、什么是 HTML5？

HTML5 是 HTML 语言发展到第 5 个版本，它主要负责网页的结构。

可以理解为：

HTML → 网页结构（毛坯房）
CSS3 → 样式（装修）
JavaScript → 行为、交互（家电、功能）
API → 提供浏览器能力接口（例如本地存储、地理位置、Canvas 等）

HTML5 相比之前版本，新增了大量语义化标签和多媒体、交互 API，使网页开发更标准化、易维护。

二、WEB 标准三大组成部分

Web 标准由 W3C 和其他标准化组织制定，主要包括三个方面：

标准	作用
结构（Structure）	网页的整体架构，HTML 负责
表现（Presentation）	网页的外观，CSS 负责
行为（Behavior）	网页的动效、动画及交互，JavaScript 负责

小提示：遵守 Web 标准能保证网页在不同浏览器下的兼容性和可访问性。

三、常见浏览器与内核

浏览器	内核
IE / Edge	Trident / EdgeHTML
Firefox	Gecko
Chrome	Blink（Webkit 分支）
Safari	Webkit

小技巧：国内一些双核浏览器（如 360 浏览器）内置 Trident 和 Blink 内核，使用"兼容模式"时通常是 Trident。

四、HTML 基本骨架

新建 HTML 文件时，需要注意：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!-- 网页主体内容写在这里 -->
</body>
</html>

标签关系

嵌套关系 ：父子标签，如 <head><title></title></head>
并列关系 ：兄弟标签，如 <head></head><body></body>

建议：嵌套标签缩进 1 个 Tab；并列标签上下对齐。

五、常用标签

1. 标题标签

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>

注意：h1 一般用于最重要的标题，通常只使用一次。

2. div 标签

用于划分网页不同部分，构建网页主体骨架。

3. 段落标签 p

html 复制代码

<p>这里是一段文字</p>

注意：p 标签中不能嵌套 div 或其他块级元素。

4. 换行标签 br

<br />

用于强制换行。

5. 水平线标签 hr

<hr />

六、列表标签

1. 无序列表 ul

html 复制代码

<ul>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>

子标签必须是 li
默认圆点符号，可通过 type 属性或 CSS 修改

2. 有序列表 ol

html 复制代码

<ol type="A">
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>

type 可选值：1（数字）、A/a（字母）、I/i（罗马数字）

3. 定义列表 dl

html 复制代码

<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>
<dt>显示器</dt>
<dd>显示信息的装置</dd>
</dl>

dt：定义项
dd：定义说明

列表中可嵌套其他标签，项目内容不仅限文字。

七、行内标签

span

html 复制代码

<p>让文字<span style="color:red">变红色</span></p>

用于包裹文字，视觉上不改变布局，可通过 CSS 添加样式。

a 标签 - 超链接

html 复制代码

<a href="https://www.baidu.com" target="_blank">点我跳转到百度</a>

target 可选：_blank（新标签页）、_self（当前页）、_new（单一新标签页）

a 标签 - 锚点

html 复制代码

<a href="#wrap">跳转到页面某部分</a>
<div id="wrap">目标位置</div>

常用于页面内跳转

八、meta 标签

html 复制代码

<meta charset="utf-8">
<meta name="keywords" content="关键词1, 关键词2">
<meta name="description" content="网页描述">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

九、HTML 书写规范

标签、属性名和符号均使用英文半角小写
注释：
id、class 必须以字母开头
所有双标签必须闭合
标签按层次缩进
属性值必须加引号

十、HTML5 新增语义标签

标签	作用
`<header>`	页面或区域头部
`<footer>`	页面或区域底部
`<nav>`	导航栏
`<article>`	独立文章或内容块
`<section>`	页面区块
`<aside>`	侧边栏内容

十一、总结与建议

HTML5 入门不难，关键是多动手练习。

只看不练 → 永远不会
动手敲 → 才能掌握

建议：

安装 VSCode 编辑器
将本文代码全部敲一遍
尝试修改参数，观察网页效果变化

如果这篇文章对你的学习道路有帮助的话，点点免费的赞赞叭！！！

每日励志文案：

倘若穷途末路，那便势如破竹