HTML入门:简单了解 HTML 和浏览器

news2025/3/11 9:06:36

你好,我是云桃桃。今天来简单了解一下 HTML 以及浏览器。

HTML 是什么?

HTML(全称:Hypertext Markup Language)是一种标记语言,用于创建和呈现网页的结构和内容。

它由一系列标签(或称为元素)组成,每个标签描述了网页中的一个特定部分或内容。

HTML 主要包括标题、段落、链接、图像、表格等。通过使用不同的 HTML 标签和属性,开发者可以定义页面的各种元素和其在页面上的布局和样式。

HTML 文件的后缀名,我们最常用的是以.html来结尾。其他的还有.mhtml,.htm。

那开发好代码了,我们如何展示给用户呢?这时候就需要用浏览器了。

浏览器是什么?

浏览器是一种用于显示 HTML 网页的工具。它可以是独立的软件,比如,下图的。

图片

从左到右,从上倒下依次是Opera(不常用),火狐,由 Microsoft 开发的internet explorer(现在win10升级为Microsoft edge了),苹果开发的Mac OS 和 iOS 操作系统的Safari,由 Google 谷歌开发的跨平台浏览器 Google Chrome(常用,推荐)。

也可以内置在其他软件中。比如,微信和 QQ 也内置了浏览器功能。

图片

可以这么说,浏览器和 HTML 网页之间的关系就像是,翻译员和外语文章之间的关系。

HTML 网页是一种外语编码文章,它通过解析 HTML 网页中的标记语言,将其转换为可视化的网页,并在用户的设备上显示出来。

所以,我们打开手机端或者电脑端浏览器的一刻起,我们基本就进入了 HTML 的世界。 HTML 是构建网页的基础,它的用途广泛而重要。

比如,你可以看到各种各样的网站,从新闻门户到电子商务平台tao.b,jd,从社交媒体到在线学习平台,无处不在的都有 Web 前端的身影。

HTML 简单案例以及运行

<!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>
    <h1>这是一个大标题</h1>
    <p>这是一个段落</p>
  </body>
</html>

可以在 vscode 里面先建立一个文件,后缀是.html,然后,预览可看到 html 网页文件效果。预览呢,有以下 2 种方式。

1、在当前页面工作区右击选择“open in brower”即可在默认浏览器打开页面。

2、还可以在本地双击打开运行。

效果如下。

图片

好了,本节完。

排版:云桃桃 | 图片设计:云桃桃   

图片

作者介绍:

云桃桃,在写作的程序媛。终身学习者,陪你一起编程,一起写作❤️

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

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

相关文章

java SSM二手交易网站系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

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

2024成套人才培养计划表

利驰软件深耕工业电气行业近30年&#xff0c;经历了从CAD工具软件&#xff0c;到知识管理软件&#xff0c;再到电气产业互联网服务平台两次重大的转型。当前电气设计软件SuperWorks已成为国产工业软件的经典之作&#xff0c;选型、报价、线束、母排等软件的市场占有率遥遥领先。…

Android APP性能指标(二)

文章目录 一、响应时间1.1 数据获取1.2 响应时间指标测试点1.3 启动速度测试点1.4 响应时间测试解决方法 二、流量2.1 数据获取2.2 流量测试关注点2.3 测试标准 三、电量3.1 连接手机3.2 数据获取3.3 获取APP的UID3.3 重置电池数据收集数据3.4 电量指标测试 四、温度五、性能测…

stm32学习笔记:I2C通信外设原理+实验

软件实现和硬件实现 串口通信为异步时序&#xff0c;用软件实现很麻烦&#xff0c;基本上用硬件实现 而I2C协议通信为同步时序&#xff0c;软件实现简单且灵活&#xff0c;硬件实现比较麻烦&#xff0c;故软件比较常用 但I2C硬件实现功能比较大&#xff0c;执行效率高&#xff…

四信全球化拓展再启新篇!LoRa传感器与云平台领航智能感知时代

随着科技浪潮的不断推进&#xff0c;物联网已逐渐融入我们的生活。刚刚结束的MWC24盛会上&#xff0c;四信带来了一系列前沿技术成果&#xff0c;不仅将5G技术成功扩展至当前市场主流类型的终端&#xff0c;更携手联通、ASR等业界巨头&#xff0c;在连接、5G RedCap、AI、LoRa以…

章鱼网络进展月报 | 2024.2.1-2.29

章鱼网络大事摘要 1、Omnity 完成了核心组件的原型开发&#xff0c;正在测试&#xff0c;未来将首先支持 Runes 资产跨链。 2、$NEAR Restaking 质押总量超过400万美元。 3、章鱼网络受邀参加 ETHDenver 2024&#xff0c;并且与 ICP 共同组织活动&#xff0c;介绍 Omnity 的…

记一次线上问题-Druid数据源配置失败

一、背景是这样的 我们的服务是spring 服务。 数据库是mysql。 接到公司要求&#xff0c; mysql数据源配置&#xff08;JDBCURL地址&#xff09; jdbc:mysql://IP:PORT/dbname?Unicodetrue&characterEncodingutf8&useSSLfalse 需要添加参数 allowMultiQueriestr…

