概述

在以浏览器为核心的应用软件开发中，Html元素是绕不开的一个部分，本文采用C#代码对Html元素来进行封装，用于完成对Html元素的输出。其他语言也是一样的实现逻辑！

技术点说明

1、html标签类似xml结构 是标签名 + 属性 + 内部Html构成

2、Html标签三种类型 双标签、单标签和自闭合标签三种组成

双标签

<p>内容</p>

单标签

<br>

自闭合标签

<input name="UserName" type="text" />

单标签与自闭合标签其实是一样的，通常我们会将比如<br>写成<br />

标签格式

<标签名 属性数组> 内部Html</标签名>

例：

<p id="a1" class="classname" 其他属性1="值"> 内部html</p>

或者

<input id="a1" name="a1" class="classname" 其他属性1="值" />

代码定义

比如 HtmlElemHelper

如下:

说明：

1、Style 值又是由KeyValue结构来完成的，设置Style的时候，将key与value存储起来最后合并最终的属性

2、Class 是由空格分隔出来的字符串组成的，也在最后合并

3、如果是单标签或者自闭标签是没有innerHtml的，只有双标签才有InnerHtml

最终形成Html的过程

无论是哪一种标签类型，都有属性

1、先拼接Style与class 加入到最终的属性

2、合并属性形成列表 存放到标签属性中，使用空格分隔

3、如果是双标签 将转入InnerHtml

4、最后将这几部分合并成最终的html标签

示例

//定义父级编码的Id
HtmlElemHelper htmlParentElemHelper = new HtmlElemHelper("div");
string pId = "";
string curId = GetAttrValue("id", "");
if (!string.IsNullOrEmpty(curId))
{
    htmlParentElemHelper.SetAttr("id", pId);
}

htmlParentElemHelper.SetAttr("class", "AuCtrl AuCtrlCheckBoxGroup");


// 定义父级容器
StringBuilder sbOption = new StringBuilder();

if (Items != null && Items.Count > 0)
{
    if (string.IsNullOrEmpty(Values))
    {
        Values = "";
    }
    String[] arrValue = Values.Split(",");

    foreach (TextValueItem textValueItem in Items)
    {
        string checkedInfo = "";

        foreach (string s in arrValue)
        {
            if (s.Equals(textValueItem.Value))
            {
                checkedInfo = " checked=\"checked\"";
                break;
            }
        }
        
        string item = #34;<input type=\"checkbox\" name=\"{Name}\" value=\"{textValueItem.Value}\" {checkedInfo} title=\"{textValueItem.Text}\" />";
        sbOption.AppendLine(item);
    }
}


//设置内部html
htmlParentElemHelper.SetInnerHtml(sbOption.ToString());

//
Html = htmlParentElemHelper.GetHtml();

说明：

这个用了两次HtmlElemHelper，一个元素的html是另外一个元素的InnerHtml

共创、共享、共赢！