HTML属性及其相关区别

"爱欲之情和人情感的自然流露，是一种自然属性；但更重要的，爱是一种社会属性，宽容与奉献应该是爱的应有之意。HTML属性也是如此呀，但它们有不同的性格。"
——有心人做有心事，晚安EmilyChen！

---

（一）两种打包表单区别

属性	特点	应用
get	加到url，直接可见	书签，历史浏览
post	间接可见，请求发送量多	私密，订购，评论，反馈

（二）三种溯源区别

属性	特点	应用
url（uniform resource locator）统一资源定位符	联结的专业代名词	绝对路径一般以Web站点为根目录
	css特定	background: url（）
href	相对路径，连结引用	body超链接<a>、head文件链接<link>
src	相对路径，物件来源	图片<img>、音频<audio>``<video>、

（三）三种不显示区别

|属性 |特点 |应用 | | ---- | ---- | ---- | |display:none |不占原位，耗能高 |鼠标经过菜单 | |overflow:hidden |不占原位，内容溢出被砍掉，引起重绘，耗能少 |浮动、动画布局 | |visibility:hidden |占原位，引起回流重绘，耗能少 |动画 | |opacity:0 |占原位，重建图层，耗能少，可点击 |动画、自定义上传按钮 |

①reflow：当render树中部分或者全部因为宽高、边距等问题发生改变而需要重建的过程，叫做回流。
②repaint：当元素的部分属性发生变化，如：背景色不会引起布局变化而需要重新渲染的过程，叫做重绘。

（四）四种尺寸区别

|（默认）属性 |特点 |应用 | | ---- | ---- | ---- | |（16）px |固定值 |元素边框、定位 | |（1.6）rem |相对于根元素``，利用`font-size`控制全局变量，方便统一计算 |响应式布局、媒体查询 | |（1）em |相对于父元素 |响应式布局、组件 | |（100）% |相对于浏览器 |多列布局 |

（五）四种文本提示区别

|属性 |特点 |应用 | | ---- | ---- | ---- | |title |光标置于对象 |重要标题、信息点，如LOGO链接 | |alt |对象不能正常显示 |图片、动画 | |placeholder |仅作表单控件未输入值的背景 |表单输入，如`text``password```| |value |表单打包含该控件值 |表单按钮`button` | <br> <br>