1.Html基本控件介绍

1. <input>标签(行内元素)

<input> 标签用于搜集用户信息。

​
1.text：文本区域 readonly属性：是否只读。 
<input type="text" id="name" name="name">

2.password：密码区域，输入的文本以'*'展示
<input type="password" id="password" name="password">

3.checkbox：复选框 checked属性：是否选中；
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike
<input type="checkbox" name="vehicle" value="Car" /> I have a car
　　　　
4.radio：单选框；name属性：指定多个单选框的在一个区域里进行单选操作
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
　　　　

5.reset：重置当前<form>表单里所有标签到初始化状态(如清除文本区域内容)
<input type="reset" />

6.submit：提交当前 <form>表单信息到指定页面

7.button：普通按钮 　value属性：button按钮显示的文本
<input type="button" id="submit" value="Click me">
　　　
8.file：文件选择标签
<input type="file" name="file" accept="image/gif"/>

9.hide：隐藏区域，可以把一些不展示给用户，而自己使用的信息存放于此
<input type="hidden" name="country" value="Norway" />

10.image：图片区域
　　　　src属性：指定图片存放的路径；
　　　　title属性：鼠标移到图上显示的文本；
　　　　alt：图片加载失败或关闭时，显示的文本；
<input type="image" src="img/timg.jpg" alt="Submit" width="120" height="120" />

​

2. <select>标签（行内元素）

可创建单选或多选菜单，类似于winform的combox或listbox。

1) size {int}：设置下拉列表尺寸。默认的为combox样式；大于1时，就是listbox样式。
2) multiple {boolean}：是否多项选择。若为多选，按住Ctrl+左键可进行多选操作。

3) item子项：

① <optgroup>标签：定义选择项的类别，不能被选中。
　　label {string} 属性：类别展示的名称
　　title {string} 属性：鼠标移到选择项上去，要展示的信息

② <option>标签：定义可选的项目
　　vlaue {string} 属性：选择项具体的名称
　　title {string} 属性：鼠标移到选择项上去，要展示的信息


<h3>select标签</h3>
<select id="province" multiple=multiple size="6" >
    <optgroup label="直辖市"  ></optgroup>
    <option value="bj" title="北京市" >北京</option>
    <option value="sh">上海</option>
    <optgroup label="省市" ></optgroup>
    <option value="zj">浙江</option>
    <option value="fj">福建</option>
</select>

3. <textarea>标签（行内元素）

多行文本区域，可以通过 cols 和 rows 属性来设定 textarea 的尺寸。

rows {int}：表示显示的行数。
cols {int}：表示显示的列数。
readonly {boolean}：是否只读。

4. <label>标签（行内元素）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<p>请点击文本标记之一，就可以触发相关控件：</p>
//点击字体也会选择控件
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

6. ul、ol、li 列表标签（块级元素）

ul ：unordered list （无序列表）
ol ：ordered list  （有序列表））
li ：list item （列表项目），基于上面2个列表子项目。

ul：type 有：circle 空心圆，disc 实心圆，square 实心正方形， none ：前面无符号;

<ul type=circle>
    <li>ul1</li>
    <li>ul2</li>
    <li>ul3</li>
</ul>



ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：罗马数字i,ii,iii；虽然还可以定义为：circle、disc、square、none但现实都为1,2,3等序列；

<ol type=1>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ol>

6. a 超链接标签 

<a href="http://www.w3school.com.cn">W3School</a>

 7.b 粗体标签 

<b>这是粗体文本</b>

8.img标签（行内元素）

1.属性
src   (必须)规定显示图像的 URL。
alt   (必须)规定图像的替代文本。

<img src="img/timg.jpg" alt="上海鲜花港 - 郁金香" width="120"
     height="120">

7.form表单（块级元素）

<form action="${pageContext.request.contextPath }/login.action" method="post">
	用户名：<input type="text" name="username" value="safdsdafas">
	<input type="submit" value="提交">
</form>

action：递交的地址
method：递交的方法
id：唯一标识
enctype：编码方式，因为用到了文件上传  multipart/form-data
作用：表单用于向服务器传输数据，
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素

form表单提交方式总结一下:

一、利用submit按钮实现提交，当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                 }
                 return true;
         }
</script>
<form action="login.do?act=login" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
           <input type=submit name="submit1" value="登陆" onclick="return check(this.form)">  
</form>

二、利用button按钮实现提交，当点击button按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址，由于button按钮不具备自动提交的功能，所以由JavaScript实现提交。
 

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="login.do?act=login" name="myform" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="登陆" onclick="check(this.form)">  
</form>

 三、利用submit按钮实现提交，当点击submit按钮时，先触发onsubmit事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="login.do?act=login" method="post" onsubmit="return check(this)">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陆"> 
</form> 

 

 

10.br 换行标签 （行内元素）

<br>:标签:换行

11.u 下划线标签（行内元素）

<p><u>如果文本不是超链接，就不要对其使用下划线</u>。</p>

 12.button 按钮

<html>
<head>
<script>
function copyText()
{
 alert('click success!');
}
</script>
</head>
<body>

<button onclick="copyText()">复制文本</button>

</body>
</html>

 13.p 段落标签（块级标签）

//p 标签：一定一段文字，独占一行 
<p>内容</p>

14.span 标签：组合元素（行内元素）

//<span> 用于对文档中的行内元素进行组合。

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，
我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span>
 的眼睛。</p>

 

15.div 标签 （块级元素）

<div id="loading" class="nav-close">
    <i class="fa fa-times-circle"></i>
</div>