html和javascript的学习记录（1）——html控件

最新推荐文章于 2024-08-04 14:27:56 发布

niuge No.1

最新推荐文章于 2024-08-04 14:27:56 发布

阅读量320

点赞数

分类专栏： Web+Html

本文链接：https://blog.csdn.net/niuge8905/article/details/79329824

版权

Web+Html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html控件集合。

1、button

a、可以直接用input，type=“button”

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
function fun(){
      //这里写你要执行的语句
    alert("这是调用函数");}
</script>
<body>
<input type="button" οnclick="fun()" value="wocaocaocaocao"></input>
</body>
</html>

b、可以用button

<script>
function fun(){
      //这里写你要执行的语句
    alert("这是调用函数");}
</script>
<body>
<button οnclick="fun()">wocaocaocao</button>
</body>

2、text

可以在事件里赋值

<script>
function fun(){
      //这里写你要执行的语句
	document.getElementById("txt1").value="abcd";
    alert(document.getElementById("txt1").value);}

</script>
<body>
<button οnclick="fun()">wocaocaocao</button>
<input type="text" id="txt1" value=""/>
</body>

3.radio的用法

<script>
function baidu(){
  var radios = document.getElementsByName("a");
  for ( var i = 0; i < radios.length; i++) {
  if (radios[i].checked==true) {
      i++;
   alert("你选中的是第"+i+"个单选框。值为："+radios[--i].value);
   }
  }
 }
</script>
<body>
<input type="radio" name="a" value="1"/>1
<input type="radio" name="a" value="2"/>2
<input type="radio" name="a" value="3"/>3
<input type="radio" name="a" value="4"/>4
<input type="button" onClick="baidu()" value="按下"/>
</body>

4.<\br>

可插入一个简单的换行符。

标签是空标签（意味着它没有结束标签，因此这是错误的： ）。在 XHTML 中，把结束标签放在开始标签中，也就是 。

5.checkbox的用法

<script>
function allCheck(node1){  
                var node=document.getElementsByName("mm");  
                for (var x = 0; x < node.length; x++) {  
                    node[x].checked=node1.checked;  
                }  
            }
function chose(node){  
                var flag=true;//用于遍历是否是全部变量设置  
                var allM=document.getElementsByName("all")[0];  
                var node=document.getElementsByName("mm");  
                for (var x = 0; x < node.length; x++) {  
                    if(node[x].checked==false){//只要有一个没选中，就退出遍历，标记设置为false  
                        flag=false;  
                        break;  
                    }  
                }  
                if(flag){  
                    allM.checked=true;  
                }else{  
                    allM.checked=false;  
                }  
            } 
function sumall(){  
                var sum=0;  
                var names=document.getElementsByName("mm");  
                for(var x=0;x<names.length;x++){  
                    if(names[x].checked){//选中的全部加起来  
                        sum=sum+parseInt(names[x].value);//将选中的值解析出来  
                    }  
                }  
                document.getElementById("spanid").innerHTML=("总和为 "+sum+" 元").fontcolor("red");  
                  
            }     
</script>
<body>
商品列表：<br/>  
        笔记本电脑<input type="checkbox" name="mm" value="3000" οnclick="chose(this)" />3000    
        台式机<input type="checkbox" οnclick="chose(this)" name="mm" value="2900"/> 2900    
        路由器<input type="checkbox" οnclick="chose(this)" name="mm" value="90"/> 90  
        <br/>  
        家常用品<input type="checkbox" οnclick="chose(this)" name="mm" value="500"/>500    
        洗衣机<input type="checkbox" οnclick="chose(this)" name="mm" value="5600"/> 5600  
        <br/>全选<input type="checkbox"  name="all" οnclick="allCheck(this)"  />  
        <br/><input type="button" value="查看金额" name="btn" οnclick="sumall()"/> <span id="spanid"></span>
</body>

6.select控件

如果 multiple="false"，那么select就是相当于wpf中的combobox，如果multiple="true"，那么select控件就相当于listbox。

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select name="list" multiple="true"  size="25"   >  
<option   value= "1 "   > 爱情片 </option>  
<option   value= "2 "   > 动作片 </option>  
<option   value= "3 "   > 战争片 </option>  
<option   value= "4 "   > 恐怖片 </option>  
<option   value= "5 "   > 喜剧片 </option>  
<option   value= "6 "   > 伦理片 </option>  
<option   value= "7 "   > 电视剧 </option>  
<option   value= "8 "   > 动画片 </option>  
<option   value= "9 "   > 其它 </option>  
</select>

listbox 的一个应用案例：

http://blog.csdn.net/So_CooL/article/details/1211440

7、表格

HTML 表格实例:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

在线实例

表格
这个例子演示如何在 HTML 文档中创建表格。

（可以在本页底端找到更多实例。）

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

实例

 
   < 
   table 
     
   border 
   = 
   " 
   1 
   " 
   > 
     
   < 
   tr 
   > 
     
   < 
   td 
   > 
   row 1, cell 1 
   </ 
   td 
   > 
     
   < 
   td 
   > 
   row 1, cell 2 
   </ 
   td 
   > 
     
   </ 
   tr 
   > 
     
   < 
   tr 
   > 
     
   < 
   td 
   > 
   row 2, cell 1 
   </ 
   td 
   > 
     
   < 
   td 
   > 
   row 2, cell 2 
   </ 
   td 
   > 
     
   </ 
   tr 
   > 
    
   </ 
   table 
   > 
  

在浏览器显示如下：:

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

实例

 
   < 
   table 
     
   border 
   = 
   " 
   1 
   " 
   > 
     
   < 
   tr 
   > 
     
   < 
   td 
   > 
   Row 1, cell 1 
   </ 
   td 
   > 
     
   < 
   td 
   > 
   Row 1, cell 2 
   </ 
   td 
   > 
     
   </ 
   tr 
   > 
    
   </ 
   table 
   > 
  

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

实例

 
   < 
   table 
     
   border 
   = 
   " 
   1 
   " 
   > 
     
   < 
   tr 
   > 
     
   < 
   th 
   > 
   Header 1 
   </ 
   th 
   > 
     
   < 
   th 
   > 
   Header 2 
   </ 
   th 
   > 
     
   </ 
   tr 
   > 
     
   < 
   tr 
   > 
     
   < 
   td 
   > 
   row 1, cell 1 
   </ 
   td 
   > 
     
   < 
   td 
   > 
   row 1, cell 2 
   </ 
   td 
   > 
     
   </ 
   tr 
   > 
     
   < 
   tr 
   > 
     
   < 
   td 
   > 
   row 2, cell 1 
   </ 
   td 
   > 
     
   < 
   td 
   > 
   row 2, cell 2 
   </ 
   td 
   > 
     
   </ 
   tr 
   > 
    
   </ 
   table 
   > 
  

在浏览器显示如下：

niuge No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html和javascript的学习记录（1）——html控件

html控件集合。1、buttona、可以直接用input，type=“button”&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt
复制链接

扫一扫

专栏目录