盒子模型：每个HTML元素都可以看作是一个矩形盒子，盒子模型表示该元素的宽度和高度以及它们的外部和内部间距。
盒子模型的类型：
内容区（Content）
这是盒子的实际显示内容区域，可以是文本、图片或其他元素。其宽度和高度由CSS属性width和height定义。
内边距（Padding）
内边距是在内容与边框之间的空间，形成盒子的内部边距。使用CSS定义：
.box{padding:10px;/*上下左右各10px的内边距*/}边框（Border）
边框包裹内边距和内容区域，边框的样式、宽度和颜色都可以设置。例如：
.box{border:1pxsolid#000;/*1px实线黑色边框*/}外边距（Margin）
外边距是盒子与外部元素之间的间隔，不影响背景色。可以通过CSS进行设置：
.box{margin:20px;/*上下左右各20px的外边距*/}盒模型类型
根据不同的盒模型计算方式，盒子大小的计算结果也是不同的。
可以通过CSS属性box-sizing进行控制：
/*标准盒模型*/.box{box-sizing:content-box;/*默认行为*/}/*IE盒模型*/.box{box-sizing:border-box;/*包括内边距和边框*/}2.HTML5的新特性2.1语义化元素HTML5引入了许多语义化的新元素，使得网页结构更加清晰：
HTML5支持多媒体，无需外部插件：
//使用LocalStorage存储数据localStorage.setItem("username","JohnDoe");console.log(localStorage.getItem("username"));//JohnDoe2.4表单控件的增强HTML5增加了一些新的表单控件，比如date,email,url和range等。
确保文件编码为UTF-8是避免乱码的有效方法。在HTML中，我们可以通过以下方式指定字符集：
Content-Type:text/html;charset=UTF-83.3数据库设置在数据库中存储数据时，也要确保使用UTF-8编码，例如在MySQL中，可以使用：
ALTERDATABASEmydatabaseCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ci;3.4文件保存在文本编辑器中保存文件时，选择UTF-8作为编码格式，以防止保存时产生乱码。
跨域是指在一个域（协议+域名+端口）下的脚本试图去请求另一个域的资源。在浏览器的同源策略下，出于安全考虑，跨域请求会被阻止。
Access-Control-Allow-Origin:*Access-Control-Allow-Methods:GET,POSTAccess-Control-Allow-Headers:Content-Type通过设置Proxy（代理）来避免跨域请求，前端请求先发送到同源的服务器，然后由该服务器转发请求到第三方。
通过设置代理服务器，在同源请求中转发请求。一般在开发环境中使用此方法。
$primary-color:#333;body{color:$primary-color;}@primary-color:#333;body{color:@primary-color;}primary-color=#333bodycolorprimary-color6.2为什么要使用预处理器7.什么是单页面应用（SPA）7.1单页面应用的定义单页面应用（SPA）是指一个Web应用程序或网站，它通过动态加载内容而不需要重新加载整个页面。用户在与应用交互时，浏览器会使用JavaScript在后台请求内容并更新页面，而不是每次都请求新页面。
响应式设计是一种网页设计技术，可以确保网站能够在不同设备上自动调整和适应布局，以便用户在电脑、平板、手机等各种设备上都具有良好的用户体验。通过使用媒体查询、弹性图片、流式布局等技术，设计响应式网站可以确保网页内容能够根据设备的尺寸和分辨率进行自适应，避免了传统网页固定布局的限制。
CSS3的媒体查询允许开发者根据设备的特性（如宽度、分辨率）来应用不同的样式。
/*适用于宽度小于600px的设备*/@media(max-width:600px){body{background-color:lightblue;}}8.2流式布局流式布局使得网页元素宽度可以相对于其容器进行设置，而不是固定值。这使得页面在不同尺寸的设备上都能够自适应。
.container{width:80%;/*百分比宽度*/margin:0auto;/*水平居中*/}8.3弹性布局（Flexbox）Flexbox布局可以轻松地进行一维布局，使得元素在空间变化时能够自适应对齐。
.container{display:flex;flex-wrap:wrap;/*允许折行*/}.item{flex:11200px;/*自适应宽度，最小宽度200px*/}5.4CSSGrid布局CSSGrid是一种实现二维布局的强大工具，可以将页面分割成网格，并控制元素的位置和大小。
.container{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));/*自适应列*/}