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

你好,我是云桃桃。今天来简单了解一下 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.mzph.cn/news/723719.shtml

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

相关文章

android开发视频教程百度网盘,深入浅出Android

基于Linux的pc启动过程 我们都知道&#xff0c;所有的程序软件包括操作系统都是运行在内存中的&#xff0c;然而我们的操作系统一般是存放在硬盘上的&#xff0c;当我们按下开机键的时候&#xff0c;此时内存中什么程序也没有&#xff0c;因此需要借助某种方式&#xff0c;将操…

圆形动画 小球在轨道上循环运动 点击按钮停止开始 在次点击 动画开始

圆形动画 小球在轨道上循环运动 点击按钮停止开始 在次点击 动画开始

Vue-04

Vue 指令 指令补充 指令修饰符&#xff1a;通过"."指明一些指令后缀&#xff0c;不同后缀封装了不同的处理操作 → 简化代码 按键修饰符 keyup.enter → 键盘回车监听 在input中使用keyup.enter&#xff0c;这个时候按enter键也能实现添加&#xff0c;和点击按钮实…

目前最新的集运行业发展及运营模式介绍

集运系统紧跟时代发展潮流&#xff0c;提供“集运系统代购商城”&#xff0c;通过系统掌握C端用户数据&#xff0c;发展代购、电商业务。 跨境电商物流市场蓬勃发展&#xff0c;拥有十万亿量级的增长空间&#xff0c;跨境电商市场规模及进出口总额都呈上升趋势&#xff0c;而未…

CAN总线的拓扑类型和CAN收发器(原理讲解)

1&#xff1a;CAN收发器&#xff08;原理讲解&#xff09; 从原理上来讲CAN_H拉升电压&#xff0c;或CAN_L拉低电压的原理。 以上是TJA1145AT的俯瞰图&#xff0c;此芯片是NXP比较先进的CAN收发器&#xff0c;带SPI总线系统。 回到正题&#xff0c;CAN_H和CAN_L收发器是通过内…

c++|内存管理

c|内存管理 C/C内存分布strlen 和 sizeof的区别 c语言动态内存管理方式malloccallocrealloc例题 c管理方式new/delete操作内置类型new/delete操作自定义类型证明 new 和 delete 的底层原理operator new与operator delete函数operator new 和 operator delete的 用法构造函数里面…

【unity实战】3D水系统,游泳,潜水,钓鱼功能实现

文章目录 素材将项目升级为URP画一个水潭地形材质升级为URP创建水调节水第一人称人物移动控制游泳水面停留添加水下后处理水下呼吸钓鱼参考完结 素材 https://assetstore.unity.com/packages/vfx/shaders/urp-stylized-water-shader-proto-series-187485 将项目升级为URP 这…

使用KVM服务创建虚拟机(简化版)

1. 规划节点 KVM服务虚拟机节点规划&#xff0c;见表。 IP主机名节点192.168.100.10localhostKVM 2. 基础准备 使用VMWare Workstation软件安装CentOS 7.2操作系统&#xff0c;镜像使用提供的 CentOS-7-x86_64-DVD-1511.iso&#xff0c;关闭防火墙并且配置SELinux规则&…

八年老程序员的一二月总结:回家过年、阅读挑战、线下新体验

大家好&#xff0c;我是拭心&#xff0c;一名工作八年的程序员。 每两个月我会做一次总结&#xff0c;为的是留一些回忆、评估自己的行为、沉淀有价值的信息。 回顾一二月&#xff0c;原来发生了这么多事&#xff0c;趁着周末记录一下吧。 有意义的事 1.回家过年 今年回内…

【STM32详解FLASH闪存编程原理与步骤】

STM32详解FLASH闪存编程原理与步骤 FLASH编程注意事项FLASH编程过程STM32的FLASH擦除过程FLASH全片擦除FLASH操作总结锁定解锁函数写操作函数擦除函数获取状态函数等待操作完成函数读FLASH特定地址数据函数 FLASH编程注意事项 1.STM32复位后&#xff0c;FPEC模块是被保护的&am…

基于单片机的数字温度计设计

