HTML5零基础入门，从哪开始学？-杰瑞科技汇

HTML5 零基础入门教程

第一部分：准备工作与心态调整

在开始之前，请先做好以下准备,并调整好心态：

你需要什么？
- 一台电脑：无论是 Windows、macOS 还是 Linux 都可以。
- 一个浏览器：Google Chrome、Firefox、Microsoft Edge 等现代浏览器，推荐使用 Chrome，它的开发者工具非常强大,方便我们学习。
- 一个文本编辑器：不要用记事本！ 记事本保存文件时可能会乱码，推荐使用免费的、功能强大的编辑器，
  - Visual Studio Code (VS Code)：强烈推荐！功能最全，插件生态最丰富,是目前前端开发的主流工具。
  - Sublime Text：轻量、快速,非常经典。
  - Notepad++：Windows 平台下的优秀选择。
你的心态
- 不要怕：代码看起来很神秘，但其实就是一堆有规则的文本,把它当成一种新的语言来学习。
- 多动手：看十遍不如自己写一遍，教程中的每一个例子，请务必亲手敲一遍，并修改它,看看会发生什么。
- 多犯错：错误是学习的一部分，浏览器会告诉你哪里出错了,学会看懂错误信息是进阶的第一步。

第二部分：初识 HTML

Q: 什么是 HTML？

A: HTML 的全称是 Hyper Text Markup Language，中文是“超文本标记语言”。

超文本：就是指不仅仅是纯文本，还可以包含图片、链接、音频、视频等。
标记语言：它不是编程语言，没有复杂的逻辑，它通过使用各种“”来“标记”内容的含义和结构，浏览器会读取这些标签,然后将其渲染成我们看到的网页。

一个简单的比喻： HTML 就像盖房子的设计图纸。<header> 是房顶，<footer> 是地基，<p> 是一段文字，<img> 是一幅画，浏览器就是施工队，它严格按照你的“图纸”把房子盖出来。

第三部分：第一个网页 (Hello, World!)

让我们来创建你的第一个网页。

创建文件夹 在你的电脑上创建一个新的文件夹，命名为 my-first-website,所有代码文件都放在这里。
创建 HTML 文件 在 my-first-website 文件夹里，新建一个文件，命名为 index.html。注意后缀名必须是 .html。

编写代码 用你选择的文本编辑器（如 VS Code）打开 index.html 文件,然后输入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>欢迎来到 HTML5 的世界。</p>
</body>
</html>

保存并预览 保存文件，然后用浏览器打开它，你可以在文件上右键，选择“用 Chrome 打开”或在浏览器中直接将文件拖进去。

恭喜！你看到了你的第一个网页，上面有“你好，世界！”和一段文字。

第四部分：HTML 核心结构详解

现在我们来逐行解析上面的代码,理解每一部分的作用。

<!DOCTYPE html>

文档类型声明：告诉浏览器，这个文件是一个 HTML5 文件,这是一个必须的开头。

<html lang="zh-CN">
</html>

根元素：<html> 标签是整个网页的根，所有其他内容都必须放在 <html> 和 </html> 之间。
lang="zh-CN"：告诉网页，这个页面的主要语言是中文（中国）,这有助于搜索引擎和屏幕阅读器理解页面。

<head>
</head>

头部：<head> 包含了网页的元数据，也就是那些不会直接显示在页面内容里的信息,但对浏览器和搜索引擎非常重要。
```
<meta charset="UTF-8">
```
- 字符编码：告诉浏览器用哪种字符集来读取这个文件。UTF-8 是一个国际通用的字符集，可以显示包括中文在内的各种语言。这一行非常重要，否则可能会出现乱码。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- 视口：这是响应式网页设计的核心，它告诉浏览器，页面的宽度应该等于设备的屏幕宽度，并且初始缩放比例为 1.0。对于在手机上查看网页至关重要。
会显示在浏览器的标签页上,也是搜索引擎收录时的重要参考。

<body>
</body>

主体：<body> 标签包含了所有在浏览器窗口中，比如文字、图片、链接、视频等。

第五部分：常用 HTML5 标签

现在我们来学习一些在 <body> 里最常用的标签。标签** <h1> 到 <h6>，用于创建不同级别的标题。<h1> 是最重要的标题，<h6> 是最不重要的。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

段落标签 <p> 用于定义一个段落,浏览器会自动在段落前后添加一些空白。

<p>这是一个段落，段落和段落之间会有空行。</p>
<p>这是另一个段落。</p>

