【HTML】第 1 节 - HTML 初体验

news2024/12/20 16:32:43

        欢迎来到博主 Apeiron 的博客,祝您旅程愉快 。 时止则止,时行则行。动静不失其时,其道光明。


目录

1、缘起

2、HTML 概念

2.1、HTML 定义

2.2、标签语法

3、HTML 基本骨架

4、标签的关系

5、注释

6、总结 


1、缘起

        最近在学习微信小程序的开发,但是呢,学习开发微信小程序好像需要有前端知识的基础,呜呜呜,所以就又跑过来学习前端三件客了。

        今天是公元 2023 年 6 月 4 日,是我学习前端的第一天,开开心心。

2、HTML 概念

2.1、HTML 定义

HTML  超文本标记语言 -- Hyper Text  Markup  Language

①  超文本是什么?        链接

②  标记是什么?        标记也叫标签,带尖括号的文本

2.2、标签语法

①  标签 成对 出现,中间包裹内容

②  <> 里面 放英文字母(标签名)

③  结束标签比开始标签多一个斜杠(/

④  双标签:成对出现的标签

⑤  单标签:只有开始标签,没有结束标签

例如:<hr>:水平线        <br>:换行

示例代码:

Apeiron
<br>
<strong>Apeiron</strong>
<hr>

3、HTML 基本骨架

        在上文中,我们直接写了 strong 标签,也实现了一些效果。但是,我们这样写 HTML 代码是不专业的。为什么不专业呢?因为专业的代码都是有组织有纪律的。所以,专业的代码都是写在 HTML 的基本骨架中的。

①  html:整个网页

②  head:网页头部,用来存放给浏览器看的信息,例如 CSS

③  body:网页主体,用来存放给用户看的信息,例如图片、文字 

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网页开发</title>
</head>
<body>
    <strong>Hello HTML</strong>
</body>
</html>

4、标签的关系

作用:明确标签的书写位置,让代码格式更整齐

①  父子关系(嵌套关系) 

<html>
    <head></head>
</html>

②  兄弟关系(并列关系) 

<head></head>
<body></body>

5、注释

注释符号:<!-- 注释内容 -->

        在 VS code 中,添加/删除注释的快捷键是 ctrl + /

6、总结 

        本期的分享总结就到这里了,如果有疑问的小伙伴儿,我们在评论区交流嗷~~~,笔者必回,我们下期再见啦 ! 

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

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

相关文章

程序员0基础转行大数据年薪25万,只因我做了这件事...

现在我在成都的一家企业做大数据架构师&#xff0c;一个月税前可以拿到20k&#xff0c;还有项目奖金&#xff0c;一年下来最少也能拿25万。生活和工作也都在有条不紊地运转&#xff0c;每天也会有新的挑战&#xff0c;这正是我想要的生活。 01 机械工程专业 但我决定转行互联…

SpringBoot自定义starter之接口日志输出

文章目录 前言文章主体1 项目全部源码2 项目结构介绍3 starter 的使用3.1 配置文件 application,yml的内容3.2 启动类3.3 控制器类 4 测试结果 结语 前言 本文灵感来源是一道面试题。 要求做一个可以复用的接口日志输出工具&#xff0c;在使用时引入依赖&#xff0c;即可使用。…

MySQL数据库 10.DCL操作

目录 &#x1f914; 前言&#xff1a; &#x1f914;DCL介绍&#xff1a; &#x1f914;1.DCL管理用户&#xff1a; 1.查询用户&#xff1a; 图示&#xff1a; 2.创建用户 示例1&#xff1a; 运行结果&#xff1a;​ 示例2&#xff1a; 运行结果&#xff1a;​ 3.修改…

算法修炼之筑基篇——筑基一层中期(解决01背包,完全背包,多重背包)

✨博主&#xff1a;命运之光​​​​​​ &#x1f984;专栏&#xff1a;算法修炼之练气篇​​​​​ &#x1f353;专栏&#xff1a;算法修炼之筑基篇 ✨博主的其他文章&#xff1a;点击进入博主的主页​​​​​​ 前言&#xff1a;学习了算法修炼之练气篇想必各位蒟蒻们的基…

安全——网络安全协议的引入

TCP/IP安全缺陷 信息泄露 概述 网络中投递的报文往往包含账号、口令等敏感信息&#xff0c;若这些信息泄露则是灾难性的后果。其中嗅探是一种常见而隐蔽的网络攻击手段。 嗅探 概述 问题&#xff1a;在共享式网络架构下&#xff0c;所有的数据都是以广播方式进行发送&…

程序员大专毕业,月薪2w是什么体验?

在这个数据驱动的时代&#xff0c;大数据行业的发展前景也非常广阔&#xff0c;我相信我的未来会越来越光明 01 开始学习 是迈向前方的第一步 我是三月&#xff0c;一个来自小城市的大专毕业生。现在在杭州一家公司做大数据开发工程师&#xff0c;目前薪资是20k*13。 我本身…

运维小白必学篇之基础篇第十三集:网络概述中继实验

网络概述中继实验 实验作业&#xff08;主机名为自己的名字&#xff09;&#xff1a; 1、搭建中继环境&#xff0c;要求如下&#xff1a; 网络要求&#xff1a; 内网&#xff1a;192.168.50.50 网关&#xff1a;192.168.50.254 192.168.60.254 外网&#xff1a;192.168.60.60 主…

【论文阅读】An Object SLAM Framework for Association, Mapping, and High-Level Tasks

一、系统概述 这篇文章是一个十分完整的物体级SLAM框架&#xff0c;偏重于建图及高层应用&#xff0c;在前端的部分使用了ORBSLAM作为基础框架&#xff0c;用于提供点云以及相机的位姿&#xff0c;需要注意的是&#xff0c;这篇文章使用的是相机&#xff0c;虽然用的是点云这个…

DevOps该怎么做?

年初在家待了一段时间看了两本书收获还是挺多的. 这些年一直忙于项目, 经历了软件项目的每个阶段, 多多少少知道每个阶段是个什么, 会做哪些事情浮于表面, 没有深入去思考每个阶段背后的理论基础, 最佳实践和落地工具. 某天leader说你书看完了, 只有笔记没有总结, 你就写个总结…

小白必看!轻松理解和解决MySQL幻读问题!

大家好&#xff0c;我是小米&#xff01;今天我来给大家分享一下关于MySQL数据库中常见的一个问题——幻读&#xff0c;以及如何解决它。相信对于数据库开发和管理的小伙伴们来说&#xff0c;幻读是一个相对棘手的问题&#xff0c;但只要我们掌握了正确的解决方法&#xff0c;它…

网络故障管理

网络故障管理是以最快的方式查找、隔离和排除网络故障的过程。故障管理是网络管理的重要组成部分&#xff0c;它通过快速解决故障来最大限度地减少停机时间并防止设备故障&#xff0c;从而确保最佳的网络可用性并防止业务损失。 网络故障监控是故障管理的第一步&#xff0c;因…

Linux Shell脚本攻略

一、echo命令 1、在echo中转义换行符 默认情况下&#xff0c;echo会在输出文本的尾部追加一个换行符。可以使用选项-n来禁止这种行为。 echo同样接受双包含转义序列的双引号字符串作为参数。在使用转义序列时&#xff0c;需要使用echo -e "包含转义序列的字符串"这…

有哪些测试框架和工具推荐? - 易智编译EaseEditing

在软件测试领域&#xff0c;有许多测试框架和工具可供选择。以下是一些常见的测试框架和工具的推荐&#xff1a; Selenium: 一个用于自动化Web应用程序测试的流行框架。它支持多种编程语言&#xff0c;并提供丰富的功能和灵活性。 JUnit: 一个用于Java应用程序的单元测试框架…

MongoDB(学习笔记1.0)

最近在学非关系型数据库MongoDB&#xff0c;猛地用起来的真的没关系型数据库方便啊。 首先还是数据库的安装&#xff1a; 安装直接去官网安装即可&#xff0c;官网地址&#xff1a;MongoDB: The Developer Data Platform | MongoDB 当前也有免安装版的&#xff0c;这里就不再…

毕业三年,自学软件测试到就业,我用了4个月

我转行的经历 17年毕业&#xff0c;普通专科&#xff0c;通信专业。 当初选择这个专业是因为有一个校企合作&#xff0c;承诺学生毕业之后给学生安排就业&#xff0c;在学校里面混了三年之后&#xff0c;学校也是履行了当初安排就业的承诺&#xff0c;给我“发配”到了上海&a…

chatgpt赋能python:Python同一行输入

Python同一行输入 在Python编程中&#xff0c;你可能需要在同一行中输入多个命令或语句。这可以通过使用分号来实现。 在本文中&#xff0c;我们将介绍如何在Python中使用同一行输入&#xff0c;并探讨其优缺点。 使用分号实现同一行输入 在Python中&#xff0c;分号&#x…

地震勘探基础(九)之地震速度分析

速度分析 在地震资料数字处理中&#xff0c;速度分析是动校正和水平叠加和地震偏移的基础。 在水平界面情况下&#xff0c;共中心点时距曲线方程是一条双曲线。在共中心点时距曲线中&#xff0c;炮检距 x x x 和时间 t 0 t_0 t0​ 都是已知的&#xff0c;只有速度 v v v 是…

30天从入门到精通TensorFlow1.x 第五天,跨计算设备执行计算图-cpu

一、接前一天 前天学习了&#xff0c;数据流图&#xff0c;今天尝试在不同设备上&#xff08;cpu或者gpu&#xff09;来执行计算图。 本次使用cpu来执行&#xff0c;但是不涉及gpu。gpu放在后面学习&#xff0c;这里比较重要。 二、示例 1. 先看看自己的设备 from tensorfl…

My Note of Diffusion Models

Diffusion Models Links: https://theaisummer.com/diffusion-models/ Markovian Hierachical VAE rvs: data: x 0 x_{0} x0​,representation: x T x_{T} xT​ ( p ( x 0 , x 1 , ⋯ , x T ) , q ( x 1 , ⋯ , x T ∣ x 0 ) ) (p(x_0,x_1,\cdots,x_T),q(x_1,\cdots,x_{T…

AcWing 回转游戏 dfs IDA* 剪枝 统一操作 java

&#x1f351; 算法题解专栏 &#x1f351; 回转游戏 如下图所示&#xff0c;有一个 # 形的棋盘&#xff0c;上面有 1 , 2 , 3 1,2,3 1,2,3 三种数字各 8 8 8 个。 给定 8 8 8 种操作&#xff0c;分别为图中的 A s i m H A \\sim H AsimH。 这些操作会按照图中字母和箭头…