释放双眼,带上耳机,听听看~!
上节内容我们讲了<input>标签,这个是一个自闭和标签,只能定义一些属性却无法添加内容,这次我们来讲一个标签它可以添加内容,它就是<button>标签,它能在开始符号和结束符号之间能插入其他标签或文字!
HTML表单按钮:<button>文本或图像</button>。
<button></button>之间可以插入文本或图像,是不是比<input>标签看起来强大点?
案例演示
<!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> button文本:<button>确定</button> <button><img src="/wp-content/uploads/thumb/avatar/fill_w60_h60_g0_mark_a5f3c6a11b03839d46af9fb43c97c188.png" class="avatar b2-radius"></button> </body> </html>
下面我们在看看<input>标签和<button>标签文本样式用法对比。
<!DOCTYPE html> <html> <head> <title>站宝库 ZhanBaoKu.Com</title><!-- 修改页面标题--> <meta charset="UTF-8"> </head> <body> button标签按钮:<button>这是一个按钮</button><br/> input标签按钮:<input type="button" value="这是一个按钮"/></button> </body> </html>
好像显示的都是一样的,没错的确显示的都是一样的,但肯定有区别吧,不然怎么会在精简又精简的HTML教程中拿出来说呢?在设计表单中,应该使用表单按钮<input type=”button”/>,因为这涉及到提交数据到服务器。如果你想让按钮设计得美观一点,并且不是在表单提交数据的情况下,那就使用button标签按钮。其实后期都一样都可以通过CSS样式来修改。
总结:
带有提交信息性质的表单按钮的语法<input type=”button” value=”普通按钮的取值” onclick=”JavaScript脚本程序”/>,<input>标签不可以插入文本只能定义属性,<button>标签可以添加文本或者图片,但大多数时候我们选择使用<input>标签,因为使用了表单基本上都会提交数据信息给后端。