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

他能做的:

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

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

相关推荐
zhangjr05751 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七2 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼2 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态2 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚2 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...3 小时前
web钩子什么意思
前端·网络
啵咿傲3 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy3 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html