HTML讲解

最新推荐文章于 2021-10-19 09:58:58 发布

codepony

最新推荐文章于 2021-10-19 09:58:58 发布

阅读量697

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/codepony/article/details/119153617

版权

1.html5的新特性

文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。
新的解析顺序：不再基于SGML。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
语意化更好的内容元素:article、footer、header、nav、section;
表单控件:calendar、date、time、email、url、search;
input元素的新类型：date, email, url等。
新的技术: webworker, websocket, Geolocation;
新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。
全域属性：id, tabindex, repeat。
新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
新应用程序接口:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML Canvas/WebGL
HTML Audio/Video
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，naframes；

2.什么是Retina 显示屏，带来了什么问题？

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍
那么，前端的应对方案是：
设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为：200px*200px，那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

3.ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉？

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0.X就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0.X)}

4.部分android系统中元素被点击时产生的边框怎么去掉

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

 a,button,input,textarea{ 
                  -webkit-tap-highlight-color: rgba(0,0,0,0;) 
                  -webkit-user-modify:read-write-plaintext-only; 
            }

            -webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
            另外，有些机型去除不了，如小米2
            对于按钮类还有个办法，不使用a或者input标签，直接用div标签

5.webkit表单元素的默认外观怎么重置

通用

.css{-webkit-appearance:none;}

伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container { 
    background-color: transparent;    
} 
input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
}                      
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
}

6.webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

7.禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

8.禁止ios和android用户选中文字

.css{-webkit-user-select:none}

9.打电话发短信写邮件怎么实现

打电话：<a href="tel:0755-10086">打电话给:0755-10086</a>

最低0.47元/天解锁文章

codepony

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML讲解

1.html5的新特性文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。新的解析顺序：不再基于SGML。绘画 canvas;用于媒介回放的 video 和 audio 元素;语意化更好的内容元素:article、footer、header、nav、section;表单控件:calendar、date、time、email、url、search;input元素的新类型：date, email, url等。新的技术: webworker, w
复制链接

扫一扫