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.hqwc.cn/news/518194.html

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

相关文章

Error:java:JDK isn‘t specified for module “模块名称“

可能是创建模块后不小心删掉了.idea.或.idea出错 只要删除.idea&#xff0c;close project出去&#xff0c;重新进让idea自动下载

Python3 字符串

字符串是 Python 中最常用的数据类型。我们可以使用引号( 或 " )来创建字符串。 创建字符串很简单&#xff0c;只要为变量分配一个值即可。例如&#xff1a; var1 Hello World! var2 "Runoob" Python 访问字符串中的值 Python 不支持单字符类型&#xff…

软件测试必学的16个高频数据库操作及命令

数据库作为软件系统数据的主要存取与操作中心&#xff0c;广泛应用于企业当中。在企业中常用的数据库管理系统有 ORACLE、MS SQL SERVER、MySQL等。其中以免费的 MySQL 最多&#xff0c;特别在中小型互联网公司里。 因此&#xff0c;本文的数据库操作是基于 MySQL 数据库系统下…

【文献计量】安装endnote注意事项

1.前言 EndNote 是一款广受学者、研究人员、学生和图书管理员等使用的参考管理软件。它由 Clarivate Analytics 开发&#xff0c;用于管理文献引用和编排参考文献列表。EndNote 可以帮助用户在撰写科研论文、书籍或任何学术出版物时&#xff0c;高效地组织、管理和引用研究资料…

网络原理初识

一、IP地址 概念 IP 地址主要用于标识网络主机、其他网络设备&#xff08;如路由器&#xff09;的网络地址。简单说&#xff0c; IP 地址用于定位主机 的网络地址 。 就像我们发送快递一样&#xff0c;需要知道对方的收货地址&#xff0c;快递员才能将包裹送到目的地。 二、…

SpringBoot集成ElasticSearch(ES)

ElasticSearch环境搭建 采用docker-compose搭建&#xff0c;具体配置如下&#xff1a; version: 3# 网桥es -> 方便相互通讯 networks:es:services:elasticsearch:image: registry.cn-hangzhou.aliyuncs.com/zhengqing/elasticsearch:7.14.1 # 原镜像elasticsearch:7.…

UML简述(项目立项、设计、需求整理必备)

UML目录 前言1、UML概述1.1、基本概念1.2、UML图类型说明1.3、UML的41视图 2、UML图详细图示2.1、类图2.2、对象图2.3、组件图2.4、部署图2.5、包图2.6、用例图2.7、状态图2.8、活动图2.9、时序图2.10、通信图&#xff08;协作图&#xff09;2.11、定时图&#xff08;计时图&am…

BurpSuite2024.2.1

1.更新介绍 此版本引入了特定的API 扫描功能&#xff0c;并将 Bambdas 合并到 Logger 捕获过滤器中。我们还改进了 DOM Invader 和 Burp Suite 导航记录器的功能&#xff0c;并进行了许多其他改进和错误修复。 API扫描 我们引入了特定的 API 扫描功能。您现在可以上传 OpenAP…

【PHP】PHP通过串口与硬件通讯,向硬件设备发送数据并接收硬件返回的数据

一、前言 之前写过两篇PHP实现与硬件串口交互的文章&#xff0c;一篇是【PHP】PHP实现与硬件串口交互&#xff0c;接收硬件发送的实时数据&#xff08;上&#xff09;_php串口通信-CSDN博客&#xff0c;另一篇是【PHP】PHP实现与硬件串口交互&#xff0c;向硬件设备发送指令数…

Java开发从入门到精通(一):Java的基础语法进阶

Java大数据开发和安全开发 &#xff08;一&#xff09;Java注释符1.1 单行注释 //1.2 多行注释 /* */1.3 文档注释 /** */1.4 各种注释区别1.5 注释的特点1.5 注释的快捷键 &#xff08;二&#xff09;Java的字面量&#xff08;三&#xff09;Java的变量3.1 认识变量3.2 为什么…

基于Easyexcel实现不同场景的导出功能

基于Easyexcel实现不同场景的导出功能 导出的数据包含有图片 导出excel表格的数据包含有图片&#xff0c;这种场景比较少。通Easyexcel实现这样的需求&#xff0c;我认为最简便的方法就是使用前面提到的自定义转换器&#xff08;com.alibaba.excel.converters.Converter&…

sql 注入 之sqli-labs/less-5 双注入,也称:报错注入

该关卡返回正确或者错误页面,还有错误的代码&#xff0c;所以可以使用报错注入。报错注入的方式&#xff1a; updatexml 函数注入&#xff1a; mysql5.1.5 版本以上支持该函数&#xff0c;返回数据限制32位 模板&#xff1a;select * from user where id1 and (updatexml(&q…