b标签和strong标签的区别?css单行或多行溢出隐藏如何实现?浅谈this?

简介: b标签只是文本加粗,而strong除了加粗还有强调的语义。

一省:HTML

10. b标签和strong标签的区别?

  1. b标签只是文本加粗,而strong除了加粗还有强调的语义。
  2. strong标签更有利于SEO。

二省: CSS

10. css单行或多行溢出隐藏如何实现?

  1. 单行显示省略号
    <html lang="en">
    <head>
    <style>
     div {
          
          
       width: 200px;
     }
     p.single {
          
          
         /*1. 先强制一行内显示文本*/
       white-space: nowrap;  
       /* ( 默认 normal 自动换行) */
       /*2. 超出的部分隐藏*/
       overflow: hidden;
       /*3. 文字用省略号替代超出的部分*/
       text-overflow: ellipsis;
     }
    </style>
    </head>
    <body>
    <div>
     <p class="single">单行溢出隐藏单行溢出隐藏单行溢出隐藏单行溢出隐藏单行溢出隐藏单行溢出隐藏</p>
    </div>
    </body>
    </html>
    
  2. 多行实现省略号
    <html lang="en">
    <head>
    <style>
     div {
          
          
       width: 200px;
     }
     p.more {
          
          
       /*1. 超出的部分隐藏 */
       overflow: hidden;
       /*2. 文字用省略号替代超出的部分 */
       text-overflow: ellipsis;
       /* 3. 弹性伸缩盒子模型显示 */
       display: -webkit-box;
       /* 4. 限制在一个块元素显示的文本的行数 */
       -webkit-line-clamp: 2;
       /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
       -webkit-box-orient: vertical;
     }
    </style>
    </head>
    <body>
    <div>
     <p class="more">多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏</p>
    </div>
    </body>
    </html>
    

三省:JavaScript

10. 浅谈this?

this是JavaScript的一个关键字,通常会在执行上下文中指向一个对象,在不同执行环境下会指向不同的对象。this的指向与调用的位置有关,与定义的位置无关。
1.全局作用域,普通函数中,this指向window

function foo() {
   
   
  console.log(this);
}

foo();//window

2.通过对象调用函数,this指向调用对象

//demo1
var obj = {
   
   
  name: "Jack",
  foo: function() {
   
   
    console.log(this);
  }
}
obj.foo();//obj {name: 'Jack', foo: ƒ}

//demo2
function foo() {
   
   
  console.log(this);
}
var obj1 = {
   
   
  name: "Mick",
  foo: foo
}
obj1.foo()//obj1 {name: 'Mick', foo: ƒ}

3.call、apply和bind方法可以指定this的指向

function foo() {
   
   
  console.log(this);
}

var obj = {
   
   
  name: "Jack",
  foo: function() {
   
   
    console.log(this);
  }
}

var obj1 = {
   
   
  name: "Mick",
  foo: foo
}
foo.call(obj);//obj {name: 'Jack', foo: ƒ}
obj.foo.apply(obj1);//obj1 {name: 'Mick', foo: ƒ}
var foo1 = foo.bind(obj)
foo1();//obj {name: 'Jack', foo: ƒ}

4.箭头函数没有自己的this,this是上层作用域的this

//demo1
var obj2 = {
   
   
  name: "Siri",
  arrFn: () => {
   
   
    console.log(this);
  }
}
obj2.arrFn()//window

//demo2
var obj3 = {
   
   
  name: "Carry",
  foo: function() {
   
   
    var obj = {
   
   
      name: "Bobe",
      arrFn: () => {
   
   
        console.log(this);
      }
    }
    obj.arrFn()
  }
}
obj3.foo()//obj3 {name: 'Carry', foo: ƒ}

推荐大佬的一篇文章,想要更深入理解this的可以看看: https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA

相关文章
|
20天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
31 5
|
1月前
|
前端开发 Ruby
CSS 预编语言的区别
【10月更文挑战第24天】Sass、Less 和 Stylus 等 CSS 预编语言在语法特点、功能特性、性能表现、社区和生态系统等方面存在着不同之处。在选择使用哪种预编语言时,需要综合考虑项目需求、团队技术偏好、个人习惯等因素。你可以根据具体情况进行评估和选择,以充分发挥这些语言的优势,提高前端开发的效率和质量。
|
1月前
|
前端开发 开发者 UED
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
【10月更文挑战第24天】在实际应用中,这些概念相互关联,共同影响着网页在不同设备上的显示表现。开发者需要了解它们之间的区别和关系,以便更好地进行网页设计和优化,确保在各种设备上都能提供良好的用户体验。
WK
|
3月前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
61 3
|
2月前
|
前端开发 JavaScript
css的引入方式和区别
css的引入方式和区别
38 0
|
3月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发
为什么最好把 CSS 的 link 标签放在 head 标签之间?
为什么最好把 CSS 的 link 标签放在 head 标签之间?
|
3月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
4月前
|
前端开发
css中px和em的区别
css中px和em的区别
64 0