HTML 基础概念:什么是 HTML ? HTML 的构成 与 HTML 基本文档结构

文章目录

    • 什么是 HTML ?
    • HTML 的构成 ?
      • 什么是 HTML 元素?
      • HTML 元素的组成部分
      • HTML 元素的特点
    • HTML 基本文档结构
      • 如何打开新建的 HTML 文件
      • 代码查看

在这里插入图片描述

什么是 HTML ?

HTML(超文本标记语言,HyperText Markup Language)是一种用来告知浏览器如何组织页面的标记语言。它定义了网页的内容结构,通过不同的标签,HTML 可以定义网页内容的结构和层次,包括文本、图片、视频、表格等。每个标签都有特定的语义和功能,能够帮助浏览器正确显示网页内容。

HTML 是上个世纪90年代由欧洲核子研究中心的物理学家 蒂姆·伯纳斯-李(Tim Berners-Lee)发明。它的最大特点就是支持超链接,点击链接就可以跳转到其他网页,从而构成了整个互联网。

可以说,HTML是所有网页的骨架,并且与 CSSJavaScript 组合使用,能够实现网页的样式设计和交互功能。

在这里插入图片描述

1999年,HTML 4.01 版发布,成为广泛接受的 HTML 标准。2014年,HTML 5 发布,这是目前正在使用的版本。

浏览器的网页开发,涉及三种技术:HTML、CSS 和 JavaScript。

HTML 语言定义网页的结构和内容,CSS 样式表定义网页的样式,JavaScript 语言定义网页与用户的互动行为。

HTML 语言是网页开发的基础,相当于网页的“骨架”,CSS 和 JavaScript 都是基于 HTML 才能生效,但即使没有这两者,HTML 本身也能使用,可以完成基本的内容展示。

HTML 的构成 ?

HTML 由一系列的元素组成,这些元素可以用来包围或标记不同部分的内容,使其以某种方式呈现或者工作。

元素是网页的一部分。在 XML 和 HTML 中,一个元素可以包含一个数据项,或是一块文本,或是一张照片,亦或是什么也不包含。一个典型的元素包括一个具有一些属性的开始标签,中间的文本内容和一个结束标签。
在这里插入图片描述

HTML 的关键特性:

  • 超文本(HyperText)意味着它可以在不同页面之间建立链接。
  • 标记语言(Markup Language)意味着它使用标签来标记文本,定义网页的结构。

什么是 HTML 元素?

元素是 HTML 的核心单位,它通常由一个开始标签和一个结束标签构成,中间包含内容或其他嵌套的元素。每个元素定义了网页的一部分结构或功能。例如:

<p>这是一个段落。</p>

在这个例子中,<p> 是段落标签,表示一个段落元素。标签之间的文本就是段落的内容。HTML 通过这样的元素来组织网页内容的层次和结构。

HTML 元素的组成部分

  1. 开始标签:标记元素的开始。例如,<p> 表示段落的开始。
  2. 内容:位于标签之间的文本或其他嵌套的HTML元素。例如,这是一个段落是段落的内容。
  3. 结束标签:标记元素的结束。例如,</p> 表示段落的结束。

一些元素(如 <img><br> )是自闭合标签,它们没有结束标签,仅包含属性,不需要包裹内容。例如:

<img src="image.jpg" alt="图片描述">

HTML 元素的特点

  • 层次性:HTML 元素可以相互嵌套,形成层次结构。浏览器会解析这些嵌套关系,以正确呈现内容。
  • 语义化:HTML 提供了语义化标签,使页面结构和内容更具可读性和可访问性。例如,<header><footer>等标签不仅用于布局,还传达了内容的意义。

HTML 元素使开发者能够灵活地组织内容,为网页的结构和表现提供了完整的基础。通过这些元素,浏览器可以理解并展示网页内容,从而实现更好的用户体验。

HTML 基本文档结构

一个标准的 HTML 文档具有以下基本结构:

<!DOCTYPE html>
<html><head><title>网页标题</title><meta charset="UTF-8"></head><body><!-- 网页的主要内容 --></body>
</html>
  • <!DOCTYPE html>: 声明文档的类型,确保浏览器按照 HTML 规范解析页面内容。
  • <html>: HTML 文档的根元素,所有 HTML 内容都嵌套在其中。
  • <head>: 包含网页的元数据,例如字符编码、页面标题、CSS 样式和脚本的引入等。
  • <meta charset="UTF-8">: 声明文档使用的字符集为 UTF-8,这几乎是所有现代网页的标准。
  • <title>: 定义网页的标题,这个标题将显示在浏览器标签页上。
  • <body>: 包含网页的主要可见内容,如文本、图像、表格和表单等。

