【HTML】第 1 节 - HTML 初体验

        欢迎来到博主 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://xiahunao.cn/news/353236.html

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

相关文章

《谁说菜鸟不会数据分析(入门篇)》总结

一、数据分析方法论 营销方面&#xff1a;4P、用户使用行为、STP理论、SWOT 管理方面的理论模型&#xff1a;PEST、5W2H、时间管理、生命周期、逻辑树、金字塔、SMART原则等 PEST&#xff08;宏观环境分析&#xff09;P(political)政治环境&#xff08;社会性质、执政党性质…

《谁说菜鸟不会数据分析》

一、数据分析概况 &#xff08;一&#xff09;、数据分析是“神马”&#xff1f; 1.数据分析是指用适当的统计分析方法对收集来的大量数据进行分析&#xff0c;将他们进行汇总、理解并消化&#xff0c; 以求最大化的开发数据的功能 &#xff0c;发回数据的作用。 2.数据分析…

谁说菜鸟不会数据分析(SPSS篇)----- 学习笔记

SPSS变量尺度跟数据类型百分位值&#xff1a;将数据从小到大排序&#xff0c;用n-1个数据点将数据分成n等份集中趋势&#xff1a;反映数据向其中心值凝聚的程度&#xff0c;对数据一般水平的概括性度量离散趋势&#xff1a;反映数据偏离中心值的程度&#xff0c;是衡量集中趋势…

谁说菜鸟不会数据分析 | 学习笔记 (全)

一.前言 数据分析是为了提取有用信息和形成结论而对数据加以详细研究和概括总结的过程 数据分析的目的是把隐藏在一大批看似杂乱无章的数据背后的信息集中和提炼出来&#xff0c;总结出所研究对象的内在规律。在实际工作中&#xff0c;数据分析能够帮助管理者进行判断和决策&…

java SSM 互助旅游管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 互助旅游管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采…

元宇宙,现状,路径与未来

现在&#xff0c;如果你还不知道元宇宙这个词&#xff0c;那应该直接投诉村村通工程怎么还没修到乡下..…事实上&#xff0c;自从半年前&#xff0c;当已经头发斑白的路边大爷摇在躺椅上一边喝着茶一边问我什么是元宇宙时&#xff0c;我就察觉到元宇宙在各种人士的吹捧下已经火…

Linux 如何查看 隐藏文件大小,某个文件大小,文件夹大小

du -sh dir or file du -sh 后面跟目录或者文件&#xff0c;你要看哪个文件或者文件夹的大小&#xff0c;后面就跟上名字就好&#xff0c;可以写n个。 我截图的后面就是一下看了四个文件夹的大小 命令是简单&#xff0c;记录一下&#xff0c;免得下次用的时候&#xff0c;又…

win11怎么查看隐藏文件

出于隐私等方面的考虑&#xff0c;有些网友给自己的文件做了一些隐藏的处理&#xff0c;但是时间久后就不知道隐藏文件在哪里&#xff0c;该怎么找到win11隐藏文件。那么win11怎么查看隐藏文件&#xff1f;下面小编就教下大家查看win11隐藏文件的方法。 我们需要先取消文件隐藏…

查看计算机桌面隐藏文件夹,电脑怎么查看隐藏文件(隐藏文件夹显示方法)

很多朋友在使用电脑的时候&#xff0c;都会将一些较隐私的文件给隐藏起来&#xff0c;怎么隐藏文件相信都难不倒大家。但是该如何将隐藏文件显示出来呢?这可以说是难道了一大片朋友&#xff0c;针对这一问题&#xff0c;这里小编就给大家介绍显示隐藏文件夹的操作方法。 相信大…

Linux下查看隐藏文件命令

参考 Linux下查看隐藏文件命令 - 云社区 - 腾讯云 一般的Linux下的隐藏目录使用命令ls -l是查看不出来的&#xff0c;只能查看到文件及文件夹 查看Linux下的隐藏文件需要用到命令 ls -al 其他查看文件目录命令&#xff1a; ls -lll ls -l /

