html 问题

1、footer处理
目标:
页面较短,footer位于页面底部,出现滚动条时,依然在原来的位置,不随滚动条移动
页面较长,位于元素底部

.container{
    position: relative
}
.footer{
    position: absolute;
    bottom: 0
}

var w_h = window.screen.height;
var c_h = $('.container').height();
if(c_h > w_h){
    $('.footer').css('position', 'static');
 }else{
  $('.container').css('height', $(document).innerHeight());
}
// 要使用$(document).innerHeight(),而不能用window.screen.Height

2、form enter
场景:form中有一个input,input添加了change事件,输入内容后,enter,页面刷新。想要的效果是,输入内容后,enter,触发change事件。
解决办法:在form中添加一个隐藏的input。
原因:浏览器默认的几个原则
如果表单里有一个type=”submit”的按钮,回车键生效。
如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。
如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。 type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

3、html5 a href支持的内容:https://, ftp://, mailto:, file:, tel:。

4、行内元素一般会有4px的间距,设置font-size:0,可以消除这个间距。inline or inline-block 都会有这个问题。

5、给图片添加热点区域,example中有。坐标是相对于图片本身的。

6、html5 的 text, search, url, telephone, email 以及 password 有一个新属性pattern title可以写正则,来更好的验证

7、iphone自动识别长串数字转换为a标签类型,解决办法加meta标签 telephone=no

8、a标签 直接下载文件

<a href='../data/test.pdf' download="" target='_black'>下载</a>

9、form提交数据 未知错误
可能是因为没有加enctype='multipart/form-data'

原文地址:https://www.cnblogs.com/wang-jing/p/5734802.html