HTML标签

---

Attention！：个人笔记总结，可能会有错误，欢迎指正！

---

# 总结&理解输出

---

1、input

input元素有诸多属性，，是个很强大的元素。但实际上大部分属性只作用于特定一组 type。此外，一些属性作用于的方式取决于的属性，不同的type有不同的效果。

<input>
作用	可以用于充当按钮、复选框、日期控件、选择文件、单选按钮、密码输入等等，具体可查看MDN
重要的属性	（1）type：决定<input>标签能成为的内容

<form>
   <input
        ref={input} // 可以作为input对象被引用
        autoFocus   // 自动聚焦，当访问有该属性的input所在的页面时，ios系统会自动唤起软键盘，页面中使用fixed布局的元素会被顶上去
        className='my-input'
        value={inputContent}
        type='search' // 该属性在某些浏览器中会出现清屏叉号icon、搜索放大镜🔍icon
        placeholder={placeholder} // 设置
        disabled={disabled}
        onInput={handleInput}
        onFocus={handleFocus}
   />
</form>

input {
   outline:none;  //  去除点击时的边框
   border: none;  //去除默认自带的边框
   padding: 0;    //去除默认自带的padding（input自带的属性都可以在这里进行覆盖）
     
   &::-webkit-input-placeholder {
     color: red;  //自定义placeholder中的文字样式
   }    
   &::-webkit-search-cancel-button {
      display: none; // 去除叉号
   }
}