前端之星2020_4_8课程笔记

HTML部分概述：超文本标记语言标记标签有开始部分和结束部分。标签可以是自闭合的，并且可以使用属性和属性名称来描述标签。一个典型的html文档如下

段落内容

总体构建Dom树语法：标签和属性不区分大小写。建议使用小写。可以打开空标签。属性值可以用双引号括起来。有些属性值可以忽略，比如requiredreadonly。titleh1~h6listolunorderedulordereddldefinitionlistlinkaMediaobjectimgaudiovideoinputinput[placeholder:"",type:[range,number,text,data]]textarea选择多选单选下拉listsearchprompt(inputlistbinding)textlabelblockquotepciteqcodepreemstrong基于语义进行内容划分的标签headernavmainarticleasidefooterblock-level和row-level标签语义上遵循语义来写html哪里可以使用语义无需标签和样式来表达内容CSS部分CascadingStyleSheets级联样式表定义页面元素浏览器获取到htmlcss文件后，将html解析成dom树，浏览器会将解析后的css添加到dom节点中，形成展示页。css绑定过程如下：匹配选择器标签选择器id选择器类选择器属性选择器伪类选择器状态伪类结构伪类组合器名称语法描述直接组合AB满足AB后代组合AB如果B是后代则选择B的CombinationA>BSelectB如果B是A的子元素多个相同的样式可以使用选择器组来避免重复编码priority排版样式（设置字体和颜色）ColorRGB模式USL模式关键字选择alpha通道universalfontfamilySans-serifmonospacemonospace(中文一般是等宽字体)使用建议plusgeneralfontfamilyEnglishfontfamilywrittenbeforeChinesewebFontsurlfunctionfont-sizefont-weightlineheight每行文字之间基线高度差文字排版text-align文本对齐间距字母前单词之间的空格数text-indent首行缩进text-decorationtextdecorationwrite-space原始HTML空格的处理方式布局样式（设置位置和大小）可以通过改变标签表示方式display(block-levelrow-levelinline-blocknone)常规流框模型content-box其实有一个奇怪的框模型，不过这是目前标准模型border-boxpaddingmarginsettingorderuprightdownleft使用边框绘制atrianglemarginhorizo??ntallycentered其实就是让左右边距一样，也就是设置一个auto，上下边距mergeoverflow|排版上下文名称|生产条件||-|-||内联格式化上下文(IFC)|仅包含行级框容器将创建一个IFC||块格式化上下文(BFC)|一些元素会创建一个BFC|flexbox一维布局展示：flexflexbox中指定流向收缩和放大折叠和排序grid二维布局展示：grid划分网格grid-templatefrunit指定子元素网格区域开始和结束网格线表示浮动定位position类型规则静态默认值文档流相对原位置偏移不影响其他元素绝对最近的非静态祖先定位other当元素布局不存在时相对于页面窗口动画固定####变形变换不会影响其他元素的布局|方法|功能||-|-||翻译|翻译||旋转|轮值||缩放|而变化的坐标系就是元素坐标系####Transformationtransition从一种状态到另一种状态的过渡效果propty监控的属性durationeventtime-functiondelay延时等快慢匀速####动画定义关键帧(@keyframesname{percentage/fromto})绑定到元素上（给元素设置animation属性）响应式视口图片适配imgmax-width背景图片适配background-sizecontaincover@media不同尺寸的媒体查询使用不同图像（分辨率）rem单位