《html基础常识》课件

HTML基础常识HTML是网页的基础，用于构建网页的结构和内容。它是一种标记语言，使用标签来定义文本、图像、链接和其他网页元素。HTML简介超文本标记语言HTML是用于创建网页的标准标记语言，由W3C（万维网联盟）制定。网页结构HTML使用标签定义网页的内容，这些标签指示浏览器如何显示内容。网页内容HTML可以包含文本、图像、视频、音频和其他内容，以创建丰富多彩的网页。易学易用HTML语言结构简单，语法清晰，易于学习和使用。HTML文档结构1DOCTYPE声明告诉浏览器文档类型2HTML标签文档根元素3头部（Head）元数据4主体（Body）可见内容HTML文档结构类似于树状结构，由根节点HTML开始。头部包含元数据，例如标题和字符集。主体包含浏览器显示的所有可见内容。HTML标签简介标签的组成标签由一对尖括号包围，例如：<p>标签的属性标签可以包含属性，用于指定标签的额外信息，例如：<imgsrc="...">标签的嵌套标签可以互相嵌套，形成文档的结构，例如：<p><ahref="...">链接</a></p>标签的语义标签代表网页内容的特定含义，例如：<h1>标题</h1>HTML标签属性11.属性名称属性名称通常是英文单词，例如href、src、alt等。22.等号属性名称后面紧跟一个等号(=)，用于连接属性名称和属性值。33.属性值属性值通常用双引号("")括起来，表示属性的具体内容。44.属性作用属性用于为标签提供额外的信息，例如链接地址、图片路径等。常用HTML标签标题标签定义网页标题，例如H1,H2,H3等。不同的标题标签会显示不同的文字大小和样式。段落标签表示网页中的一个段落，使用<p>标签。每个段落之间默认会空一行。列表标签用于创建列表，包括无序列表<ul>和有序列表<ol>。链接标签定义超链接，使用<a>标签。标题标签H1标签H1标签用于定义页面最重要的标题。它在页面结构中扮演着重要的角色，并对搜索引擎优化(SEO)有重要影响。H1标签代码示例使用<h1>和</h1>标签来包围您的标题文本。例如，<h1>欢迎来到我的网站</h1>会在页面上创建一个名为“欢迎来到我的网站”的大标题。段落标签段落标签作用段落标签用于将文本划分为不同的段落。段落间距浏览器会自动在段落之间添加间距。段落内容段落标签内可以包含各种文本内容，包括文字、图像和链接。列表标签无序列表使用ul标签创建无序列表，使用li标签定义列表项。例如，<ul><li>item1</li><li>item2</li></ul>有序列表使用ol标签创建有序列表，使用li标签定义列表项。例如，<ol><li>item1</li><li>item2</li></ol>定义列表使用dl标签创建定义列表，使用dt标签定义术语，使用dd标签定义描述。例如，<dl><dt>术语</dt><dd>描述</dd></dl>链接标签定义链接链接标签使用``标签定义，用于在网页中创建指向其他网页或文件的链接。语法结构链接标签的语法结构如下：`链接文本`，其中`href`属性指定链接的目标地址，`链接文本`是用户在网页上看到的文本。链接类型链接可以指向其他网页、文件、电子邮件地址、锚点等，根据链接的目标不同，使用不同的地址格式。示例代码例如，`百度`创建一个指向百度网站的链接。图像标签图像标签语法使用<img>标签插入图像。<img>标签是空标签，没有闭合标签。<img>标签有src属性，用来指定图像文件的路径。图像标签属性alt属性是图像标签的可选属性，用来描述图像内容。alt属性的内容在图像无法显示时会被显示，也可以作为图像的替代文本，方便搜索引擎理解图像内容。图像标签示例例如，<imgsrc="image.jpg"alt="图片描述"/>，将插入名为image.jpg的图像，并用“图片描述”作为替代文本。HTML文本格式化HTML文本格式化，是指在网页中对文本进行格式化，使其更具可读性和美观性。1加粗使用<B></B>标签2斜体使用<I></I>标签3下划线使用<U></U>标签4删除线使用<S></S>标签5上标使用<SUP></SUP>标签HTML文本格式化标签可以组合使用，例如可以将一个文本同时加粗和斜体。HTML表格表格结构表格使用table标签定义，由tr标签定义行，td标签定义单元格。表格标题表格标题使用th标签定义，位于表格的第一行，通常居中显示。表格边框表格边框通过border属性设置，可以定义边框颜色和宽度。表格单元格单元格可以包含文本、图像和其他HTML内容。HTML表单1定义表单HTML表单用于收集用户输入信息，例如姓名、电子邮件地址或密码。2表单元素表单包含各种元素，例如文本框、密码框、下拉列表、单选按钮和复选框，以便用户输入。3提交表单表单数据通过提交按钮发送到服务器，由服务器处理并存储用户提供的信息。HTML表单元素文本输入文本输入框用于收集用户输入的文本信息，例如姓名、地址、电子邮件等。密码输入密码输入框用于收集用户输入的敏感信息，例如密码，并将其隐藏以确保安全性。单选按钮单选按钮提供多个选项，用户只能选择其中一个。复选框复选框允许用户从多个选项中选择一个或多个。HTML表单属性name属性为表单元素指定一个名称，以便在提交表单时将数据发送到服务器。每个表单元素都应该有一个唯一的名称，以便服务器可以识别每个值。value属性为表单元素设置默认值。例如，在文本输入框中，value属性可以设置一个默认的文本值，以便用户可以轻松开始输入。type属性指定表单元素的类型，例如文本输入框、密码框、复选框、单选按钮、下拉列表等。不同的表单元素类型有不同的功能和用户交互方式。id属性为表单元素提供一个唯一的标识符，以便可以通过JavaScript或CSS选择和操作该元素。id属性对于使用JavaScript动态修改表单元素非常有用。HTML框架定义框架HTML框架可以将网页分割成多个区域。每个区域可以独立显示不同的内容。框架可以为用户提供更直观的浏览体验，并将相关内容整合到一个页面。框架结构框架结构使用frameset标签定义，并通过frame标签设定每个框架区域的大小和位置。框架标签通常包含src属性，用于指定每个框架区域要加载的页面。HTML颜色11.十六进制颜色代码例如：#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色。22.RGB颜色模型使用红、绿、蓝三原色来表示颜色，例如：rgb(255,0,0)表示红色。33.HSL颜色模型使用色调、饱和度和亮度来表示颜色，例如：hsl(0,100%,50%)表示红色。44.预定义颜色名称HTML支持一些预定义的颜色名称，例如：red、green、blue。HTML样式样式表CSS（层叠样式表）用于定义网页的外观和格式。内部样式表在<style>标签中嵌入CSS规则，适用于单个页面。外部样式表将CSS规则存储在单独的文件中，可以跨多个页面使用。样式属性使用属性和值控制文本、颜色、大小、间距等。HTML布局1块级元素例如：div、p、h1-h62行内元素例如：span、a、img3浮动布局元素脱离文档流，可实现更灵活的布局4定位布局通过position属性控制元素位置，例如：static、relative、absolute、fixedHTML布局是网站布局的基础，通过不同的布局方法，可以实现各种各样的网页效果。HTML语义化可访问性使用语义化标签，让网页内容更易于理解和访问，例如使用<article>和<aside>标签。搜索引擎优化语义化标签可以帮助搜索引擎更好地理解网页内容，从而提高网站排名。代码可读性语义化标签可以使代码更易于阅读和维护，方便开发人员理解网页结构。移动设备友好语义化标签可以使网页更易于在移动设备上显示，提升用户体验。HTML多媒体音频和视频HTML支持音频和视频元素，可以轻松地在网页上嵌入多媒体内容。图片HTML通过img标签嵌入图片，可以调整图片大小、添加边框等。背景音乐使用音频标签可以添加背景音乐，提升用户体验。HTML5新特性语义化标签HTML5引入了新的语义化标签，如``、``和``，它们可以更准确地描述网页内容，并提高网页的可访问性和搜索引擎优化。多媒体支持HTML5增强了对音频和视频的支持，简化了媒体内容的嵌入和播放。它还提供了``标签，用于创建动态图形和动画。离线应用程序HTML5允许创建能够在离线状态下运行的应用程序，使用缓存和数据库API存储数据和逻辑，提高用户体验。应用程序接口HTML5提供了丰富的API，包括地理位置API、拖放API和Web存储API，使开发人员能够构建更强大的交互式网页应用程序。HTML5常用标签11.语义化标签增强网页的可读性和可访问性，例如：header、footer、article、aside。22.多媒体标签简化音频和视频的嵌入，例如：audio、video。33.表单新元素提供更丰富和直观的表单元素，例如：datalist、output、keygen。44.离线应用允许网站在没有网络连接的情况下提供服务，例如：manifest、serviceworker。HTML5语义化标签结构更清晰语义化标签可以更好地描述页面内容，有利于搜索引擎和屏幕阅读器理解页面结构。可访问性增强语义化标签可以帮助残障人士更好地理解页面内容，提升网站可访问性。代码更简洁语义化标签可以使代码更易读，更易维护，提升开发效率。HTML5多媒体标签音频标签使用audio标签嵌入音频文件。视频标签使用video标签嵌入视频文件。多媒体属性添加controls属性来显示默认的播放控件。HTML5表单新元素1日期和时间输入使用input标签的type属性设置date、time或datetime-local，以创建日期或时间输入框。2颜色选择器使用input标签的type属性设置color，以创建一个颜色选择器。3数字输入使用input标签的type属性设置number，以创建一个数字输入框，并可以使用min、max和step属性设置范围和步长。4范围输入使用input标签的type属性设置range，以创建一个滑动条，用于选择一个范围内的值。HTML5离线应用缓存数据离线应用可以存储数据在本地设备，这样即使没有网络连接也可以访问数据。无缝体验用户可以在离线状态下使用应用程序，就像在线一样，提供流畅的用户体验。网络切换应用可以检测网络连接状态，在网络恢复时自动更新数据，确保数据同步。HTML5地理位置定位用户获取用户设备的地理位置信息，例如经纬度坐标。附近搜索根据用户位置，提供附近商店、餐厅、景点等信息。天气预报基于用户位置，提供个性化的天气预报信息。导航服务提供路线规划，引导用户到达目的地。HTML5拖放API拖放操作拖放API允许用户通过拖放操作将数据从一个位置移动到另一个位置。拖放操作可以用于各种场景，例如将文件从一个文件夹移动到另一个文件夹，将图像从一个网站移动到另一个网站，或者将文本从一个应用程序移动到另一个应用程序。事件处理拖放API提供了一系列事件，允许您在拖放操作的不同阶段执行代码。例如，您可以使用`ondragstart`事件在用户开始拖动元素时执行代码，使用`ondragover`事件在用户将元素拖放到目标元素上时执行代码，使用`ondrop`事件在用户将元素放到目标元素上时执行代码。HTML5Web存储本地存储Web存储提供了一种在用户浏览器中存储数据的机制。数据持久化即使关闭浏览器，存储的数据也会保留。两种存储方式localStorage:存储的数据没有过期时间sessionStorage:存储的数据仅在当前会话中有效HTML5历史管理页面历史记录HTML5提供了一个新的API来管理浏览器的历史记录，允许开发者控制用户的浏览历史并进行操作，如前进和后退等。History对象History对象提供了访问浏览器历史记