【Web前端】:走进HTML的世界----简单介绍

简介: 介绍HTML的入门基础知识:什么是HTML?元素和标签的概念、HTML文档的结构...

1️⃣前言

大家好,我是翼同学。今天笔记的内容是:

  • 了解HTML基础

2️⃣内容

🌱什么是HTML?

HTML,全称为:Hypertext Markup Language,也就是超文本标记语言。也就是说,HTML是一种标记语言(而不是编程语言),也属于一种信息组织的方式。该标记语言的用处在于结构化Web网页及其内容。其中网页内容可以是标题、段落、图片、链接、列表信息、表格信息等。

因此,每一个HTML文档都是一种静态的网页文件,通过浏览器来识别,解析,并将这些HTML文档“翻译”成可以识别的信息。也就是说,HTML是一种用于创建网页的标准标记语言,,其包括一系列元素,通过每个元素的标签设置,可以将网络上的文档信息统一格式,形成描述性文本。

更多细节:

  1. HTML文档的后缀名为 .html,我们编写一个HTML文件,将后缀名改为 .html,然后用浏览器打开文件即可。
  2. 代码编辑器推荐VS Code,一个实用的编辑器能提高你的工作效率。
  3. HTML注释由<!--开始,由符号-->结束,例如<!--注释内容-->
  4. HTML 使用标记标签来描述网页,是由尖括号包围的关键词,一般成对出现。
  5. 比如:<开始标签>内容</结束标签>
  6. 浏览器会忽略了源代码中空格与换行,即想要有空格的效果,就必须写上相应的空格标签
  7. HTML文档也叫做 Web 页面,浏览器是不会显示HTML标签,而标签的使用决定了网页内容的展示方式。

🏔️什么是元素?

我们使用HTML标记语言,就可以将所要表达的信息按某种规则(如:文字如何处理,图片如何显示等)写成HTML文档。其中HTML文档就是由一系列元素组成。

那什么是元素?

  • 其实,元素就是网页的组成部分。
  • 在HTML中,一个元素可以包含几个文本或者是一种照片等,甚至可以空内容。
  • 简单来说,这些HTML元素可以用于包含不用部分的内容,使其以某种方式工作。

🌻什么是标签?

注意,一个典型的HTML元素就是由一对标签组成。

在HTML代码中:

  • 标签是用来标识元素的开始或结束
  • 元素则是文档对象模型(DOM)中的一部分
  • 文档对象模型会被浏览器渲染、展示为页面。

举个例子:

在网页中可能有一行文本信息:

image.png

那么在我们就可以将这行文本信息封装成一个段落元素,进而使其在网页单独一行呈现出来。

image.png

我们来画一个简易示意图:

image.png

在上面这个例子中,可以看到,元素和标签不是同一概念。其中元素是包含标签的。

因此通常的,一个HTML元素包含三部分:

  • Opening tag:开始标签,即包含元素的名称(本例为 p),被大于号、小于号所包围。表示元素从这里开始起作用;
  • Content:内容,也就是元素的内容。本例是一行文本信息;
  • Closing tag:结束标签与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾

当然,这只是元素的基础组成部分。另外的,元素可以拥有属性,也可以相互嵌套。具体后面再记录。

🪄空元素

不包含任何内容的元素称为空元素。最典型的有<img>元素:

举个例子:

image.png

可以看到:

  • <img>元素包含两个属性(即srcalt
  • 并且该元素没有</img>结束标签
  • 元素里也没有内容。

这是由于图像元素并不需要通过内容来产生效果,作用是向其所在的位置嵌入图片。

💡HTML 结构

完整的HTML页面是有一定的结构(框架)要求的。

如下所示:

image.png

解析记录:

  • <!DOCTYPE html>文档类型。即一些HTML编写守则(如自动查错),可用于保证文档的正常读取。
  • <html></html>:根元素,定义了整个HTML文档。也就是说,<html>元素包含整个页面的内容。
  • <head></head>:头部元素。包含所有头部标签元素,该元素的内容对用户不可见,比如网页标题、CSS样式声明以及字符编码声明等;
  • <meta charset="utf-8">:指定了文档使用UTF-8字符编码方式。
  • <title></title>:标题元素,用于设置网页的标题,其显示在浏览器的标签页上(也是收藏网页时的描述文本)。
  • <body></body:该元素定义了HTML文档的主体,是用户的可见内容,包括文本、图片、链接等。

3️⃣写在最后

好了,今天的笔记就记到这里。

目录
相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
50 3
|
14天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
27 6
|
14天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
21 5
|
22天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
34 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
46 2
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
160 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。