包含html语言的超链接标记的网页_零基础入门 HTML 的 8 分钟极简教程
在今天,前端工程师已经成为研发体系中的重要岗位之一。
可是与此相对的是,极少大学的计算机专业愿意开设前端课程,大部分前端工程师的知识,也都是在实践和工作中不断学习的。
最近收到很多同学的后台留言,说希望多推出一些前端方向的教程。
今天我们就带来一门适合前端初学者的课程,可以带你从零入门 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 文档结构
首先我们来看一个例子:
HTML 简介
这是一个 HTML 的基本骨架,我们将逐步介绍这些是什么意思。
文档类型声明
是我们的文档声明头。他告诉了浏览器,本文档处理的是 HTML 文档。
html 标签
html 标签即根元素,此处表示文档的开始,该标签包含两个子标签:head 和 body。
head 元素
head 标签下面所包含的标签由 title、meta、link、style、script 等(后面会讲到)。
title 标签
作用:设置文档的标题或者名称。浏览器通常将该标签的内容显示在窗口顶部或者标签页上。每个 HTML 文档只能有一个,必须有一个 title 标签。
meta 标签
声明字符的编码格式为 utf-8。
body 标签
body 标签定义文档的主体,也就是我们的主要内容(比如文本、超链接、图像、表格和列表等)。
常见标签
1.h 系类标签
h 标签有六种 h1,h2,h3,h4,h5,h6,它代表着我们的标题。
HTML 简介
我是一级标题
我是二级标题
我是三级标题
我是四级标题
我是五级标题
我是六级标题
为了大家能更有效的学习,请使用实验楼的环境。首先我们新建一个文件,点击 File,然后 New File,命名为 index.html。
然后输入上面的代码。
让我们来看一下运行效果吧。鼠标右键 index.html 文件,点击 Open With,然后点击 Preview。
最终效果为:
2.p 标签
p 标签是我们的文本标签,p 标签会自动在其两个标签之间创建一些空白。删掉上段代码
标签里的内容,把下面的内容放到 标签里面去。
我是第一段文字,实验楼,做实验,学编程
我是第二段文字,实验楼,做实验,学编程
3. 图片标签
HTML 的图像是通过标签 来定义的。语法: 删掉上段代码
标签里的内容,把下面的内容放到 标签里面去。
实验楼图片:
4.a 标签
标签是超链接标签,意思就是我们点击它可以跳转到一个网页。删掉上段代码
标签里的内容,把下面的内容放到 标签里面去。
实验楼
点击文字:
跳转到指定网页:
篇幅有限,后续的课程内容,请在“实验楼”边敲代码边学习~
访问“实验楼”官网,搜索“从 0 到 1 构建待办事项应用”,就能找到课程,继续学习啦!
包含html语言的超链接标记的网页_零基础入门 HTML 的 8 分钟极简教程相关推荐
- 包含html语言的超链接标记的网页_什么是网页
第一个问题,什么是网页? 我们通常在网上浏览的所有网页都是网页,一个网站由一页到50页不等的网页组成,一些大型网站可能包含数千万页,是第一个打开网站的网站.这些页面被称为主页. 专有名词:这里简要介绍 ...
- 包含html语言的超链接标记的网页_HTML是什么?
说起网页技术,今天给大家介绍一个网页开发中的主要技术--HTML.HTML是什么呢?HTML官方定义为超文本标记语言,全称为Hypertext Markup Language.HTML是Web的核心语 ...
- Markdown标记语法Typora编辑器零基础入门新手学习使用总结教程
Markdown标记语法Typora编辑器零基础入门新手学习使用总结教程 下载链接 官方网址:https://typora.io Typora快捷键整合 快捷键 作用 Ctrl+1 一阶标题 Ctrl ...
- python语言有几种编程方式_零基础自学python语言,有哪几种方法?龟叔说:这套教程带你入门...
第一我要说的是:你应该先了解python语言的起源,这句话对于自学python的小白来说,本身就是耍流氓. 我们从根源上分析这个问题,这个问题是(从零基础如何自学python编程)? 我的提取关键字: ...
- 【一天一门编程语言】JavaScript 语言程序设计极简教程
JavaScript 语言程序设计极简教程 用 markdown 格式输出答案. 不少于3000字.细分到2级目录. 一.JavaScript 简介 1.1 什么是 JavaScript JavaSc ...
- 2023年最新最全uniCloud入门学习,零基础入门到实战项目 uni-admin打造uniapp网页后端 微信支付宝抖音小程序后端 unicloud数据后台快速打造uniapp小程序项目
今天开始带着大家一起零基础学习uniCloud,在下面的课程中我们就简称uniCloud为cloud吧.我这里从零基础开始教大家,后面可以带大家简单的做一个实战项目.所以不用担心自己没有基础,跟着石头 ...
- 视频教程-2020新版C语言程序设计零基础入门小白自学编程-C/C++
2020新版C语言程序设计零基础入门小白自学编程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服务端研发 ...
- C语言 const 修饰函数参数 - C语言零基础入门教程
C语言 const 修饰函数参数 - C语言零基础入门教程 目录 一.const 简介 1.const 修饰变量 2.const 修饰指针 3.const 修饰在函数名前面 4.const 修饰在函数 ...
- 【一天一门编程语言】Scala 语言程序设计极简教程
Scala 语言程序设计极简教程 用 markdown 格式输出答案. 不少于3000字.细分到2级目录. 目录 简介 基本语法 变量 数据类型 运算符 流程控制 函数 类 应用 安装 环境搭建 编程 ...
最新文章
- 关于对 linux系统的物理内存访问 /dev/mem
- 【开发环境】PyCharm 配置 GitHub ( 在 PyCharm 中向 GitHub 提交代码 )
- Ansible-list-Dictionary-数据格式
- 前端学习(3253):vs code中组件化编码
- Linux软件安装部署文档,MetaQ安装部署文档
- duration java_Java Duration类| 带示例的dividBy()方法
- 延长计算机屏幕显示时间,设置Win7电源计划的方法介绍 延长续航时间
- kali-扫描主机-Nmap
- excel转置怎么操作_excel怎么做日历?使用Excel制作日历的操作方法
- 数据库——数据库的备份和还原
- 并发与同步、信号量与管程、生产者消费者问题
- 操作系统为什么需要驱动? 驱动程序是什么?为什么有的硬件“免驱”?
- AC2100 OpenWrt 多拨
- MSP432E4系列编码器(QEI模块)速度换算
- 28岁自学3年前端成功转行的励志故事
- 汇编 movl %gs:20, %eax 的作用
- Java人员随机分组
- unity转微信小程序小游戏
- 《终结拖延症》读书笔记,作者威廉·克瑙斯
- Boolean value of Tensor with more than one value is ambiguous
热门文章
- Genymotion模拟器拖入文件报An error occured while deploying the file的错误
- 企业级应用框架(五)IOC容器在框架中的应用
- N个三角形分割平面个数(数学)
- 学习PetShop3.0(2)宠物展示
- Spring 钩子之BeanFactoryPostProcessor和BeanPostProcessor
- vue 中slot 的具体用法
- [pytorch、学习] - 4.1 模型构造
- wds+mdt 分布式自动部署 操作系统
- 基于 axios 的 Vue 项目 http 请求优化
- 作为IT从业者,你是如何做好个人职业规划?