HTML入门知识
目录
一、什么是HTML
二、HTML文档的语法规则
三、HTML基本标签
四、HTML注释与特殊字符
1、注释
2、特殊字符
五、HTML属性
六、常见误区与建议
一、什么是HTML
HTML，全称Hyper Text Markup Language，即超文本标记语言，是一种用于创建网页和网页应用的标准标记语言，而非编程语言。HTML的历史可以追溯到1989年，当时蒂姆·伯纳斯-李提出了基于互联网的超文本系统概念，并在1991年发布了第一个HTML规范。此后，HTML经历了多次更新，从HTML 1.0到HTML 5.0，每一代都增加了新的功能和改进。目前，HTML5是最新版本，支持多媒体内容、离线存储、Web应用程序开发等功能。
HTML使用标签（tags）来标记不同类型的内容，如标题、段落、链接、图像等，这些标签通常被包含在尖括号（<>）中，并且大多数标签都有开始标签和结束标签。HTML文档的基本结构包括文档类型声明（DOCTYPE）、<html>根元素、<head>头部和<body>主体。<head>部分包含文档的元数据，如标题、字符编码、样式表链接和脚本等，而<body>部分则包含实际显示在网页上的内容。HTML还提供了表单（forms）元素，允许用户输入数据并提交给服务器。此外，HTML还支持多媒体内容，如嵌入视频和音频。
需要注意的是，HTML本身并不负责网页的样式或行为。样式通常通过CSS（Cascading Style Sheets）来实现，而行为则通过JavaScript等脚本语言来实现。HTML、CSS和JavaScript通常一起使用，以创建功能丰富、视觉上吸引人的网页。
二、HTML文档的语法规则
-
标签必须成对出现：如
<p>内容</p>，但有些标签是自闭合的，如<img src="image.jpg" />。 -
标签可以嵌套：一个标签可以包含另一个标签，但不能交叉嵌套。
-
使用小写标签：HTML标签不区分大小写，但为了代码美观和一致性，建议使用小写。
三、HTML基本标签
HTML基本标签定义了网页的结构和内容，通过合理使用这些标签，可以创建结构清晰、语义化的网页。此外，掌握这些标签的用法有助于进一步学习CSS和JavaScript等技术，从而实现更复杂的网页设计和交互功能。
以下是一些常见的HTML基本标签及其意义：
-
文档类型声明（DOCTYPE）：声明文档使用的HTML版本。例如
<!DOCTYPE html>代表HTML5，它确保浏览器以标准模式渲染页面。 -
<html>：根标签，标志着HTML文档的开始和结束。是所有其他HTML标签的容器，所有其他HTML元素都是其子元素。 -
<head>：包含了文档的元数据（metadata）。例如文档的标题、字符集声明、样式表链接、脚本以及其他头部信息，这些信息通常不会直接显示在网页上，但会影响网页的渲染和行为。 -
<meta>：提供关于HTML文档的元数据。例如<meta charset="UTF-8">设置字符编码为UTF-8，控制页面在移动设备上的视口宽度和缩放行为，以及提供页面的描述和关键词等。 -
<title>：定义文档的标题。该标题会显示在浏览器的标签页上，对于搜索引擎优化（SEO）和用户体验都很重要。 -
<body>：包含文档的主体内容。例如文本、图像、链接、表格和列表等，这是用户在浏览器中看到的网页的主要内容部分。 -
标题标签（
<h1>至<h6>）：定义不同级别的标题。<h1>是最高级别的标题，通常用于页面的主标题，而<h6>是最低级别的标题。标题标签在SEO中也很重要，因为搜索引擎会查看这些标签来确定页面的主题和结构。 -
段落标签（
<p>）：定义文本的一个段落，段落之间会有默认的间距。 -
换行标签（
<br>）：插入一个简单的换行符，不创建新的段落。 -
水平线标签（
<hr>）：在页面中插入一条水平线，用于分隔内容。 -
图像标签（
<img>）：嵌入图像。通过src属性指定图像文件的路径，alt属性提供图像的替代文本（当图像无法加载时显示）。 -
超链接标签（
<a>）：创建一个超链接，可以链接到另一个网页、同一页面的不同部分（锚点）、电子邮件地址等。href属性指定链接的目标URL。 -
块级元素标签（如
<div>）：定义文档中的一个块级区域。<div>是一个无语义的容器元素，通常用于布局和样式化目的。 -
行内元素标签（如
<span>）：用于对文档中的行内元素进行组合。与<div>类似，但<span>是行内元素，不会打断文本的流动。 -
强调标签（如
<em>和<strong>）：<em>表示强调，通常呈现为斜体。<strong>表示更强的强调，通常呈现为粗体。 -
列表标签：
<ul>（无序列表）、<ol>（有序列表）、<li>（列表项）：用于创建列表、组织和展示列表内容。 -
表格标签：
<table>、<tr>（表格行）、<td>（表格单元格）：用于创建表格、展示数据或信息。
四、HTML注释与特殊字符
1、注释
1.注释的定义：注释是文档中的说明文字，不会被浏览器执行。注释的作用是帮助开发人员理解和阅读代码，提高代码的可读性和可维护性。
2.注释的语法：注释标签以<!--开头，以-->结束，注释内容可以是单行或多行。
<!-- 这是一个单行注释 -->
<!--
这是一个
多行注释
-->3.快捷键：在大多数代码编辑器中，可以使用快捷键Ctrl + /来添加或取消单行注释。对于多行注释，可以使用Ctrl + Shift + /（在某些编辑器中）。
2、特殊字符
1.特殊字符的定义：特殊字符是指在HTML中具有特殊含义的字符，如大于号“>”和小于号“<”。为了在页面中正确显示这些字符，必须使用相应的HTML代码表示。
2.字符实体：这些特殊字符对应的HTML代码被称为字符实体。字符实体都以&开头，以;结束。
-
空格符：
-
小于号：
< -
大于号：
> -
和号：
& -
人民币符号：
¥
-
其他特殊字符如版权符号（©）、注册商标符号（®）等也有相应的字符实体表示。
3.注意事项：在HTML中，某些特殊字符如空格、小于号和大于号等需要特别注意，因为它们在HTML语法中有特定的含义。使用字符实体可以避免这些冲突。
五、HTML属性
HTML属性包含了元素的额外信息，它总是出现在HTML开始标签中，并且通常以名/值对的形式出现（空属性除外，它可以只有属性没有值）。属性的名称和值是大小写无关的，但推荐使用小写。
常见的属性包括：
-
src：指定图像或多媒体文件的路径。 -
alt：提供图像的替代文本，用于无法加载图像时的文字描述。 -
href：指定链接的目标URL。 -
style：规定元素的内联样式。 -
class：规定元素所使用的CSS类名。 -
id：规定一个元素的唯一标识符。
六、常见误区与建议
-
不要急于学习所有标签：初学者应从基础标签开始，逐步扩展。
-
避免使用过时标签：如
<font>、<center>等已被废弃的标签。
-
标签未正确闭合：例如忘记关闭
<div>、<p>等标签，导致页面布局混乱或内容显示异常。建议：养成良好的编码习惯，每次打开标签时都要记得关闭对应的标签。 -
嵌套错误：将块级标签嵌套在内联标签中，如
<p><a href="#">Link</a></p>。建议：理解HTML标签的嵌套规则，确保块级标签和内联标签的正确使用。 -
滥用
<b>和<i>标签：用<b>和<i>标签来控制文本格式，而不是使用CSS样式。建议：使用CSS进行样式控制，避免滥用语义化不强的标签。 -
忽略文档结构：不使用
<html>、<head>和<body>标签来构建文档框架。建议：始终遵循HTML文档的基本结构，确保代码的清晰性和可维护性。 -
属性值未加引号：
<img src un第一个网页.com>。建议：为所有属性值添加双引号，确保代码的兼容性和可读性。 -
使用不正确的大小写：使用大写字母编写标签，如
<P>。建议：遵循HTML规范，使用小写字母编写标签，提高代码的整洁性。 -
过度依赖集成开发环境（IDE）：初学者过度依赖IDE，导致对HTML的理解不够深入。建议：初学者应多使用文本编辑器，通过手动编写代码来加深对HTML的理解。
-
忽略注释的重要性：代码中缺乏注释，使得他人难以理解代码逻辑。建议：在代码中添加必要的注释，提高代码的可读性和可维护性。
-
混淆HTML与CSS的作用：试图用HTML解决布局和样式问题，而不是使用CSS。建议：学习并掌握CSS，专注于HTML的结构定义，CSS负责样式控制。
-
忽视HTML的语义化：用无意义的标签（如
<div>和<span>）替代语义化标签。建议：理解每个HTML标签的语义，并合理使用它们以提高代码的可读性和SEO效果。