前端知识篇——（四）

最新推荐文章于 2022-07-10 09:38:15 发布

丸子嘻嘻

最新推荐文章于 2022-07-10 09:38:15 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/TWFKXP/article/details/79491343

版权

HTML 题目：meta标签

CSS 题目：css 实现单行、多行文本溢出显示省略号

JavaScript 题目：继承机制

其他：dom load 与 dom ready 的区别

HTML

题目：meta标签

<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">

<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

CSS

题目：css 实现单行、多行文本溢出显示省略号

单行文本溢出，用省略号显示


<style>
    p {
        /*
        text-overflow:定义文本溢出时，将溢出部分替换为（...） 
                      不设置时不会出现省略的效果，当前界面能容纳多少就显示多少内容（其余两个性质设置的前提下）
        overflow: hidden: 表示超出的部分隐藏
                          不设置时不会出现省略的效果，并且所有的内容在同一行显示  （其余两个性质设置的前提下）
        white-space: nowrap: 规定段落中的文本不进行换行
                          不设置时不会出现省略的效果，并且所有的内容换行显示   （其余两个性质设置的前提下）

        */
        text-overflow: ellipsis;  // 必须
        white-space: nowrap;      // 必须
        overflow: hidden;         // 必须
    }
</style>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ut optio et, blanditiis incidunt! Quas saepe
            accusamus natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores, aliquid, possimus iste.</p>
    </body>

多行文本溢出，用省略号显示（限于 webkit内核的浏览器）

<style>
    p {
        /*
        display: -webkit-box;  对象作为弹性伸缩盒子模型显示

        -webkit-line-clamp：设置文本最多显示行数。

        -webkit-box-orient：设置或检索伸缩盒对象的子元素的排列方式
        */
        overflow: hidden;  
        display: -webkit-box;   
        -webkit-line-clamp: 2;  
        -webkit-box-orient: vertical;  
    }
</style>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ut optio et, blanditiis incidunt! Quas saepe accusamus
        natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores, aliquid, possimus iste.</p>
</body>

JavaScript

题目：继承机制

why？

Javascript里的所有数据类型都是对象（object），那么就必须有一种机制，将所有对象联系起来。

how ？

把new命令引入了Javascript，用来从原型对象生成一个实例对象，在Javascript语言中，new命令后面跟的不是类，而是构造函数。

forward -

用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。

prototype 的提出 +

为构造函数设置一个prototype属性，所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。
也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。

realization！

由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像”继承”了prototype对象一样。

　function DOG(name){
　　　　this.name = name;
　　}
　　DOG.prototype = { species : '犬科' };
　　
　　var dogA = new DOG('大毛');
　　var dogB = new DOG('二毛');
　　
　　alert(dogA.species); // 犬科
　　alert(dogB.species); // 犬科

继承的种类

（1）构造函数绑定 apply() & call()

    　function Animal(){
　　　　this.species = "动物";
　　}
      function Cat(name,color){
// 　　 Animal.apply(this, arguments);
// 　　 Animal.apply(this, [name,color]);
　　　　Animal.call(this,name,color);
　　　　this.name = name;
　　　　this.color = color;
　  }
   let cat1 = new Cat("大毛","黄色");　　 
   alert(cat1.species); // 动物

（2）原型（prototype）实现继承

任何一个prototype对象都有一个constructor属性，指向它的构造函数。如果没有”Cat.prototype = new Animal();”这一行，Cat.prototype.constructor是指向Cat的；加了这一行以后，Cat.prototype.constructor指向Animal

    　function Animal(){
　　　　this.species = "动物";
　　}
      function Cat(name,color){

　　　　this.name = name;
　　　　this.color = color;
　  }

   Cat.prototype = new Animal(); // 将Cat的prototype对象指向一个Animal的实例
   Cat.prototype.constructor = Cat; // Cat.prototype对象的constructor值改为Cat
   let cat1 = new Cat("大毛","黄色");　　 
   alert(cat1.species); // 动物

其他：dom load 与 dom ready 的区别

dom load

事件是在文档的所有资源都加载完成后出发，包括js、css、文档中的图片、多媒体等内容，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等

dom ready

事件是在页面中所有dom结构完全加载完后执行的，不需要等js、css、文档中的图片、多媒体等内容加载完才能执行，比如一张图片只要标签完成，就可以设置图片的宽高的属性或样式等

丸子嘻嘻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端知识篇——（四）

HTML 题目：meta标签CSS 题目：css 实现单行、多行文本溢出显示省略号 JavaScript 题目：继承机制其他：dom load 与 dom ready 的区别 HTML 题目：meta标签&lt;!-- 设置缩放 --&gt;&lt;meta name="viewport" content="width=device-width, initial-...
复制链接

扫一扫