零基础入门 HTML 的 8 分钟极简教程
myzbx 2024-12-01 18:21 30 浏览
在今天，前端工程师已经成为研发体系中的重要岗位之一。
可是与此相对的是，极少大学的计算机专业愿意开设前端课程，大部分前端工程师的知识，也都是在实践和工作中不断学习的。
最近收到很多同学的后台留言，说希望多推出一些前端方向的教程。
今天我们就带来一门适合前端初学者的课程，可以带你从零入门 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 构建待办事项应用”，就能找到课程，继续学习啦！
- 已经是第一篇了
- 下一篇：HTML基础
相关推荐
- vue 基础-组件中事件的触发和监听
-
前言《vue基础》系列是再次回炉vue记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）vue中单纯的事件调用，你一定不陌生...
- JMH基准测试和JMH-Visual-chart可视化
-
原文地址：https://github.com/Sayi/sayi.github.com/issues/68如何度量一段代码的性能，换种实现方式会有更佳的性能表现吗？你或许想知道fastjson是否正...
- 一文轻松看懂丰田汽车的电路图（丰田车电路图识读技巧）
-
丰田汽车电路图符号、含义丰田汽车电路图识读说明电路图中字母是注释标号，其各部分的含义如下：注释标号A：表示系统标题，在电路图上方用横线划分，区域内用文字和系统符号表示下方电路系统的名称。注释标号B：表...
- 杭州高级中学发文言文版校庆公告引热议——全文932字，74处注释
-
阅读提示校方回应：我们期待以这种‘复古’的方式引起公众注意，也算是为树立起大众的文化自信、唤起大众对传统文化的关注作出一点贡献。5月14日，杭州高级中学官方微信发布了一篇文言文版的校庆公告。几个小...
- Python 和 JS 有什么相似?（python和js哪个快）
-
Python是一门运用很广泛的语言，自动化脚本、爬虫，甚至在深度学习领域也都有Python的身影。作为一名前端开发者，也了解ES6中的很多特性借鉴自Python(比如默认参数、解构赋值、...
- 阿里卖家 Flutter for Web 工程实践
-
作者：马坤乐(坤吾)Flutter自2015年初次亮相以来，经过了多年的发展已经相当成熟，在阿里、美团、拼多多等互联网公司都有广泛的应用。在ICBU阿里卖家上90+%的新业务使用Flu...
- 诗经275思文押韵、注释、古音、今韵
-
诗经275-1思文押韵（备注：□=非韵、■=i韵、●=o/u韵、◆=ng韵、=i/o二象性）「」1.思文后稷，克配彼天。立我烝民，莫菲尔极。贻我来牟，帝命率育。无此疆尔界，陈常于时夏。□□□■，...
- SolidWorks中常用命令快捷键（solidworks有哪些快捷键）
-
1.A：中心线2.B：镜向3.C：画圆4.D：智能标柱尺寸5.E：删除6.F：草图倒圆角7.G：画直线8.H：从装配制作工程9.I：等距实体10.J：从装配制作装配11.K：多边形12.L：延伸13....
- 第一章、TS语言简介（tsl语言）
-
TypeScript（简称TS）是微软公司开发的一种基于JavaScript（简称JS）语言的编程语言。它的目的并不是创造一种全新语言，而是增强JavaScript的功能，使其更适合多人合...
- 为什么要用JMH?何时应该用?（日本jmh地面分析图网站）
-
if快还是switch快？HashMap的初始化size要不要指定，指定之后性能可以提高多少？各种序列化方法哪个耗时更短？无论出自何种原因需要进行性能评估，量化指标总是必要的。在大部分场合...
- 雅虎“YSlow - 23 条规则”详尽阐释
-
以下乃是雅虎“YSlow-23条规则”的详尽阐释，旨在优化网页之性能以及用户之体验，乃是结合技术之原理与实践之方法梳理而成：1.减少HTTP请求次数说明：每一次HTTP请求皆会增添延迟...
- JavaScript 运算符（js ~运算符）
-
JavaScript运算符JS变量JS算数JavaScript运算符实例向变量赋值，并把它们相加：varx=7;//向x赋值5vary=8;//向y赋值2...
- 在Notebook中使用Sublime Text 快捷键
-
编程派微信号：codingpy前几天，我在公众号上发布了两篇译文，对JupyterNotebook做了一些基础性的介绍。虽然说比较基础，而且第二篇阅读量并不高，但是我认为对于其他对于Noteb...
- 晨光静好时!2 道 JS 与 TS 面试题解析，开启惬意学习日
-
当第一缕晨光温柔地唤醒窗台的绿植，泡上一杯清香四溢的茉莉花茶，坐在洒满阳光的角落。此刻，放下对面试的焦虑，让我们像聊生活趣事般，轻松拆解两道JavaScript和TypeScript的高频面试...
- 2024年CSPJ题目解析，语法基本功>算法!
-
前言：每次有家长来找我们咨询报课，说孩子学了一年了，竞赛成绩不理想，问怎么才能强化，提升，我们经过一番询问，发现这类孩子普遍都是在算法上已经花了非常多的时间了，但是语法根本不过关。对这种孩子我们普遍建...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)