包含html语言的超链接标记的网页_零基础入门 HTML 的 8 分钟极简教程

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

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

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

今天我们就带来一门适合前端初学者的课程,可以带你从零入门 HTML、CSS、JS、React 等前端核心技能,并创建一个待办事项的管理应用~

项目效果:

bdfbb6638e2234c2c83620e74721d78e.png

课程从最基础的 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 是如何工作的

下面我们来演示用户是如何看到一个网页显示的。

b57a34b5eba9a4872a2720727d610712.png

具体来讲:

  1. 当用户通过浏览器输入网址后,浏览器先在 DNS 服务器上找到它,然后对它进行解析。
  2. 解析完成后,浏览器给服务器发送 http 请求。
  3. 服务器同意这个请求,就把 HTML 文件发送回浏览器。
  4. 浏览器拿到 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。

dc263905f69fe096ea76955941ab2baf.png

然后输入上面的代码。

a3417941708a2576a6c8616791fc7c32.png

让我们来看一下运行效果吧。鼠标右键 index.html 文件,点击 Open With,然后点击 Preview。

0f81757fc30edf13237bb2538a55cfb6.png

最终效果为:

1c95fac8c57f471259cc47c2d6bce95d.png

2.p 标签

p 标签是我们的文本标签,p 标签会自动在其两个标签之间创建一些空白。删掉上段代码

标签里的内容,把下面的内容放到 标签里面去。

我是第一段文字,实验楼,做实验,学编程

我是第二段文字,实验楼,做实验,学编程

21e2072268c47c39a1a63681c3f2c5ef.png
0fbc72be8d8da9ad8ae87952b6c7a7da.png

3. 图片标签

HTML 的图像是通过标签 来定义的。语法: 删掉上段代码

标签里的内容,把下面的内容放到 标签里面去。

实验楼图片:

b55a49a6-f435-eb11-8da9-e4434bdf6706.png
363b3c411e9d788298d3ab73a9717e05.png
ddaa2510dc22ac09ddbd764ac4f61b48.png

4.a 标签

标签是超链接标签,意思就是我们点击它可以跳转到一个网页。删掉上段代码

标签里的内容,把下面的内容放到 标签里面去。
实验楼
32723f11b3910c19e215d25e95835083.png

点击文字:

bf0d65ff00091b47a1ae42c2c3e2aab3.png

跳转到指定网页:

c6111a22d84c0645b4bdfe7a754b5716.png

篇幅有限,后续的课程内容,请在“实验楼”边敲代码边学习~

访问“实验楼”官网,搜索“从 0 到 1 构建待办事项应用”,就能找到课程,继续学习啦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261823.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mongodb模糊查询_AWS 回击了!推出兼容 MongoDB 的 DocumentDB

2018 年 10 月,MongoDB 将其开源许可证从 GNU AGPLv3 切换到 Server Side Public License(SSPL),并明确指出之所以会更改开源协议是因为部分云计算公司在使用 MongoDB 的时候没有遵循其开源协议。2019 年 1 月 9 日,AWS 宣布推出 Amazon Docu…

琴岛学院计算机应用技术,我院计算机工程系成功晋级“中国高校计算机大赛-网络技术挑战赛”全国总决赛...

2017年7月22日,由教育部高等学校计算机类专业教学指导委员会、教育部高等学校软件工程专业教学指导委员会、教育部高等学校大学计算机课程教学指导委员会和全国高等学校计算机教育研究会联合主办的“中国高校计算机大赛”首届网络技术挑战赛于济南大学举办。青岛理工…

Android L 的 Tint(着色)

Tint 是什么? Tint 翻译为着色。 着色,着什么色呢,和背景有关?当然是着背景的色。当我们开发 App 的时候,如果使用了 Theme.AppCompat 主题的时候,会发现 ActionBar 或者 Toolbar 及相应的控件的颜色会相应…

《从零开始学Swift》学习笔记(Day 66)——Cocoa Touch设计模式及应用之通知机制...

