html 简单实现标签页,用html网页代码简单实现一个标签小工具

在使用cms程序制作网站过程中，经常需要用到各种各样的内置标签来替换原来的文字，使其变为数据调用

虽然很多程序都有标签文档可以查看，但有些用起来要找半天，不太方便，本文简单介绍了使用html语言创建一个简便的DIY标签小工具.

首先新建一个html，或用记事本新建一个文本文件，然后选择文件菜单-另存为，格式类型设置为所有格式，文件名称修改为:diy标签.html

然后右键选择打开方式为记事本或右键选择编辑，对文件进行修改：

加入以下代码：

qtool.net DIY标签小工具

#showvalue { padding: 10px; line-height: 39px; }

.xuanze { width: 35px; height: 35px; float: left; }

.main { width: 1231px; margin-left: auto; margin-right: auto; }

.bqlb { width: 1000px; background-color: #646464; height: 284px; }

body { background-color: #3A3939; }

.main  span { width: 100%; display: block; height: 40px; clear: both; line-height: 40px; background-color: #646464; }

span p { width: 210px; height: 40px; display: block; float: left; background-color: #C3C3C3; }

function showbiaoqian() {

var a1 ='\

文章标题  {$news[\'title\']}   \n\

文章发布者{$user[\'username\']}  \n\

浏览次数：{$news[\'click\']}次    \n\

文章内容 {$news[\'content\']}   \n\

';

var a2 ='\

a2内容    \n\

';

var a3 ='\

a3内容   \n\

';

var a4 ='\

a4内容    \n\

';

var a5 ='\

a5内容    \n\

';

//上方为存放标签

var dxa = document.getElementsByName("rad");

var n;

for(var i=0;i

if(dxa[i].checked) {

n = dxa[i].value;

itemValue = eval(n);

document.getElementById("qtoolnet-showbq").value=itemValue;

break;}

}}

系统全局标签

分类导航与falsh标签

单页面以及自定义标签

网站导航

文章列表

文章内容页

产品列表页

产品内容页

招聘列表

招聘内容

留言标签

在线订单标签

网站地图与扩展

在js代码中通过var定义变量，将整理分类好的标签存入变量中去：

qtool.net示例：

如定义一个变量 a1 其存放了系统全局这个分类的所有标签

文章标题  {$news['title']}

文章发布者{$user['username']}

浏览次数：{$news['click']}次

文章内容 {$news['content']}

在存放之前我们先对这段数据进行简单的转义处理。

在每个英文的单引号 ' 前面加上反斜杠 \

在每行文字的结尾加上 \n\   转义回车键以及换行显示

删除所有空行

然后复制上面处理好的数据选中替换区域几个字整行，ctrl+v粘贴到代码的替换区域

var a1 ='\

替换区域\n\

';

其数据对应的是单选按钮

系统全局标签

value值为保存标签对应的变量名称，后面的文字内容可以随意修改diy

一个选项对应一个存放标签内容的变量，如果想要新建只需要复制单选按钮代码，以及在存放开源cms标签的地方新建对应的变量即可。

按照自己想要的标签小工具的样式设计完成后，选择文件-保存。

然后双击即可在浏览器中打开自制的标签工具，鼠标选择对应的单选分类，即可显示相应的标签代码，方便大家使用.