HTML+CSS+JS

html

html基础标签：HTML基础标签

<div></div>
<span></span>
<font color = "red" >正文 </font> ：定义文本的字体、字体尺寸、字体颜色（css完成）
< h1> ~< h6> //标题

< hr>：定义水平线

< b>：定义粗体文本

< i>：定义斜体文本

< u>：定义文本下划线

< center>：定义文本居中(css完成)

< p > ：定义段落

< br>：定义换行

<img src='' >//图片

<audio src=' ' controls /> 音频 //controls:显示摇放控件

<video src=' ' controls />//视频

css

 input光标居中

text-align: center;

10px字符

font-size: 10px;

transform: scale(0.8);//10px

js

基础代码

let $ = document.querySelector.bind(document)
let $All = document.querySelectorAll.bind(document)
const btnlist = $All('.text') //使用

使用资源

动态生成布局html,JS中动态创建元素的三种方法总结(推荐)_小刘庄主的博客-CSDN博客

1.动态设置背景图片

setTimeout(() => {

  const icon='./image/bar-icon/ai.png'

  const item = document.querySelector('.item')

  item[0].style.background = `url(${icon}) no-repeat 100% 100%`

}, 100);

创建dom

function RightTriangle() {

  for (var j = 1; j < 6; j++) {

    for (var i = 1; i <= j; i++) {

      document.write('☆')

    }

    document.write('<br/>')

  }

}

RightTriangle()

 动态创建标签

一、 document.createElement

 const box= document.querySelector('.box')//获取box标签

  var li = document.createElement('li')//创建li标签

  li.innerHTML = 'hhh'//标签的内容

  box.appendChild(li)//将li标签追加到box标签中

.添加点击事件

let typeId = 0
//添加点击事件
for (var i = 0; i < btnlist.length; i++) {
  btnlist[i].onclick = function (i) {
    //防抖
    if (typeId != i) {
      btnlist[i].classList.add('active')
      btnlist[typeId].classList.remove('active')
      typeId = i
    }
  }.bind(btnlist[i], i)
}

3.添加和删除class类名 

btnlist[i].classList.add('active') //添加

btnlist[typeId].classList.remove('active') //删除