SkyWalking 本地启动以及闪退问题

1. 下载包 Downloads | Apache SkyWalking SkyWalking APM包含OAP和UI Java Agent 就是Java 的探针 2. 运行 UI 默认端口是 8080&#xff0c; OAP 默认端口是 11800&#xff08;grpc&#xff09;12800&#xff08;http&#xff09; 如果占用可以修改配置文件 UI 项目的配…

Vue中如何处理用户权限?

在前端开发中&#xff0c;处理用户权限是非常重要的一个方面。Vue作为一种流行的前端框架&#xff0c;提供了很多便捷的方式来管理用户权限。本文将介绍一些Vue中处理用户权限的方法 1. 使用路由守卫 Vue Router提供了一个功能强大的功能&#xff0c;即导航守卫&#xff08;N…

如何使用宝塔面板搭建Discuz并结合cpolar实现远程访问本地论坛

文章目录 前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 前言 Crossday Discuz! Board&#xff08;以下简称 Discuz!&#xff09;是一套通用的社区论坛软件系统&#xff0c;用户可以在不需要任何编程的基础上&a…

OpenAI-Sora学习手册

通过Sora看2024红利&#xff1a;文生视频&#xff0c;虽然AI不一定是风口&#xff0c;但一定是未来深入到生活工作&#xff0c;乃至思考的必备工具。 目录 Sora介绍 Sora基础介绍 Sora官方网址 Sora的价值 1.物理世界的交互 2.创意世界的绽放 3.多角色、更精准、更细节…

全志D1s开发板裸机开发之坏境搭建

环境搭建 开发板介绍 张天飞老师编写的《RISC-V体系结构编程与实践》&#xff0c;里面的源码是基于 QEMU 模拟器的&#xff0c;可以认为它是一款虚拟的开发板。如果需要在真实开发板上学习&#xff0c;可以使用百问网的 DongshanPI-D1S 开发板。 DongshanPI-D1S 是百问网推出…

大语言模型的知识融合(ICLR2024)

一、写作动机&#xff1a; 虽然从头开始训练大型语言模型&#xff08;LLMs&#xff09;可以生成具有独特功能和优势的模型&#xff0c;但这种方法成本高昂&#xff0c;而且可能导致功能冗余。 二、主要贡献&#xff1a; 入了 LLMs 知识融合的概念&#xff0c;旨在结合现有 LL…

Python基于opencv的人脸识别上课签到考勤系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

一图看懂:什么是“新质生产力”?

◆2023年9月&#xff0c;首次提出“新质生产力”。 ◆2024年1月&#xff0c;强调“加快发展新质生产力&#xff0c;扎实推进高质量发展”。 ◆2024年3月&#xff0c;《政府工作报告》中提出&#xff0c;要大力推进现代化产业体系建设&#xff0c;加快发展新质生产力。充分发挥…

黄坤朋:沉浸声系统技术方案和调试| 演讲嘉宾公布

一、3D 音频分论坛 3D 音频分论坛将于3月27日同期举办&#xff01; 3D音频技术不仅能够提供更加真实、沉浸的虚拟世界体验&#xff0c;跨越时空的限制&#xff0c;探索未知的世界。同时&#xff0c;提供更加丰富、立体的情感表达和交流方式&#xff0c;让人类能够更加深入地理解…

Xilinx 7系列 FPGA硬件知识系列(一)——FPGA选型参考

目录 1.1 Xilinx-7系列产品的工艺级别 ​编辑1.2 Xilinx-7系列产品的特点 1.2.1 Spartan-7系列 1.2.2 Artix-7系列 1.2.3 Kintex-7系列 1.2.4 Virtex-7系列 1.3 Xilinx-7系列FPGA对比 1.3.1 DSP资源柱状图 ​1.3.2 Block RAM资源柱状图 ​1.3.3 高速串行收…

【Java设计模式】八、装饰者模式

文章目录 0、背景1、装饰者模式2、案例3、使用场景4、源码中的实际应用 0、背景 有个快餐店&#xff0c;里面的快餐有炒饭FriedRice 和 炒面FriedNoodles&#xff0c;且加配菜后总价不一样&#xff0c;计算麻烦。如果单独使用继承&#xff0c;那就是&#xff1a; 类爆炸不说&a…

浅谈漏洞扫描技术

1. 什么是漏扫 漏洞扫描技术是指利用已有的漏洞数据库&#xff0c;使用扫描匹配的方式对计算机系统进行脆弱性检测&#xff0c;从而实现漏洞发现的一种安全防护手段&#xff0c;漏洞扫描的结果可以用于指导网安的管理人员及时处理系统中的漏洞&#xff0c;防患于攻击之前。 漏…

使用YOLOv7进行视频实时姿态估计

本文基于YOLOv7进行人体姿态的实时估计,并附录完整代码。 概述 YOLO(You Only Look Once)是一种用于目标检测的方法论,同时也是构建于该方法论之上的一系列模型。 自2015年YOLOv1诞生以来,其作者相继提出了YOLOv2(YOLO9000)和YOLOv3等后续版本,并在随后的几年里,深度…