HTML&CSS

[KinoOfficial]

Q：如何理解语义化标签? How to understand semantic tags? A：语义化标签的主要目的就是发挥标签和属性的用途及作用，通过标签本身的意义合作来优化 HTML 文档结构 A: The main purpose of semantic tags is to give full play to the purpose and role of tags and attributes, and optimize the HTML document structure through the meaning of the tags. Q：常见的语义化标签？

A：header 标签、nav 标签、article 标签、aside 标签、section 标签、footer 标签

aside 元素：侧边栏、广告、导航条等其他类似的有别于主要内容的部分。 Sidebars, ads, navigation bars, and other similar parts that are different from the main content.

section 标签：一个 section 元素通常由内容和标题组成。 A section element usually consists of content and a title. Q：语义化的优点？

A：以下为语义化的优点：

在没 CSS 样式的情况下，页面整体也会呈现很好的结构效果 代码结构清晰，易于阅读 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重 Even without CSS styles, the page will have a good structural effect. The code structure is clear and easy to read Convenient for development and maintenance. Convenient for other devices to parse and render web pages based on semantics. Conducive to search engine optimization (SEO), because search engine crawlers will give different weights to different tags

作者：LeetCode 链接：https://leetcode.cn/leetbook/read/2023-ming-qi-qian-duan-mian-shi-kao-dian/wd99k3/ 来源：力扣（LeetCode） 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[KinoOfficial]

1、选择器 id 选择器（#myid）

类选择器（.myclass）

属性选择器（a[rel="external"]）

伪类选择器（a:hover, li:nth-child） Pseudo-classes selectors

标签选择器（div, h1,p）

相邻选择器（h1 + p） Adjacent sibling selector 当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父[元素]的子元素，则第二个元素将被选中。

子选择器（ul > li） child selectors

后代选择器（li a） descendant selector

通配符选择器（*） wildcard selector

2、优先级 !important >行内样式 inline stylesheet> ID 选择器「如：#header」> 类选择器「如：.foo」> 标签选择器「如：h1」 > 通配符选择器（*） “！“：Exclamation Mark

作者：LeetCode 链接：https://leetcode.cn/leetbook/read/2023-ming-qi-qian-duan-mian-shi-kao-dian/wdeh6m/ 来源：力扣（LeetCode） 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[KinoOfficial]

position 属性的值有哪些及其区别 What are the values ​​of the position attribute and their differences.

position属性取值：static(默认)、relative、absolute、fixed、inherit。 固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。（脱离文档流）

相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。（脱离文档流）

粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。

默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

The position attribute has values: static (default), relative, absolute, fixed, and inherit. Fixed positioning: The position of the element is fixed relative to the browser window, and it will not move even if the window is scrolled. Fixed positioning makes the position of the element independent of the document flow, so it does not take up space. Fixed positioned elements overlap other elements. (Out of document flow)

Relative positioning: If an element is relatively positioned, it will appear where it is. Then, you can move the element "relative to" its starting point by setting the vertical or horizontal position. When using relative positioning, the element still occupies the original space regardless of whether it is moved. Therefore, moving the element will cause it to cover other boxes.

Absolute positioning: The position of an absolutely positioned element is relative to the nearest positioned parent element. If the element has no positioned parent element, its position is relative to. Absolute positioning makes the position of the element independent of the document flow, so it does not take up space. Absolute positioned elements overlap other elements. (Out of document flow)

Sticky positioning sticky: The element is first positioned according to the normal document flow, and then relative to the element's flow root (BFC) and containing block (the nearest block-level ancestor element) in the flow. The element positioning then behaves as relative positioning until it crosses a certain threshold, and then fixed positioning.

Default positioning Static: The default value. There is no positioning, and the element appears in the normal flow (ignoring top, bottom, left, right or z-index declarations). inherit: Specifies that the value of the position property should be inherited from the parent element.