15 前端的简单总结（20200630）

主要内容

自定义属性：以data-开始
尽量少用id，原因有可能污染全局执行环境
一组items时选择某个item时首选type，而非child
多个css文件的嵌套引用@import
input中的各属性（字段位置）
grid适合页面的整体布局， flex适合细节处理
img处理中，宽与高只需要写一个，另一个会等比缩放
img中的alt已经要加上，哪怕为空

1. 自定义属性：以data-开始

示例

  <body>
    <!-- 自定义属性必须以data-开始 -->
    <p class="phpcn-intro" data-intro="php.cn">
      php中文网是php与前端开发者的乐园
    </p>
    <h3 class="phpcn-intro">Hello PHP.CN</h3>
    <!-- 任何一个html元素都有二种属性: 内置属性, 自定义属性 -->
    <label for="login">用户名：</label>
    <input type="text" name="username" data-index="自定义属性" id="login" />
    <script>
      const intro = document.getElementsByClassName("phpcn-intro").item(0);
      intro.style.backgroundColor = "red";
    </script>
  </body>

2. 尽量少用id，原因有可能污染全局执行环境

尽可能用class，不要用id
class或者其它属性的字符串值，如果涉及多个单词的时候，使用连接线进行连接，而不要用驼峰方式
全局环境是当前js所有代码所共享,如果给一个元素添加了id属性，将会自动创建一个同名的全局变量
js最怕的就是全局执行环境被全局变量给污染了
id主要用在二个地方: 表单元素，锚点

3. 一组items时选择某个item时首选type，而非child

分组选择的伪类: 首选。例如：

:first-of-type,
:last-of-type,
:nth-of-type(),
:nth-last-of-type(),
:only-of-type

不分组的方式进行选择子元素。例如：

:first-child,
:last-child,
:nth-child(),
:nth-last-child(),
:only-child()

4. 多个css文件的嵌套引用

在一个css文件中直接用@import来进行嵌套引用。这样在html中就只要link这个css一个就够了，其他css会直接被引用进来。

@import url("font/iconfont.css");
/* @import必须写在css文档的前面 */
/* 头部样式的模块 */
@import url(header.css);
@import url(footer.css);
.icon-gouwuchekong:before {
  font-family: "iconfont";
  content: "\e602";
  font-size: 5rem;
  color: green;
}

最后这块是通过伪类元素添加，同时改变iconfont的属性。“\e602”是对应的iconfont的位置或id。

5. input中的各属性（字段位置）

    <label for="email">邮箱:</label>
    <input
      id="email"
      class="my-email"
      type="email"
      name="email"
      value="admin@php.cn"
      placeholder="demo@email.com"
      autofocus
      required
    />

id,class通常在最前面
中间写上当前元素的内置属性
内置属性中的布尔属性，总是写在最后面

之所以因为这样，是为了长期快速编程做准备。例如如果格式等固定了。在js中就可以非常方便地进行调用和替换等。

    <script>
      const email = document.querySelector("input");
      const attrs = email.attributes;
      console.log(attrs);
      console.log(attrs[0]);
      console.log(attrs[1]);
    </script>

6. grid适合页面的整体布局， flex适合细节处理

7. img处理中，宽与高只需要写一个，另一个会等比缩放

      .box img {
        width: 100%;
      }

8. img中的alt已经要加上，哪怕为空

<img src="" alt="">