《高等教育html》课件

REPORTING2023WORK SUMMARY《高等教育html》ppt课件•HTML基础•HTML元素目录•HTML属性•HTML进阶CATALOGUE•HTML与CSS结合•HTML与JavaScript结合PART01HTML基础HTML简介HTML定义HTML组成HTML特点HTML是HyperText MarkupHTML由一系列的元素构成，每HTML是一种相对简单且易于学Language的缩写，即超文本标记个元素由标签和内容组成，标签习的语言，通过简单的标签和属语言，用于创建网页的标准标记用于描述内容的结构和样式，内性，可以轻松地创建出结构化的语言容则是实际显示给用户的信息网页HTML发展历程HTML

1.0HTML

4.01999年，HTML

4.0规范发布，引入1991年，蒂姆·伯纳斯·李发明了了更多的元素和属性，以及对样式和HTML，并发布了HTML

1.0规范脚本的支持HTML

2.0XHTML2000年，可扩展超文本标记语言1995年，HTML

2.0规范发布，这是（XHTML）发布，它是基于XML的HTML的第一个广泛使用的版本HTML版本HTML

3.2HTML52014年，HTML5规范发布，引入了1997年，HTML

3.2规范发布，增加更多的元素、属性和API，支持多媒了对多媒体元素的支持体和交互性HTML基本语法标签HTML标签是由尖括号包围的关键词，例如`p`表示段落元素属性HTML属性提供关于元素的额外信息，通常在标签内部使用属性总是以名称/值对的形式出现，例如`imgsrc=image.jpg`中的`src`就是属性PART02HTML元素标题元素总结词标题元素用于定义文档的标题，通常在HTML文档的头部区域使用详细描述标题元素有六个级别，从h1到h6，其中h1表示最高级别的标题，h6表示最低级别的标题标题元素对于SEO（搜索引擎优化）非常重要，因为搜索引擎会优先抓取h1标签的内容作为页面标题段落元素总结词段落元素用于定义文本的一个段落详细描述段落元素通过使用`p`标签来创建，它可以包含文本、链接、图片等其他HTML元素一个段落通常表示一段连续的文本内容，用于区分不同部分的文本链接元素总结词链接元素用于创建超链接，使文本或页面之间能够相互跳转详细描述链接元素通过使用`a`标签来创建，需要指定链接的目标地址（href属性）链接可以指向同一网站的不同页面，也可以指向外部网站在链接内部，可以使用文本、图像等其他HTML元素作为链接显示的内容图像元素总结词图像元素用于在网页中插入图片详细描述图像元素通过使用`img`标签来创建，需要指定图像的源文件地址（src属性）还可以通过alt属性提供图像的替代文本，以便在图像无法显示时使用图像元素可以设置宽度和高度属性来控制图像的大小列表元素总结词列表元素用于创建有序列表和无序列表详细描述有序列表使用`ol`标签创建，列表项使用`li`标签定义无序列表使用`ul`标签创建，列表项同样使用`li`标签定义列表可以嵌套使用，以创建多级列表结构PART03HTML属性链接属性链接属性定义了网页中链接的属性，用于指定链接的目标地址、链接文本等链接属性包括href、target、download等图像属性要点一要点二图像属性图像属性包括定义了网页中图像的属性，用于指定图像的源文件、尺寸、src、alt、width、height、align等对齐方式等表单属性表单属性表单属性包括定义了网页中表单的属性，用于指定表单的输入控件、method、action、enctype等提交方式等其他常用属性其他常用属性包括class、id、style等class属性用于给元素指定一个或多个类名，用于样式表中的样式定义id属性用于给元素指定一个唯一的标识符，以便于通过JavaScript进行操作style属性用于直接给元素应用内联样式PART04HTML进阶表单处理表单提交表单处理通过HTML表单元素，用户可以输入数据服务器端需要对表单数据进行处理，包括并提交给服务器进行处理表单提交可验证、存储和返回结果等操作常见的表以使用GET和POST方法VS单处理语言有PHP、Python、Java等表单验证客户端验证服务器端验证在表单提交之前，通过JavaScript等客户端在服务器端对表单数据进行验证，确保数据脚本进行数据验证，可以减少服务器端的负的合法性和安全性常见的验证规则包括必担和提高用户体验填项、格式校验等表单美化CSS样式框架和组件库通过CSS样式，可以对表单元素进行美化，使用前端框架和组件库，如Bootstrap、包括字体、颜色、布局等Ant Design等，可以快速构建美观的表单界面PART05HTML与CSS结合CSS选择器类型选择器根据HTML元素类型选择样式，如p、h

1、div等类选择器通过在HTML元素中添加class属性，使用自定义的类名选择样式ID选择器通过在HTML元素中添加id属性，使用唯一的ID选择样式属性选择器根据HTML元素的属性选择样式，如[type=text]、[href]等CSS样式属性字体属性边距与填充包括字体类型、大小、颜色、包括上、下、左、右边距以及加粗、斜体等上、下、左、右填充背景属性边框属性包括背景颜色、背景图片、背包括边框样式、宽度和颜色景重复等CSS布局与定位盒模型定位属性CSS布局的基础，包括内容、边距、包括静态定位、相对定位、绝对定位边框和填充和固定定位，以及top、right、bottom和left属性浮动布局Flexbox布局通过设置元素的float属性实现元素一种现代的CSS布局方式，可以实现的浮动布局灵活的布局和对齐PART06HTML与JavaScript结合JavaScript基础JavaScript语法JavaScript函数介绍JavaScript的基本语法，包括变量、数据类型、介绍如何定义和调用JavaScript函数，以及如何使用运算符、控制结构等函数封装代码逻辑JavaScript事件处理事件概述常用事件介绍事件的基本概念，以及事件在Web开发中的重要列举并解释JavaScript中常用的几种事件，如点击事件、性键盘事件、鼠标事件等JavaScript与HTML交互DOM操作介绍如何使用JavaScript操作HTML文档对象模型（DOM），包括获取和修改元素内容、样式等AJAX技术介绍如何使用JavaScript发送异步请求，实现网页与服务器之间的数据交互REPORTING2023WORK SUMMARYTHANKS感谢观看。