零基础入门 HTML 的 8 分钟极简教程
gaoyangw 2024-11-13 10:36 22 浏览 0 评论
在今天，前端工程师已经成为研发体系中的重要岗位之一。
可是与此相对的是，极少大学的计算机专业愿意开设前端课程，大部分前端工程师的知识，也都是在实践和工作中不断学习的。
最近收到很多同学的后台留言，说希望多推出一些前端方向的教程。
今天我们就带来一门适合前端初学者的课程，可以带你从零入门 HTML、CSS、JS、React 等前端核心技能，并创建一个待办事项的管理应用～
项目效果：
课程从最基础的 HTML/ CSS/JS 讲起，还包含了 TypeScript/React/Fabric 等常用技能的讲解。由浅入深，层层递进，如果你想快速上手 React 框架，这门课会是你非常好的选择。
访问“实验楼”官网，搜索“从 0 到 1 构建待办事项应用”就能学习全部课程内容。
以下是课程第一节的内容 —— 「HTML 简介」，带你快速入门HTML，让我们一起进入前端的大门看看吧：
「HTML 简介」
实验介绍
本实验是对 HTML 进行学习，并且较详细的说明了 Web 是如何工作的。主要内容有：HTML 常见标签、HTML 文档结构、HTML 表格和表单、HTML 有序列表和无序列表。通过本节学习，可以构建简单的 HTML 网页。
知识点
- 什么是 HTML
- Web 是如何工作的
- 文档结构
- 常见标签
- 表格
- 表单
- 有序列表和无序列表
什么是 HTML
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。
Web 是如何工作的
下面我们来演示用户是如何看到一个网页显示的。
具体来讲：
- 当用户通过浏览器输入网址后，浏览器先在 DNS 服务器上找到它，然后对它进行解析。
- 解析完成后，浏览器给服务器发送 http 请求。
- 服务器同意这个请求，就把 HTML 文件发送回浏览器。
- 浏览器拿到 HTML 文件，对其解析执行，显示在用户屏幕上。
HTML 文档结构
首先我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
<meta charset="utf-8" />
</head>
<body></body>
</html>这是一个 HTML 的基本骨架，我们将逐步介绍这些是什么意思。
文档类型声明
<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。
html 标签
html 标签即根元素，此处表示文档的开始，该标签包含两个子标签：head 和 body。
head 元素
head 标签下面所包含的标签由 title、meta、link、style、script 等（后面会讲到）。
title 标签
作用：设置文档的标题或者名称。浏览器通常将该标签的内容显示在窗口顶部或者标签页上。每个 HTML 文档只能有一个，必须有一个 title 标签。
meta 标签
<metacharset="UTF-8"> 声明字符的编码格式为 utf-8。
body 标签
body 标签定义文档的主体，也就是我们的主要内容（比如文本、超链接、图像、表格和列表等）。
常见标签
1.h 系类标签
h 标签有六种 h1，h2，h3，h4，h5，h6，它代表着我们的标题。
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>为了大家能更有效的学习，请使用实验楼的环境。首先我们新建一个文件，点击 File，然后 New File，命名为 index.html。
然后输入上面的代码。
让我们来看一下运行效果吧。鼠标右键 index.html 文件，点击 Open With，然后点击 Preview。
最终效果为：
2.p 标签
p 标签是我们的文本标签，p 标签会自动在其两个标签之间创建一些空白。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。
<p>我是第一段文字，实验楼，做实验，学编程</p>
<p>我是第二段文字，实验楼，做实验，学编程</p>3. 图片标签
HTML 的图像是通过标签 <img> 来定义的。语法: <imgsrc="图片地址"/> 删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。
<p>实验楼图片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />4.a 标签
<a> 标签是超链接标签，意思就是我们点击它可以跳转到一个网页。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。
<a href="https://www.shiyanlou.com/">实验楼</a>点击文字：
跳转到指定网页：
篇幅有限，后续的课程内容，请在“实验楼”边敲代码边学习～
访问“实验楼”官网，搜索“从 0 到 1 构建待办事项应用”，就能找到课程，继续学习啦！
相关推荐
- 百付科技智能拓客解决方案:搜索优化与搜索竞价的协同增长
-
百付科技通过“智能拓客+搜索优化”的深度协同，构建“DeepSeek技术占位+百度竞价引流+内容搜索沉淀”的全域营销闭环，帮助企业在搜索生态中实现从“流量获取”到“用户资产...
- 百度搜索10年来最大改版 搜索框、结果页、生态全面革新
-
7月2日，百度集团股份有限公司（以下简称“百度”）旗下百度搜索宣布进行十年来最大改版，从搜索框、搜索结果页到搜索生态全面革新。最直接的变化是经典的百度搜索框变大，成为“智能框”。原本只支持几十个字的搜...
- 百度搜索10年来最大改版，首次支持超千字文本输入
-
IT之家7月2日消息，在今日的百度AIDay开放日上，百度搜索宣布进行10年来最大改版。百度搜索框升级为“智能框”，支持超千字的文本输入，拍照、语音、视频等能力也全面加强，支持直接调...
- 百度搜索10年来最大改版:推出智能框、升级AI助手
-
7月2日，百度搜索宣布进行十年来最大改版，从搜索框、搜索结果页到搜索生态均有变化。百度搜索框变为“智能框”，支持超千字的文本输入，以及拍照、语音、视频等，还可以直接调取AI写作、AI作图等工具。最直接...
- 深入解析Go测试并行性优化:为何多核CPU无法加速你的测试?
-
一、问题背景：理论与现实的差距最近在优化某项目API测试时，遇到一个反直觉的现象：理论预期：设计为完全并行的测试套件，总耗时应接近最长单测用时实际表现：总耗时是最慢单测的7倍，CPU利用率始终低于50...
- 电脑C盘满了怎么清理?推荐几款靠谱的C盘清理软件
-
电脑c盘满了之后就会导致运行缓慢，而且还会影响到使用体验，到底应该如何来清理呢？今天就为大家来详细的介绍一下，并且推荐几个比较靠谱的c盘清理软件。等到c盘空间不足时，可以选择系统自带的磁盘清理工具。...
- NGINX 性能优化与高级配置:榨干服务器潜能，打造极致体验
-
NGINX以其卓越的性能和高并发处理能力闻名于世，但默认配置往往只是一个普适性的起点。要想真正发挥NGINX的潜能，满足日益增长的业务需求，深入理解其配置并进行精细化调优至关重要。这就像拥有一辆...
- 清理大师拖慢你的电脑?系统优化软件的黑历史你了解吗?
-
你是不是也用过“清理大师”“加速助手”这类软件？它们看起来能释放内存、优化系统，其实很可能反而拖慢了你的电脑。别再中招了，本篇告诉你它们到底在干什么，如何真正提升性能。...
- 游戏修复工具在手，游戏流畅度翻倍!
-
分享四款实用的修复工具，可以帮助不同需求的玩家解决游戏运行故障。1、通过『迅捷DLL修复助手』修复游戏...
- 网络曝光有哪些渠道?为什么好多事情曝光了才会处理!
-
网络曝光有哪些渠道？为什么好多事情曝光了才会处理！社交平台发布：利用微博、微信朋友圈、百度贴吧等社交平台发布相关信息。这些平台用户基数大，传播速度快，是曝光事件的有效渠道。专业媒体联系：如果事件影响较...
- 工业品网络营销/工业品网络推广如何避免价格战?
-
工业品网络营销/工业品网络推广如何避免价格战？产能过剩，现在行业竞争越来越卷了，客户动不动就比价格，有没有同感的老板呢？今天我用我们16年的工业品网络营销的经验，告诉你：好产品就该卖出他该有的价格。很...
- 科普宣传丨暴雨多发季节，这些防汛安全知识请牢记
-
【来源：桦甸发布】雨季来临时常都会出现暴雨大风等天气泥石流、滑坡等情况也时有发生给我们的日常生活带来一些安全隐患那么在防汛期间出行安全有哪些需要注意的地方呢？遇到暴雨怎么办呢？来源：网络综合编辑：高...
- 黄前镇开展“网络同心 文明同行”主题宣传活动
-
岱岳融媒讯：...
- 新闻稿如何发布效果好?新闻推广的重点与难点有哪些?
-
新闻推广是现代社会中不可或缺的一环。随着信息时代的到来，新闻如闪电般迅速传播，通过推广新闻可以让更多人了解并关注相关事件观点和产品。然而如何做到有效的新闻推广却是一个复杂而具有挑战性的过程。开明网络营...
- 百付科技百度营销全攻略:从百度 SEO 到百度一下首页的流量密码
-
在百度生态流量竞争白热化的2025年，百付科技以“百度SEO+纳米AI搜索”为核心，为企业提供从技术优化到商业转化的百度营销全案，助力抢占百度一下首页流量高地。一、百度营销的双轨策略...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 手机网站建设 (53)
- 网站维护 (53)
- 网页制作教程 (66)
- 百度收录批量查询工具 (48)
- 网站服务器 (53)
- 学生个人网页制作html (56)
- 一键优化 (67)
- 网页制作软件 (49)