在 VS Code 中创建一个新 HTML 文件时(如 01.html),可以利用内置的 Emmet 快捷方式来生成基本结构。只需输入 ! 并按下 Tab 键,即可自动生成如下 HTML 基础模板:

在这里插入图片描述

在这里插入图片描述

如何打开新建的 HTML 文件

  1. 创建 HTML 文件:在代码编辑器(如 VS Code 或者是 Webstorm )中新建一个 HTML 文件,命名为 01.html,并将 HTML 基础结构输入其中。

  2. 保存文件:保存文件后,确保文件扩展名为 .html,以便浏览器能够识别它是网页文件。

  3. 在浏览器中打开文件

    • 方法 1:直接双击 01.html 文件,它会在默认浏览器中打开。
    • 方法 2:在文件上右键选择“用浏览器打开”或“Open with”选项,然后选择所需的浏览器。
    • 方法 3 ( VS Code 内置功能): 在 VS Code 中安装 “Live Server” 扩展。安装完成后,右键点击文件并选择 “Open with Live Server”,即可在本地服务器上实时查看文件,并且每次保存都会自动刷新页面。
    • 方法 4 ( Webstorm 内置功能): 在 Webstorm 中,html 文件的右上角会出现 “内置预览”、“Chrome”等小图标,点击即可打开,或者是右键菜单中选择 “运行 01.html”,即可在浏览器打开页面。

这样,您可以在浏览器中查看新建的HTML文件并检查内容效果。

代码查看

在浏览器中打开网页,右键选择“查看页面源码”(View Page Source)即可查看HTML文档的完整结构。这对了解网页的结构和调试代码非常有帮助。

在这里插入图片描述

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

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

相关文章

网络编程 TCP编程 Linux环境 C语言实现

所有基于数据传输通信的程序&#xff0c;都会被分成两种角色&#xff1a; 1. 服务端&#xff1a;又称为服务器 server 提供一种通信服务的进程 基本工作过程是&#xff1a;1> 接收请求数据 2> 处理请求数据 3> 发送处理结果 2. 客户端&#xff1a;client 使用一种通…

第二十九章 Vue之插槽

目录 一、引言 二、默认插槽 2.1. 默认插槽基本语法 2.2. 完整代码 2.2.1. main.js 2.2.2. App.vue 2.2.3. MyDialog.vue 2.3. 运行效果 三、插槽后备内容&#xff08;默认值&#xff09; 3.1. 插槽后备内容基本语法 3.2. 完整代码 3.2.1. main.js 3.2.2. App.vu…

宠物领养救助管理软件有哪些功能 佳易王宠物领养救助管理系统使用操作教程

一、概述 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记、查询&#xff0c;宠物领养登记、查询&#xff0c; 宠物领养预约管理、货品进出库库存管理于一体的综合管理系统软件。 概述&#xff1a; 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记…

【ESP32+MicroPython】开发环境部署

本教程将指导你如何在Visual Studio Code&#xff08;VSCode&#xff09;中设置ESP32的MicroPython开发环境。我们将涵盖从安装Python到烧录MicroPython固件的整个过程&#xff0c;以及如何配置VSCode以便与ESP32进行交互。 准备工作 安装Python 确保你的计算机上安装了Pyth…

前端Nginx的安装与应用

目录 一、前端跨域方式 1.1、CORS(跨域资源共享) 1.2、JSONP(已过时) 1.3、WebSocket 1.4、PostMessage 1.5、Nginx 二、安装 三、应用 四、命令 4.1、基本操作命令 4.2、nginx.conf介绍 4.2.1、location模块 4.2.2、反向代理配置 4.2.3、负载均衡模块 4.2.4、通…

mysql之命令行基础指令

一&#xff1a;安装好mysql后&#xff0c;注册好账号密码。 二&#xff1a;在命令行进行登录的指令如下 mysql -u用户名 -p 例如&#xff1a;mysql -uroot -p; 然后按下回车&#xff0c;进入输入密码。 三&#xff1a;基本指令&#xff1a; 1&#xff1a;查看当前账户的所有…

小白直接冲!BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测

小白直接冲&#xff01;BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测 目录 小白直接冲&#xff01;BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测效果一览基本介绍程序设计参考资料 效果一…

论文概览 |《IJGIS》2024.09 Vol.38 issue9

