zorth 发布的文章

html5的tabindex标签

作者: zorth
时间: 2024-12-04
分类: 默认分类
评论

tabindex属性用于控制HTML元素的键盘导航（Tab键）顺序，这对网页的可访问性(accessibility)非常重要。让我详细解释：

1. tabindex的基本值：

```html

<div tabindex="0">可聚焦元素</div>

<input tabindex="1">
<button tabindex="2">

<div tabindex="-1">程序控制聚焦</div>
```

2. 默认可聚焦的元素（不需要tabindex）：

```html
<a href="...">链接</a>
<button>按钮</button>
<input type="text">
<select>
<textarea>
```

3. 常见使用场景：

a) 自定义组件使其可聚焦：

```html
<div role="button" tabindex="0" onclick="handleClick()">
    自定义按钮
</div>
```

b) 创建模态框焦点陷阱：

```html
<div class="modal" tabindex="-1">
    <button tabindex="1">确认</button>
    <button tabindex="2">取消</button>
</div>
```

c) 跳过导航：

```html
<a href="#main-content" tabindex="1">跳到主要内容</a>
<nav tabindex="2">...</nav>
<main id="main-content" tabindex="-1">...</main>
```

4. 最佳实践：

✅ 推荐做法：

```html

<div role="button" tabindex="0">点击我</div>

<div tabindex="-1" id="error-message">错误提示</div>

<nav>
    <a href="#" tabindex="0">首页</a>
    <a href="#" tabindex="0">关于</a>
</nav>
```

❌ 避免的做法：

```html

<button tabindex="5">第五个</button>
<button tabindex="1">第一个</button>

<div tabindex="0">普通文本不需要聚焦</div>
```

5. 注意事项：

1) 可访问性考虑：

- 确保键盘导航顺序合理
- 为可聚焦元素提供适当的视觉反馈

```css
[tabindex]:focus {
    outline: 2px solid blue;
    /* 确保有清晰的焦点样式 */
}
```

2) 性能考虑：

- 避免过多使用tabindex
- 优先使用原生可聚焦元素

3) 用户体验：

- 保持导航顺序符合用户预期
- 确保重要功能容易访问

6. 与ARIA结合使用：

```html
<div role="button" 
     tabindex="0" 
     aria-label="关闭"
     onclick="closeDialog()">
    ×
</div>
```

使用tabindex时的关键建议：

1. 尽量使用HTML原生的可聚焦元素
2. 只在必要时使用tabindex="0"或"-1"
3. 避免使用正整数值的tabindex
4. 确保键盘导航顺序符合逻辑
5. 测试网站的键盘可访问性

ID和Class属性的区别

作者: zorth
时间: 2024-12-04
分类: 默认分类
评论

ID和Class属性在HTML5中有以下主要区别：

1. 唯一性：
- ID必须是唯一的，一个页面中不能有重复的ID值
- Class可以重复使用，多个元素可以使用相同的class值
```html

<div id="header"></div>  
<div class="button"></div>
<div class="button"></div>  
```

2. 使用场景：
- ID通常用于：
  - 特定的唯一元素（如页面主容器、顶部导航等）
  - JavaScript获取特定元素
  - 页面内部链接的锚点
```html
<div id="main-content"></div>
<a href="#main-content">跳转到内容</a>
```

- Class通常用于：
  - 样式复用
  - 元素分组
  - 多个样式组合

```html
<button class="btn btn-primary large">提交</button>
<button class="btn btn-secondary">取消</button>
```

3. CSS选择器：
- ID选择器使用#号
- Class选择器使用.号

```css
#header {
    /* ID选择器 */
    background: black;
}

.button {
    /* Class选择器 */
    padding: 10px;
}
```

4. 优先级：
- ID选择器优先级高于Class选择器

```css
#submit-button {
    background: red;  /* 这个会覆盖class的样式 */
}

.button {
    background: blue;
}
```

5. JavaScript获取方式：

```javascript
// 通过ID获取（返回单个元素）
document.getElementById('header');

// 通过Class获取（返回元素集合）
document.getElementsByClassName('button');
```

