zoukankan      html  css  js  c++  java

  • HTML-T

    a标签跳转

    <a href="new_link" target="_blank">在新建页面打开链接</a>。
<a href="new_link">在当前页面打开链接</a>。

    禁止选中

    整个页面
    <body onselectstart="return false">

    FROM表单标签(标签属性)(无法获取表单属性)
    disabled="disabled"
    FROM表单标签(标签属性)(可获取表单属性)
    readonly="readonly"

    DIV LI等(标签样式)
    style="pointer-events: none;"

    禁止修改页面及开启调试模式等（未测试）

    <script>
//这段js要放在页面最下方  
var h = window.innerHeight,w=window.innerWidth;  
//禁用右键 （防止右键查看源代码）  
window.οncοntextmenu=function(){return false;}  
//在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）  
window.onkeydown = window.onkeyup = window.onkeypress = function () {  
    window.event.returnValue = false;  
    return false;  
}  
//如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面  
window.onresize = function () {  
    if (h != window.innerHeight||w!=window.innerWidth){  
        window.close();  
        window.location = "about:blank";  
    }  
}  
/*好吧，你的开发者工具是单独的窗口显示，不会改变原来网页的高度和宽度， 
但是你只要修改页面元素我就重新加载一次数据,让你无法修改页面元素（不支持IE9以下浏览器）*/  
if(window.addEventListener){  
window.addEventListener("DOMCharacterDataModified", function(){window.location.reload();}, true);  
window.addEventListener("DOMAttributeNameChanged", function(){window.location.reload();}, true);  
window.addEventListener("DOMCharacterDataModified", function(){window.location.reload();}, true);  
window.addEventListener("DOMElementNameChanged", function(){window.location.reload();}, true);  
window.addEventListener("DOMNodeInserted", function(){window.location.reload();}, true);  
window.addEventListener("DOMNodeInsertedIntoDocument", function(){window.location.reload();}, true);  
window.addEventListener("DOMNodeRemoved", function(){window.location.reload();}, true);  
window.addEventListener("DOMNodeRemovedFromDocument", function(){window.location.reload();}, true);  
window.addEventListener("DOMSubtreeModified", function(){window.location.reload();}, true);  
}  
</script>

     同上（未测试）

    一、屏蔽F12 审查元素

document.onkeydown = function(){

    if(window.event && window.event.keyCode == 123) {
        alert("F12被禁用");
        event.keyCode=0;
        event.returnValue=false;
    }
    if(window.event && window.event.keyCode == 13) {
        window.event.keyCode = 505;
    }
    if(window.event && window.event.keyCode == 8) {
        alert(str+"
请使用Del键进行字符的删除操作！");
        window.event.returnValue=false;
    }

}

除了屏蔽这个，我们还有其他有趣的设置：


二、屏蔽右键菜单
document.oncontextmenu = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
}catch (e){
return false;
}
}

三、屏蔽粘贴
document.onpaste = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
}catch (e){
return false;
}
}

四、屏蔽复制
document.oncopy = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if(!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
}catch (e){
return false;
}
}

五、屏蔽剪切
document.oncut = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if(!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
}catch (e){
return false;
}
}

这种很适合小说网站，毕竟版权珍贵，被别人随意copy走内容就不好了

六、屏蔽选中
document.onselectstart = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
} catch (e) {
return false;
}
}

     禁用预先调试

    var threshold = 160; // 打开控制台的宽或高阈值  
// 每秒检查一次  
window.setInterval(function() {  
    if (window.outerWidth - window.innerWidth > threshold ||   
    window.outerHeight - window.innerHeight > threshold) {  
        // 如果打开控制台，则刷新页面  
        window.location.reload();  
    }  
}, 1e3);

    快捷判断

    {{moneyrecordinfo.totalmoney||0}}
<!-- 前面为true则显示，否则显示后面 -->

    显示所有文字

    white-space: normal;
word-break: break-all;

    文字显示两行，且超出部分隐藏

    overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

    文字显示一行，且超出部分隐藏

    word-break: keep-all;
    /*不换行*/
white-space: nowrap;
    /*超出部分隐藏*/
overflow: hidden;
    /*多余文字转换省略号*/
