可能对于大多数前端开发者来说,相对于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添加元数据。当然也有很多直接就能拿来使用的元数据。
他能做的:
写到这里感觉有点没意思了,这些内容实在基础
下一章我们来讲几个我感觉比较有意思的标签