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

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

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    308
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    263
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    216
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    157
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    316
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    456
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    201
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    147
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    214
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    290