浏览器漫谈-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添加元数据。当然也有很多直接就能拿来使用的元数据。
他能做的：
写到这里感觉有点没意思了，这些内容实在基础
下一章我们来讲几个我感觉比较有意思的标签
原文地址：https://blog.csdn.net/m0_74117421/article/details/143625260
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！