6. 命名规范：
- ID通常用于描述"是什么"（what it is）
```html
<div id="main-navigation"></div>
<div id="footer"></div>
```

- Class通常用于描述"什么样的"（what it's like）或可重用的样式
```html
<div class="large-text"></div>
<div class="highlight"></div>
```

最佳实践建议：
1. 尽量少用ID，除非确实需要唯一标识
2. 优先使用Class来定义样式
3. ID主要用于JavaScript操作和页面锚点
4. 使用有意义的命名，避免过于简单或难以理解的名称
5. 采用一致的命名规范（如kebab-case或camelCase）

spring boot中配置日志归档的模板

作者: zorth
时间: 2024-11-26
分类: 默认分类
评论

![](https://zorth-1305096201.cos.ap-guangzhou.myqcloud.com/undefined20241126143027.png)
SLF4J (Simple Logging Facade for Java) 实际上是一个日志门面框架，它本身并不提供日志实现，而是需要与具体的日志实现框架配合使用。Logback 就是 SLF4J 的一个原生实现。

1. **SLF4J + Logback 的关系**：

- SLF4J 是接口（门面模式）
- Logback 是实现
- Logback 的作者就是 SLF4J 的作者，所以它们是完全兼容的

1. **使用方式**：
   需要添加以下依赖：

```xml
  
<dependencies>  
      
    <dependency>  
        <groupId>org.slf4j</groupId>  
        <artifactId>slf4j-api</artifactId>  
        <version>1.7.36</version>  
    </dependency>  
    
      
    <dependency>  
        <groupId>ch.qos.logback</groupId>  
        <artifactId>logback-classic</artifactId> 
        <version>1.2.11</version>  
    </dependency>  
</dependencies>  
```

1. **代码中的使用**：

```java
import org.slf4j.Logger;  
import org.slf4j.LoggerFactory;

public class YourClass {  
    private static final Logger logger = LoggerFactory.getLogger(YourClass.class);  
    
    public void someMethod() {  
        logger.info("This is an info message");  
        logger.error("This is an error message");  
    }  
}  
```

1. **配置文件**：
   完全可以使用之前提到的 logback.xml 配置文件来进行日志归档配置。实际上，使用 SLF4J + Logback 的组合时，Logback 会按以下顺序查找配置文件：
2. logback-test.xml
3. logback.xml
4. 如果都没找到，使用默认配置

```xml
<?xml version="1.0" encoding="UTF-8"?>  
<configuration>  
    <property name="log.path" value="/logs" />  
    
      
    <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">  
        <encoder>  
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern>  
        </encoder>  
    </appender>  
    
      
    <appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">  
        <file>${log.path}/app.log</file>  
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">  
            <fileNamePattern>${log.path}/app.%d{yyyy-MM-dd}.log</fileNamePattern>  
            <maxHistory>30</maxHistory>  
            <totalSizeCap>3GB</totalSizeCap>  
        </rollingPolicy>  
        <encoder>  
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern>  
        </encoder>  
    </appender>  
    
    <root level="INFO">  
        <appender-ref ref="CONSOLE" />  
        <appender-ref ref="FILE" />  
    </root>  
</configuration>  
```

1. **注意事项**：

- 确保没有引入其他日志实现框架的依赖，避免冲突
- 如果项目中有其他依赖间接引入了其他日志框架，需要排除它们：

```xml
<dependency>  
    <groupId>some.group</groupId>  
    <artifactId>some-artifact</artifactId>  
    <version>1.0.0</version>  
    <exclusions>  
        <exclusion>  
            <groupId>commons-logging</groupId>  
            <artifactId>commons-logging</artifactId>  
        </exclusion>  
    </exclusions>  
</dependency>  
```

---

# 自用的`logback`的配置

1. 按天归档
2. 归档文件自动压缩为 .gz 格式
3. ERROR 级别日志单独存放
4. 普通日志和错误日志都按天归档并压缩

```xml
<?xml version="1.0" encoding="UTF-8"?>  
<configuration>  
      
    <property name="log.path" value="/logs" />  
      
    <property name="app.name" value="myapp" />  
    
      
    <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">  
        <encoder>  
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern>  
            <charset>UTF-8</charset>  
        </encoder>  
    </appender>

<appender name="INFO_FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">  
        <file>${log.path}/${app.name}.log</file>  
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">  
              
            <fileNamePattern>${log.path}/${app.name}.%d{yyyy-MM-dd}.log.gz</fileNamePattern>  
              
            <maxHistory>30</maxHistory>  
              
            <totalSizeCap>2GB</totalSizeCap>  
        </rollingPolicy>  
        <encoder>  
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern>  
            <charset>UTF-8</charset>  
        </encoder>  
          
        <filter class="ch.qos.logback.classic.filter.LevelFilter">  
            <level>ERROR</level>  
            <onMatch>DENY</onMatch>  
            <onMismatch>ACCEPT</onMismatch>  
        </filter>  
    </appender>

<appender name="ERROR_FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">  
        <file>${log.path}/${app.name}-error.log</file>  
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">  
              
            <fileNamePattern>${log.path}/${app.name}-error.%d{yyyy-MM-dd}.log.gz</fileNamePattern>  
              
            <maxHistory>30</maxHistory>  
              
            <totalSizeCap>1GB</totalSizeCap>  
        </rollingPolicy>  
        <encoder>  
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern>  
            <charset>UTF-8</charset>  
        </encoder>  
          
        <filter class="ch.qos.logback.classic.filter.LevelFilter">  
            <level>ERROR</level>  
            <onMatch>ACCEPT</onMatch>  
            <onMismatch>DENY</onMismatch>  
        </filter>  
    </appender>

<appender name="ASYNC_INFO" class="ch.qos.logback.classic.AsyncAppender">  
          
        <discardingThreshold>0</discardingThreshold>  
          
        <queueSize>512</queueSize>  
          
        <appender-ref ref="INFO_FILE"/>  
    </appender>

<logger name="org.springframework" level="WARN" />  
    <logger name="org.hibernate" level="WARN" />  
    
      
    <root level="INFO">  
        <appender-ref ref="CONSOLE" />  
        <appender-ref ref="ASYNC_INFO" />  
        <appender-ref ref="ASYNC_ERROR" />  
    </root>

</configuration>
```

1. 两数之和

作者: zorth
时间: 2024-11-25
分类: 算法
评论

给定一个整数数组 `nums` 和一个整数目标值 `target`，请你在该数组中找出 **和为目标值** *`target`* 的那 **两个** 整数，并返回它们的数组下标。

你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。

你可以按任意顺序返回答案。

**示例 1：**

```
输入：nums = [2,7,11,15], target = 9
输出：[0,1]
解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。
```

**示例 2：**

```
输入：nums = [3,2,4], target = 6
输出：[1,2]
```

**示例 3：**

```
输入：nums = [3,3], target = 6
输出：[0,1]
```

**提示：**

- `2 <= nums.length <= 104`
- `-109 <= nums[i] <= 109`
- `-109 <= target <= 109`
- **只会存在一个有效答案**

---

这里直接不考虑通过暴力枚举来实现，靠谱的方法是通过哈希表：
1. 创建哈希表`hashtable`
2. 遍历整个`nums`数组，
3. 如果哈希表中不包含`target - x`，则把当前元素放入哈希表中；
4. 如果哈希表中包含`target - x`，则得出答案为`hashtable.get(target - nums[i]), i`

```java
class Solution {
    public int[] twoSum(int[] nums, int target) {
        Map<Integer, Integer> hashtable = new HashMap<Integer, Integer>();
        for (int i = 0; i < nums.length; ++i) {
            if (hashtable.containsKey(target - nums[i])) {
                return new int[]{hashtable.get(target - nums[i]), i};
            }
            hashtable.put(nums[i], i);
        }
        return new int[0];
    }
}
```

2024.11.25日记

作者: zorth
时间: 2024-11-25
分类: 日记
评论