《HTML编程基础》课件讲义.ppt

***************定位技术静态定位默认值，元素按照正常文档流进行布局。相对定位相对于元素的正常位置进行定位，不影响其他元素。绝对定位相对于最近的定位祖先元素进行定位，脱离正常文档流。固定定位相对于浏览器窗口进行定位，即使页面滚动也保持位置不变。浮动布局浮动的工作原理浮动元素会脱离正常文档流，向左或向右浮动，直到触碰到包含块的边缘或另一个浮动元素。清除浮动使用clear属性可以防止元素被浮动元素影响。常见的清除浮动技术包括使用伪元素::after和overflow:hidden。浮动的应用浮动常用于创建多列布局、图文混排等效果。但在现代网页开发中，Flexbox和Grid布局通常是更好的选择。弹性布局容器属性display:flex;将元素设置为弹性容器。flex-direction控制主轴方向，justify-content控制主轴对齐，align-items控制交叉轴对齐。项目属性flex-grow控制增长比例，flex-shrink控制收缩比例，flex-basis设置基准大小。order属性可以改变项目的排列顺序。弹性布局优势轻松实现垂直居中、等高列、动态尺寸调整等复杂布局。适应不同屏幕大小，是响应式设计的理想选择。网格布局网格容器使用display:grid;创建网格容器。grid-template-columns和grid-template-rows定义列和行的大小。网格项目使用grid-column和grid-row属性可以指定项目在网格中的位置和跨度。网格间距gap属性用于设置网格线的大小，可以分别为行和列设置不同的间距。对齐justify-items和align-items用于对齐网格项目，justify-content和align-content用于对齐整个网格。响应式设计1流式布局使用百分比而不是固定像素值来定义宽度，使布局能够适应不同屏幕大小。2弹性图片使用max-width:100%使图片能够缩小以适应容器，但不会超过原始大小。3媒体查询根据设备特性（如屏幕宽度）应用不同的样式，实现针对不同设备的优化布局。4移动优先先为移动设备设计，然后逐步增强以适应更大的屏幕，确保在所有设备上的良好体验。媒体查询基本语法@mediascreenand(max-width:768px){/*样式规则*/}这个例子在屏幕宽度不超过768px时应用样式。常用断点-移动设备：max-width:600px-平板：max-width:768px-桌面：max-width:1024px这些值可以根据具体需求调整。高级用法可以结合多个条件，如：@media(min-width:768px)and(max-width:1024px)and(orientation:landscape){/*针对横屏平板的样式*/}预处理器什么是CSS预处理器？CSS预处理器是一种脚本语言，扩展了CSS的功能，使CSS更易于维护和扩展。常见的预处理器包括Sass、Less和Stylus。变量允许定义和重用颜色、字体等值，提高代码的可维护性。嵌套允许以更直观的方式嵌套选择器，减少重复代码。混合（Mixins）可重用的代码块，类似于函数，可以接受参数。JavaScript简介什么是JavaScript？JavaScript是一种轻量级的、解释型的、面向对象的编程语言。它最初被设计用于在网页上创建动态交互效果。JavaScript的作用1.动态修改HTML和CSS2.响应用户操作3.发送和接收服务器数据4.创建复杂的交互体验JavaScript的特点1.客户端脚本语言2.解释型语言3.动态类型4.函数式编程支持JavaScript与HTML/CSS的关系JavaScript与HTML和CSS一起构成了现代网页的三大核心技术。HTML提供结构，CSS提供样式，JavaScript提供交互和动态功能。基本语法语句和注释语句以分号结束（可选但推荐）。单行注释使用//多行注释使用/**/变量声明使用var、let或const声明变量：varx=5;lety=Hello;constPI=3.14159;数据类型JavaScript的基本数据类型包括：Number,String,Boolean,Undefined,Null,Symbol(ES6)以及复杂数据类型Object变量与数据类型1数字（Number）包括