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

他能做的:

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

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

相关推荐
桂月二二40 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
沈梦研2 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css
轻口味2 小时前
Vue.js 组件之间的通信模式
vue.js
浪浪山小白兔3 小时前
HTML5 新表单属性详解
前端·html·html5
lee5763 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579653 小时前
AI赋能Flutter开发:ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me4 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架