在今天，前端工程师已经成为研发体系中的重要岗位之一。

可是与此相对的是，极少大学的计算机专业愿意开设前端课，大部分前端工程师的知识，也都是在实践和工作中不断学习的。

最近收到很多同学的后台留言，说希望多推出一些前端方向的教程。

今天我们就带来一个适合前端初学者的教程，可以带你从零入门 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 的基本骨架，我们将逐步介绍这些是什么意思。

文档类型声明

是我们的文档声明头。他告诉了浏览器，本文档处理的是 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 标签会自动在其两个标签之间创建一些空白。删掉上段代码标签里的内容，把下面的内容放到标签里面去。

<p>我是第一段文字，实验楼，做实验，学编程</p>
<p>我是第二段文字，实验楼，做实验，学编程</p>

3. 图片标签

HTML 的图像是通过标签来定义的。语法: <imgsrc=“图片地址”/> 删掉上段代码标签里的内容，把下面的内容放到标签里面去。

<p>实验楼图片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 标签

标签是超链接标签，意思就是我们点击它可以跳转到一个网页。删掉上段代码标签里的内容，把下面的内容放到标签里面去。

<a href="https://www.shiyanlou.com/">实验楼</a>

点击文字：

跳转到指定网页：

篇幅有限，后续内容，在 “从 0 到 1 构建待办事项应用” 就能继续学习。

零基础入门 HTML 的 8 分钟极简教程相关推荐

包含html语言的超链接标记的网页_零基础入门 HTML 的 8 分钟极简教程
在今天,前端工程师已经成为研发体系中的重要岗位之一. 可是与此相对的是,极少大学的计算机专业愿意开设前端课程,大部分前端工程师的知识,也都是在实践和工作中不断学习的. 最近收到很多同学的后台留言,说希 ...
零基础入门深度学习的五篇经典教程
零基础入门深度学习>系列文章旨在讲帮助爱编程的你从零基础达到入门级水平.零基础意味着你不需要太多的数学知识,只要会写程序就行了,没错,这是专门为程序员写的文章.虽然文中会有很多公式你也许看不懂, ...
[转]《零基础入门深度学习》系列文章（教程+代码）
无论即将到来的是大数据时代还是人工智能时代,亦或是传统行业使用人工智能在云上处理大数据的时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的技术,会不会感觉马上就o ...
电脑入门完全自学手册_3DMAX零基础入门到精通的学习路线和教程
没有美术基础可以学建模吗?毋庸置疑,只要肯学都是可以的!那么我们今天来说说零基础学习建模要着重注意什么.最高效最快速的入门学习方式:看知识兔视频课程,跟着知识兔老师操作,听知识兔老师讲解,初学者不要自 ...
零基础学python鱼c-鱼C-小甲鱼零基础入门学习Python 97节课程
释放双眼,带上耳机,听听看~! 前言鱼C-小甲鱼零基础入门学习Python 97课程 ,这教程Go破解是有学习过的,讲得通俗易懂,即使是小白也能完全掌握里面内容. 其实我一直在Go破解教程这块对大 ...
python新手教程从零开始-Python零基础从零开始学习Python十分钟快速入门
原标题:Python零基础从零开始学习Python十分钟快速入门学习Python的,都知道Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python是一种动态解释型的 ...
＜极客时间：零基础入门Spark＞学习笔记（持续更新中...）
看的是极客时间的课,讲得很不错零基础入门 Spark (geekbang.org) 基础知识 01 Spark:从"大数据的Hello World"开始准备工作 IDEA安装S ...
[六点]Pygame零基础入门：极简开发框架
[六点]Pygame零基础入门:极简开发框架参考 Pygame官方文档嵩天教授的Python游戏开发教程前言在入门游戏开发时,pygame框架可以快速协助开发小型游戏.轻松而愉快的开始是从玩游 ...
新型零基础入门软件测试自学“骗局”来啦！培训机构才能给你最好学习质量？
小编热衷于收集整理资源,记录踩坑到爬坑的过程.希望能把自己所学,实际工作中使用的技术.学习方法.心得及踩过的一些坑,记录下来.也希望想做软件测试的你一样,通过我的分享可以少走一些弯路,可以形成一套 ...

零基础入门 HTML 的 8 分钟极简教程