自定义HTML标签属性-cjl
html标签属性
html标签属性html 标签属性详解HTML标签和属性在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“<标签名>”表示，结束标签用“</标签名>”表示。
元素指的是包含标签在内的整体，除去标签的部分叫做内容。
属性要在开始标签中指定，用来表示该标签的性质和特性。
通常都是以“属性名=”值””的形式来表示，用空格隔开后，还可以指定多个属性。
指定多个属性时不用区分顺序颜色的指定方法用HTML指定颜色有两种方法1、用16进制数值来指定：在#号的后面，把RGB的各个选项用十六进制的数值来表示，数值保持两位数。
2、指定颜色的名称：可以对基本的16色用名称来指定其颜色指定文件的位置在对某部分设置链接的时候，需要指定链接端HTML文件的位置；同样，如果想在该处显示图像也需要指定图像的位置。
在HTML中，这个位置用URL来表示，有以下两种表示方法：1、绝对URL：绝对URL就是用Web浏览器查看网页时，地址栏中显示的以http://开头的路径2、相对URL：相对URL是在同一站点内进行设置，类似于在同一磁盘上管理文件的形式。
这种方法是以当前文件的位置为基准。
使用相对URL时，如果要指定的文件在当前文件的下级，就从目录名开始一直写到要指定的文件名，中间用“/”符号隔开。
如果在当前文件的上级，每上一级就加一个“../”符号2、基本内容显示HTML的版本<!DOCTYPE~>HTML的版本表明HTML文件是按照哪个版本进行编写的（标明该HTML文件遵循的DTD文件），不同的版本和种类都有固定的书写格式，要按照固定的格式输入文件开头，然后在文件开头处写明版本，按照这种版本的规定格式进行编写必须使用的标签<html>~</html><head>~</head><title>~</title><body>~</body>HTML文件的开头写有<!DOCTYPE~>的部分，代表HTML的版本，其后是必须存在的四种标签首先，<!DOCTYPE~>后面的整个都要用html标签(<html>~</html>)括起来，其中要按照head标签(<head>~</head)和body标签的顺序(<body>~</body>)的顺序进行排列。
HTML标签自定义属性
HTML标签⾃定义属性HTML标签可以⾃定义属性，但是我们要考虑其在IE、Firefox以及chrome下的兼容性问题。
例如：1. <div id="newTest" myAttr="getAttr"></div>复制代码这⾥的“myAttr”就是这个标签的⾃定义属性了。
如果定义了属性却使⽤不了，那么这个属性就没有任何意义了，接下来就是如何去调⽤我们的⾃定义属性的值了。
在IE浏览器⾥，我们通过获取对象后直接调⽤就可以了1. document.getElementById("newTest").myAttr;复制代码在IE浏览器⾥，我们同样可以对其直接赋值⽽动态产⽣⼀个⾃定义属性：1. document.getElementById("newTest").newAttr = "new";复制代码在⽕狐和⾕歌浏览器⾥，我们可以通过getAttribute⽅法来实现调⽤：1. document.getElementById("newTest").getAttribute("myAttr");复制代码在⽕狐和⾕歌浏览器⾥，我们可以通过setAttribute⽅法在产⽣并设置⼀个⾃定义属性：1. document.getElementById("newTest").setAttribute("newAttr","new");复制代码⾃定义属性⼀般是我们⽤来存储数据或是相关依据的，根据实际情况，⾃定义属性其实很有⽤的。
测试浏览器：IE8，firefox 8.01，chrome 17.0.963.46 m测试结果：能够获取到⾃定义属性另外补充⼀点，如果不想做兼容判断，其实我们可以使⽤Jquery的attr⽅法来获取与设置⾃定义属性的值，⽬前测试结果是全兼容。
html标签中自定义属性
某业务系统零件为整个系统的核心业务关注该种类零件而不关注与零件来自什么部门的何种采购方式要求根据零件匹配出所有购买了该零件的相关信息业务可以选择多条购买记录中进行选择
html标 签 中 自 定 义 属 性
myAttr为页面input标签中的自定义属性，我们可以取得该自定义标签的值
html标签及属性大全（网页制作必备）
html标签及属性⼤全（⽹页制作必备）总类（所有html⽂件都有的）--------------------------------------------------------------------------------⽂件类型 <html></html> （放在档案的开头与结尾）⽂件主题 <title></title> （必须放在「⽂头」区块内）⽂头 <head></head> （描述性资料，像是「主题」）⽂体 <body></body> （⽂件本体）结构性定义（由浏览器控制的显⽰风格）--------------------------------------------------------------------------------标题 <h?></h?> （？表⽰从1到6，有六层选择）数值越⾼字越⼩标题对齐 <h? align=left|center|right></h?> 左对齐、居中对齐、右对齐区分 <div></div>区分对齐 <div align=left|right|center|justify></div> 左对齐、右对齐、居中对齐、两端对齐引⽂区块 <blockquote></blockquote> （通常会内缩）斜体 <em></em>加粗 <strong></strong>引⽂ <cite></cite> （通常会以斜体显⽰）码 <code></code> （显⽰原始码之⽤）样本 </samp>表⽰⼀段⽤户应该对其没有什么其他解释的⽂本。
自定义HTML标签属性
⾃定义HTML标签属性为HTML元素添加⼀⾃定义的属性⾮常⽅便，只须将其加到尖括号中即可，与内置属性地位相等。
如我们要为TextBox元素添加属性idvalue：<input type="text" id="txtInput" name="txtInput" value="⾃定义⽂本">只须在原来的控件后⾯加上：idvalue=”…”,成为:<input type="text" id="txtInput" name="txtInput" value="⾃定义⽂本" idvalue="⾃定义值">idvalue即可正式成为txtInput的属性，地位与其他属性相等。
如以下例⼦，在IE6中调试通过：<html><head><title>⾃定义属性</title><script language="javascript">function showText(){alert(document.getElementByIdx("txtInput").value);}function showValue(){alert(document.getElementByIdx("txtInput").idvalue);}</script></head><body><input type="text" id="txtInput" name="txtInput" value="⾃定义⽂本" idvalue="⾃定义值"><input type="button" id="btnShowText" name="btnShowText" value="显⽰⽂本内容" onclick="showText();"><input type="button" id="btnShowValue" name="btnShowValue" value="显⽰⽂本值" onclick="showValue();"></body></html>但idvalue在Firefox中却不能通过，主要是因为Firefox控制严格，所以这些⾃定义属性不能认识。
HTML标签以及各个标签属性大全(网页制作必备)
例1 Html文档中基本标志的使用<html><head><title>显示在浏览器最上边蓝色条中的文本</title></head><body bgcolor="red" text="blue"><p>红色背景、蓝色文本</p></body></html>1.<p></p>2.<br>3.<blockquote></blockquote>4.<dl></dl><dt></dt><dd></dd>5.<ol></ol><ul></ul><li></li>6.<div></div>vlink:设置访问过的超链接的色彩background:设定背景图片，可以是绝对路径也可以是相对路径。
bgcolor:用户设定背景色，当已设定background时这个属性会失去作用leftmargin:左边距topmargin:上边距四、注释与特殊字符：<!--.........-->注释的内容不会被显示出来注释不能被嵌套。
< <> >& &" '注册符号版权符号" TM空格五、格式标签<p></p>:用来创建一个段落,可以用align属生来设置段落的对齐方式。
HTML5 Canvas 属性、定义及方法
摘自《HTML5高级程序设计》《HTML5揭秘》一、简单图形，整套的属性和方法专门用于绘制矩形：1、fillStyle可以设置为CSS颜色、一个图案或一种颜色渐变。
fillStyle默认是纯黑色，你可以设置成你喜欢的任意颜色。
只要页面打开着，每个绘图上下文都会记录自己的属性，除非你重置过它。
2、fillRect(x,y,width,height)绘制一个矩形，并以当前的fillStyle来填充。
3、srtokeStyle和fillStyle一样，可以设置为CSS颜色、一个图案或一种颜色渐变。
4、strokeRect（x,y,width,height）使用当前的storke style来绘制一个矩形，strokeRect并不填充中间区域，而只绘制矩形的边缘。
5、clearRect(x,y,width,height)清除指定矩形区域的像素。
二、路径按照惯例，不论开始绘制何种图形，第一个需要调用的就是beginPath。
这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。
对于canvas来说，beginPath函数最大的用处是canvas需要据此来计算图形的内部和外部的范围，以便完成后续的描边和填充。
路径会跟踪当前坐标，默认值是原点。
canvas本身也跟踪当前坐标，不过可能通过绘制代码来修改。
每一个canvas都有一个路径，定义路径就如同用铅笔作画。
你可以任意作地画，但它不一定是最终作品的一部分，直到你拿起画笔沾上墨水描绘这条路径。
moveTo(x,y)：不绘制，只是将当前位置移动到新目标坐标（x,y），并作为线条开始点。
lineTo(x,y)：绘制线条到指定的目标坐标(x,y)，并且在两个坐标之间画一条直线。
不管调用它们哪一个，都不会真正画出图形，因为我们还没有主，调用stroke（绘制）和fil（填充）函数。
当前，只是在定义路径的位置，以便后面绘制时使用。
closePath()，这个函数跟lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。
HTML标签与属性大全（很全哦）
HTML语言基本标签：创建一个HTM L文档 <html></html>设置文档标题以及其他不在W E B网页上显示的信息 <head></head>设置文档的可见部分 <body></body>标题标签将文档的题目放在标题栏中<title></title>文档整体属性设置背景颜色，使用名字或十六进制值 <body bgcolor=?>设置文本文字颜色，使用名字或十六进制值 <body text=?>设置链接颜色，使用名字或十六进制值 <body link=?>设置已使用的链接的颜色，使用名字或十六进制值 <body vlink=?>设置正在被击中的链接的颜色，使用名字或十六进制值 <body alink=?> 文本标签创建预格式化文本 <pre></pre>创建最大的标题<h1></h1>创建最小的标题<h6></h6>创建黑体字 <b></b>创建斜体字 <i></i>创建打字机风格的字体 <tt></tt>创建一个引用，通常是斜体 <cite></cite>加重一个单词（通常是斜体加黑体） <em></em>加重一个单词（通常是斜体加黑体） <strong></strong>设置字体大小，从1到7 <font size=?></font>设置字体的颜色，使用名字或十六进制值 <font color=?></font>链接创建一个超链接<a href="URL"></a>创建一个自动发送电子邮件的链接 <a href="mailto:EMAIL">.... </a> 创建一个位于文档内部的靶位<a name="NAME"></a>创建一个指向位于文档内部靶位的链接 <a href="#NAME"></a>格式排版创建一个新的段落 <p>将段落按左、中、右对齐 <p align=?>插入一个回车换行符 <br>从两边缩进文本<blockqu ote></blockqu ote>创建一个定义列表 <dl></dl>放在每个定义术语词之前 <dt>放在每个定义之前 <dd>创建一个标有数字的列表 <ol></ol>放在每个数字列表项之前，并加上一个数字<li>创建一个标有圆点的列表 <ul></ul>放在每个圆点列表项之前，并加上一个圆点<li>一个用来排版大块HTML段落的标签，也用于格式化表<div align=?>图形元素添加一个图像<img src="name">排列对齐一个图像：左中右或上中下<img src="name" align=?>设置围绕一个图像的边框的大小 <img src="name" border=?>加入一条水平线<hr>设置水平线的大小（高度） <hr size=?>设置水平线的宽度（百分比或绝对像素点） <hr width=?>创建一个没有阴影的水平线<hr noshade>表格创建一个表格<table></table>开始表格中的每一行 <tr></tr>开始一行中的每一个格子 <td></td>设置表格头：一个通常使用黑体居中文字的格子 <th></th>表格属性设置围绕表格的边框的宽度<table border=#>设置表格格子之间空间的大小<table cellspa cing=#>设置表格格子边框与其内部内容之间空间的大小 <table cellpad ding=#>设置表格的宽度－用绝对像素值或文档总宽度的百分比 <table width=# or %> 设置表格格子的水平对齐（左中右） <tr align=?> or <td align=?>设置表格格子的垂直对齐（上中下） <tr valign=?> or <td valign=?>设置一个表格格子应跨占的列数（缺省为1） <td colspan=#>设置一个表格格子应跨占的行数（缺省为1） <td rowspan=#>禁止表格格子内的内容自动断行回卷 <td nowrap>窗框放在一个窗框文档的<body>标签之前，也可以嵌在其他窗框文档中<frameset></framese t>定义一个窗框内的行数，可以使用绝对像素值或高度的百分比 <framese trows="value,value">定义一个窗框内的列数，可以使用绝对像素值或宽度的百分比 <framese tcols="value,value">定义一个窗框内的单一窗或窗区域 <frame>定义在不支持窗框的浏览器中显示什么提示<noframe s></noframe s>窗框属性规定窗框内显示什么HTML文档 <frame src="URL">命名窗框或区域以便别的窗框可以指向它<frame name="name">定义窗框左右边缘的空白大小，必须大于等于1<frame marginw idth=#>定义窗框上下边缘的空白大小，必须大于等于1<frame marginh eight=#>设置窗框是否有滚动栏，其值可以是"yes","no","auto"，缺省时一般为"a uto" <frame scrolli ng=VALUE>禁止用户调整一个窗框的大小<frame noresiz e>表单对于功能性的表单，一般需要运行一个CGI小程序，HTML仅仅是产生表单的表面样子。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
自定义HTML标签属性为HTML元素添加一自定义的属性非常方便，只须将其加到尖括号中即可，与内置属性地位相等。
如我们要为TextBox元素添加属性idvalue：<input type="text"id="txtInput"name="txtInput"value="自定义文本">只须在原来的控件后面加上：idvalue=”…”,成为:<input type="text"id="txtInput"name="txtInput"value="自定义文本"idvalue="自定义值">idvalue即可正式成为txtInput的属性，地位与其他属性相等。
如以下例子，在IE6中调试通过：<html><head><title>自定义属性</title><script language="javascript">function showText(){alert(document.getElementByIdx("txtInput").value);}function showValue(){alert(document.getElementByIdx("txtInput").idvalue);}</script></head><body><input type="text"id="txtInput"name="txtInput"value="自定义文本"idvalue="自定义值"><input type="button"id="btnShowText"name="btnShowText"value="显示文本内容"onclick="showText();"><input type="button"id="btnShowValue"name="btnShowValue"value="显示文本值"onclick="showValue();"></body></html>但idvalue在Firefox中却不能通过，主要是因为Firefox控制严格，所以这些自定义属性不能认识。
经过调试，只能用document.getElementByIdx("txtInput").attributes["idvalue"].nodeValue取得，该方法在IE中也可使用。
所以，同时适用IE和Firefox的代码为：<html><head><title>自定义属性</title><script language="javascript">function showText(){alert(document.getElementByIdx("txtInput").value);}function showValue(){alert(document.getElementByIdx("txtInput").attributes["idvalue"].nod eValue);}</script></head><body><input type="text"id="txtInput"name="txtInput"value="自定义文本"idvalue="自定义值"><input type="button"id="btnShowText"name="btnShowText"value="显示文本内容"onclick="showText();"><input type="button"id="btnShowValue"name="btnShowValue"value="显示文本值"onclick="showValue();"></body></html>以下转自csdn就是给标签写一个它并不存在属性；如<div TextLength="20"></div>在HTML中，div标签并没有TextLength属性，是我自已经加的；假如，页面中有这样一段HTML代码：<div>新闻列表<ul><li> [图]不按规定线路运营阻挠执法人员执法公交车擅改运营线路被查处[2007-7-31] </li><li> 五金厂已搬迁眼镜厂仍扰民[2007-7-31] </li><li> [图]“2007香港购物节”正在举行——市民赴港疯狂“血拼” [2007-7-27] </li> <li>[图]花园后面的山脚边，存在大量的乱搭建，街道执法队展... [2007-7-27] </li> </ul></div>我要截取这些字符，当然很容易；用getElementsByTabName取出li标签列表，用个for循环逐一处理一个就可以了；但是，字符截多长呢，自然要设变量，这个变量设在哪呢，如果写在javascript中，这个变量离HTML代码太远了（一个在头部head，一个在body），开发人员不方便操作，因为在页面中，它能会有很多这样的新闻列表或其它列表；于是我想到了给li的父级标签ul，加自定义属性，当然，如果是ol也是可以的，只要是li的父级就行；如：<div>新闻列表<ul TextLength="15"><li> [图]不按规定线路运营阻挠执法人员执法公交车擅改运营线路被查处[2007-7-31] </li><li> 五金厂已搬迁眼镜厂仍扰民[2007-7-31] </li><li> [图]“2007香港购物节”正在举行——市民赴港疯狂“血拼” [2007-7-27] </li> <li>[图]花园后面的山脚边，存在大量的乱搭建，街道执法队展... [2007-7-27] </li> </ul></div>与前面相比，ul多了TextLength属性，就是我要截取的字符串长度值；然后，我写了一个函数，来读取这个属性，并将该区域的li中字符截短。
函数如下：<script language="javascript" type="text/javascript">function lineShow(){var list = document.getElementsByTagName_r("li");for(var i = 0; i < list.length; i ++ ){// 获取自定义参数，为字符长度var textlength = Number(list[i].parentNode.getAttribute("TextLength"));list[i].setAttribute("title", list[i].innerHTML);list[i].innerHTML = subString(list[i].innerHTML, textlength);}}function subString(str, len){len = len == null || isNaN(len) ? 0 : len;if(len < 1 || str.length <= len)return str;return str.substr(0, len) + "…";}</script>上面代码中的语句，都是较常用的，不用过多解释了。
最后，在页面载入完毕时，调用该函数就行了。
调用函数的代码如下：<script language="javascript" type="text/javascript" defer="true">lineShow();</script>这时效果就出现了，页面中所有列表字符被截短，当鼠标碰上时，显示其完整标题；其实上面的javascript并没有什么特殊的，很简单，唯一不同的是，我利用自定义属性，让开发人员，在使用这个效果时，更方便了。