HTML入门

原创于 2025-12-15 20:05:33 发布 · 327 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML 基础学习笔记

一、学习前的比喻与概念

核心要点：

HTML：构建网页骨架
CSS：定义网页样式
JavaScript：实现交互功能

二、HTML 基本结构与语法

<!-- HTML基础：

常用标签约30-40种
标签语法：
- 单标签（自闭合）：<tag> 或 <tag />
- 双标签：<start></end>
标签关系：
- 父子关系：直接包含（如html与head）
- 兄弟关系：同父元素（如head与body）
- 祖先后代：间接包含（如html与meta） -->

基本文档结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body></body>
</html>

三、标签完整写法

四、DOCTYPE与根标签

<!-- DOCTYPE声明：

声明文档类型为HTML
确保浏览器按HTML规范解析

HTML根标签：

所有标签的祖先
每个文档只能有一个
lang属性定义页面语言 -->

<!DOCTYPE html>
<html lang="en">

五、head标签详解

<!-- head标签功能：

配置网页基本信息
设置标题、描述等SEO相关元素 -->

meta标签与字符集

<!-- charset="UTF-8"：

指定字符编码
防止乱码问题 -->

<meta charset="UTF-8">

视口配置

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

优化配置

<meta name="description" content="页面描述...">
<meta name="keywords" content="关键词1,关键词2">
<title>页面标题</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">

六、body主体内容

<!-- body标签：

包含网页主要内容
用户可见部分 -->

<body>
  页面内容
  <img src="" alt="">
</body>

七、HTML实体（特殊符号）

<!-- HTML实体：

替代被HTML保留的字符
语法：&entity_name;

5>4 4<3 ©

八、HTML标签分类

块级标签（block）

独占一行
可设置宽高
默认宽度100%
示例：<div>, <p>, <h1>-<h6>

行内标签（inline）

不独占一行
不可设置宽高
示例：<a>, <span>, <em>

行内块标签（inline-block）

兼具两者特性
标签间有3px间距
示例：<img>, <input>, <button>

九、标签关系总结

关系类型	示例
父子关系	`<html>` 是 `<head>` 的父元素
兄弟关系	`<head>` 与 `<body>` 是兄弟
祖先后代	`<html>` 是 `<meta>` 的祖先

十、学习总结

HTML是网页开发的基础，理解其结构和语义对后续学习CSS和JavaScript至关重要。写出语义化的HTML代码是专业前端开发的起点。