`

<button>标签的一些细节 (兼冷知识开篇)

阅读更多
从今天开始,建立一个标签

用来记录 一些 web开发中  冷门 不常用 不重要 但是却很基础的知识.

基本上 这些知识可以知道也可以不知道, 而且这些知识随着 浏览器版本的演进,随时都有可能发生变化.


其实下面两篇文章也属于 冷知识

safari 3 的一个bug : 关于select的 (我怀疑这个bug我是全球首发)
http://fins.iteye.com/blog/167978

firefox 2 的一个bug (更新) :关于页面元素位置信息
http://fins.iteye.com/blog/167837

好下面言归正传
=================================
<button>...</button> 作为 input type="button/submit/reset"的一个代替者,功能更强大, 标签的语义也更明确 是实际开发中推荐使用的一个html标签.
但是关于他有几个小细节.

首先
1  <button>...</button> 中间的 ... 支持html代码 (这个大家都知道吧)
<button>按<strong>钮</strong>啊</button>

2 <button>...</button> 在不指定 type="..."时,
在IE下是默认代表 input type="button"
其他浏览器下代表 input type="submit"
所以为了更好的跨浏览器, 请不要忘记给button标签指定 type.

3 (此问题不仅仅涉及到button)
<button id="btn1" >...</button> 如果不指定 type. 下面的js代码
var t1 = document.getElementById('btn1').type;
var t2 = document.getElementById('btn1').getAttribute('type');

在ie7下, 均为 "button"
在opera下, 均为 "submit"
在ff2下 , t1为"submit" ,t2为null
在safari下 t1为空串  ,t2为null

诡异吧. 太诡异了. 我比较能接受的是 ff2下的处理方法.
safari的做法实在是 ... 难道这事又一个safari的bug ???

分享到:
评论
8 楼 zwws 2008-03-21  
好贴.
敬佩楼主哈!
7 楼 fins 2008-03-06  
CSDN我也是常去的 每天都去看一眼
主要是看首页 上的一些东西 ,
CSDN首页上的垃圾数据和有用信息的比例还是在我能容忍的范围内的 呵呵

不过常常被"标题党"忽悠
6 楼 hax 2008-03-05  
我常去javaeye。

还有google。



还有csdn(不准鄙视我)。

5 楼 netfishx 2008-03-05  
hax 写道
你还是拜google为师的好啊!

没有新版本safari啊。有新的,它自己会update的。

如果你要最新源代码,那要自己到webkit.org去取下trunk来自己编译。这事儿我倒是也干不来啊。我很弱,只会用别人打包好的,或者最多只会下tag.gz包然后./configure然后make然后make install,其他一概不会。。。。


那就拜hax为大师兄吧
不过,真的想请hax介绍下有什么常去的网站
4 楼 hax 2008-03-05  
你还是拜google为师的好啊!

没有新版本safari啊。有新的,它自己会update的。

如果你要最新源代码,那要自己到webkit.org去取下trunk来自己编译。这事儿我倒是也干不来啊。我很弱,只会用别人打包好的,或者最多只会下tag.gz包然后./configure然后make然后make install,其他一概不会。。。。
3 楼 fins 2008-03-05  
hax 以后我就拜你为师了 呵呵 谢谢
你说啥问题总是能找到各种依据 给出各种资料 放出各种网址

我对你常去的技术网站非常感兴趣 有机会共享一下你常去的技术网站网址呗
谢谢了

另外: 新版本的 safari哪里下载??? 官网上没有
2 楼 hax 2008-03-05  
关于button,确实是Safari的bug,而且1个月前已经修复:

http://trac.webkit.org/projects/webkit/changeset/30095

BTW,IE在button上的表现是错误的。HTML4规范明确说button type的默认值是submit。
1 楼 差沙 2008-03-05  
小胖真是WEB开发狂人,学习了,感觉你从上学开始就有这股较真的劲,期待继续。

相关推荐

    弹出层提示

    弹出层代码&lt;div class="demo"&gt; &lt;div class="demo_1"&gt; 基本示例:&lt;button&gt;点击这里&lt;/button&gt; &lt;/div&gt; &lt;div class="demo_2"&gt; 提示成功:&lt;button&gt;点击这里&lt;/button&gt; &lt;/div&gt; &lt;div class="demo_3"&gt; 提示失败:...

    AIML参考手册(中文版)

    &lt;card&gt;标签用于包含其他富媒体元素,如image、button、title和subtitle等。它必须包括title和image,而subtitle、image和button为可选元素。card标签通常用于创建菜单,提供视觉上的丰富信息。 ```xml &lt;card&gt; ...

    HTML5参考手册

    HTML5还包括了许多与输入相关的标签:&lt;input&gt;定义输入控件,&lt;button&gt;定义按钮,&lt;select&gt;和&lt;option&gt;定义下拉列表和其选项。表单元素如&lt;keygen&gt;用于生成密钥对,&lt;datalist&gt;和它的子标签&lt;options&gt;用于定义可供用户选择...

    HTML标签大全简介

    此外,还有 &lt;textarea&gt; 标签用于创建多行文本框、&lt;select&gt; 标签用于创建下拉菜单、&lt;button&gt; 标签用于创建按钮等。 表格标签 HTML 中的表格标签可以用来创建表格。例如:&lt;table&gt; 标签用于创建表格:&lt;table border=...

    微信飞机大战

    &lt;!DOCTYPE ... &lt;div&gt;&lt;button onclick="jixu()"&gt;继续&lt;/button&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript" src="../js/main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

    金山WPS宏文件

    &lt;button onclick="InitFrame()"&gt;初始化插件&lt;/button&gt;&lt;br /&gt; &lt;button onclick="OnNew()"&gt;新建文档&lt;/button&gt;&lt;br /&gt; &lt;button onclick="SaveAsLocal()"&gt;保存到本地&lt;/button&gt;&lt;br /&gt; &lt;button onclick="Open()...

    原生js代码写网页计算器功能

    &lt;button&gt;+&lt;/button&gt;&lt;button&gt;-&lt;/button&gt;&lt;button&gt;*&lt;/button&gt;&lt;button&gt;/&lt;/button&gt; &lt;button&gt;.&lt;/button&gt; &lt;!-- 特殊按钮 --&gt; &lt;button&gt;=&lt;/button&gt;&lt;button&gt;AC&lt;/button&gt;&lt;button&gt;%&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; ``` 2. **...

    青鸟S1HTMl项目

    - 表单元素:如&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;和&lt;button&gt;用于收集用户输入。 - 属性:如type(input的类型,如text、password、submit等)、name(识别表单元素的标识符)和value(元素的初始值)。 6. **响应式...

    HTML语言学习教程——HTML语言剖析.pdf

    例如,&lt;body&gt;标签用于定义网页的内容,&lt;head&gt;标签用于包含网页的元数据,&lt;title&gt;标签定义了网页的标题,而&lt;H1&gt;到&lt;H6&gt;用于定义标题的不同层级,&lt;p&gt;用于创建段落,&lt;a&gt;标签用于创建超链接,&lt;img&gt;用于嵌入图片等。...

    H5 css3 box-shadow鼠标悬停按钮动画特效.zip

     &lt;button class="fill"&gt;Fill In&lt;/button&gt;  &lt;button class="pulse"&gt;Pulse&lt;/button&gt;  &lt;button class="close"&gt;Close&lt;/button&gt;  &lt;button class="raise"&gt;Raise&lt;/button&gt;  &lt;button class="up"&gt;Fill Up&lt;/button&gt; ...

    WPFButton样式

    在XAML中,可以通过`&lt;Button&gt;`标签直接创建,如: ```xml &lt;Button Content="点击我" /&gt; ``` 默认样式可以通过修改`&lt;Style TargetType="Button"&gt;`进行全局调整。 2. **自定义背景和边框**: 开发者可以使用`...

    呕心沥血版HTML标记实例

    &lt;form&gt;用于创建表单,&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;、&lt;option&gt;等标签用于创建各种输入控件。&lt;label&gt;关联控件与文字描述,&lt;button&gt;定义按钮,&lt;fieldset&gt;和&lt;legend&gt;组织相关表单元素。 八、HTML5新增元素 HTML5引入...

    Html 写的 计算器

    &lt;button&gt;1&lt;/button&gt; &lt;button&gt;2&lt;/button&gt; &lt;button&gt;3&lt;/button&gt; &lt;button&gt;+&lt;/button&gt; &lt;button&gt;4&lt;/button&gt; &lt;button&gt;5&lt;/button&gt; &lt;button&gt;6&lt;/button&gt; &lt;button&gt;-&lt;/button&gt; &lt;button&gt;7&lt;/button&gt; &lt;button&gt;8&lt;/button&gt; ...

    同时支持Intact/Vue/React框架的前端组件库

    &lt;Button&gt;Hello&lt;/Button&gt; &lt;/template&gt; &lt;script&gt; import {Button} from 'kpc-vue'; export default { components: { Button } } &lt;/script&gt; React 安装 npm install @king-design/react--save 使用 import {Button...

    一些简单的HTML代码

    还有&lt;section&gt;、&lt;article&gt;、&lt;aside&gt;等语义化标签,提高了网页内容的可读性和可访问性。 总结来说,这个资源可能包含了一些基础的HTML元素和结构的实例,如标题、段落、链接、图像等,对于想要学习或回顾HTML基础...

    jQuery网页版俄罗斯方块游戏代码.zip

    &lt;button id="start"&gt;开始游戏&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="rigth"&gt; &lt;div class="next"&gt;&lt;/div&gt; &lt;div id="level"&gt;&lt;span&gt;Level:&lt;/span&gt;&lt;span class="level"&gt;1&lt;/span&gt;&lt;/div&gt; &lt;div id="score"&gt;&lt;span&gt;...

    HTML代码,按钮做超链接

    此外,为了确保按钮在没有JavaScript的情况下仍然能正常工作,建议在`&lt;button&gt;`标签内使用`&lt;form&gt;`和`&lt;input type="submit"&gt;`,并通过JavaScript添加点击事件来实现超链接的跳转。这样的做法可以提供更好的无障碍性...

    html初学者应掌握的一些代码

    8. **列表**:无序列表使用&lt;ul&gt;和&lt;li&gt;标签,有序列表使用&lt;ol&gt;和&lt;li&gt;标签。 9. **区块元素与内联元素**:区块元素如&lt;div&gt;、&lt;p&gt;、&lt;h1&gt;等占据一整块空间,内联元素如&lt;a&gt;、&lt;span&gt;、&lt;b&gt;等只占据自身内容的宽度,可以在...

    换肤button

    免费QF控件下载 &lt;br&gt;&lt;br&gt;&lt;br&gt;Button :QF按钮控件&lt;br&gt;&lt;br&gt;表示 QF(Windows增强) 按钮控件。&lt;br&gt;下表列出了由 Button 类型公开的成员。&lt;br&gt; &lt;br&gt;&lt;br&gt;公共构造函数&lt;br&gt;&lt;br&gt; public Button()&lt;br&gt; 摘要:&lt;br&gt; 初始化 ...

Global site tag (gtag.js) - Google Analytics