HTML基础大全

发表于 · 归类于技术 · 阅读完需 7 分钟 · 报告错误

写代码的时间少、忘得快，因此把基础的内容做个笔记。

（1）HTML5基础知识

HTML5 引入了许多语义化标签来帮助开发者更好地描述页面结构。除了你提到的 article、main 和 aside 标签，还有以下一些重要的语义化标签：

  1. header - 用于定义一个页面或区域的头部。它可以包含导航链接、网站logo等。
  2. nav - 用于定义页面的主要导航部分，通常包含指向其他页面或网站主要部分的链接。
  3. section - 定义文档中的独立部分，如章节、页眉、页脚或文档中的其他独立部分。
  4. footer - 定义页面或区域的底部，可以包含版权信息、联系方式等。
  5. figure - 用于表示媒体内容（如图片、图表、视频等）和其标题的容器。常与 figcaption 标签一起使用。
  6. figcaption - 用于为 figure 元素提供标题或说明。
  7. time - 用于表示时间或日期，可以是具体的时间点，也可以是时间段。
  8. mark - 用于高亮显示文本中的关键词或短语，以吸引读者注意。
  9. details 和 summary - 这两个标签组合使用，可以创建可折叠的详细信息块。details 包含了详细信息，而 summary 则提供了可点击的标题行。
  10. dialog - 用于表示对话框、提示框或模态窗口。它可以通过 JavaScript 控制显示和隐藏。

这些标签不仅有助于提高代码的可读性和维护性，还能增强网页的可访问性和搜索引擎优化（SEO）。

（2）CSS基础知识

CSS中声明变量
:root {  
  --main-color: #06c;  
  --padding-size: 10px;  
}
body {  
  background-color: var(--main-color);  
  padding: var(--padding-size);  
}
一个弹出层的css样式
#load-container {
    position: absolute;
    height: 100px;
    z-index: 9999;
}

（3）JAVASCRIPT基础知识

引入

<script src="http://xxxx.cn/jquery/3.6.1/jquery.min.js"></script>
JS基础
document.GetElementById("classname");
// 监听按键
document.onkeydown = function(e){
  console.log(e.keyCode);
}
map

map的使用

array.map(callback(currentValue, index, array), thisArg); // 全局格式

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

const names = ['Alice', 'Bob', 'Charlie'];
const upperCaseNames = names.map(name => name.toUpperCase());
console.log(upperCaseNames); // ['ALICE', 'BOB', 'CHARLIE']

numbers = numbers.map(function(number) {
    return number * number + 3; //y=x^2+3
});
module模块

module制作

// export 关键字导出模块的功能或数据
export const myFunction = function() {
  // 函数定义
};

export const myVariable = 'value';

module引入

<script type="module" src="xxx.js"></script>
<script type="module">
    import { myFunction, myVariable } from './myModule';
    myFunction();
</script>
Js把字节转为对应字节单位
function formatSize(bytes) {
  if (bytes === 0) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  let i = 0;
  for (i; bytes >= 1024 && i < units.length - 1; i++) {
    bytes /= 1024;
  }
  return bytes.toFixed(2) +' '+ units[i];
}

// 使用示例
const byteSize = 1048576; 
const formattedSize = formatSize(byteSize); 
console.log(formattedSize);

（4）JQUERY基础知识

$("div.continue").html("Next Step...");
// 定义对象、操作对象
var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function(event) {
    hiddenBox.show();
});
// 请求后端数据
$.ajax({
    url: "/api/getWeather",
    data: {
        zipcode: 97201,
        id : 60
    },
    success: function( result ) {
        $("#weather-temp").html("<strong>" + result + "</strong> degrees");
    }
});
$.post('/api/getWeather',{zipcode: 97201,id:60},function(res){
    if(res.code == 1){
        console.log(res);
    }
});
☰