1. 词 token

专业不是计算机的博主比较尴尬，一直以为token就是验证身份用的标识

token —— 表示 “最小有意义的单元”

以这个简单的p标签为例，我们分析哪些是token：

<p class="a">text text text</p>

按最小有意义单元的定义来看，第一个词（token）是什么呢？显然，作为一个词（token），整个 p 标签肯定是过大了（它甚至可以嵌套）。

正确来说，应该拆分成这样：

  • <p “标签开始”的开始
  • class=“a” 属性
  • >  “标签开始”的结束
  • text text text 文本
  • </p> 标签结束

2. 词法解析 —— 获取token

浏览器的词法是怎么解析的呢？

众所周知，浏览器获取的是一个一个的字节。

因此，浏览器每获得一个字符就会走一次分析逻辑，直到获取一个完整的token

最常见的实现就是 状态机 （简单来说就是每获取一个字符，就根据上一次状态和输入的字符，来转换一次状态，直到获得一个token）

3. 语法解析 —— 用toke来构建DOM树(实际是一个栈)

其实构建DOM树也是一个状态机，需要根据上一次状态和输入的token来获取新的栈的状态

以一个简单的HTML为例：

<html maaa=a >

    <head>

        <title>cool</title>

    </head>

    <body>

        <img src="a" />

    </body>

</html>
  • 创建一个栈（js用数组代替）
  • 栈顶元素就是当前节点；
  • 遇到属性，就添加到当前节点；
  • 遇到文本节点，如果当前节点是文本节点，则跟文本节点合并，否则入栈成为当前节点的子节点；
  • 遇到注释节点，作为当前节点的子节点；
  • 遇到 tag start 就入栈一个节点，当前节点就是这个节点的父节点；
  • 遇到 tag end 就出栈一个节点（还可以检查是否匹配）。

HTML词法和语法的更多相关文章

  1. Compiler Theory(编译原理)、词法/语法/AST/中间代码优化在Webshell检测上的应用

    catalog . 引论 . 构建一个编译器的相关科学 . 程序设计语言基础 . 一个简单的语法制导翻译器 . 简单表达式的翻译器(源代码示例) . 词法分析 . 生成中间代码 . 词法分析器的实现 ...

  2. [WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析

    [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...

  3. C# 语言规范_版本5.0 (第20章 附录B_语法)

    A. 语法 此附录是主文档中描述的词法和语法以及不安全代码的语法扩展的摘要.这里,各语法产生式是按它们在主文档中出现的顺序列出的. A.1 词法文法 input: input-sectionopt i ...

  4. [WebKit内核] JavaScriptCore深度解析--基础篇（一）字节码生成及语法树的构建

    看到HorkeyChen写的文章<[WebKit] JavaScriptCore解析--基础篇(三)从脚本代码到JIT编译的代码实现>,写的很好,深受启发.想补充一些Horkey没有写到的 ...

  5. ANTLR4权威指南 - 第5章 设计语法

    在第I部分,我们熟悉了ANTLR,并在一个比较高的层次上了解了语法以及语言程序.现在,我们将要放慢速度来学习下实现更实用任务的一些细节上的技巧,例如建立内部数据结构,提取信息,生成输入对应的翻译内容等 ...

  6. 编译impala、拓展impala语法解析模块

    以前也编译过,但是每次编译都忘记怎么做,然后都得重新找需要下载的文件. 编译文件:buildall.sh 如果想只编译前端可以这样运行: buildall.sh -fe_only 编译时会去S3下载一 ...

  7. PL真有意思（二）：程序设计语言语法

    前言 虽然标题是程序语言的语法,但是讲的是对词法和语法的解析,其实关于这个前面那个写编译器系列的描述会更清楚,有关语言语法的部分应该是穿插在整个设计当中的,也看语言设计者的心情了 和英语汉语这些自然语 ...

  8. Scala词法文法解析器　（二）分析C++类的声明

    最近一直在学习Scala语言,偶然发现其Parser模块功能强大,乃为BNF而设计.啥是BNF,读大学的时候在课本上见过,那时候只觉得这个东西太深奥.没想到所有的计算机语言都是基于BNF而定义的一套规 ...

  9. 用Java写编译器（1）- 词法和语法分析

    词法和语法分析器构建 ANTLR简介 ANTLR全称ANother Tool for Languate Recognition,是基于LL(*)算法实现的语法分析器生成器和词法分析器生成器,由旧金山大 ...

随机推荐

  1. 从0开始的Python学习005运算符与表达式

     地三鲜 土豆+茄子+青椒=地三鲜 这就是一个表达式,表达式是由运算符和操作数组成的. 土豆.茄子和青椒是操作数,炒是运算符,而地三鲜就是最后结果也就是这个表达式的值. 表达式 一个表达式可以分解为运 ...

  2. Apollo的Oracle适配改动

    这几天工作需要使用Apollo配置中心.Apollo唯一的依赖是MySQL数据库,然而公司只有Oracle数据库资源.这里有一个Oracle适配改动的分支,但是它是基于0.8.0版本的Apollo.看 ...

  3. 周一01.3Python多版本共存&pip环境变量设置

    python多版本共存 1.分别安装Python2.7(手动添加环境变量)与Python3.6 2.分别进入Py2与Py3文件夹中,复制python.exe,重命名为python2.exe和pytho ...

  4. 【转】JSON.parse() Unexpected token i in JSON at position 2 报错问题

    JSON.parse(): Unexpected token i in JSON at position 2 报错问题 错误代码: var res = "[{id:1,name:'limin ...

  5. ideal中把项目打成war包，并放在tomcat运行，遇见的问题。。。

    先说下我遇见的问题吧:最近做项目要把项目放在tomcat上运行,用的springboot框架, 在建项目时选择的是  jar包,项目写完要部署打包是,在pom中虽然把包改成了war ,可是每次放入to ...

  6. SQL CHECK 约束

    SQL CHECK 约束 CHECK 约束用于限制列中的值的范围. 如果对单个列定义 CHECK 约束,那么该列只允许特定的值. 如果对一个表定义 CHECK 约束,那么此约束会在特定的列中对值进行限 ...

  7. fastjson List转JSONArray以及JSONArray转List

    1.fastjson  List转JSONArrayList<T> list = new ArrayList<T>();JSONArray array= JSONArray.p ...

  8. SQL学习 DECODE

    from 百度百科: DECODE有什么用途呢? 先构造一个例子,假设我们想给这些职员加工资,其标准是:工资在8000元以下的加20%:工资在8000元或以上的加15%,通常的做法是,先选出记录中的工 ...

  9. 微信小程序测试

    1.连接真机,微信已经登录过了 2.代码: 3.appium自带的识别工具 4.设置工具连接设备的方式 参考资料: https://www.cnblogs.com/yoyoketang/p/91449 ...

  10. 实验吧 who are you

    看到ip,然后提示是要把ip写到数据库里面,就想到了x-forwarded-for注入 扔burp里面试一下 确实有这个问题,从返回信息里面估计出来,应该是盲注,而且基于时间的盲注,试一下吧 测试延迟 ...