一些小笔记

常用标签

h标签（标题标签）	加粗、变大、独占一行、h1-h6越来越小
p标签（段落标签）	段落间距、独占一行
br标签（单标签）	强制换行
hr标签（单标签）	水平线/分割线（分割战场）
img标签（单标签、图片标签）	展示对应效果需要借助特殊属性；制作网页与图片在同一路径下可以直接输入（需写全后缀名 如.jgp、.gif……）或输入”./“
src（必写属性）	目标图片路径，错误路径是加载失败
alt	替换文本，当图片路径错误，会使用文本代替
title属性（提示文本）	用于文字描述，可以写入其他标签，鼠标悬停在上面会显示相关标题
title标签（用于网址id）	网页标签
width标签	设置目标宽度，只设置一个的时候，另一个会等比例缩放
height标签	设置目标高度
ul标签	ul里面只能用li标签，放其他标签只能用li装
ol标签（无序列表_了解）	ol里只能放li标签
li标签（有序列表）	相当于一个容器，可以在里面放任何标签

 ps: 各标签之间的关系（嵌套关系/套娃；并列关系）

列表标签

dl 表示自定义列表的整体（只允许包含dt与dd）
dt 表示自定义列表的主题（标题）
dd 表示自定义列表的每项解释说明（默认显示缩进效果）

表格标签

table	用于包裹多个tr                    嵌套关系table>tr>td
tr	表示每行 用于包裹td
td	表示单元格
border	边框宽度  写在属性里面 推荐使用css设置
width	表格宽度
height	表格高度
caption	表格大标题 默认在表格整体顶部合并单元格居中显示 ，文字可以用h标签
th	表头单元格 表示一列小标题，通常用于表格第一行，默认文字加粗并居中
caption	写在table内部   th 写在第一行tr里面 tr表示标签

表格结构标签

thead	表格头部
tbody	表格身体
tfoot	表格底部

结构标签用来包裹tr 结构更加清晰 没有其他作用
        合并单元格 → 代码实现
上下合并→只保留最上面的，删除其他
左右合并→只保留最左边的，删除其他
跨行合并 rowspan 合并的时候需要删除不同tr下选中格数的内容（合并不同tr下的单元格）
跨列合并 colspan 合并的时候需要删除同tr下选中格数的内容（合并同一tr下的单元格）

表单标签

input（输入框）	可以通过不同type标签表示不同属性
text（文本框）	文本框 显示输入的东西  如 qq账号
password（密码框）	显示输入的东西 如 qq密码
radio（单选框）	例：性别选择
name（分组）	有相同name属性的单选框为一组，一组中同时只能有一个能被选中
checked	默认选中
checkbox（多选框）	例：选择兴趣
file（文件选择）	用于上传文件
multiple	多文件选择
submit	提交按钮 用于提交数据给后端服务器
reset（重置按钮）	点击后恢复表单默认值
value	修改按钮id
button	普通按钮，默认无功能 之后配合js添加按钮
要想实现以上功能 需要配合form标签使用
placeholder（占位符）	增强用户体验感 如 请输入手机账号
label	把文本包裹

路径

绝对路径	可移植性低、可以跨盘符，例如： ”某盘:\某文件夹\某音频、图片“（可移植性不高）
相对路径	可移植性高、不能跨盘符
同级路径	目标文件在同一路径中 “ ./ ”
下级路径	目标文件在下级路径中，类似俄罗斯套娃“ ./ ”
上级路径	目标文件在上级路径中，“ ../ ”返回上一级文件，一个“ ../ ”代表一层上级文件
同级与下级写./查找、上级写../查找     查询步骤：默认当前网页文件夹，根据”./“或者”../“来找到目标位置

文本格式化标签

b	加粗
strong	加粗
u	下划线（不常用）
ins	下划线（不常用）
i	倾斜（常用作小图标）
em	倾斜（常用作小图标）
s	删除线
del	删除线
常用：strong、i、em、del

媒体标签

audio	音频路径
controls	显示播放控件
autoplay	自动播放（部分浏览器不支持，如谷歌）
loop	循环播放
以下标签写在音频后面，三个可以叠加，目前只支持MP3、Wav、Ogg类音频 兼容性写法（了解）
source src=”***.mp3“ source src="***.wav" source src="***.ogg"	版本太低，请更新（如果都不支持，会显示自己自定义的文本）
video src（同音频)
muted	多一个静音播放
链接标签（a标签、超链接、锚链接）	a href：双标签中间可以设置文本，点击之后跳转到指定网页
外部链接（必须写https：//）	http://www.baidu.com/     PS: http+s（安全协议）https
内部链接（相对路径）	./目标网页.html         PS：”./""../"
空链接（回到页面顶部）	不填链接或者写#（现在没有链接，以后会有）点击空链接会回到当前页面顶部
空链接（不回页面顶部）	链接里面填JavaScript
下载链接	链接里填 目标网址.zip
图片链接	填文本的地方用img链接
target=_blank（默认改成blank）	在新页面中打开网页 原网页保留  写在链接后

快捷键功能

Ctrl+c	复制
Ctrl+v	粘贴
Ctrl+x	剪切
shift+alt+↑/↓	向上/下换行复制
Alt+z	文本自动换行
无视光标换行	Ctrl+Enter
批量复制与粘贴	按住滚轮键拖动鼠标批量选取，复制后剪切 同样的方法选择目标标签粘贴 按住滚轮键拖动鼠标可以批量选取

字符实体化

空格 &nbsp	几个空格用几个
小于号 &lt
大于号 &gt

APIs

-获取事件对象

简写（e）： btn.addEventListener('click', function (e) {}

-部分常用属性

type  
获取当前事件类型

clientX/clientY  
获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY 
 获取光标相对于当前DOM元素左上角的位置

key  
用户按下的键盘键的值；
现在不提倡使用keyCode
需要单独设置键盘事件（keydown、keyup）：
let input = document.querySelector('keydown', function (e) {}

设置快捷键
let input = document.querySelector('keydown', function (e) {
     if (e.key === 'Enter') {
     console.log('发布成功');
   }
 })

-事件流
事件完整执行过程中的流动路径

流程：
捕获阶段_事件查找_父级向子级逐层进行查找
到达目标_事件捕获
冒泡阶段_事件触发_子级向父级逐层进行触发事件

事件冒泡概念：
当一个元素触发事件后，会依次向上调用所有父级元素的同名事件例：（‘click’）
事件冒泡是默认触发的

事件捕获概念：
事件捕获需要写对应代码才能看到效果

若注册事件时填写第三个参数：布尔型（true/false）
true：事件在捕获阶段完成（不再是从子级开始到父级的顺序 而是数据捕获的顺序）
false：事件在冒泡阶段（默认）
 父子执行相同事件：click

-阻止事件流动
创建事件对象：function(e)_在括号里写e

dad.addEventListener('click', function (e) {
alert('father')
            // 让这个属性父级的属性不再冒泡
            e.stopPropagation()
        })

-鼠标经过事件
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)

-阻止事件流动
阻止默认行为：点击超链接不跳转到链接的网页 

a.addEventListener('click', function (e) {
            // 阻止超链接跳转
            e.preventDefault()
        })

获取宽高：
    获取内容总宽高（不包含滚动条）返回值不带单位
    scrollwidth和scrollheight（内容+padding）
    offsetwidth和offsetheight (内容+padding+border）
    获取盒子尺寸 若内容较多，能撑开父级也只计算盒子本来的宽高
    clientwidth和clientheight（内容+padding）