macOS: 查看隐藏文件

在Mac下&#xff0c;如果无法显示隐藏文件&#xff1a; 按 command shift . 即可显示隐藏文件&#xff1a; 复按 command shift . 即可再次将之隐藏&#xff1a;

winscp 查看隐藏文件

WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端&#xff0c;个人觉得非常好用&#xff0c;下面讲一下我遇到的问题吧今天要修改.htaccess 问题&#xff0c;之前使用WinSCP都没有发现这个问题&#xff0c;今天发现没有办法在远程的目录里找到隐藏的.htaccess这里解释一…

跟着LearnOpenGL学习6--变换

文章目录 一、前言二、向量2.1、向量与标量运算2.2、向量取反2.3、向量加减2.4、长度2.5、向量相乘 三、矩阵3.1、矩阵的加减3.2、矩阵的数乘3.3、矩阵相乘 四、矩阵与向量相乘4.1、单位矩阵4.2、缩放4.3、位移4.4、旋转4.5、矩阵的组合 五、变换实战5.1、GLM配置5.2、GLM测试5…

流氓软件篡改微软EDGE浏览器主页面的那些伎俩

微软的EDGE浏览器很好用&#xff0c;但也很容易被绑架&#xff0c;在网上下载各类免费软件&#xff0c;只要你安装完&#xff0c;十有八九就给你把主页改成某某导航了。尽管打开EDGE直接进入360、毒霸、好123等链接对上网影响也不大&#xff0c;打开这些导航页面后&#xff0c;…

npm install报错 -> npm ERR! Unexpected token ‘.‘ 报错解决办法

原因&#xff1a; 我遇到这个问题的场景是用nvm1.1.7的版本安装了16.x以上的node, 然后再下载依赖的时候就报错了 总结一下就是nvm版本太低了&#xff0c;他的里面没有集成高版本node导致的 解决&#xff1a; 我们把nvm版本换到最新的就可以了 1. 卸载掉当前所有的node nvm …

如何不出国一年内拿到加拿大女王大学金融硕士学位证书?

作为加拿大最好的公立大学之一&#xff0c;QueensUniversity位于安大略省的金斯顿市。最近&#xff0c;它在QS全球大学排名中跻身第209位&#xff0c;同时在加拿大的综合排名中名列第7位。这表明女王大学在学术研究和教育方面都有着出色的表现。Queens University坐落于安大略省…

跨境电商如何进行仓储物流管理?

跨境电商如何进行仓储物流管理&#xff1f; 01跨境电商仓储物流管理痛点在哪&#xff1f; 供应链不稳定&#xff1a;因为要涉及多个国家的生产和供应环节&#xff0c;跨境物流的过程中还需要遵守目的地国家和货物品类的规定&#xff0c;这会增加仓储和物流成本&#xff0c;并…

图像压缩编码基础——笔记整理

图像压缩基础 1)压缩的原因:数字视频码率高达216Mb/s。数据量之大&#xff0c;无论是网络传输&#xff0c;还是存储都构成巨大压力。在保持信号质量的前提&#xff0c;要降低码率及数据量。 2)压缩的原理: 图像信息存在着大量的规律性或相关性&#xff0c;在传输的前一个样值中…

批量图片压缩解决方案之Imagine

背景&#xff1a; 一个网站或者App&#xff0c;在运维过程中&#xff0c;为了节省流量&#xff0c;提升页面响应时间&#xff0c;往往会对图片进行批量压缩&#xff0c;从而减少浏览器加载一个页面的整体体积。而图片压缩之后又要保证图片尺寸不变&#xff0c;质量损失较小&…

ImageIO的图片压缩算法

调用CompressPictureUtils.compress(要压缩的图片路径&#xff0c;保存的图片路径)可以对图片进行压缩。 左边的原图&#xff0c;右边是压缩后的图片。 调用函数的方法&#xff1a; public static void main(String[] args) {CompressPictureUtils.compress("D:\\1.jpg&q…