链接标签 <a> 用于创建一个超链接。

href 属性：指定链接的目标地址。
target="_blank"：让链接在新标签页中打开。

<a href="https://www.google.com">点击这里访问 Google</a>
<br> <!-- 换行标签 -->
<a href="https://www.baidu.com" target="_blank">点击这里在新标签页访问百度</a>

图片标签 <img> 用于在页面上显示图片，这是一个自闭合标签，没有闭合标签 </img>。

src 属性：图片的路径（可以是本地文件路径，也可以是网络 URL）。
alt 属性：图片的替代文本，如果图片无法显示，alt 文本就会显示出来，它对屏幕阅读器（为视障人士服务）非常重要。

<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 Logo">

（注意：你需要一张图片，可以下载到本地，然后修改 src 为你的本地路径，images/my-image.jpg）

列表标签

无序列表：使用 <ul> 和 <li>，列表项前通常是小圆点。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表：使用 <ol> 和 <li>，列表项前是数字。

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

容器标签 <div> 和 <span> 是两个非常重要的容器，它们本身没有特殊含义,但常用于组合和布局其他元素。

<div>：块级容器，通常用来布局一个大的区域,会独占一行。
<span>：器，用来包裹一行内的部分文本,不会独占一行。

<div style="border: 1px solid black; padding: 10px;">
    这是一个 div 容器。
    <p>里面可以放任何块级元素。</p>
</div>
<p>这是一段文字，用 <span style="color: red;">span</span> 来改变其中一部分的颜色。</p>

（style 属性是内联样式，用于快速添加样式，我们不推荐在正式项目中大量使用，但学习阶段可以方便地看到效果。）

第六部分：HTML5 的新语义化标签

HTML5 引入了一些新的标签，它们比 <div> 更有“语义”，能更好地描述内容的含义，对 SEO（搜索引擎优化）和可访问性都很有好处。

<header>：页眉或某个区域的头部。
<footer>：页脚或某个区域的底部。
<nav>：导航链接区域。
<main>：页面的主要内容。
<article>：独立的文章内容，如博客、新闻。
<section>：文档中的一个区域,通常有标题。
<aside>：侧边栏或与主要内容相关但独立的内容。

一个简单的语义化结构示例：

<body>
    <header>
        <h1>我的博客</h1>
        <nav>
            <a href="#">首页</a> | <a href="#">关于我</a> | <a href="#">联系方式</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题一</h2>
            <p>这里是文章的正文内容...</p>
        </article>
        <article>
            <h2>文章标题二</h2>
            <p>这里是另一篇文章的正文内容...</p>
        </article>
    </main>
    <aside>
        <h3>关于我</h3>
        <p>我是一名前端爱好者。</p>
    </aside>
    <footer>
        <p>&copy; 2025 我的博客. All rights reserved.</p>
    </footer>
</body>

第七部分：总结与下一步

恭喜你！ 你已经完成了 HTML5 的零基础入门学习,掌握了：

如何创建一个 HTML 文件。
HTML 的基本结构 (<!DOCTYPE>, <html>, <head>, <body>)。
标签 (<h1>, <p>, <a>, <img>, <ul>, <ol>)。
HTML5 的语义化标签 (<header>, <footer>, <nav> 等)。

下一步该做什么？

HTML 只是网页的骨架，它只负责内容和结构，一个网页要变得美观,还需要：

CSS (层叠样式表)：负责网页的样式，比如颜色、字体、布局、动画等，学习 HTML 后，下一步就是学习 CSS,让你的网页变得漂亮起来。
JavaScript：负责网页的行为和交互，比如点击按钮弹出提示框、制作轮播图、表单验证等，这是让网页“活”起来的关键。

学习资源推荐：

MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/Web/HTML (最权威、最全面的文档,适合随时查阅)
菜鸟教程：https://www.runoob.com/html/html-tutorial.html (中文入门教程,简单易懂)

保持好奇心，多动手实践,你很快就能成为一名优秀的前端开发者！

HTML5零基础入门，从哪开始学？

HTML5 零基础入门教程

第一部分：准备工作与心态调整

第二部分：初识 HTML

第三部分：第一个网页 (Hello, World!)

第四部分：HTML 核心结构详解

第五部分：常用 HTML5 标签

第六部分：HTML5 的新语义化标签

第七部分：总结与下一步

99ANYc3cd6

python 3.4 decode

Java程序设计项目教程适合零基础学吗？

模拟电子技术基础简明教程

java 登录 session