搜索制作安静书教程_制作安静书教程：从零开始学搜索与步骤详解

逻辑链完整性_逻辑链完整性的重要性：如何构建无懈可击的推理过程

　　一、HTML 　　1、web标准 　　2、文档类型 　　3、什么是HTML 　　4、HTML的骨架 　　5、标签 　　（1）常见标签 　　（2）H5新增标签 　　6、表格table 　　7、H5C3和Html，css相比有什么变化 　　（1）H5新增特性 　　（2）C3新特性 　　二、CSS 　　1、css三大特性 　　2、css样式分类 　　3、css样式 　　4、css选择器 　　5、标签元素分类和特点 　　6、说一下对浮动的理解 　　7、定位 　　8、常见的盒子模型有哪些，有什么区别 　　9、弹性盒模型有哪些属性和属性值，什么效果 　　10、圣杯布局（双飞翼布局）有哪几种实现方式 　　11、如何去掉相邻两个图片中间的白边 　　12、如何实现文字垂直水平居中，盒子垂直水平居中 　　13、单行文本溢出显示省略号，多行文本溢出显示省略号 　　14、光标cursor 　　15、响应式布局 　　16、像素 　　1、web标准 　　结构标准：HTML统一规范 　　表现标准：CSS统一规范 　　行为标准：JS统一规范 　　2、文档类型 　　标签作用：声明了文档类型 　　3、什么是HTML 　　HTML：超文本标记语言，用来描述网页的一种语言。所谓超文本，可以加入图片、声音、动画、多媒体等内容，不仅如此，还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接 　　4、HTML的骨架 　　html：根标签 　　head：头部标签，主要设置网站的属性 　　body：主体标签，主要书写网站内容 　　meta：标记元素（元标签），用于定义与网页相关的元信息，包括字符编码、作者、关键词及页面刷新等，被浏览器和搜索引擎解析以控制功能或优化索引，但不直接显示在页面中。 　　5、标签 　　（1）常见标签 　　hn（1<=n<=6）：标题标签，独占一行 　　p：段落标签，一个段落结束后，另起一行 　　br：换行标签，单标签、自动换行 　　hr：水平线标签，width宽度，size高度 　　div：盒子标签，独占一行、包含任意元素 　　span：范围标签，不换行 　　b/strong：加粗标签，不换行 　　i/em：倾斜标签，不换行 　　u/ins：下划线标签，不换行 　　s/del：删除线标签，不换行 　　img：图标标签，src（路径）、title（标题，光标移入图片上会显示title的属性值）、alt（当图片不显示时会显示图片的属性值）、width(图片的宽度，不加单位）、height(图片的高度，不加单位）、border（图片的边框）、target（_blank新窗口打开、_self默认，在相同框架中打开，_parent在父框架中打开、_top在这个窗口打开、framename在指定的框架中打开） 　　a：链接标签，href（跳转的地址，添加href属性后，默认有下划线和字体颜色的变化），text-decoration:none删除下划线 　　audio：音频标签，controls音频控件、loop循环播放、muted静音 　　video：视频标签，controls视频控件、loop循环播放、muted静音 　　（2）H5新增标签 　　nav：导航标签 　　aside：侧导航标签 　　button：按钮标签 　　article：文章标签 　　progress：进度条标签 　　footer：底部标签 　　6、表格table 　　tr：行标签 　　td：单元格标签 　　cellspacing：边框与边框之间的距离，相当于margin 　　cellpadding：单元格内容与边框之间的距离，相当于padding 　　caption：标题 　　align：表格的位置，left/right/center 　　rowspan：跨行合并 　　colspan：跨列合并 　　table只包含caption、thead、tbody、tfoot、tr 　　tr只包含tr、td 　　td可以包含任意标签 　　7、H5C3和Html，css相比有什么变化 　　（1）H5新增特性： 　　①、语义化标签：如header、nav、footer、aside、article、section等。 　　②、音频（audio）、视频（video） 　　③、表单属性：placeholder、autofocus自动获取焦点、required校验、maxlenght、                                                minlength、 novaildate不校验表单 　　④、输入框类型：email、url、number、search、range、color、time、date、month 　　（2）C3新特性： 　　①、选择器：属性选择器、伪类选择器、伪元素选择器 　　②、颜色：rgba、hsla表示方式 　　③、阴影：盒子阴影（box-shadow）文字阴影（text-shadow） 　　④、边框：圆角border-radius 　　⑤、怪异盒子模型：box-sizing 　　⑥、背景剪切：背景色剪切：background-clip背景图剪切：background-origin 　　⑦、渐变：线性渐变：linear-gradient 径向渐变：radial-gradient 　　⑧、转换：transfrom 缩放拉伸scale 扭曲skew 平移translate旋转rotate 　　⑨、过渡：transition可以实现动画 　　⑩、动画animate 　　1、css三大特性 　　层叠性：后边的样式覆盖前边的样式、就近原则 　　继承性：后代元素继承祖先元素的样式、亲代优先继承、元素本身的样式大于继承的样式 　　优先级 　　2、css样式分类 　　行内样式 　　内部样式：在head中写的style 　　外部样式：引入的样式（rel：文件类型） 　　3、css样式 　　（1）字体样式 　　font-size：字体大小，普通文本文字默认16px，最小12px 　　font-family：字体家族，默认宋体 　　font-style：font-style，默认normal，italic/oblique：倾斜的 　　font-weight：加粗，normal正常、bold加粗、100~900加粗 　　font：综合设置，font-style、font-weight、font-size、font-family 　　（2）颜色样式：color: rgb(红、绿、蓝)：0~255 　　（3）text-decoration: underline(下划线)、line-through(删除线)、overline(上划线) 　　（4）首行缩进：text-indent: 2em 　　（5）文字间隔：letter-spacing:10px 　　（6）背景色：background-color：rgba:0~1(0：完全透明，1：完全不透明) 　　opacity:0~1(0：完全透明，1：完全不透明) 　　（7）背景图片：background-image: url(路径) 　　背景图片平铺：background-repeat: no-repeat(显示一张)，默认显示多张 　　背景图片尺寸：background-size: X轴  Y轴：800px(80%)  600px(60%) 　　背景图片位置：background-position: left/right/top/bottom/center/100px/100% 　　（8）边框：border:solid(实线)、dashed(虚线)、dotted(点线)、double(双实线) 　　边框会影响盒子的尺寸大小 　　去掉边框：border: 0/none 　　（9）内边距：padding 　　综合设置：padding：4个属性值：上、右、下、左 　　3个属性值：上、左右、下 　　2个属性值：上下、左右 　　1个属性值：上下左右 　　内边距会影响盒子的尺寸大小 　　（10）外边距：margin 　　综合设置：margin：4个属性值：上、右、下、左 　　3个属性值：上、左右、下 　　2个属性值：上下、左右 　　1个属性值：上下左右 　　外边距不会影响盒子的尺寸大小 　　（11）元素显示与隐藏： 　　display: none(隐藏)/block(显示)：将元素完全移除了 　　不占位置 　　点击不可交互 　　visibility: hidden(隐藏)/visible(显示)：没有删除元素，还在文档中，只是让元素隐藏了 　　占位置 　　点击不可交互 　　opacity: 0：透明度，不是隐藏 　　占位置 　　点击可交互 　　overflow: hidden：隐藏溢出的内容 　　4、css选择器 　　（1）css选择器分类 　　css选择器：基础选择器、复合选择器、伪类选择器 　　基础选择器：通配符选择器（*）、标签选择器、类名选择器、多类名选择器、id选择器 　　复合选择器：交集选择器（p .pro）、并集选择器（h3,p,.sec{}）、子代选择器（父元素>子元素）、后代选择器（父元素  子元素） 　　伪类选择器：a标签的伪类：:link(未点击)、:hover(鼠标移入)、:active(点击时)、:visited(已访问) 　　（2）css选择器优先级 　　在同一元素下：通配符选择器<标签选择器<类名选择器 　　flex-grow：定义项目的放大比例，默认为0。 　　flex-shrink：定义项目的缩小比例，默认为1。 　　flex-basis：项目占据的主轴空间。 　　flex：flex-grow、flex-shrink和flex-basis的简写。默认值是0,1，auto 　　align-self:设置个别项目在交叉轴（Y轴）上的对齐方式 　　10、圣杯布局（双飞翼布局）有哪几种实现方式 　　（1）定位 　　让左右两边的盒子绝对定位，左边盒子left:0，右边盒子right:0，绝对定位盒子不占位置，中间的盒子padding左右宽度为左右两边盒子的宽度保留左右盒子的位置 　　（2）使用浮动加calc计算属性 　　让所有盒子左浮动，左右两边的盒子宽度固定，中间盒子的宽度通过calc计算属性动态计算得出即中间盒子的宽度为100%减去左右两边的盒子总宽度 　　（3）使用flex布局 　　通过父元素设置flex布局，让盒子在一行显示，左右两边的盒子固定宽度，而父元素的剩余宽度则为中间盒子的宽度flex:1 　　11、如何去掉相邻两个图片中间的白边 　　img是内联块状元素，默认之间是存在缝隙的。要去除缝隙有两种方法： 　　（1）设置包含img的盒子font-size属性为0 　　（2）设置img为block元素，然后加浮动 　　12、如何实现文字垂直水平居中，盒子垂直水平居中 　　单行文字水平居中：text-align：center； 　　单行文字垂直居中：line-hight：盒子高度； 　　多行文字水平居中：text-align：center； 　　多行文字垂直居中（父盒子有宽高，均为200px）： 　　（1）父盒子：display: table; 　　文字：display: table-cell; 　　vertical-align: middle; 　　（2）文字：display: inline-block; 　　position: relative; 　　top: 30%; 　　transform: translateY(-30%); 　　（3）父盒子：display: flex; 　　align-items: center; 　　盒子居中：①子盒子：绝对布局: position: absolute; 　　left: 50%; 　　top: 50%; 　　transform: translate(-50%,-50%); 　　②子盒子：绝对布局：margin:auto; 　　top、left、right、bottom的值相等即可 　　③父盒子：flex布局： display:flex; 　　justify-content:center; 　　align-items:center; 　　13、单行文本溢出显示省略号，多行文本溢出显示省略号 　　（1）单行文本：white-space: nowrap ;overflow: hidden; text-overflow: ellipsis; 　　（2）多行文本（以2行为例）：overflow: hidden; 　　text-overflow:ellipsis; 　　display: -webkit-box; 　　-webkit-line-clamp: 2; 　　-webkit-box-orient: vertial; 　　14、光标cursor 　　cursor：default(默认)、pointer(小手)、text(文本)、move(移动) 　　15、响应式布局 　　响应式布局：是一个网页能够兼容多个终端 　　16、像素 　　px：绝对定位 　　em：相对单位，相对于父元素 　　rem：相对单位，相对于根元素（html）

9.1cpcOOL应用