一名【合格】前端工程师的自检清单---自我检测
以下只是个人学习的过程，有不对的地方欢迎指出
一、HTML和CSS
HTML
1、从规范的角度理解HTML，从分类和语义的角度使用标签
1.1、HTML
- HTML 是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种
标记语言 (markup language) - HTML作为一门标记语言，更重要的作用是作为信息的呈现载体，注重信息的呈现形式。
1.2、分类： 行内元素，块级元素，空元素
- 行内元素有：
a b span select strong（强调的语气） - 块级元素有：
div ul ol li dl dt dd h1 h2 h3 h4…p - 行内块元素：
img, input, textarea - 常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
1.3、语义化
- 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
2、常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式
image.png
2.1、IE11兼容问题
- 去除input输入框默认在ie或者edge下出现删除按钮
input::-ms-clear{display: none;}// ::-ms-clear 是文本清除button，也就是input右方的叉叉
input::-ms-reveal{display: none;}// ::-ms-reveal是password查看button，也就password框右边的小眼睛。
input::-o-clear{display: none;} //去除edge下的删除按钮
- 部分问题
1、在谷歌写position样式的时候，left或者bottom这些值为0的时候，不写也是可以正常展示的；但是IE11是不可以的，这些样式都要写全；
2、flex布局：flex-start布局的时候，右边的盒子一般不写flex: 1（个人而言）；但是在IE11 中若是右边的盒子没有flex: 1这个样式，左右两个盒子会是justify-content: space-between;（两端对齐）的布局样式
未写flex：1
image.png
写
flex：1后
image.png
- vue.js单页面，在IE11不支持使用ES6语法
<script src="js/polyfill.min.js"></script>
<script src="js/browser.min.js"></script>
// type="text/babel" 一定要加！！！
image.png
- vue-cli项目,ie11浏览器报Promise未定义的错误
报错：
{description: "“Promise”未定义", message: "“Promise”未定义", name: "ReferenceEr...", number: -2146823279, stack: "ReferenceEr..."}
解决办法
cnpm install babel-polyfill --save- 在main.ts中
import 'babel-polyfill' - 如果使用了vuex，则在vuex的index.ts文件中也要
import 'babel-polyfill'，最好放在import Vuex from 'vuex'的前面
3、元信息类标签(head、title、meta)的使用目的和配置方法
元信息，就是描述自身的信息。元信息类标签，就是HTML用于描述文档自身的一类标签。
//普通html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<link rel="stylesheet" type="text/css" href="theme.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
-
<html lang="en">lang：规定 XHTML 文档中元素内容的语言代码
-
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />link 标签：用于引入外部的文档，常用到引用css样式或icon图标
rel属性是link标签的核心（stylesheet 外部样式表/icon 网站图标）
href 属性规定被链接文档的位置（URL）
media 属性规定被链接文档将显示在什么设备上(可以实现在不同设备使用不一样的css样式)，media属性值如下：
例子：
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
media属性值如下：
image.png
注意：在 HTML 中，<link> 标签没有结束标签,在 XHTML 中，<link> 标签必须被正确地关闭 -
<meta name="参数"content="具体的参数值">
name 主要用于描述网页，与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.
视图模式：
<meta name="viewport" content="
width=device-width, //viewport的高度,宽度为使用手机的宽度
initial-scle=1.0, //初始的缩放比例
maximum-scale=1.0, //允许用户缩放到的最小比例
minimum-scale=1.0, //允许用户缩放到的最大比例
user-scalable=no"> //用户是否可以手动缩放
关键字： 用来告诉搜索引擎你网页的关键字是什么
<meta name="keywords"content="science,education,culture,politics,ecnomics，relationships,entertaiment,human">
description: name='description'网站内容描述
<meta name="description"content="这是一个学习的网站">
robots： 机器人向导,用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引
content的参数有all,none,index,noindex,follow,nofollow。默认是all
<meta name="robots"content="none">
author : 标注网页的作者
<meta name="author" content="root,root@xxxx.com">
rendere : 渲染模式
<meta name="renderer" content="webkit">
<meta http-equiv="参数"content="参数变量值">
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
X-UA-Compatible 浏览模式
<meta http-equiv="X-UA-Compatible" content="IE=5" />
content值： IE=7/IE=8/edge 以谁的标准渲染模式
