一、HTML 基础与语义化1.1 HTML 文档结构HTML超文本结构化标记语言最基本的载体是网页的骨架用于定义内容结构。元素本身特性块级元素、内联级元素、内联块级元素。文档声明!DOCTYPE html声明文档类型为 HTML5。根元素html langzh-CN定义文档根元素并指定语言。头部head包含元数据如字符集、视口、标题等。meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title页面标题/title主体body包含所有可见的页面内容。1.2 常用语义化标签结构标签header、nav、main、article、section、search、aside、footer。容器标签span、div。文本标签h1至h6标题、p段落、strong重要、em强调。超链接标签a。窗口标签isframe。图片标签img。列表与表格ul/ol/li、table/tr/td。表单元素form。音频标签video、source(给音频提供多个格式文件)、audio。收集用户信息标签input。下拉框select。二、CSS 核心概念与布局2.1 CSS 引入方式与选择器引入方式内联样式、内部样式style、外部样式link。优先级内联样式外部内部。基础选择器元素选择器div、类选择器.class、ID 选择器#id。组合与伪类包含选择器div p、属性选择器input[typetext]、子选择器div p、相邻兄弟选择器div p、伪类:hover、:nth-child()、::first-letter/:focus、:checked。选择器写的越长越准确优先级越高、idclass元素选择器 同级别长度下按顺序执行。2.2 盒模型与定位盒模型是 CSS 布局的基础。标准盒模型内容区填充区边框区外边距类型块级盒子独占一行支持宽高例div、h1~h6、ul、li、p内联级盒子文本内容不支持宽高例span内联块级盒子不独占一行支持宽高例inputdisplay可以改变特性displayblock改为块级元素displayinline内联级元素displayinline-block内联块级元素2.3 布局方案Flexbox弹性盒子子元素默认始终横向布局填充padding从上开始顺时针设置边框borderborder-width、border-color、border-style:solid(直线)。可堆砌外边距margin元素与元素之间的距离从上开始顺时针设置auto水平居中补充box-sizing:border-box以边框作为边界此时的width、height是整个盒子的宽高布局flex-direction: ;——控制子元素排列方向row:默认值横向从左到右row-reverse:从右到左colum:纵向colum-reverse:纵向从下到上justify-content: ;——控制子元素的分布方式space-between空白分布在元素之间space-around空白分布在元素两侧space-evenly分割空白份数flex-start在排列方向开始的地方分布flex-end在排列方向结束的地方分布center居中align-items ——设置子元素在垂直方向上的对其方式space-betweenspace-aroundspace-evenlyflex-startflex-endcenter.container { display: flex; justify-content: center; /* 主轴对齐 */ align-items: center; /* 交叉轴对齐 */ }作用到子元素order:控制出现顺序order:1;整数、值越小越先出现拉伸与压缩flex flex-grow 拉伸因子占满父级(空白部分分成等份因子设为n则占空白n份)flex-shrink 压缩flex-basis ;以width/height为基准拉伸或压缩通常以宽度为基准传统布局floatfloatleft左浮动子级均设float且父级没有高度则父级将会“消失”父级后面兄弟会上移overflow:hidden;超出部分隐藏如果父级不设置高度则可以达到父级随子级高度变化而变化的效果内联块级元素布局display:inline-block;即使父级未设置高度也会被子级撑起但在html中元素之间换行造成空隙——解决父级font-size设为0但子级字体不显示需在子级设font-size