重要的前端入门技巧

html

块级元素与内联元素关系

• 级中可以包括一部分块级元素，并可以包含内联元素。内联元素中不包含块级元素，只可以包含内联元素。
• p标签虽然是块级元素，但不可包含其他块级元素p,h*1~6,dt这几个块级元素只可包含内联元素。
• li中可以包含
  .li标签的父标签不能是li
• 块级与块级并列，内联与内联元素相并列。（这点之前没注意，后面应注意使用）
• 有几个特殊的块级元素提倡只能包含内联元素，不能再包含块级元素，这几个特殊的标签是:h1、h2、 h3、h4、 h5、 h6、 p 、dt

http请求头：

• Cache-Control
  响应输出到客户端后，服务端通过该报文头属告诉客户端如何控制响应内容的缓存。

• 常见的取值有private、public、no-cache、max-age，no-store，默认为private。

• private: 客户端可以缓存

• public: 客户端和代理服务器都可缓存（前端的同学，可以认为public和private是一样的）

• max-age=xxx: 缓存的内容将在 xxx 秒后失效

• no-cache: 需要使用对比缓存来验证缓存数据

• no-store: 所有内容都不会缓存

• 默认为private，缓存时间为31536000秒（365天）也就是说，在365天内再次请求这条数据，都会直接获取缓存数据库中的数据，直接使用。

• ETag

• 一个代表响应服务端资源（如页面）版本的报文头属性，如果某个服务端资源发生变化了，这个ETag就会相应发生变化。它是Cache-Control的有益补充，可以让客户端“更智能”地处理什么时候要从服务端取资源，什么时候可以直接从缓存中返回响应。

• Location

• 我们在JSP中让页面Redirect到一个某个A页面中，其实是让客户端再发一个请求到A页面，这个需要Redirect到的A页面的URL，其实就是通过响应报文头的Location属性告知客户端的，如下的报文头属性，将使客户端redirect到iteye的首页中：

meta标签

• 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

• 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

• _<meta charset=“utf-8” name=“viewport” content=“width=device-width,
  initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0,
  user-scalable=yes”/>

• width=device-width ：表示宽度是设备屏幕的宽度

• initial-scale=1.0：表示初始的缩放比例

• minimum-scale=0.5：表示最小的缩放比例

• maximum-scale=2.0：表示最大的缩放比例

• user-scalable=yes：表示用户是否可以调整缩放比例

• 如果是想要一打开网页，自动以原始比例显示，并且不允许用户修改的话，则是：
  _<meta charset=“utf-8” name=“viewport” content=“width=device-width,
  initial-scale=1.0, minimum-scale=1, maximum-scale=1,
  user-scalable=no”/>

正则表达式

.

• ：匹配除换行符以外任意字符
  \w：匹配汉字、数字、字母、下划线
  \s：匹配任意空白字符
  \d：匹配数字
  \b：匹配单词的开始或者结束
  ^ ：匹配字符串的开始
  $ ：配置字符串的结束
  \g: 全局匹配
  反义匹配：
  ：字母大写I（\W）
  ：[^x]匹配除x以外的的字符
  ：[^aeiou]匹配除aeiou以外的的字符
  正则中的重复模式
  * 重复零次或更多次
  + 重复一次或多次
  ？ 重复零次或多次
  {n} 重复n次
  {n,m} 重复n到m次
  |分支条件代表或
  []字符类[）-]
  分组（）
  eg: (/d{3}[.]){3}将括号内的数当成一个组
  贪婪与懒惰：
  *? 重复任意次，但尽可能少重复
  +？ 重复一次或者多次 但尽可能少重复
  ？？ 重复0次或者1次 但尽可能少重复
  {n,m}？ 重复n次到m次 但尽可能少重复
  {n,}？ 重复n次到多次 但尽可能少重复

树形json数据遍历

function parseJson(jsonObj,id) {
            // 循环所有键
            for(var v in jsonObj){
                var element = jsonObj[v]
                // 1.判断是对象或者数组
                if( typeof(element) == 'object'){
                    parseJson(element,id)
                }else{
                    if(element == id){
                        console.log(v+':'+id)
                    }
                }
            }
        }

vue-cli3sass 引入

//新建vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
            @import "@/style/test.scss";
          `
            }
        }
    }
}