《HTML编程基础》课件讲义

编程基础HTML欢迎来到编程基础课程在接下来的课程中，我们将深入探讨网页开发HTML的核心技术从的基本结构到高级布局技巧，再到的动态交HTML JavaScript互，我们将全面介绍现代网页开发所需的关键知识和技能无论您是初学者还是希望提升技能的开发者，本课程都将为您提供全面而实用的指导让我们一起开始这段激动人心的网页开发之旅吧！简介HTML的定义HTML（超文本标记语言）是创建网页的标准标记语言它描述了网页的HTML结构，告诉浏览器如何显示内容的历史HTML由在年发明，经过多年发展，现在已经发展到版本HTML TimBerners-Lee1989HTML5的重要性HTML作为网页的骨架，是每个网页开发者必须掌握的基础技能它与HTML和共同构成了现代网页技术的三大支柱CSS JavaScript基本结构HTML文档类型声明元素元素元素html head body每个文档都以开始，告元素是所有页面元素包含元数据，如页元素包含所有可见的内HTML htmlHTML headbody诉浏览器这是一个文的根元素，包含和面标题、字符集声明和样式表容，如文本、图像和链接HTML5headbody档两个主要部分链接标签HTML开始标签和结束标签大多数元素由开始标签和结束标签组成，如HTML和元素内容位于这两个标签之间空元素一些元素没有内容，被称为空元素它们只有一个标签，如或嵌套标签元素可以相互嵌套，形成层次结构正确的嵌套对于创建有效的文档至关重要HTML HTML大小写不敏感标签对大小写不敏感，但建议使用小写，以保持代码的一致性和可读性HTML元素HTML块级元素1块级元素在页面中占据一整行空间，如、和到它们通常用于组织页面的主要部分内联元素内联元素只占据它们内容所需的空间，如、和它们通常用于文本内的小部分样式或功能内联块元素内联块元素结合了块级和内联元素的特性，如它们可以设置宽度和高度，同时又能与其他元素并排显示属性HTML属性的作用属性为元素提供额外的信息，如链接的目标、图像的尺寸或表单控件的类型HTML属性的语法属性总是在开始标签中指定，格式为名称值值应该始终被引号包围=常见属性一些常见的属性包括（用于样式）、（用于唯一标识元素）和（指定图像或脚本的源文件）class CSSid src文本标签标题标签到用于定义六个级别的标题，最重要，最不重要段落标签标签用于定义段落，浏览器会在段落前后自动添加一些空白格式化标签（加粗）、（斜体）、（下划线）等用于文本格式化换行标签标签用于在不开始新段落的情况下换行链接标签基本链接1链接文本目标属性2在新窗口打开链接target=_blank内部链接3链接到页面内的特定部分href=#id下载链接4属性指定下载文件名download图像标签基本语法重要属性响应式图像标签用于在页面中嵌入图像它是指定图像文件的提供图使用的可以使图HTML srcURL altCSS max-width:100%一个空元素，不需要结束标签基本语法像的文字描述，用于无法显示图像时像在小屏幕设备上自适应的HTML5为和指定图像的宽度和高度属性允许为不同设备提供不同分辨width heightsrcset率的图像列表标签无序列表使用标签创建无序列表，每个列表项用标签适用于项目之间没有特定顺序的情况•有序列表使用标签创建有序列表，每个列表项同样用•标签适用于项目需要按特定顺序排列的情况定义列表使用标签创建定义列表，用于术语，用于描述适用于术语及其解释的列表嵌套列表列表可以嵌套，创建多层次的结构这对于创建复杂的内容层次非常有用表格标签1表格结构定义整个表格，定义行，、和用于将表格分组，提高结构性和可读性单元格合并和属性用于合并列和行，创建复杂的表格布局colspan rowspan定义单元格用于表头单元格表格标题标签用于添加表格标题，通常显示在表格顶部表格分组表单标签表单结构输入元素选择元素标签定义整个表单，属性指定表单数标签用于创建各种输入字段，如文本框、复和标签用于创建下拉列表，用于多行文本输action据的提交地址，属性指定提交方法选框、单选按钮等属性决定输入类入method type/P/DIV DIVIMG（或）型GET POSTtype=icon query=submit/H4提交按钮/H4Pinput或type=submit button用于创建提交按钮，触发type=submit表单提交/P/DIV/ICONSIMG query=html formelementsexamples//SECTION文档中的节侧边栏页脚语义化的好处提高可访问性改善增强代码可读性便于样式设置和维护

1.

2.SEO

3.

