HTML、CSS、meta常用代码

XanaHopper 发布于2019-08-30 15:43 / 1937人阅读

摘要：关闭首个字母大写伪类失效页面模板设置页面的编码禁止手机放大或缩小删除默认的苹果工具栏和菜单栏，默认全屏启动或禁用自动识别页面中的电话号码，邮箱地址文档兼容模式以最高

HTML

1、关闭首个字母大写（HTML）

2、伪类:active失效

body class="" onmousemove="" ontouchstart=""

3、H5页面模板

meta

1、设置页面的编码（HTML）

2、禁止手机放大或缩小（HTML）


content="width=device-width, 
initial-scale=1.0, 
minimum-scale=1.0, 
maximum-scale=1.0, 
user-scalable=no"/>"
2、删除默认的苹果工具栏和菜单栏，默认全屏（HTML）

3、启动或禁用自动识别页面中的电话号码，邮箱、地址（HTML）

4、文档兼容模式 -- IE以最高级模式渲染文档（HTML）

5、顶部状态栏背景色（HTML）


6、页面的关键字、描述--搜索引擎使用（HTML）


7、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉


CSS
1、取消 input search 的close（CSS）
input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none; //此处只是去掉默认的小×
}
::-webkit-search-cancel-button {
    display:none; 
}
input[type="search"]{-webkit-appearance:none;} 
7、重写占位符样式
input[type=search]::-webkit-input-placeholder{
color: blue;
}

2、禁止选中复制文本（CSS）
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

[contenteditable=true], input, textarea {
    -webkit-touch-callout: auto !important;
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important
}

3、input和button 消除触摸阴影（CSS）
-webkit-tap-highlight-color: transparent;
4、取消button的默认样式
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
outline: 0;
5、改变webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
6、媒体查询（CSS）
(@media screen and (max-width: 330px) and (min-width: 311px) {}
7、CSS模板
@charset "UTF-8";a,body,button,div,form,h1,h2,h3,h4,h5,h6,header,html,input,nav,p,section,table,textarea，dl,dt,ol,ul,li{margin:0;padding:0;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body,html{width:100%;font-family:Helvetica,Arial,"Microsoft YaHei",sans-serif;background-color:#f2f2f2;font-size:100px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
a,button,input,textarea{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-decoration:none;border:0}
dl,dt,ol,ul,li{list-style:none}
[contenteditable=true],input,textarea{-webkit-touch-callout:auto!important;-webkit-user-select:auto!important;-khtml-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}
.ellipsis{overflow:hidden;-ms-text-overflow:ellipsis;white-space:nowrap;text-overflow:ellipsis}
.ellipsis-clamp-3{overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

other
autocapitalize 首字母自动大写
autocorrect 自动改正
autocomplete 自动输入
$(this).data("hello");
$(this).attr("data-hello")
display:flex;flex-direction:column;justify-content:center 通讯录 字母导航样式
e.currentTarget.dataset.xxx与e.target.dataset.xxx
e.currentTarget.options.selectedIndex 与 e.currentTarget.value
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
.clearfix:after, .clearfix:before{content:"";display:table;}
.clearfix:after{clear:both;}

8、CSS sticky-footer布局
html


  顶部

底部--页面没有超出固定在底部，超出则正常显示

css
css reset
body,html{height:100%}
.main{min-height:100%;margin-bottom:-30px}
.main-son{padding-bottom:30px}


常用连接
用border做三角形
CSS在线API--1
CSS在线API--2
meta标签扩展

专线服务私有云 html常用代码常用html代码 html常用代码大全 html代码css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116057.html

HTML、CSS、meta常用代码

摘要：关闭首个字母大写伪类失效页面模板设置页面的编码禁止手机放大或缩小删除默认的苹果工具栏和菜单栏，默认全屏启动或禁用自动识别页面中的电话号码，邮箱地址文档兼容模式以最高 HTML 1、关闭首个字母大写（HTML） 2、伪类:active失效 body class= onmousemove= ontouchstart= 3、H5页面模板 ...

DevTalking 2019-08-02 16:10 评论0 收藏0
html常用标签整理

摘要：主要通过样式为其赋予不同的表现标签用来定义内联行内元素，并无实际的意义。html文档结构 1 DOCTYPE html> 2 <html lang="zh-CN"> #这个lang表示语言，zh-CN中文的意思，整个文档的内容以中文为主，如果以英文为主，就写成lang=en 3 4 <head> 5 <meta charset...

番茄西红柿 2019-04-23 13:06 评论0 收藏0
Web最佳实践阅读总结(2)

摘要：代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名提高网站的易用性网页更好维护和扩展，属于插件停止使用不标准的标签和属性，简化代码标签没有实际意义，仅设置样式不推荐使用不推荐使用，让拥有更好的语义移除不常用的标签样式代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名(SEO) 提高网站的易用性网页更好维护和扩展（Validato...

chavesgu 2019-08-01 17:44 评论0 收藏0
Web最佳实践阅读总结(2)

摘要：代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名提高网站的易用性网页更好维护和扩展，属于插件停止使用不标准的标签和属性，简化代码标签没有实际意义，仅设置样式不推荐使用不推荐使用，让拥有更好的语义移除不常用的标签样式代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名(SEO) 提高网站的易用性网页更好维护和扩展（Validato...

selfimpr 2019-08-21 16:55 评论0 收藏0
Web最佳实践阅读总结(2)

摘要：代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名提高网站的易用性网页更好维护和扩展，属于插件停止使用不标准的标签和属性，简化代码标签没有实际意义，仅设置样式不推荐使用不推荐使用，让拥有更好的语义移除不常用的标签样式代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名(SEO) 提高网站的易用性网页更好维护和扩展（Validato...

RiverLi 2019-08-30 15:53 评论0 收藏0