HTML解析器

第一次技术博客 艹:

闲着没事学习用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;
}

 

结果如下所示:

使用CAIRO绘制图形,这都只是雏形,的确很难看啊 o(∩∩)o...哈哈。

以后有时间再继续改进之。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值