html行内标签和块级标签有哪些?css常用的伪类和伪元素有哪些? 什么是作用域?作用域链又是什么?

简介: 作用域:作用域是当前的执行上下文,js中作用域分为全局作用域和函数作用域。

一省:HTML

4. html行内标签和块级标签有哪些?

行内标签:<a>、<b>、<i>、<s>、<u>、<em>、<del>、<ins>、<span>、<strong>

块级标签:<p>、<h1~h6>、<ul>、<ol>、<dl>、<li>、<dd>、<dt>、<div>、<form>、<table>

行内块标签:<img>、<input>、<textarea>、<select>、<td>、<label>

区别:
| 特点 | 行内 | 块级 | 行内块 |
| -- | -- | -- | -- |
| 排列 | 一行多个 | 一行一个 | 一行多个 |
| 宽高 | 不可设置 | 可以设置 | 可以设置 |
| 默认宽度 | 内容撑开 | 100% | 内容撑开 |

二省: CSS

4. css常用的伪类和伪元素有哪些?它们的区别是什么?

  1. 伪类:CSS 伪类是添加到选择器的关键字,用于指定所选元素的特殊状态。常用:

    :hover //鼠标滑过的效果
    :active //a标签点击的效果
    :focus //表单元素聚焦的效果
    :first-child //选中第一个子元素
    
  2. 伪元素:伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

    ::after //在某元素之后插入内容
    ::before //在某元素之前插入内容
    ::first-line //将样式添加到文本的首行
    

    区别: 伪类是单冒号,伪元素是双冒号;伪类和伪元素的主要区别在于实现效果的过程中有没有创造新元素。

三省:JavaScript

4. 什么是作用域?作用域链又是什么?

  1. 作用域:作用域是当前的执行上下文,js中作用域分为全局作用域和函数作用域。
  • 全局作用域:函数作用域和块级作用域之外的作用域。
  • 函数作用域:函数内部的作用域。
  • 额外作用域:let、const产生的块级作用域(花括号包括的作用域)。
var str = "hello" //全局作用域
function fn() {
   
  var name = "Jack" // 函数作用域
}

{
   
  let name = "Lily" // 块级作用域
}

2.作用域链:是在使用变量时,从内到外,自下而上(作用域)查找的链条。

相关文章
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
1048 2
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
657 49
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
461 5
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
481 2
CSS3 新增伪类有那些
CSS3 引入了多种新伪类,增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择;状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择;动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
|
存储 移动开发 前端开发
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
513 0
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
593 0
|
12月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中

热门文章

最新文章

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