前端学习日记07

表单标签

常用表单标签

1、form 表单标签

表单标签定义一个包含表单元素的区域
用于收集用户输入的不同类型的数据
常见的表单类型：文本域、下拉列表、单选框、复选框…

<form>
    表单元素
</form>

2、input标签

表单元素就是指不同类型的input元素，input标签根据不同的type属性，有很多形态。
文本输入：定义文本输入的单行输入字段

<input type="text"> 

密码输入: 定义密码字段，该字段将被隐藏

<input type="password"> 

单选按钮：

<input type="radio" name="sex">男
 <input type="radio" name="sex">女

多选框

 <input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">羽毛球

普通按钮：

<input type="button" value="点我">

提交按钮

<input type="submit" value="点我">`

重置按钮

<input type="reset" value="点我">

文件上传按钮

<input type="file" value="点我"> 

下拉框

<select>
    <option></option>    
    <option></option>    
    <option></option>
</select> 

多行文本框：

<textarea cols='40' rows='10'></textarea>
属性：
    cols='列数'
    rows='行数'

常用表单属性

1、action 属性
定义在表单提交时执行的动作，表单提交到的位置，通常提交到web服务器上，如果不写，则设置为当前页面

2、method 属性
定义表单在提交时所用的http方法（get或post）
默认值：get
​
3、name 属性
表单元素的名字，表单提交时必须的字段
​
4、value 属性
定义表单元素的值
​
5、checked 属性
定义在页面加载时被预先选定的单选按钮和复选框
​
6、selected 属性
定义在页面加载时预先选定的下拉框所选中的选项
​
7、readonly 属性
定义输入字段为只读

8、disabled 属性
定义表单元素为禁用状态
​
9、maxlength 属性
定义输入字段允许的最大长度

10、 size 属性
定义下拉列表中可见选项的数目

三角形和小箭头

1、实现三角形:
元素宽高设置为0,
根据需要的三角形的大小设置边框的大小,
确定好三角形的形状,将其他三个方向边框颜色变成透明(transparent)

div{
            width: 0px;
            height: 0px;
            
            /* border-top: 20px solid blue;
            border-right: 20px solid red;
            border-bottom: 20px solid yellow;
            border-left: 20px solid yellowgreen; */
            
            border-top: 20px solid transparent;
            border-right: 20px solid red;
            border-bottom: 20px solid transparent;
            border-left: 20px solid transparent;
        } 

2, 实现小箭头:
两个三角形重叠在一起,上面的三角形有一个错位,并且颜色和背景色一致

 div{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid red;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            position: absolute;
            top: 0;
            left: 0;
        }
        .box1{
            border-right: 50px solid yellow;
            left: 5px;
        }

兼容问题

1、ie中图片边框问题 ie中图片放在a标签中时显示边框 解决：img{ border:none }

2、ie8以下浏览器中背景复合属性写法的问题

正常：background:url("")no-repeat center; ie中这样写图片会显示异常
解决：background:url("") no-repeat center;

其他ie低版本兼容性问题

1、在IE6中定义小高度的容器 IE6及更早浏览器中，默认最小高度19px，小于19px显示为19px
解决： p{ height:1px; font-size:0; line-height:0; }

2、IE6及更早浏览器，浮动时产生双边距的BUG
解决： p{ float:left; _display:inline; }

3、IE7，子标签相对定位时父标签overflow属性的auto | hidden失效的问题
解决：给父标签也设置相对定位

4、IE7中，块转行内不在一行显示问题
解决： div{ display:inline-block; *display:inline; }

5、IE7及更早浏览器中，当li中出现2个或两个以上浮动时，li之间产生空白间隙
解决：将垂直对齐方式设置为top | middle | bottom。

CSS hack

使用CSS hack 可以控制不同浏览器及版本之间的显示差异，某些特殊情况下使用事半功倍，但是滥用会影响页面性能，后期维护困难，尽量减少使用

条件hack ：用于选择IE浏览器及IE的不同版本 if条件Hack是HTML级别（不但是CSS的hack，也可以选择HTML代码块）
if条件包含6种选择方式：
是否
大于（gt）
大于或等于（gte）
小于（lt）
小于或等于（lte）
非指定版本（！）

 <!--[if IE]>
	<p style="background:red;">
		只能被 IE 识别;
	</p>
<![endif]-->

<!--[if IE 6]>
	这是ie6
<![endif]-->

<!--[if IE 7]>
	这是ie7
<![endif]-->

<!--[if IE 8]>
	这是ie8
<![endif]-->

<!--[if IE 9]>
这是ie9
<![endif]-->

<!--[if gt IE 6]>
    这是大于ie6
<![endif]-->

<!--
gt（greater than） 大于
gte（greater than or equal）大于等于
lt（less than） 	小于
lte（less than or equal）  小于等于
! 	非
-->

【注意】：IE 条件注释判断语句是 IE 特有的功能，通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容

属性Hack 在css样式前或值后加上一些只有特定浏览器才可以识别的hack前缀或后缀
（1）_ ：下划线：选择ie6及以下;
（2）-：减号，选择ie6及以下;
（3）+：IE6，7;
（4）\0：选择ie8以上；值后;
（5）\9： ie6及以上;
（6）\9\0： ie9,10;

选择符Hack（控制选择器设置的样式是否生效）
*html : ie6
*+html : ie7