浏览器漫谈-HTML--(1)从“头“看[HTML]

可能对于大多数前端开发者来说,相对于js,html可能简单得多。想要只做到简单的使用,入门门槛是比较低的。最开始我写这篇文章的时候也这么认为。开始写了才发现,其实值得一说的事情还是很多的。

这一个专栏我们会从简单的html结构讲起,讲到它的设计思路,以及他是如何在浏览器中发挥作用的。最后,我们会拿出来几个做到比较有意思的html详细剖析一下它的实现原理,使用到了哪些技术。

html结构

所谓html,即hyperText Markup Language,超文本标记语言

超文本标记语言:告知浏览器如何组织页面标记语言

让我们进一步剖析一个html元素。

这个元素的主要部分有:开始标签,结束标签,以及其中的 内容。

所有的HTML都用<标签>包裹起来。但什么是标签呢?学过vue的朋友都会知道,封装起来的组件引到别的文件下时能用<组件名 />使用,这个时候你就会发现:这个怎么这么像标签?

没错,其实所谓的HTML元素在底层也是一个个文件,我们通过标签名的方式将其引入并且使用,其实和自己封装的组件时非常相似的。

每个浏览器内html元素在浏览器中,其实都的回应着一个原生的 js类,有其style,children或者其他通用属性。就像这样

当然不是完全相同,html由浏览器解析,"自定义组件"是基于html封装后的框架层面的抽象封装。

实际上,vue的组件的设计是对原生html的一种模仿,模仿其声明式写法,让开发更加直观。

html的分类

常见分类有这几种。很基础,这里就不多赘述了

块级元素/内联元素/内联块元素

语义化:文档结构/文本内容/列表元素/表单元素/表格元素/多媒体元素/链接元素

可交互元素/不可交互元素

可替换元素/非可替换元素

块级元素在界面中以块的

一个元素也有自己的属性 这些属性以参数的方式传入底层的类中

解析一个HTML文档

让我们看看一个个html元素是怎么组成一整个界面的:

这些都是什么?html干嘛的?head又是干嘛的?

<!DOCTYPE html>: 声明文档类型。早期的 HTML文档类型声明类似于链接,规定了 HTML 页面必须遵从的良好规则,能自动检测错误和其他有用的东西。

文档类型是一个历史遗留问题,需要包含它才能使其他东西正常工作。现在,只需要知道 <!DOCTYPE html> 是最短的有效文档声明

<html></html>:包裹了页面中所有的内容,有时被称为根元素。

他能用于设置:文档语言/文档阅读方向/定义XML命名空间 等。其实对于浏览器来说 他就是dom树的根节点,是文档结构的起点,是document本身

<head></head>: <head> 元素。这个元素是一个容器,它包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等等。以后的章节中会学到更多相关的内容。

<meta charset="utf-8">: <meta> 元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据 ,比如 <base><link><script><style><title>charset 属性将你的文档的字符集设置为 UTF-8,其中包括绝大多数人类书面语言的大多数字符。有了这个设置,页面现在可以处理它可能包含的任何文本内容

<title></title>: <title> 元素。这设置了页面的标题,也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时,页面标题也被用来描述该页面。就是这个

<body></body>: <body> 元素。这个无需多言咯

从'头'看htmlL:<head>里面有什么

简而言之,这个head包含着:

页面的 <title>(标题),指向 CSS 的链接,指向自定义网页图标的链接和其他的元数据

等信息。

Web 浏览器将使用文档头部的信息正确渲染 HTML 文档。

这些都能称为'元数据',也就是描述数据的数据,html官方支持我们用统一的方式为文档添加元数据:

<meta>元素。

我们可以用这个元素为你的html添加元数据。当然也有很多直接就能拿来使用的元数据。

他能做的:

写到这里感觉有点没意思了,这些内容实在基础

下一章我们来讲几个我感觉比较有意思的标签

相关推荐
徐同保11 小时前
python如何手动抛出异常
java·前端·python
极客小云11 小时前
【实时更新 | 2026年国内可用的npm镜像源/加速器配置大全(附测速方法)】
前端·npm·node.js
半兽先生11 小时前
告别 AI 乱写 Vue!用 vue-skills 构建前端智能编码标准
前端·vue.js·人工智能
前端达人12 小时前
都2026年了,还在用Options API?Vue组合式API才是你该掌握的“正确姿势“
前端·javascript·vue.js·前端框架·ecmascript
Dxy123931021612 小时前
Python检查JSON格式错误的多种方法
前端·python·json
chao-Cyril13 小时前
从入门到进阶:前端开发的成长之路与实战感悟
前端·javascript·vue.js
shalou290113 小时前
Spring 核心技术解析【纯干货版】- Ⅶ:Spring 切面编程模块 Spring-Instrument 模块精讲
前端·数据库·spring
大时光13 小时前
js 封装 动画效果
前端
大时光13 小时前
html翻页时钟 效果
前端
大猫子的技术日记13 小时前
2025 AI Agent 开发实战指南:从上下文工程到多智能体协作
前端·人工智能·bootstrap