本文是一篇关于HTML入门的详细教程，涵盖了HTML的基础知识，包括HTML的定义、版本和通用声明，常用HTML编辑器，标签语法，HTML属性，以及包括head元素、文本格式化、链接、图像、表格、列表在内的常用标签。此外，还介绍了HTML4和HTML5的布局概念。
目录
1.简介
1.1 HTML是什么？
HTML (HyperText Markup Language) 是指用于创建网页超文本标记语言，通过它可以实现图片、链接、音乐等元素的展示，您可以将 HTML 运行在浏览器上，由浏览器来解析。它是通向Web技术的起点，是前端程序员必要的基本功。
HTML 是一种标记语言（一套标记标签），它使用标记标签来描述网页。标签是由尖括号包围的关键词，例如 <html>； 标签通常是成对出现的，例如 <html> 和 </html>。
1.2 HTML 版本
自 HTML 诞生以来，已发展出了许多 HTML 版本，HTML 版本的介绍如下：
| 版本 | 发布时间 | 版本说明 |
| HTML 1.0 | 1991 | HTML 的第一个版本 |
| HTML 2.0 | 1995 | 增加了表单元素以及文件上传等功能 |
| HTML 3.2 | 1997 | 加了创建表格以及表单的功能 |
| HTML 4.01 | 1999 | 增加了对样式表（CSS）的支持（非常稳定的版本，是当前的官方标准） |
| XHTML 1.0 | 2000 | 目的是基于XML应用，在HTML 4.0基础上优化和改进的的新语言 |
| HTML 5 | 2012 | 提升了 Web 在富媒体、富内容和富应用等方面的能力 |
1.3 通用声明
<!DOCTYPE> 是 HTML 的文档类型声明，正确声明 HTML 版本可以使浏览器能够显示网页：
HTML5：
<!DOCTYPE html>HTML 4.01：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2.HTML 编辑器
常用的编辑器：Notepad++，Sublime Text，HBuilder，EditPlus (文本编辑器)，VS Code，UltraEdit，在线编辑器。
- Notepad++：是基于Windows操作系统的免费软件，支持众多计算机程序语言的文本编辑器。
- Sublime Text： 是一个支持多种编程语言并且可以跨平台的文本编辑器，虽然该软件收费但是可以试用，拥有优秀的代码自动完成功能，还拥有代码片段。
- HBuilder：是一款支持 HTML5 的Web开发IDE。通过语法提示和代码输入法、代码块等，大幅开发前端效率。
- EditPlus：可以处理文本、HTML和程序语言的Windows编辑器，也支持C、Java、Php等编程语言。
- Visual Studio Code ：是 Microsoft 提供可以运行于 Mac OS X、Windows 和 Linux 编写 Web 和云应用的源代码编辑器。它支持 JavaScript，TypeScript和Node.js 和编程语言（例如C++，C＃，Java，Python，PHP，Go）。
- UltraEdit：支持多种编程语言（PHP、Perl、Java 和 JavaScript），是理想的文本、HTML 和十六进制编辑器。
3.标签的语法
HTML 标签的格式由开始标签、属性、内容和结束标签组成。开始标签可以包含 class、id、title等属性，HTML 标签名称不区分大小写。
自闭合标签没有单独的结束标签，在开始标签中加斜杆“/”来进行闭合，自闭合标签没有内容。例如：<img/>，<br/>，<input/>。常用 HTML 标签汇总：
| 标签 | 描述 |
| <a> | 定义超文本链接 |
| <abbr> | 定义缩写 |
| <acronym> | 定义只取首字母的缩写，不支持HTML5 |
| <address> | 定义文档作者或拥有者的联系信息 |
| <applet> | HTML不建议使用。定义嵌入的 applet |
| <area> | 定义图像映射内部的区域 |
| <article> (html5) | 定义一个文章区域 |
| <aside>(html5) | 定义页面的侧边栏内容 |
| <audio>(html5) | 定义音频内容 |
| <b> | 定义文本粗体 |
| <base> | 定义页面中所有链接的默认地址或默认目标 |
| <basefont> | HTML5不支持，不建议使用。定义页面中文本的默认字体、颜色或尺寸 |
| <bdi>(html5) | 允许您设置一段文本，使其脱离其父元素的文本方向设置 |
| <bdo> | 定义文字方向 |
| <big> | 定义大号文本，HTML5不支持 |
| <blockquote> | 定义长的引用 |
| <body> | 定义文档的主体 |
| <br> | 定义换行 |
| <button> | 定义一个点击按钮 |
| <canvas>(html5) | 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形 |
| <caption> | 定义表格标题 |
| <center> | HTML5不支持，不建议使用。定义居中文本 |
| <cite> | 定义引用(citation) |
| <code> | 定义计算机代码文本 |
| <col> | 定义表格中一个或多个列的属性值 |
| <colgroup> | 定义表格中供格式化的列组 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值 |
| <dd> | 定义定义列表中项目的描述 |
| <del> | 定义被删除文本 |
| <details>(html5) | 用于描述文档或文档某个部分的细节 |
| <dfn> | 定义定义项目 |
| <dialog>(html5) | 定义对话框，比如提示框 |
| <dir> | HTML5不支持，不建议使用。定义目录列表 |
| <div> | 定义文档中的节 |
| <dl> | 定义列表详情 |
| <dt> | 定义列表中的项目 |
| <em> | 定义强调文本 |
| <embed>(html5) | 定义嵌入的内容，比如插件 |
| <fieldset> | 定义围绕表单中元素的边框 |
| <figcaption>(html5) | 定义<figure> 元素的标题 |
| <figure>(html5) | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <font> | HTML5不支持，不建议使用。定义文字的字体、尺寸和颜色 |
| <footer>(html5) | 定义 section 或 document 的页脚 |
| <form> | 义了HTML文档的表单 |
| <frame> | 定义框架集的窗口或框架 |
| <frameset> | 定义框架集 |
| <h1> to <h6> | 定义 HTML 标题 |
| <head> | 定义关于文档的信息 |
| <header>(html5) | 定义了文档的头部区域 |
| <hr> | 定义水平线 |
| <html> | 定义 HTML 文档 |
| <i> | 定义斜体字 |
| <iframe> | 定义内联框架 |
| <img> | 定义图像 |
| <input> | 定义输入控件 |
| <ins> | 定义被插入文本 |
| <kbd> | 定义键盘文本 |
| <keygen>(html5) | 规定用于表单的密钥对生成器字段 |
| <label> | 定义 input 元素的标注 |
| <legend> | 定义 fieldset 元素的标题 |
| <li> | 定义列表的项目 |
| <link> | 定义文档与外部资源的关系 |
| <map> | 定义图像映射 |
| <mark>(html5) | 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签 |
| <menu> | 不建议使用。定义菜单列表 |
| <meta> | 定义关于 HTML 文档的元信息 |
| <meter>(html5) | 定义度量衡。仅用于已知最大和最小值的度量 |
| <nav>(html5) | 定义导航链接的部分 |
| <noframes> | 定义针对不支持框架的用户的替代内容。HTML5不支持 |
| <noscript> | 定义针对不支持客户端脚本的用户的替代内容 |
| <object> | 定义内嵌对象 |
| <ol> | 定义有序列表 |
| <optgroup> | 定义选择列表中相关选项的组合 |
| <option> | 定义选择列表中的选项 |
| <output>(html5) | 定义不同类型的输出，比如脚本的输出 |
| <p> | 定义段落 |
| <param> | 定义对象的参数 |
| <pre> | 定义预格式文本 |
| <progress>(html5) | 定义运行中的进度（进程） |
| <q> | 定义短的引用 |
| <rp>(html5) | 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。 |
| <rt>(html5) | 标签定义字符（中文注音或字符）的解释或发音。 |
| <ruby>(html5) | <ruby> 标签定义 ruby 注释（中文注音或字符）。 |
| <s> | 不建议使用。定义加删除线的文本 |
| <samp> | 定义计算机代码样本 |
| <script> | 定义客户端脚本 |
| <section>(html5) | 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 |
| <select> | 定义选择列表（下拉列表） |
| <small> | 定义小号文本 |
| <source>(html5) | <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。 |
| <span> | 定义文档中的节 |
| <strike> | HTML5不支持，不建议使用。定义加删除线文本 |
| <strong> | 定义强调文本 |
| <style> | 定义文档的样式信息 |
| <sub> | 定义下 |
最低0.47元/天 解锁文章
扫一扫
4703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