4.新特性HTML5多媒体支持和标签原生支持音频和视频播放，无需插件图形和效果标签用于绘制图形，用于可缩放矢量图形存储和提供了客户端存储解决方案localStorage sessionStorage地理定位允许网站获取用户的地理位置（需用户许可）Geolocation API布局技术传统布局1使用表格和框架（不推荐）浮动CSS2属性实现简单布局floatFlexbox3一维布局模型，适合行或列布局Grid4二维布局模型，适合复杂网格布局入门CSS什么是？的优势引入方式CSS CSS CSS（层叠样式表）是用于描述文分离内容和表现提高网页加载速度内联样式（属性）内部样式表（CSS HTML

1.

2.

1.style

2.档样式的语言它控制网页的布局、颜色、便于维护和更新实现响应式设计

3.

4.字体等视觉效果选择器CSS元素选择器类选择器直接选择元素，如选择特定类的元素，如HTML p{color:blue;}.highlight{background:yellow;}选择器属性选择器ID选择特定的元素，如根据属性选择元素，如ID#header{font-size:24px;}[type=text]{border:1px solidgray;}伪类选择器组合选择器选择元素的特定状态，如组合多个选择器，如a:hover{text-decoration:underline;}div p{margin:10px;}属性CSS文本属性1等控制文本外观和排版color,font-family,font-size,text-align盒模型属性2定义元素width,height,padding,border,margin的尺寸和间距背景属性3background-color,background-image,等设置元素背景background-position布局属性4控制元素在页面中的布局方式display,position,float变换和过渡5实现元素的变形和动画效果transform,transition盒模型内容Content1元素的实际内容内边距Padding2内容与边框之间的空间边框Border3包围内容和内边距的边界外边距Margin4元素与其他元素之间的空间样式继承什么是继承？可继承的属性不可继承的属性在中，某些属性会从父元素传递给子常见的可继承属性包括字体属性一些属性默认不继承，如边框CSS--元素这种机制称为继承，可以简化样式（等）文本（）内外边距（font-family,font-size-border-padding,设置并保持一致性属性（等）列表属）背景（）定color,text-align-margin-background-性（等）可见性（）位（）list-style-visibility position布局流正常流浮动12默认的布局方式，元素按照在中的顺序从上到下、从左到右排列使用属性，元素可以脱离正常流，向左或向右浮动HTML float定位Flexbox34通过属性（）控制元素的精确位置一维布局模型，适用于在一个方向上（行或列）排列项目position relative,absolute,fixed定位技术静态定位默认值，元素按照正常文档流进行布局相对定位相对于元素的正常位置进行定位，不影响其他元素绝对定位相对于最近的定位祖先元素进行定位，脱离正常文档流固定定位相对于浏览器窗口进行定位，即使页面滚动也保持位置不变浮动布局浮动的工作原理清除浮动浮动的应用浮动元素会脱离正常文档流，向左或向右使用属性可以防止元素被浮动元素影浮动常用于创建多列布局、图文混排等效clear浮动，直到触碰到包含块的边缘或另一个响常见的清除浮动技术包括使用伪元素果但在现代网页开发中，和Flexbox浮动元素和布局通常是更好的选择::after overflow:hidden Grid弹性布局容器属性项目属性弹性布局优势将元素设置为弹性容器控制增长比例，轻松实现垂直居中、等高列、动态尺寸调display:flex;flex-grow flex-shrink控制主轴方向，控制收缩比例，设置基准大小整等复杂布局适应不同屏幕大小，是响flex-direction justify-flex-basis控制主轴对齐，控属性可以改变项目的排列顺序应式设计的理想选择content align-items order制交叉轴对齐网格布局网格容器网格项目使用创建网格容器和使用和属性可以指定项目在网格中的位置和跨度display:grid;grid-template-columns grid-column grid-row定义列和行的大小grid-template-rows网格间距对齐属性用于设置网格线的大小，可以分别为行和列设置不同的间距和用于对齐网格项目，gap justify-items align-items justify-和用于对齐整个网格content align-content响应式设计流式布局1使用百分比而不是固定像素值来定义宽度，使布局能够适应不同屏幕大小弹性图片2使用使图片能够缩小以适应容器，但不会超过原始大小max-width:100%媒体查询3根据设备特性（如屏幕宽度）应用不同的样式，实现针对不同设备的优化布局移动优先4先为移动设备设计，然后逐步增强以适应更大的屏幕，确保在所有设备上的良好体验媒体查询基本语法常用断点高级用法移动设备平可以结合多个条件，如@media screenand max-width:-max-width:600px-@media样式规则这个例子在板桌面768px{/**/}max-width:768px-min-width:768px andmax-屏幕宽度不超过时应用样式这些值可以根据768px max-width:1024px width:1024px andorientation:具体需求调整针对横屏平板的样式landscape{/**/}预处理器什么是预处理器？CSS预处理器是一种脚本语言，扩展了的功能，使更易于维护和CSSCSSCSS扩展常见的预处理器包括、和Sass LessStylus变量允许定义和重用颜色、字体等值，提高代码的可维护性嵌套允许以更直观的方式嵌套选择器，减少重复代码混合（）Mixins可重用的代码块，类似于函数，可以接受参数简介JavaScript什么是？的作用JavaScript JavaScript是一种轻量级的、解释型的、面向对象的编程语言它动态修改和响应用户操作发送和接收服务器JavaScript

