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

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

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

本日我们就带来一门适宜前端初学者的课程，可以带你从零入门 HTML、CSS、JS、React 等前端核心技能，并创建一个待办事项的管理运用～

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

项目效果：

课程从最根本的 HTML/ CSS/JS 讲起，还包含了 TypeScript/React/Fabric 等常用技能的讲解。
由浅入深，层层递进，如果你想快速上手 React 框架，这门课会是你非常好的选择。

访问“实验楼”官网，搜索“从 0 到 1 构建待办事项运用”就能学习全部课程内容。

以下是课程第一节的内容 —— 「HTML 简介」，带你快速入门HTML，让我们一起进入前真个大门看看吧：

「HTML 简介」
实验先容
本实验是对 HTML 进行学习，并且较详细的解释了 Web 是如何事情的。
紧张内容有：HTML 常见标签、HTML 文档构造、HTML 表格和表单、HTML 有序列表和无序列表。
通过本节学习，可以构建大略的 HTML 网页。
知识点什么是 HTMLWeb 是如何事情的文档构造常见标签表格表单有序列表和无序列表什么是 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 构建待办事项运用”，就能找到课程，连续学习啦！