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

他能做的:

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

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

相关推荐
庸俗今天不摸鱼12 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下19 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox29 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞32 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行32 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581033 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周36 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring