HTML id、name、class

HTML id、name、class http://blog.csdn.net/ithomer/article/details/8080912 HTML中id、name、class 区别 分类: Script2012-10-17 13:53 27969人阅读 评论(7) 收藏 举报 classhtmlcssinput服务器applet HTML 中 id与name 区别 一个name可以同时对应多个控件,比如checkbox和radio 而id必须是全文档中唯一的 id的用途 id是HTML元素的Identity,主要是在客户端脚本里用。 label与form控件的关联,如 My Input for属性指定与label关联的元素的id,不可用name替代 脚本中获得对象: IE支持在脚本中直接以id (而不是name) 引用该id标识的对象。 例如上面的input,要在脚本中获得输入的内容,可以直接以 MyInput.value来获得。如果用DOM的话,则用document.getElementById(“MyInput”).value; 如果要用name的话,通常先得到包含控件的form,例如document.forms[0],然后从form再引用name,注意这样得到的是经过计算后将发送给服务器的值 name的用途 主要是用于获取提交表单的某表单域信息, 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input、select、textarea、框架元素(iframe、frame、 window的名字,用于在其他frame或window指定target )和button等,这些元素都与表单(框架元素作用于form的target)提交有关,浏览器会根据name来设定发送到服务器的request, 在表单的接收页面只接收有name的元素, 所以赋ID的元素通过表单是接收不到值的。 我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。在form里面,如果不指定name,就不会发送到服务器端。 HTML元素Input type=‘radio’分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的name属性来实现的。 建立页面中的锚点,我们知道link是获得一个页面超级链接,如果不用href属性,而改用name,如: ,我们就获得了一个页面锚点,如Experience (XP),详见 示例 作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其name来引用该对象。 在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)。 某些特定元素的属性,如attribute,meta和param。例如为Object定义参数或Meta中。 ...

2015-06-02 · 1 min · 190 words · -

canvas

canvas 是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图

2014-11-29 · 1 min · 2 words · -

HTML DOM Hidden

HTML DOM Hidden Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。 这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话,就是用这种类型的元素。 在 HTML 表单中 <input type="hidden"> 标签每出现一次,一个 Hidden 对象就会被创建。 您可通过遍历表单的 elements[] 数组来访问某个隐藏输入域,或者通过使用document.getElementById()。 http://www.w3school.com.cn/jsref/dom_obj_hidden.asp

2014-04-12 · 1 min · 24 words · -

静态页面html调用静态页面html的内容几种方法

静态页面html调用静态页面html的内容几种方法 静态页面html调用静态页面html的内容几种方法 简介: 在论坛中常常有网友问到,可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下,本人觉得第三种方式较好! 1.IFrame引入,看看下面的代码 你会看到一个外部引入的文件,但会发现有一个类似外框的东西将其包围,可使用 但你会发现还会有点问题,就是背景色不同,你只要在引入的文件import.htm中使用相同的背景色也可以,但如果你使用的是IE5.5的话,可以看看这篇关于透明色的文章 如果想引入的文件过长时不出现滚动条的话在import.htm中的body中加入scroll=no 2.方式 3.Behavior的download方式

2014-02-12 · 1 min · 10 words · -

html DOCTYPE

