中文编程语言到HTML转换器

HTML 代码（可编辑）

chr 代码（可编辑）

生成的HTML代码：


        
        
        
        
    

    
    

        
HTML预览：

        
    

    
    

        

            
完整语法参考：

            

                
中文语法HTML标签描述

                
<!chr 语言><!DOCTYPE html>文档类型声明

                
<网页><html>HTML文档根元素

                
<头部><head>文档头部

                
<标题><title>文档标题

                
<元字符集><meta charset>字符集声明

                
<元视口><meta viewport>视口设置

                
<主体><body>文档主体

                
<标题1>-<标题6><h1>-<h6>标题级别

                
<文字><p>段落

                
<换行><br>换行

                
<链接><a>超链接

                
<图片><img>图像

                
<分区><div>分区容器

                
<跨度><span>行内容器

                
<点列表><ul>无序列表（点样式）

                
<列表><ol>有序列表（序号）

                
<列表项><li>列表项

                
<表格><table>表格

                
<表格行><tr>表格行

                
<表头><th>表头单元格

                
<表格数据><td>表格数据单元格

                
<表单><form>表单

                
<输入><input>输入字段

                
<文本区域><textarea>多行文本输入

                
<按钮><button>按钮

                
<选择><select>下拉选择

                
<选项><option>选择选项

                
<标签><label>表单标签

                
<样式><style>内部样式

                
<脚本><script>脚本

            

        


        

            
CSS 语法参考

            

            
示例（全中文写法）

            
.promo {
    背景颜色: #f5f5f5;
    字体大小: 18像素;
    颜色: #c0392b;
    内边距: 10像素 15像素;
}


            
说明：在上方"样式（CSS）"编辑区可以直接使用上述全中文规则，系统会自动将其转换为标准 CSS 并应用到预览。

        

    


    

        
使用说明

        
    
            
  1. 本页本地渲染：在上方编辑中文源码，点击"渲染中文"或"转换为HTML"查看生成的 HTML 与预览。
    2. 
            
  2. 在其他页面直接引入库（推荐）：在目标页面加入
                
    <script src="https://chinese-html.pages.dev/chr-parser.js"></script>
    
                引入后页面会自动渲染所有 <script type="text/x-chr"> 和类名为 .chr-root 的元素，或可手动调用 ChrParser.renderAllScripts()。
            
    3. 
            
  3. 使用远程解析服务：在"解析服务 URL"中填入例如
                
    https://chinese-html.pages.dev/parse
    
                然后点击"远程解析并渲染"。注意：目标服务必须支持跨域请求（CORS）。若 pages.dev 为静态站点，请配合 serverless 或 Worker 提供解析接口。
            
    4. 
            
  4. 在任意网站自动注入渲染：可使用 Tampermonkey/用户脚本，在脚本中注入上面提到的 chr-parser.js 并调用 ChrParser.renderAllScripts()。
    5. 
        

        
安全提示：远程返回的 HTML 可能包含可执行脚本。仅在信任来源时将其直接插入到主文档；如需安全查看，请优先使用预览 iframe 或在隔离容器中显示。