前端笔记

刚开始写前端，觉得一些知识真的很杂，属性真的很多（记不住啊），（写的很不系统，就是项目用到什么写什么，之后再做系统的汇总）

1. lang = “en” html中的lang属性，首先lang是language的缩写，“语言”，这个属性是设置文本语言，（en代表设置为英语），你会发现如若不设置lang属性，也没什么问题，那么是否设置lang属性有什么区别，区别在于：当lang属性设置的语言与浏览器中设置语言不一致时，会出现如下图，提示是否翻译
2. html中的kbd标签，用来定义键盘文本，表示文本是从键盘上输入的，常用在网页上快捷键的设置，或其他键盘操作的情况。
3. div 这个标签可以说是HTML中很常用的标签，常用div与css一起来实现对网页的布局和设置，可以吧div看做是一个一个的块，用div来实现对网页内容的分区，此外div默认宽度为100%，高度视内容而定，可以自行利用css设置div的宽度高度和其他一些属性。
4. class&id 在网页设计中常会用到class和id来选择调用css样式属性，两者又有什么区别，在什么情况下使用：class“类”，CSS样式中用.类名{} 来命名，调用时class = “类名”，在一个网页中可以多次调用class；id，CSS样式用命名用#id名{}，调用时根class调用相同id=id名，不同的是在一个网页中id只能调用一次，id代表着标签的身份。在js脚本中会用到id，当js要修改一个标签的属性是时，会将id作为标签的唯一标识，来对标签进行操作，因此在HTML中id调用只能出现一次。
5. 如何将CSS文件引入到html中：a.直接在html标签元素中嵌入CSS样式<div style = "font-size:14px"></div> b.在html头部style声明插入代码：<style type = "text/css"><!--CSS样式代码--></style>c.使用@import引入外部CSS文件<style type = "text/css"><!--@import url(.css文件)--></style> d.用link来调用外部的css文件（不需要style标签）<link rel = "stylesheet" href = ".css文件" type = "text/css"/>(link中的rel属性指定当前文档与被链接文档之间的关系)。
6. data-* 使我们能够在HTML的元素中嵌入自定义属性，包括两部分：a.属性名不含有任何大写字母，b.属性值可以是任意字符串。
7. 盒子模型中的content：用来显示内容，padding：内边距（content距边距的距离），border：边框的宽度，margin：外边距（边框到其他元素的距离）
8. font-family：规定元素的字体系列，可以有多种字体，浏览器不支持第一种字体会尝试下一个，浏览器会使用font-family中可识别的第一种字体。font-family书写时，每种字体用逗号隔开，始终提供一个类族名称作为最后选择（eg：serif，sans-serif等）。
9. display属性：每个网页元素都有一个display属性，例如：div默认display值为：block（“块级”元素），span默认为inline（“行内”元素）。块级元素占据一定矩形空间，可以设置宽高内外边距的值来调整矩形的样子，行内元素依附于其他块级元素存在，对其设置宽高等属性是无效的。
10. text-transform属性：控制文本的大小写，eg：uppercase只有大写，capitalize每个单词以大写字母开头等。
11. border的一些属性： border中指定边框的宽度，样式和颜色（例如：5px，solid，red）,边框的常用样式：solid（实线），double（双线)，dashed（虚线），dotted（点状）。border-radius：设置圆角，四个方向的值分别设置。按顺序（左上，右上，左下，右下）逗号隔开，省略部分值，省略时按对角线相等原则，若仅有一个值则四个角的圆角相等，若为两个值，则两个值分别对应左上，右上的圆角值，另外根据对角线原则，右下圆角等于左上，左下圆角等于右上。以此类推。与border-radius相似padding，margin四个方向上设置值时也是遵循对角线原则（顺序是上右下左）。
12. transition：样式之间的过渡，实现动画效果。需要设置四个属性：transition-property（应用过去的长css属性名称），transition-duration（过去效果花费时间），transition-timing-function（过渡效果的时间曲线默认ease），transition-delay（过渡效果何时开始）。
13. text-shadow：四个属性值：h-shadow(水平阴影，可为复负数，必需)，v-shadow（垂直阴影位置，可为负数，必需），blur（模糊的距离），color（阴影的颜色）。
14. background-size：中css3新增属性cover是指保持图像本身的宽高比例，将图像缩放到正好覆盖定义背景的区域。
15. script中的defer表示在页面加载完会后运行脚本。
16. background-size属性：为cover时，把背景图片扩展到足够大，使背景图片完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域内。为contain时，把图像扩展到最大尺寸，使其宽度高度完全适应内容区域。
17. flex布局-弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局：flex-direction（子元素的排列方向），flex-wrap（设置是否换行），justify-content（子元素在横轴上的排列），align-items（子元素在纵轴上的排列）。
18. 我们如果要在界面上加个按钮，可以用input或者button来添加，两者不同在于：用button来设置的按钮功能更加强大内容更加丰富，button标签中的内容可以是文本图片等多媒体文本。另外所有主流浏览器都支持button标签，若我们在表单中要使用按钮（例如：用来提交表单信息），最好用input来创建标签，用button创建的按钮，设置type=“submit”，不同浏览器提交的内容不同，有的提交的是<button></button>标签之间的内容，有的提交的是value属性的内容。