前台html基础标签2表单、超链接 css四种样式 7.7

一、html-表单部分

　　1、按钮：

　　　　<input type="button">

　　2、文本框：
　　　　<input type="text">

　　3、密码：
　　　　<input type="password">

　　4、单选：
　　　　<input type="radio" id="male" name="sex" checked="checked">

            <label for="male">男</label>
　　　　<input type="radio" id="female" name="sex">

               <label for="female">女</label> 

　　5、复选框：
　　　　<input type="checkbox">红色<input type="checkbox">绿色

　　6、下拉菜单：
　　　　<select>
　　　　　　<option>--请选择--</option>
　　　　　　<option>唱歌</option>
　　　　　　<option>跳舞</option>
　　　　</select>　　

　　　　*如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。

　　　　<select name="fruit" multiple="multiple">

　　　　还可以用size属性来改变下拉框(Select)的大小

　　7、上传控件：
　　　　<input type="file">

　　8、多行输入框：
　　　　<textarea maxleng="限制字数" cols="宽度" rows="高度"></textarea>

　　9、重置按钮：
　　　　<input type="reset"> [只针对它所在的form表单有效果]

　　10、提交按钮：
　　　　<input type="submit"> [只针对它所在的form表单有效果]

　　11、图片按钮：

　　　　<input type="image">

　　12、隐藏字段：

　　　　<input type="hidden">

二、css样式部分

　　1、css样式的三种常用写法：
　　　　第一种 行内样式：直接在标签里，加<p style="color:red"></p>
　　　　第二种 内嵌式：在head里面，加入<style> p{ color:red;} </style>
　　　　第三种 链接式：在外部新建css文件写入样式，引入html：
　　　　　　<link rel="stylesheet" type="text/css" href="相对路径.css">

           第四种 导入式：@import   

 

         四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。

 

三、链接部分

　　1、空链接：<a href="JavaScript:;"></a>

　　2、链接打开窗口：

　　　　_blank      在新窗口打开
　　　　_parent    在父级窗口打开
　　　　_self        在当前窗口打开
　　　　_top        返回信息显示在顶级浏览器窗口中