HTML系列教程：1_HTML 简介（零基础超详细入门）

前言本教程专为完全零基础、从没接触过代码的新手编写全程不讲晦涩术语所有概念、案例都附带通俗解释手把手带你认识HTML。看完这篇你将彻底搞懂什么是HTML、HTML的作用、HTML版本区别、HTML能做什么、以及第一个可运行的HTML代码案例。一、什么是HTML通俗大白话解释1.1 官方标准定义HTML 全称HyperText Markup Language中文翻译为超文本标记语言。我们拆分这个名字逐个理解新手一秒看懂超文本HyperText不只是普通的文字可以包含文字、图片、视频、音频、链接、按钮、表格等所有网页元素还能通过链接跳转到其他页面这就是“超文本”。标记Markup不是编程语言没有逻辑、没有计算、没有判断只用「标签」给内容做标记告诉浏览器这段文字是标题、这段是段落、这个是图片。语言Language一套浏览器能识别的固定规则和语法。1.2 最通俗的生活化比喻如果把网页比作一栋房子HTML 就是房子的钢筋骨架、墙体结构负责搭建页面的基础结构定义哪里是标题、哪里是文字、哪里放图片、哪里放按钮。后续要学的 CSS 是「装修美化」改颜色、调大小、排布局后续要学的 JavaScript 是「家电功能」实现点击、弹窗、轮播等交互。核心重点新手必记HTML不是编程语言是标记语言它不能实现逻辑运算比如11计算、判断对错只负责搭建网页结构、展示内容。二、HTML 的核心作用为什么必须学它所有我们浏览的网页百度、抖音、知乎、购物网站底层全部都是 HTML 搭建的。没有HTML就没有网页。HTML 唯一核心作用结构化展示网页所有内容具体包含定义网页的标题、段落、列表、文字插入图片、视频、音频、表情包制作超链接、按钮、输入框、表单搭建表格、布局板块、页面结构让浏览器识别、渲染出完整的网页而不是一堆杂乱的纯文本。三、HTML 版本发展史重点掌握HTML5HTML 从诞生至今经历了多个版本迭代旧版本基本被淘汰我们只需要了解核心版本目前所有开发、所有教程、所有企业全部使用 HTML5。3.1 各版本迭代详解新手不用死记了解区别即可1. HTML 1.01993年—— 初代版本最原始的版本功能极其简陋只能展示纯文字、简单段落没有图片、没有样式、没有复杂布局是网页的雏形。2. HTML 2.01995年—— 标准化基础完善了基础语法制定了最基础的网页标准加入了表单、链接等基础功能让网页可以简单交互但依然非常简陋。3. HTML 3.21997年—— 丰富基础功能新增了表格、字体、颜色等简单样式网页开始告别纯文字能展示简单的排版效果是早期静态网页的核心版本。4. HTML 4.011999年—— 经典旧版本统治网页行业近20年的经典版本语法完善、功能齐全支持大部分网页基础功能。但存在巨大缺陷结构混乱、标签冗余、不支持移动端、不支持多媒体视频/音频。5. XHTML2000年—— 严格规范版本已淘汰是HTML4的严格升级版语法极其严苛所有标签必须闭合、必须小写容错率极低开发效率低现在完全被淘汰不用学习。6. HTML52014年正式定稿—— 目前唯一主流版本重点新手直接学 HTML5 即可不用学旧版本HTML5 是目前最新、最主流、唯一被所有浏览器支持的版本也是企业开发的唯一标准。3.2 HTML5 相比旧版本的核心优势新手必看支持多媒体原生支持视频、音频播放不需要第三方插件适配移动端完美适配手机、平板、电脑所有设备语义化标签标签有明确含义结构清晰浏览器和搜索引擎更容易识别语法宽松简单容错率高新手更容易上手功能强大支持画布绘图、本地存储、地理位置等高级功能兼容性极强所有现代浏览器Chrome、Edge、火狐、Safari全部支持。四、HTML 的核心语法规则新手入门核心HTML 所有内容都是由标签组成的这是HTML最核心、最基础的规则所有网页都遵循这个规则。4.1 什么是HTML标签标签是由尖括号 包裹的关键词是浏览器的“指令”告诉浏览器要展示什么内容、以什么形式展示。4.2 标签的两种类型带详细举例1. 双标签闭合标签—— 绝大多数标签由开始标签和结束标签组成中间包裹内容格式标签名内容/标签名举例1段落标签 pp这是我的第一个网页段落内容新手零基础学HTML/p代码解释p开始标签告诉浏览器接下来是一段正文段落中间文字是需要展示在网页上的内容/p结束标签告诉浏览器这段段落内容结束了。举例2标题标签 h1h1HTML简介零基础教程/h1浏览器会自动将中间文字渲染为大标题加粗、放大。2. 单标签自闭合标签—— 少数特殊标签只有一个标签没有结束标签不需要包裹内容一般用于插入资源格式标签名 /HTML5中可省略斜杠举例换行标签 br、图片标签 imgbr !-- 强制换行没有内容不需要闭合 -- img src图片地址 !-- 插入图片单标签 --4.3 HTML 注释规则注释是写给程序员看的备注浏览器会自动忽略不会显示在网页上用于解释代码作用。注释格式!-- 这里是注释内容 --举例!-- 下面是网页大标题 -- h1零基础学HTML/h1五、完整的HTML5标准网页结构必背基础骨架每一个HTML网页都必须有一套固定的基础骨架缺一不可这是所有网页的通用结构新手必须熟记。5.1 完整可运行代码案例新建一个文本文档后缀名改为.html复制以下代码双击打开即可看到网页效果。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title我的第一个HTML网页/title /head body !-- 网页所有可见内容都写在body里面 -- h1欢迎学习HTML零基础教程/h1 p大家好我是新手正在学习HTML简介/p /body /html5.2 逐行超详细代码解释新手逐句看懂!DOCTYPE html文档声明告诉浏览器当前网页使用的是HTML5标准必须写在第一行缺一不可。html langzh-CN网页根标签包裹所有网页代码langzh-CN表示网页语言是中文方便浏览器识别。head网页头部存放网页看不见的配置信息不会展示在页面中。meta charsetUTF-8设置网页编码格式为UTF-8防止中文乱码必须写title网页标题显示在浏览器标签页的标题上。body网页主体所有能看到的内容文字、图片、按钮、视频全部写在这里面。六、新手常见误区避坑重点误区1HTML是编程语言 纠正不是是标记语言无逻辑、无变量、无运算只做结构展示。误区2需要安装复杂软件才能写HTML 纠正不需要电脑自带记事本、VS Code、任意编辑器都可以后缀改.html即可运行。误区3HTML4和XHTML需要学习 纠正完全不需要直接学HTML5旧版本已淘汰。误区4标签可以随便写 纠正必须使用浏览器识别的标准标签自定义无效标签不会生效。七、本篇总结新手核心记忆点HTML是超文本标记语言负责网页结构搭建不是编程语言目前唯一主流版本是HTML5适配所有设备、功能强大HTML由标签组成分为双标签、单标签有固定语法规则标准网页骨架文档声明 html根标签 head头部 body主体所有网页可见内容全部写在 body 标签内部。下节预告下一篇教程将详细讲解HTML 编辑器手把手带大家写更多实操案例零基础循序渐进学习