1.HTML CSS

2.

3.最初被设计用于在网页上创建动态交互效果数据创建复杂的交互体验

4.的特点与的关系JavaScript JavaScript HTML/CSS客户端脚本语言解释型语言动态类型函数式编程支持与和一起构成了现代网页的三大核心技术

1.

2.

3.

4.JavaScript HTML CSS提供结构，提供样式，提供交互和动态功能HTMLCSSJavaScript基本语法语句和注释变量声明数据类型语句以分号结束（可选但推荐）单行注使用、或声明变量的基本数据类型包括var letconst varJavaScript释使用多行注释使用///**/x=5;let y=Hello;const PI=Number,String,Boolean,以及

3.14159;Undefined,Null,Symbol ES6复杂数据类型Object变量与数据类型数字（Number）1包括整数和浮点数例如let age=25;let price=

19.99;字符串（String）2文本数据例如张三你好let name=;let message=;布尔（Boolean）3或例如true falselet isStudent=true;未定义（Undefined）4变量声明但未赋值例如let car;空（Null）5表示无或空例如let emptyBox=null;运算符算术运算符幂运算+,-,*,/,%,**赋值运算符=,+=,-=,*=,/=,%=比较运算符==,===,!=,!==,,,=,=逻辑运算符（与）（或）（非）,||,!流程控制条件语句语句用于根据条件执行不同的代码块语句用于多个条件分支的情况if...else switch循环语句循环用于已知循环次数的情况和循环for whiledo...while用于不确定循环次数的情况跳转语句用于跳出循环用于跳过当前循环的剩余部break continue分，开始下一次迭代用于从函数返回值return函数函数定义函数参数函数返回值你好，函数可以接受多个参数，也可以有默认参函数可以返回单个值、对象或其他函数function greetname{return！也可以使用箭头函数数值+name+;}function multiplya,b=1function createCounter{let count（）ES6const greet=name={return a*b;}=0;return function{return你好，！{return`${name}`;};++count;};}数组创建数组苹果香蕉橙子或使用构造函数let fruits=[,,];Array letnumbers=new Array1,2,3,4,5;访问和修改数组元素输出苹果梨子修改第二个元素console.logfruits

[0];//fruits

[1]=;//数组方法添加元素到末尾删除最后一个元素返回数组的一部分遍历数组push popslice forEach数组长度获取数组长度console.logfruits.length;//对象创建对象1张三let person={name:,age:30};访问属性2点号表示法方括号表示法console.logperson.name;//console.logperson[age];//添加和修改属性3工程师添加新属性修改已有属性person.job=;//person.age=31;//对象方法4发动汽车let car={start:function{console.log;}};操作DOM选择元素1document.getElementByIdmyIddocument.querySelector.myClass document.querySelectorAllp修改内容2新文本新element.textContent=element.innerHTML=HTML修改属性3element.setAttributeclass,highlight element.style.color=red创建和删除元素4let newDiv=document.createElementdivparentElement.appendChildnewDivparentElement.removeChildchildElement事件处理添加事件监听器元素被点击了element.addEventListenerclick,function{console.log;};常见事件类型click,mouseover,keydown,submit,load,change阻止默认行为event.preventDefault;事件冒泡event.stopPropagation;入门jQuery什么是？基本语法常用方法jQuery是一个快速、小巧、功能丰富的例如选择器jQuery$selector.action-$p,$.class,$#id-库它简化了文档遍事件效JavaScriptHTML$#myId.hide;.click,.hover-历、事件处理、动画和交互果Ajax.hide,.show,.toggle-DOM操作.html,.text,.val综合案例项目需求分析1创建一个简单的待办事项列表应用，包括添加、删除和标记完成功能结构设计HTML2设计包含输入框、添加按钮和待办事项列表的结构HTML样式编写CSS3为待办事项列表应用添加美观的样式，包括响应式设计功能实现JavaScript4编写添加、删除和标记完成待办事项的代码JavaScript。