liugang 发布的文章

如何理解HTML语义化

  • 让人更容易读懂(增加代码可读性)
  • 让搜索引擎更容易读懂(SEO)

注意事项:

尽可能少的使用无语义的标签 div 和 span;
在语义不明显时,既可以使用 div 或者 p 时,尽量用 p, 因为 p 在默认情况下有上下间距,对兼容
特殊终端有利;
不要使用纯样式标签,如:b、font、u 等,改用 css 设置。
需要强调的文本,可以包含在 strong 或者 em 标签中(浏览器预设样式,能用CSS 指定就不用他
们),strong 默认样式是加粗(不要用 b),em 是斜体(不用i);
使用表格时,标题要用 caption,表头用 thead,主体部分用 tbody 包围,尾部用 tfoot 包围。表
头和一般单元格要区分开,表头用 th,单元格用 td;
表单域要用 fieldset 标签包起来,并用 legend 标签说明表单的用途;
每个 input 标签对应的说明文本都需要使用 label 标签,并且通过为 input 设置id 属性,在 lable
标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。

function calculatePrefixSum(matrix) {  
    const rows = matrix.length;  
    const cols = matrix[0].length;  
    const prefixSum = new Array(rows + 1);  
  
    // 初始化前缀和数组的第一行和第一列  
    for (let i = 0; i <= rows; i++) {  
        prefixSum[i] = new Array(cols + 1).fill(0);  
    }  
  
    // 计算前缀和  
    for (let i = 1; i <= rows; i++) {  
        for (let j = 1; j <= cols; j++) {  
            prefixSum[i][j] = prefixSum[i - 1][j] + prefixSum[i][j - 1] - prefixSum[i - 1][j - 1] + matrix[i - 1][j - 1];  
        }  
    }  
  
    return prefixSum;  
}  
  
function sumSubmatrix(prefixSum, x1, y1, x2, y2) {  
    return prefixSum[x2][y2] - prefixSum[x1 - 1][y2] - prefixSum[x2][y1 - 1] + prefixSum[x1 - 1][y1 - 1];  
}  
  
// 示例用法  
const matrix = [  
    [1, 2, 3],  
    [4, 5, 6],  
    [7, 8, 9]  
];  
  
const prefixSum = calculatePrefixSum(matrix);  
const x1 = 1, y1 = 1, x2 = 2, y2 = 2;  
const sum = sumSubmatrix(prefixSum, x1, y1, x2, y2);  
  
console.log(`子矩阵(${x1}, ${y1}) 到 (${x2}, ${y2}) 的和: ${sum}`);

function calculatePrefixSum(array) {  
   const prefixSumArray = new Array(array.length + 1).fill(0); // 初始化长度为array.length + 1的前缀和数组,并全部填充为0  
   for (let i = 0; i < array.length; i++) {  
       prefixSumArray[i + 1] = prefixSumArray[i] + array[i]; // 计算前缀和,注意索引+1  
   }  
   return prefixSumArray;  
}  
 
// 示例用法  
const array = [1, 2, 3, 4, 5];  
const prefixSumArray = calculatePrefixSum(array);  
 
console.log("原始数组:", array);  
console.log("前缀和数组:", prefixSumArray);  
 
// 计算从索引i到索引j(包含j)的子数组的和  
function sumSubarray(prefixSumArray, i, j) {  
   return prefixSumArray[j + 1] - prefixSumArray[i]; // 注意索引+1  
}  
 
const i = 1; // 子数组的起始索引(从0开始)  
const j = 3; // 子数组的结束索引(从0开始)  
const subarraySum = sumSubarray(prefixSumArray, i, j);  
console.log(`子数组(${i}, ${j}) 的和: ${subarraySum}`);

@property 是一个在 CSS 中用于定义自定义属性(Custom Properties,也称为 CSS 变量)的规则。自定义属性允许你在 CSS 中定义一些值,并在其他地方引用这些值,以便在样式中重复使用。

以下是 @property 的基本用法:

/* 定义自定义属性 */
@property --main-color {
  syntax: '<color>';
  initial-value: black;
}

/* 使用自定义属性 */
.element {
  color: var(--main-color);
}

在这个例子中,@property 定义了一个名为 --main-color 的自定义属性,它的初始值为黑色。然后,通过使用 var(--main-color),你可以在其他样式中引用这个自定义属性,实现了在多个地方使用相同颜色的效果。

需要注意的是,@property 还需要浏览器的支持。虽然现代浏览器(如 Chrome、Firefox、Edge 等)支持自定义属性,但某些老旧的浏览器可能不支持。如果你需要广泛的浏览器兼容性,最好在使用自定义属性之前进行一些测试和检查。

此外,自定义属性的语法和用法还有更多高级特性,如支持不同类型的值、动态更新等。你可以在 CSS 规范中查找更多关于 @property 的信息和用法。