HTML解析器_设计一个简单的html解析器,能够解析html格式的字符串,支持标签、属性、文本等元素-CSDN博客

本文链接：https://blog.csdn.net/leiming915/article/details/6303660

第一次技术博客艹：

闲着没事学习用C写一个HTML文件的解析器，将每个标签作为节点，最后构建成一棵孩子兄弟二叉树。

每个标签的左孩子是其子标签；右孩子是其兄弟标签。

每个节点结构如下：

typedef struct _dom_node{
    unsigned short type;    /*type:Element Text Attribute*/
    struct _dom_node *parent;        /*如果是标签那么指向父标签；如果是属性或者文本指向其父标签*/
    struct _dom_node *brother;    /*指向该结点的兄结点(即其的上一个兄弟结点)*/
    element rect;    /*对应的元素盒子*/
    char value[DN_VALUE_LEN];
}dom_node;

在第一次遍历HTML文件生成树的时候元素、属性、文本都作为一个节点产生。如果是元素那么value是元素名称；如果是文本那么value是文本；如果是属性那么value记录属性值。

在生成树之后遍历该树，分析元素节点的属性，如果发现支持CSS样式表(目前只支持外联CSS)，那么解析对应的CSS文件

生成三个表，记录ID样式表，标签样式表和类样式表：

extern css_tb *id_tb;    /*ID 样式表*/
extern css_tb *label_tb;    /*标签样式表*/
extern css_tb *class_tb;    /*类样式表*/

然后通过解析这三个表将每个元素的绘制属性放入元素盒子：

typedef struct _element{
    unsigned char disable;    /*表明该标签是否作废*/

    short x;    /*起点位置*/
    short y;
   ....

    /*CSS 额外属性*/
    extra_element *extra;
}element;

最后一遍扫描树根据每个元素的元素盒子内容绘制元素，比如：

html文件如下：

<html>
    <head>
        <title>better day!</title>
        <link href="better.css"/>
    </head>
    <body>
        <h1>h1</h1>
        <div class="soccer">
            <div class="leiming">
                <p class="in">hello world!</p>
            </div>
            <p class="nice">nice</p>
        </div>
    </body>
</html>

css文件：

h1{
    left:1px;
    text-align:center;
    position:absolute;
    border-color:green;
    border-width:1px;
    color:red;
    top:10px;
    height:20px;
}

div.soccer{
    top:10px;
    border-width:2px;
    border-color:red;
    font-size:14;
    color:green;
    width:50%;
    height:80%;
}
div.leiming{
    border-color:blue;
    right:10px;
    left:50px;
    float:left;
    width:50%;
    height:50%;
}

p.in{
    background-color:black;
    width:50%;
    height:50%;
}

p.nice{
    text-align:center;
    position:relative;
    float:left;
    width:100px;
    height:50%;
    left:10px;
}