text-overflow: ellipsis;
    text中划线
    text-decoration: line-through; 
    下划线
    text-decoration: underline;
    文本居中
    text-align: center;

    input提示文字

     <input placeholder="text" >

    设置提示文字颜色（需从父元素开始选中）

    .weui-btn-area input::-webkit-input-placeholder{
    /*font-size: 28px;*/
    color:#989898;
            }

    设置空格

    &nbsp 

    设置&

    &amp

    CSS记录

    宽
width

高
height

布局
display
display:flex

阴影
box-shadow
box-shadow: 10rpx 10rpx 10rpx #909090;

边角弧度
border-radius
border-radius:20px;
border-radius:50%;

透明度
opacity

渐变色
background: linear-gradient(#b0b1f3, #8787f0);

内边距
padding

外边距
margin

上
top
下
bottom
左
left
右
right

    引入网络图片
    style="background-image:url({{item.thumb}});"

    设置字体行距
    line-height:22px
    设置字体水平居中
    text-align:center;

    设置元素内第一个元素
    .xj-smallspec :first-child{
     margin: 0;
     background: #000;
    }
    设置最后一个元素
    last-child
     

     颜色循环渐变
     -webkit-animation: hue 6s infinite linear;
     
    设置文本不可选中
    user-select: none;

    设置光标样式
    cursor: pointer;




    设置li列表标签样式为空
    list-style-type: none;

    设置图片缩放比例
    object-fit: cover;



    vw(当前页面宽度视区等分为100，取值)

    vh(当前页面高度视区等分为100，取值)

    详见：https://www.zhangxinxu.com/study/201209/vw-vh-to-pixel.html

    设置网页标题

    console.log(document.title);//原标题
document.title='新标题';//新标题

    元素选择器

    选择符类型表达式描述
    子串匹配的属性选择符
    E[att^="val"]
    匹配具有att属性、且值以val开头的E元素
    E[att$="val"]
    匹配具有att属性、且值以val结尾的E元素
    E[att*="val"]
    匹配具有att属性、且值中含有val的E元素
    结构性伪类
    E:root
    匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
    E:nth-child(n)
    匹配父元素中的第n个子元素E
    E:nth-last-child(n)
    匹配父元素中的倒数第n个结构子元素E
    E:nth-of-type(n)
    匹配同类型中的第n个同级兄弟元素E
    E:nth-last-of-type(n)
    匹配同类型中的倒数第n个同级兄弟元素E
    E:last-child
    匹配父元素中最后一个E元素
    E:first-of-type
    匹配同级兄弟元素中的第一个E元素
    E:only-child
    匹配属于父元素中唯一子元素的E
    E:only-of-type
    匹配属于同类型中唯一兄弟元素的E
    E:empty
    匹配没有任何子元素（包括text节点）的元素E
    目标伪类
    E:target
    匹配相关URL指向的E元素
    UI元素状态伪类
    E:enabled
    匹配所有用户界面（form表单）中处于可用状态的E元素
    E:disabled
    匹配所有用户界面（form表单）中处于不可用状态的E元素
    E:checked
    匹配所有用户界面（form表单）中处于选中状态的元素E
    E::selection
    匹配E元素中被用户选中或处于高亮状态的部分
    否定伪类
    E:not(s)
    匹配所有不匹配简单选择符s的元素E
    通用兄弟元素选择器
    E ~ F
    匹配E元素之后的F元素

    命名规则

    外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
    1、所有的命名小写
2、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
3、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4、空元素要有结束的tag或于开始的tag后加上"/"
5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
6、<h1到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询
7、给每一个表格和表单加上一个唯一的、结构标记id
8、给图片加上alt标签
9、尽量使用英文命名原则
10、尽量不缩写，除非一看就明白的单词
11、类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
  • 相关阅读:
    MySQL Lock--gap before rec insert intention waiting
    MySQL Index--InnoDB引擎的主键索引
    MySQL Binlog--事务日志和BINLOG落盘参数对磁盘IO的影响
    MySQL Partition Table--分区表优缺点
    MySQL DataType--当整数列遇到小数
    MySQL DataType--日期格式
    MySQL DataType--隐式类型转换
    MySQL Hardware--RAID卡常用信息查看
    DBA常用SQL之表空间与数据文件
    DBA常用SQL之数据库基础信息
  • 原文地址：https://www.cnblogs.com/xuanjiange/p/11889347.html
Copyright © 2011-2022 走看看