目 录 摘 要 I Abstract II 引 言 1 1 整体方案设计 3 1.1 主控芯片类型选择 3 1.2 测温电路选择 3 1.3 系统总体方案 4 2 系统的硬件电路设计 5 2.1 单片机系统设计 5 2.2 显示模块设计 8 2.3 温度读取电路的设计 10 3 系统软件设计 13 3.1 软件开发环境的介绍 13 3.2 系统重…

MySQL基础-----SQL语句之DDL数据定义语句

目录 前言 开启登录数据库 一、数据库操作 1.查询所有数据库 2.切换使用数据库 3.查询当前使用的数据库 4.创建数据库 创建一个hello数据库, 使用数据库默认的字符集。 创建一个itheima数据库&#xff0c;并且指定字符集 5.删除数据库 二、表操作 1.查询当前数据库所有…

2024Android高级面试题,这些细节在Android面试上要注意了

前言 对于字节跳动的二面三面而言&#xff0c;FrameworkMVP架构HashMap原理性能优化Flutter源码分析等问题都成高频问点&#xff01;然而很多的朋友在面试时却答不上或者答不全&#xff01;今天在这分享下这些问点的视频解析给大家&#xff0c;希望对有需要的朋友有所帮助&…

【洛谷 P8720】[蓝桥杯 2020 省 B2] 平面切分 题解(计算几何+集合+向量)

[蓝桥杯 2020 省 B2] 平面切分 题目描述 平面上有 N N N 条直线, 其中第 i i i 条直线是 y A i ⋅ x B i yA_{i} \cdot xB_{i} yAi​⋅xBi​ 。 请计算这些直线将平面分成了几个部分。 输入格式 第一行包含一个整数 N N N。 以下 N \mathrm{N} N 行, 每行包含两个…

基于Google Vertex AI 和 Llama 2进行RLHF训练和评估

Reinforcement Learning from Human Feedback 基于Google Vertex AI 和 Llama 2进行RLHF训练和评估 课程地址&#xff1a;https://www.deeplearning.ai/short-courses/reinforcement-learning-from-human-feedback/ Topic: Get a conceptual understanding of Reinforcemen…

vue3 (四)动态组件Vs异步组件

1.动态组件 点击toggle切换2个组件&#xff0c;配合<keep-alive>使用防止切换后数据丢失 <keep-alive><component :is"currentItem"></component> </keep-alive> 2.异步组件 定义方法&#xff1a;app.component(组件名,Vue.defineAs…

西安雁塔未来人工智能计算中心算力成本分析

先看一例旧闻&#xff1a;西部“最强大脑”落户雁塔——30亿亿次超算能力助力创新之城建设 其中提到一期算力为 300PFLOPS FP16&#xff08;每秒30亿亿次半精度浮点计算&#xff09;&#xff0c;项目总投资约为19亿元。 这个算力是什么概念呢&#xff1f; 我们以深度学习训练中…

GIS之深度学习06:CUDA12安装(适配版)

CUDA&#xff08;Compute Unified Device Architecture&#xff09;是NVIDIA开发的并行计算平台和编程模型&#xff0c;用于利用NVIDIA GPU的并行计算能力&#xff0c;它允许开发者使用类似于C语言的编程语言编写并行程序&#xff0c;利用GPU的大规模并行计算能力加速各种类型的…

C语言写学生信息管理系统

说明:本博文来自CSDN-问答板块,题主提问。 需要:用C语言设计一个学生信息管理系统(尽量不使用指针),学生信息包括学号,姓名,数学成绩,C语言成绩,英语成绩和每个学生的总成绩这几项。系统要实现如下几个功能:1.添加学生2.删除学生3.修改学生信息4.查询学生信息5进行学…

关于Linux上的$ORIGIN解说

1、Linux RPATH & $ORIGIN 许多现代C / C 项目都利用Autotools创建GNU构建系统&#xff0c;例如 根据平台生成make文件。 可执行文件&#xff08;二进制文件&#xff09;在生成/编译过程中生成&#xff0c;并且可以在执行编译的计算机上本地执行。 但是&#xff0c;如果将…