html DOCTYPE 在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML,所以不需要引用 DTD。 添加 声明,这样浏览器才能获知文档类型。 HTML Transitional DTD Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表 (CSS) 的浏览器以至于您不得不使用 HTML 的呈现特性时,请使用此类型: ```html html5只有一种DOCTYPE声明 ```html <!DOCTYPE html> ``` <!DOCTYPE> 声明没有结束标签。 <!DOCTYPE> 声明对大小写不敏感。 http://www.w3school.com.cn/tags/tag_doctype.asp

2012-12-08 · 1 min · 42 words · -

html 版权符号

html 版权符号 在页面里加上版权符号,HTML代码里对应输入© ©就是版权符号在HTML里的代码,但是很多页面在设计的时候,用的字体是宋体,就算没有设置字体,中文系统下默认用的还是宋体,那么就导致的显示出来的版权符号变形。让我们来看看用宋体显示出来的是什么样子,代码和效果: Copyright ©2009 www.fwl.name 看到了,版权符号变形了 让我们来看看用arial字体显示出来的是什么样子,代码和效果: Copyright ©2009 www.fwl.name 看,这样就正常了· 所以,要很好很完美的显示出版权符号,除了用©外,还得用对字体

2012-11-21 · 1 min · 14 words · -

URL中#号(井号)的作用

‘URL中#号(井号)的作用’ a href="#" 这表示一个空链接 这是一个空连接 href="#" #可以改成你要连接的地址 点击就链接到你的网址 这里可以随便你放什么字 这是html超链接格式,href是说超链接的目标,#就是自身 1. 井号在URL中指定的是页面中的一个位置 井号作为页面定位符出现在URL中,比如: http://www.httpwatch.com/features.htm#print ,此URL表示在页面features.htm中print的位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。 2.井号后面的数据不会发送到HTTP请求中 当时使用类似HttpWatch工具时,你是无法在Http请求中找到井号后面的参数的,原因是井号后面的参数是针对浏览器起作用的而不是服务器端。 3. 任务位于井号后面的字符都是位置标识符 不管第一个井号后面跟的是什么参数,只要是在井号后面的参数一律看成是位置标识符。 比如这样一个链接 (http://example.com/?color=#ffff&shape=circle) ,后面跟的参数是颜色和形状,但是服务器却并不能理解URL中的含义。服务器接收到的只是: http://example.com/?color= 4. 改变井号后面的参数不会触发页面的重新加载但是会留下一个历史记录 仅改变井号后面的内容,只会使浏览器滚动到相应的位置,并不会重现加载页面。 比如从_http://www.httpwatch.com/features.htm#filter_到_http://www.httpwatch.com/features.htm#print_,浏览器并不会去重新请求页面,但是此操作会在浏览器的历史记录中添加一次记录,即你可以通过返回按钮回答上次的位置。这个特性对Ajax来说特别的有用,可以通过设置不同井号值,来表示不同的访问状态,并返回不同的内容给用户。 (注: 在IE6和IE7下井号的改变不会增加历史记录。) 5、可以通过javascript使用window.location.hash来改变井号后面的值 window.location.hash这个属性可以对URL中的井号参数进行修改,基于这个原理,我们可以在不重载页面的前提下创造一天新的访问记录。如标记框架页面当前的页面: 除此之外,HTML 5新增的onhashchange事件,当#值发生变化时,就会触发这个事件。 6. Googlebot对井号的过滤机制 默认情况下Google在索引页面的时候会忽略井号后面的参数,同时也不会去执行页面中的javascript。然而谷歌为了支持对Ajax生成内容的索引,定义了如果在URL中使用"#!",则Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。 比如最新的twitter URL: http://twitter.com/#!/username,Google会自动请求_http://twitter.com/?escaped_fragment=/username_来获取Ajax内容。 另外可以用#结合?等元素来标记流量来源,比如区分竞价和自然流量等,这个就很给力了. http://blog.163.com/seo_luofeng/blog/static/17657502420120913641444/

2012-10-31 · 1 min · 42 words · -

HTML5 中 div section article 的区别

HTML5 中 div section article 的区别 div HTML Spec: “The div element has no special meaning at all.” 这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。 section HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.” 与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用 section 吗?接着看: “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.” ...

2012-02-19 · 2 min · 417 words · -

HTML template, 模板

HTML template, 模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--css--> <style> body { background-color: powderblue; } </style> <!--javascript--> <script src="path/to/foo.js"></script> <script type="text/javascript"> var myVar = "hello"; function showAlert() { alert('You triggered an alert!'); } function func0() { console.log('func0') var outerDiv = document.getElementById('div_0'); // 获取最外层 div 元素的内容 var outerDivContent = outerDiv.childNodes; // 过滤出文本节点 var textContent = ''; outerDivContent.forEach(function (node) { if (node.nodeType === Node.TEXT_NODE) { textContent += node.textContent.trim() + '\n'; } }); // 输出结果 console.log(textContent.trim()); } window.onload = function () { console.log('window.onload') } </script> <!--css--> <link rel="stylesheet" type="text/css" href="foo.css"> </head> <body> body0 <button type="button" onclick="func0()">button0</button> <div id="div_0" style="background: red"> text_0 <div id="div_1" style="background: green; width: 100px;"> text_1 </div> text_2 </div> </body> </html> # 在浏览器里直接访问这个文件 file:///home/wiloon/tmp/foo.htm HTML (Document Structures) ...

2012-02-19 · 1 min · 121 words · -

html tag

html tag [code lang=html] HTML 标签 以下代码标记了一个段落: This is some text in a very short paragraph inpiut type: button checkbox file hidden image password radio reset submit text 规定 input 元素的类型。 value: 定义input 元素的值。 textarea: 定义多行的文本输入控件

2012-01-08 · 1 min · 36 words · -

html5 video

html5 video HTML5 video 元素支持三种视频格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

2011-10-31 · 1 min · 33 words · -

input tag

input tag Optional Attributes: type: button,…. value:Specifies the value of an input element Event Attributes: ondblclick: Script to be run on a mouse double-click.

2011-10-27 · 1 min · 24 words · -

XHTML HTML5

XHTML HTML5 http://www.wkeke.cn/archives/xhtml2-html5/ 下面这些迹象都一一表明: XHTML2夭亡,而HTML5则是集万千宠爱于一身,还未出现,早已博得满堂喝彩。W3C 日前宣布将从2009年底起终止同 XHTML 2 工作组的合约,并以此暗示曾经一度野心勃勃的 XHTML 2 的正式死亡。Web 设计界是否该因此而恐慌?毕竟 XHTML 1.x 是所有对 Web 标准验证有着某种情节的人的首选,然而事实并非如此,XHTML 2.0 偃旗息鼓已有时日,W3C 只是明确了它的死亡日期,并将主要精力倾注到他们的新宠儿,HTML 5 身上。 如何看待 Web 设计师们所钟爱的 XHTML? 要弄明白 XHTML 如何获得人们的青睐,得从 HTML4 说起。HTML 4 是一种松散的语言,它拥有很多选项,囊括了太多人们对 Web 的试验性想法,一些是好的,一些是坏的,然而,要 HTML 4 为蹩脚的网页代码负责,好比要英语为低劣的小说负责。 HTML 4 也可以结构严谨并拥有合法的语义,只要设计师们知道该如何使用它。 而 XHTML 1.0 更严格,那些验证工具更容易指出其中的错误,如果你很懒,又想保证自己的代码结构严谨,XHTML 1.x 要容易检查得多。 然而问题是,XHTML 的使命并非单单如此,XHTML 的使命在于它名字中的那个 X,X 的存在不是为了耍酷,而是因为 XHTML 事实上属于 XML。象正在为 HTML 5 细则工作的 Henri Sivonen 指出的那样,XHTML 事实上有两个意义,一是技术上的,一是市场上的。 从技术的角度,XHTML 原本是要以 application/xhtml+xml MIME 类型输出纯粹的 XML 的,然而这种情形很少见,这并非说 XML 不重要,事实上未来的 XHTML 5 将对 HTML 5 提供序列化服务。而 XHTML 的大量使用更多是基于市场的角度,换句话说,那些采用 XHTML 语法的网页仍然被浏览器按 text/html MIME 类型渲染,因此,尽管这些文档属于 XML,但它们并没被当作真正的 XML,而是按 HTML 进行渲染。 ...

2011-09-14 · 1 min · 197 words · -

HTML XHTML

HTML XHTML 什么是XHTML?与HTML相比XHTML有什么特点? http://www.wm23.com/resource/R01/Internet_1010.htm HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别。本文简单介绍什么是XHTML,以及与HTML相比XHTML有什么特点。 什么是XHTML? HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了XML (有几分) 的强大功能及HTML (大多数) 的简单特性。 2000年底,国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。 问: 什么是XHTML? 答: XHTML是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势,就出现了这样一个问题: 如果我们有了XML,我们是否依然需要HTML?为了回答这个问题,1998年5月我们在旧金山开了两天的工作会议,会议的结论是: 需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言,而且,已经有数以百万计的页面是采用HTML编写的。 问: 为什么XHTML 1.0相对HTML 4.0独立发展? 答: 并不是这样。XHTML恰恰就是HTML 4.0的重新组织,(确切的说它是HTML 4.01,是一个修正版本的HTML 4.0,只不过以XHTML 1.0命名发行。) 它们在XML里的解释会有一些必要的差别,但另一方面,它们依然非常相似,我们可以把XHTML的工作看作是HTML 4.0基础上的延续。 问: XHTML 1.0如何实现XML标准? 答: XHTML就是一种XML应用。它采用XML的DTD文件格式定义,并运行在支持XML的系统上。这里要感谢XML的Namespaces功能,浏览器制造商不需要再创造新的私有标签(tags),他们只需要在XHTML代码里包含XML代码片段,或者XML代码里包含XHTML代码片段。 与HTML相比XHTML有什么特点? (1) XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点: 不能适应现在越多的网络设备和应用的需要,比如手机、PDA、信息家电都不能直接显示HTML;由于HTML代码不规范、臃肿,浏览器需要足够智能和庞大才能够正确显示HTML;数据与表现混杂,这样你的页面要改变显示,就必须重新制作HTML。因此HTML需要发展才能解决这个问题,于是W3C又制定了XHTML,XHTML是HTML向XML过度的一个桥梁。 (2) XML是web发展的趋势,所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准,使用XHTML 1.0,只要你小心遵守一些简单规则,就可以设计出既适合XML系统,又适合当前大部分HTML浏览器的页面。这个意思就是说,你可以立刻设计使用XML,而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。 (3) 使用XHTML的另一个优势是: 它非常严密。当前网络上的HTML的糟糕情况让人震惊,早期的浏览器接受私有的HTML标签,所以人们在页面设计完毕后必须使用各种浏览器来检测页面,看是否兼容,往往会有许多莫名其妙的差异,人们不得不修改设计以便适应不同的浏览器。 (4) XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。 (5) XHTML是Web标准家族的一部分,能很好在无线设备等其它用户代理上。 (6) 在网站设计方面,XHTML可助你去掉表现层代码的恶习,帮助你养成标记校验来测试页面工作的习惯。 【说明】: 本文根据部分网站上的相关资料编辑,来源包括: http://www.pconline.com.cn/pcedu/sj/wz/other/0406/385830.html http://hedong.3322.org/newblog/archives/000044.html http://www.pconline.com.cn/pcedu/sj/wz/other/0410/469461.html

2011-09-14 · 1 min · 63 words · -

使用负边距创建自适应宽度的流体布局

使用负边距创建自适应宽度的流体布局 http://www.cnblogs.com/zzh/archive/2008/10/13/1309841.html <!DOCTYPE html> <html> <head> <title>CTS</title> <style type="text/css"> body,p,h1,h2,ul { margin:0;padding:0; } #header { background-color: #A8A754; } #footer { background-color: #A8A754; clear: both; } #mainer { width: 100%; margin-right: -250px; float: left; } #sideBar { float: right; width: 250px; color: #FFF; background-color: #36361A; } #main { margin-right: 250px; background-color: #616030; } </style> </head> <body> 顶部区域 使用负边距创建自适应宽度的流体布局 随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 最新文章 最新文章一 最新文章二 最新文章三 底部区域 </body> </html>

2011-09-07 · 1 min · 66 words · -

px pt em

px pt em px: pixel,像素,屏幕上显示的最小单位,用于网页设计; pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业; em: 即%,在CSS中,1em=100%,是一个比率,结合CSS继承关系使用。 http://www.douban.com/note/155032221/ http://blog.csdn.net/shizhu_1010/article/details/8089510 http://orgcent.com/android-textview-linespacingextra/

2011-05-28 · 1 min · 12 words · -

html textarea

html textarea TextArea <textarea rows="3" cols="30"> 这里是文本域中的文本 ... ... ... ... </textarea> Code: `` Setting TextArea Size The text area size is determined using the attributes “rows” and “cols”. You can change the size of text area by changing the values of rows and cols. Example Code: text area in status 2sdfsdfsdf

2011-05-28 · 1 min · 52 words · -