原创文章,欢迎转载。转载请注明:关东升的博客 通知(Notification)机制是基于观察者(Observer)模式也叫发布/订阅(Publish/Subscribe)模式,是 MVC(模型-视图-控…

JUnit3 一次运行多个测试类和进行多次重复测试:使用测试套件和RepeatedTest

测试套件 如果测试类写到很多,每次要进行测试,难道要重新点击每一个测试类来运行?如果有200个测试类要测试呢? 为了解决这个问题,引入了测试套件(TestSuite)。 通过将多个测试放入套件中&#x…

mysql 不同分区 同时insert_Mysql分区表的原理和优缺点

分区表的原理分区表是由多个相关的底层表实现,这些底层表也是由句柄对象表示,所以我们也可以直接访问各个分区,存储引擎管理分区的各个底层表和管理普通表一样(所有的底层表都必须使用相同的存储引擎),分区表的索引只是在各个底层…

大理三塔,及崇圣寺里的假深沉

大理三塔,及崇圣寺里的假深沉 记得我第一次看见三塔时,是一副破败不堪的景象。而第二次来大理时,因为“崇圣寺”正在修葺,只能远远地眺望一下三塔。那时我对大理失望极了。 现在三塔修缮一新,给人耳目一新的感觉。 三塔…

WCF三种通信模式(转)

一、概述 WCF在通信过程中有三种模式:请求与答复、单向、双工通信。以下我们一一介绍。 二、请求与答复模式 描述: 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务端有了答复后才能…

第一个程序,Hello World

在eclipse里新建一个project,选Android-Android Project 然后Next,继续 解释一下 Package Name:这个学过编程的人都应该熟悉了,类似于namespace,你定义的所有东西都在一个包里不会和别的包出现重命名的问题等等,不多说…

Hadoop2.6集群动态添加和删除数据节点

2019独角兽企业重金招聘Python工程师标准>>> 开始之前,应该把所有新增数据节点上的Hadoop环境都配置好(如果要直接复制已经存在节点的hadoop文件夹,应该删掉里面已经产生的集群数据,比如tmp和data目录,不然…

拉取ftp服务器上的文件_winscp和云服务器,2步实现winscp将文件上传到腾讯云Linux云服务器...

WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。同时支持SCP协议,它的主要功能就是在本地与远程计算机间安全的复制文件。与使用FTP上传代码相比,通过WinSCP可以直接使用服务器账户密码访问云服务器,无需在服务器端做任何配置。II…

笔记:设计模式(3)-Abstract Factory抽象工厂模式

工厂模式的起源 1.变化点在“对象的创建”,因此就封装“对象创建”; 2.面向接口编程,依赖接口,而非依赖实现。 动机(Motivation) 在系统中,经常面临着“一系列相互以来的对象”的创建工作&#…

MongoDB操作:insert()

2019独角兽企业重金招聘Python工程师标准>>> Override public boolean inSert(String dbName, String collectionName, String[] keys,Object[] values) { DB db null; DBCollection dbCollection null; WriteResult result null; String resul…

最近处理的几个小问题_20160311

最近处理的小问题很多,我就拿出来几个,简单和大家说一说。我就分为三个方面,硬件问题,Oracle表空间迁移,MySQL断电恢复首先是硬件问题。如果看到下面的系统日志,就会发现早在2014年就出现了一些警告和问题&…

3. 什么是icmp?icmp与ip的关系_你知道如何跟女生,确定恋人关系吗?

哈喽!同学你好!我是子伯,是一名情感咨询。今天我想给你分享,和女生再暧昧期,如何去确定关系,因为......在我做咨询当中,有很多男生跟女生,不管是在聊天上,还是在线下的交…

量子计算机完整的图片,记者带你走近世界首台超越早期经典计算机的光量子计算机(组图)...

在光学体系方面,研究团队在去年首次实现十光子纠缠操纵的基础上,利用高品质量子点单光子源构建了世界首台超越早期经典计算机的单光子量子计算机。图为基于单光子的量子计算原型机结构。潘建伟教授供图据了解,多粒子纠缠的操纵作为量子计算的…

漂浮的表单

代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns"http://www.w3.org/1999/xhtml"><head><meta http-equiv"Content-Typ…

计算机word文档无法工作,电脑docx打不开怎么办(word文档无法打开的解决方法)...

我们在日常工作的时候&#xff0c;经常都会遇到这样子的一个问题&#xff0c;那也就是Word文件无法的现象。当我们的工作时间又非常的紧迫&#xff0c;那么个时候该怎么办呢&#xff1f;稳住&#xff0c;别慌&#xff0c;今天小编就来和大家一起探讨一下Word无法打开的解决方法…

LinkedList剖析

第1部分 LinkedList介绍 LinkedList简介 LinkedList 是一个继承于AbstractSequentialList的双向链表。它也可以被当作堆栈、队列或双端队列进行操作。 Doubly-linked list implementation of the List and Deque interfaces. Implements all optional list operations, and per…

powerdesigner怎么导出pdf_各种科研绘图软件中的矢量图导出技巧

引言科技论文常含有插图&#xff0c;借助插图来形象直观、简明扼要地表达所要表述的内容(梁福军. 科技论文规范写作与编辑[M]. 清华大学出版社, 2014.)。科研绘图软件有很多种&#xff0c;而软件导出的图片可以分为矢量图&#xff08;vector&#xff09;和位图&#xff08;bitm…