浏览器漫谈-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添加元数据。当然也有很多直接就能拿来使用的元数据。

他能做的:

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

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

相关推荐
David凉宸几秒前
vue2与vue3的差异在哪里?
前端·javascript·vue.js
笔画人生6 分钟前
Cursor + 蓝耘API:用自然语言完成全栈项目开发
前端·后端
AC赳赳老秦21 分钟前
外文文献精读:DeepSeek翻译并解析顶会论文核心技术要点
前端·flutter·zookeeper·自动化·rabbitmq·prometheus·deepseek
小宇的天下28 分钟前
Calibre 3Dstack --每日一个命令day18【floating_trace】(3-18)
服务器·前端·数据库
毕设源码-钟学长34 分钟前
【开题答辩全过程】以 基于web技术的酒店信息管理系统设计与实现-为例,包含答辩的问题和答案
前端
css趣多多42 分钟前
this.$watch
前端·javascript·vue.js
干前端1 小时前
Vue3虚拟滚动列表组件进阶:不定高度及原理分析!!!
前端·前端组件
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony “极简文本行数统计器”
开发语言·前端·flutter·ui·交互
有来技术1 小时前
ASP.NET Core 权限管理系统(RBAC)设计与实现|vue3-element-admin .NET 后端
vue.js·后端·c#·asp.net·.net
qq_12498707531 小时前
基于springboot的林业资源管理系统设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计