本次给大家整理的是《International Journal of Geographical Information Science》杂志2024年第38卷第9期的论文的题目和摘要&#xff0c;一共包括9篇SCI论文&#xff01; 论文1 A movement-aware measure for trajectory similarity and its application for ride-sharing …

青少年编程能力等级测评CPA Python编程(一级)

青少年编程能力等级测评CPA Python编程(一级) &#xff08;考试时间90分钟&#xff0c;满分100分&#xff09; 一、单项选择题&#xff08;共20题&#xff0c;每题3.5分&#xff0c;共70分&#xff09; 下列语句的输出结果是&#xff08; &#xff09;。 print(35*2) A&a…

Linux网络命令:它用于实时监控网络接口的状态变化的命令 ip monitor详解

目录 一、概述 二、使用 1、语法 2、对象类型 3、常用选项 4、获取帮助 三、 示例 1. 监视链路层变化 2. 监视所有的网络变化 3. 仅监视路由表的变化 4. 监视特定网络接口的状态变化&#xff1a; 5. 监视网络接口地址的变化 四、实际应用 五、其他事项 一、概述 …

从APP小游戏到Web漏洞的发现

一、前因&#xff1a; 在对一次公司的一个麻将游戏APP进行渗透测试的时候发现&#xff0c;抓到HTTP请求的接口&#xff0c;但是反编译APK后发现没有在本身发现任何一个关于接口或者域名相关的关键字&#xff0c;对此感到了好奇。 于是直接解压后everything搜索了一下&#xff…

【JavaSE】(2) 方法

一、认识方法 1. 方法的定义 修饰符 返回类型 方法名(形参类型 形参名, ......){......return 返回值; } 示例代码&#xff1a; 2. 方法的作用 增强代码的可复用性。&#xff08;避免重复造轮子&#xff09;增强代码的易管理性。&#xff08;改方法就行&#xff0c;不用到处…

柯桥零基础学日语日语培训中为什么不说「ご客様」而是「お客様」?

宝子们是不是经常会看到&#xff0c;很多日语单词前面都有假名「お」或「ご」。 但是又总弄不明白为什么要用「お」、「ご」&#xff0c;用哪个更合适&#xff1f; 今天我们就来好好地扒一扒吧~ 在日语中「お・ご」这样的接头词很常见&#xff0c;一般用来表示美化。 美化语的…

【Linux】简易版shell

文章目录 shell的基本框架PrintCommandLineGetCommandLineParseCommandLineExecuteCommandInitEnvCheckAndExecBuildCommand代码总览运行效果总结 shell的基本框架 要写一个命令行我们首先要写出基本框架。 打印命令行获取用户输入的命令分析命令执行命令 基本框架的代码&am…

Git 概述及相关命令(1)

Git概述 Git是一个强大的分布式版本控制系统&#xff0c;广泛用于代码管理和协作开发。 仓库&#xff08;Repository&#xff09;: 存储项目文件及其历史记录的地方&#xff0c;分为本地仓库和远程仓库。工作区&#xff08;Working Directory&#xff09;: 用户当前工作文件所…

Java栈和队列的快速入门

栈和队列 一、栈 Stack1、概念2、基本操作3、常用方法4、举例5、分析 二、队列1、概念2、常用方法3、举例4、分析&#xff1a; 三、力扣算法快速入门232. 用栈实现队列225. 用队列实现栈 感谢 一、栈 Stack 1、概念 在 Java 中&#xff0c;栈&#xff08;Stack&#xff09;是…

docker 可用镜像服务地址(2024.10.31亲测可用)

1.错误 Error response from daemon: Get “https://registry-1.docker.io/v2/” 原因&#xff1a;镜像服务器地址不可用。 2.可用地址 编辑daemon.json&#xff1a; vi /etc/docker/daemon.json内容修改如下&#xff1a; {"registry-mirrors": ["https://…

【MySQL】深层理解索引及特性(重点)--下(12)

索引&#xff08;重点&#xff09; 1. 索引的作用2. 索引操作2.1 主键索引2.1.1 主键索引的特点2.1.2 创建主键索引 2.2 唯一键索引2.2.1 唯一键索引的特点2.2.2 唯一索引的创建 2.3 普通索引2.3.1 普通索引的特点2.3.2 普通索引的创建 2.4 全文索引2.4.1 全文索引的作用2.4.2 …

临街矩阵乘以自己转置的含义

总结: 临街矩阵* 邻接矩阵转置的(i,j) 位置表示有多少种线路从元素A跳转一条边最终落到元素j的路线. 这个也叫1_degree.

A010-基于SpringBoot的宠物健康咨询系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…