《html基础常识》课件

《html基础常识》ppt课件目录•HTML简介•HTML基本标签CONTENT•HTML进阶知识•HTML与CSS结合•HTML与JavaScript结合•HTML5新特性01HTML简介HTML的定义HTML是HyperText Markup它是一种用于创建网页的标准标HTML不是一种编程语言，而是Language的缩写，中文意思是记语言，通过使用各种HTML标一种标记语言，用于描述网页中超文本标记语言签来描述网页的结构和内容的文本、图像、链接等元素HTML的发展历程HTML的起源可以追溯到1990随着互联网的发展，HTML逐HTML5是HTML的最新版本，年代初，当时它被用来创建静渐演变成一种动态的、交互式引入了更多的元素和API，使得态的网页的网页开发技术网页开发更加灵活和强大HTML的语法结构01020304HTML文档由一系列的HTML标签通常成对出现，例如标签还可以包含属性，用来提标签可以嵌套，用来表示更复标签组成`p`和`/p`，用来表示供更多关于标签的信息杂的内容结构一个段落02HTML基本标签标题标签总结词定义文档的标题详细描述HTML中的标题标签有六个级别，从`h1`到`h6`，`h1`最重要，`h6`最次要标题标签通常用于定义网页的标题，显示在浏览器的标题栏或选项卡上段落标签总结词定义文档中的段落详细描述段落标签`p`用于定义文档中的段落，它可以包含文本、链接、图片等元素在HTML文档中，每个段落都应使用`p`标签进行标记链接标签总结词创建超链接详细描述链接标签`a`用于在HTML文档中创建超链接，用户可以通过点击链接跳转到其他网页、下载文件或打开电子邮件等链接的地址使用`href`属性进行指定图片标签总结词插入图片详细描述图片标签`img`用于在HTML文档中插入图片它具有`src`属性，用于指定图片的来源地址；`alt`属性，用于提供图片的替代文本；以及`width`和`height`属性，用于指定图片的宽度和高度列表标签总结词创建有序列表和无序列表详细描述HTML提供了有序列表标签`ol`和无序列表标签`ul`，用于创建有序和无序的列表在有序列表中，每个列表项使用`li`标签进行标记；在无序列表中，每个列表项也使用`li`标签进行标记03HTML进阶知识表单标签文本框单选框用于输入文本信息，如用户名、密码用于选择一个选项，常用于性别、国等籍等选择密码框用于输入密码，自动对输入内容进行加密表单标签复选框用于选择多tr定义表格的行个选项，常用于多选调查等场景下拉列表用于选择一个选项，提供多个选项供用户选择表单标签td定义表格的单元格th定义表格的表头单元格表单验证必填项验证格式验证长度限制正则表达式验证验证输入内容是否符合使用正则表达式进行复确保表单中必填字段不限制输入内容的长度，特定格式，如邮箱、手杂的验证规则，如身份为空如密码长度等机号码等证号码、邮政编码等表单处理01020304表单提交表单重置表单级联表单异步处理将表单数据提交到服务器进行清空表单中的所有输入内容当一个表单字段发生变化时，在不刷新页面的情况下，将表处理自动更新其他表单字段的值单数据发送到服务器进行处理，并返回结果04HTML与CSS结合CSS选择器类型选择器ID选择器根据HTML元素类型选择样式，通过在HTML元素中添加id属性，如p、h

1、div等并定义唯一的CSS样式类选择器属性选择器通过在HTML元素中添加class根据HTML元素的属性选择样属性，并定义对应的CSS样式式，如[type=text]、[href]等CSS样式属性字体属性文本属性包括字体大小、字体类型、字体颜色包括文本对齐方式、文本装饰、文本等缩进等背景属性边框属性包括背景颜色、背景图片、背景重复包括边框样式、边框宽度、边框颜色等等CSS布局属性盒模型定位属性CSS布局的基础，包括内容、内边距、边框包括静态定位、相对定位、绝对定位和固定和外边距定位浮动布局Flex布局通过设置元素的float属性实现元素的浮动布一种现代的布局方式，可以灵活地调整元素局的位置和大小05HTML与JavaScript结合JavaScript在HTML中的使用方式内联JavaScript直接在HTML元素中使用`onclick`、`onload`等事件属性来编写JavaScript代码内部JavaScript在HTML文档的`script`标签中编写JavaScript代码，通常放在`head`标签内或`body`标签的底部外部JavaScript通过`script src=script.js/script`标签引入外部JavaScript文件JavaScript事件处理点击事件加载事件键盘事件通过`onclick`事件处理函数来响通过`onload`事件处理函数来在通过`onkeyup`、`onkeydown`、应用户点击某个元素的操作页面加载完成后执行某些操作`onkeypress`等事件处理函数来响应用户的键盘操作JavaScript DOM操作获取元素01使用`document.getElementById`、`document.getElementsByClassName`、`document.getElementsByTagName`等方法获取页面中的元素修改元素02通过JavaScript可以修改元素的属性、样式和内容等例如，改变元素的背景色、字体大小等添加和删除元素03使用JavaScript可以动态地向页面中添加或删除元素，实现动态内容的效果06HTML5新特性HTML5的新标签语义标签如`article`,`section`,`nav`,`header`,`footer`等，使网页结构更清晰，有助于SEO和辅助阅读器理解表单控制新增了如`output`,`progress`,`meter`等标签，增强了表单的交互性HTML5的音频和视频支持原生支持不再需要依赖第三方插件，如Flash，即可播放音频和视频跨平台由于原生支持，可以在各种设备和操作系统上流畅播放HTML5的Canvas绘图功能动态内容创建可以在网页上绘制图形、动画等，无需依赖第三方库交互性增强通过JavaScript与Canvas结合，可以实现丰富的交互效果。