包含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,一经查实,立即删除!

相关文章

验证dropdownlist必选

假定dropdownlist: <asp:dropdownlist id"ddListNewsType" runat"server"><asp:ListItem Value"请选择类别" Selected"True">请选择类别</asp:ListItem><asp:ListItem Value"新闻中心">新闻中心<…

kotlin读取html,kotlin 使用skrape {it}从html获取数据 - 糯米PHP

查看语法&#xff0c;我假设您使用的是0.6.0版。您必须使用更特定的CSS选择器。data class MyScrapedData(val userName: String,val link: String)fun main() {val githubUserData skrape {url "http://www.website"extract {MyScrapedData(userName el("di…

C++函数默认值的用法

C函数默认值的用法 在C中&#xff0c;函数允许提供一个默认值。这样&#xff0c;当函数被调用时如果没有提供这些参数的值&#xff0c;编译器会自动使用默认值。示例代码如下&#xff1a; #include <iostream>// 函数声明&#xff0c;指定默认参数 void myFunction(int…

c++单链表【构造函数、运算符重载、析构函数、增删查改等】

c中的单向链表写法&#xff1a;实现增删查改、构造函数、运算符重载、析构函数等。建立头文件SList.h#pragma oncetypedef int DataType; //SList要访问SListNode&#xff0c;可以通过友元函数实现&#xff0c;友元函数在被访问的类中 class SListNode {friend class SList;//友…

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

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

MyEclipse6.5与Perforce的集成

perforce插件下载地址http://www.perforce.com/downloads/http/p4-wsad/install/3.4 转载于:https://www.cnblogs.com/xinzhuangzi/archive/2010/08/29/4100531.html

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

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

C语言宏定义##连接符和#符的使用及其它宏定义注意事项

C语言中如何使用宏C&#xff08;和C&#xff09;中的宏&#xff08;Macro&#xff09;属于编译器预处理的范畴&#xff0c;属于编译期概念&#xff08;而非运行期概念&#xff09;。下面对常遇到的宏的使用问题做了简单总结。 关于#和## 在C语言的宏中&#xff0c;#的功能是将其…

Android L 的 Tint(着色)

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

python 调用函数 开销_Python函数调用非常慢

这主要是为了确保我的方法是正确的,但我的基本问题是,如果我需要访问函数,那么检查函数外部是否值得.我知道,我知道,过早优化,但在很多情况下,它在函数调用中放置一个if语句以确定是否需要运行其余代码,或者将它放在函数调用之前.换句话说,它不会以任何方式做到这一点.现在,所有…

机房收费系统讨论

在假期快要结束的时候,我们大家一起讨论了各自的机房收费系统.轮流的看了每个人的作品.我们是分两个组看得. 说说看这次作品的感受吧. 大家作品都做得很认真.由于都是第一次做作品,而且还是第一次自己独立的完成一个较大的作品. 基本功能大家可是说是都实现了.我个人的作品现在…

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

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

医学计算机应用研究的意义,医学图像感兴趣区域的自动提取-计算机应用研究.PDF...

医学图像感兴趣区域的自动提取-计算机应用研究第 12 期 何 楚等: 医学图像感兴趣区域的自动提取 157 医学图像感兴趣区域的自动提取*何 楚, 彭文敏, 李吉星, 廖孟扬( 武汉大学 电子信息学院, 湖北 武汉 430072)摘 要: 针对医学图像归档与通信系统通过视频采集和胶片扫描产生的海…

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

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

DataGridView控件初始化,添加删除行(不绑定数据库)

转载&#xff1a; http://blog.163.com/zjlovety126/blog/static/2241862420106128264300/ 也不知道是否该应用这个控件&#xff0c;不过也想不出该用其他什么控件&#xff0c;关键是俺比较菜没什么经验。 要求是这样的&#xff0c;用户一次添加一个任务&#xff0c;这个任务有…

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

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

计算机应用 范文,计算机应用基础(范文).doc

第 PAGE \* Arabic 1 页计算机应用基础(范文)PAGE计算机应用基础5一、单选题1、第一台电子计算机是1946年在美国研制成功的&#xff0c;该机的英文缩写名是_ A&#xff1a;ENIAC _____。2、关于计算机的分类方法有多种&#xff0c;下列选项中不属于按计算机处理数据的方式进行分…

架构漫谈(八):从架构的角度看如何写好代码

2016-03-03 王概凯Kevin 聊聊架构架构漫谈是由资深架构师王概凯Kevin执笔的系列专栏&#xff0c;专栏将会以Kevin的架构经验为基础&#xff0c;逐步讨论什么是架构、怎样做好架构、软件架构如何落地、如何写好程序等问题。 本文是漫谈架构专栏的第八篇&#xff0c;作者Kevin举例…

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

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

WCF三种通信模式(转)

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