《html基础常识》课件

基础常识HTMLHTML是网页的基础，用于构建网页的结构和内容它是一种标记语言，使用标签来定义文本、图像、链接和其他网页元素简介HTML超文本标记语言网页结构HTML是用于创建网页的标准标记语言，由W3C（万维网联盟）HTML使用标签定义网页的内容，这些标签指示浏览器如何显示内制定容网页内容易学易用HTML可以包含文本、图像、视频、音频和其他内容，以创建丰富HTML语言结构简单，语法清晰，易于学习和使用多彩的网页文档结构HTML声明DOCTYPE1告诉浏览器文档类型标签HTML2文档根元素头部（）Head3元数据主体（）Body4可见内容HTML文档结构类似于树状结构，由根节点HTML开始头部包含元数据，例如标题和字符集主体包含浏览器显示的所有可见内容标签简介HTML标签的组成标签的属性标签的嵌套标签的语义标签由一对尖括号包围，例如标签可以包含属性，用于指定标签可以互相嵌套，形成文档标签代表网页内容的特定含义p标签的额外信息，例如img的结构，例如pa，例如h1标题/h1src=...href=...链接/a/p标签属性HTML属性名称等号

11.

22.属性名称通常是英文单词，例属性名称后面紧跟一个等号如href、src、alt等=，用于连接属性名称和属性值属性值属性作用

33.

44.属性值通常用双引号括起属性用于为标签提供额外的信来，表示属性的具体内容息，例如链接地址、图片路径等常用标签HTML标题标签段落标签列表标签链接标签定义网页标题，例如H1,H2,表示网页中的一个段落，使用用于创建列表，包括无序列表定义超链接，使用a标签H3等不同的标题标签会显p标签每个段落之间默ul和有序列表ol示不同的文字大小和样式认会空一行标题标签标签标签代码示例H1H1H1标签用于定义页面最重要的标题它在页面结构中扮演着重要使用h1和/h1标签来包围您的标题文本例如，h1欢迎的角色，并对搜索引擎优化SEO有重要影响来到我的网站/h1会在页面上创建一个名为“欢迎来到我的网站”的大标题段落标签段落标签作用段落间距段落内容段落标签用于将文本划分为不同的段落浏览器会自动在段落之间添加间距段落标签内可以包含各种文本内容，包括文字、图像和链接列表标签无序列表使用ul标签创建无序列表，使用li标签定义列表项例如，ulliitem1/liliitem2/li/ul有序列表使用ol标签创建有序列表，使用li标签定义列表项例如，olliitem1/liliitem2/li/ol定义列表使用dl标签创建定义列表，使用dt标签定义术语，使用dd标签定义描述例如，dldt术语/dtdd描述/dd/dl链接标签定义链接语法结构链接标签使用``标签定义，用链接标签的语法结构如下`链于在网页中创建指向其他网页或接文本`，其中`href`属性指文件的链接定链接的目标地址，`链接文本`是用户在网页上看到的文本链接类型示例代码链接可以指向其他网页、文件、例如，`百度`创建一个指向百电子邮件地址、锚点等，根据链度网站的链接接的目标不同，使用不同的地址格式图像标签图像标签语法图像标签属性使用img标签插入图像alt属性是图像标签的可选属性，img标签是空标签，没有闭合用来描述图像内容alt属性的内标签img标签有src属性，容在图像无法显示时会被显示，用来指定图像文件的路径也可以作为图像的替代文本，方便搜索引擎理解图像内容图像标签示例例如，img src=image.jpg alt=图片描述/，将插入名为image.jpg的图像，并用“图片描述”作为替代文本文本格式化HTMLHTML文本格式化，是指在网页中对文本进行格式化，使其更具可读性和美观性加粗1使用B/B标签斜体2使用I/I标签下划线3使用U/U标签删除线4使用S/S标签上标5使用SUP/SUP标签HTML文本格式化标签可以组合使用，例如可以将一个文本同时加粗和斜体表格HTML表格结构表格使用table标签定义，由tr标签定义行，td标签定义单元格表格标题表格标题使用th标签定义，位于表格的第一行，通常居中显示表格边框表格边框通过border属性设置，可以定义边框颜色和宽度表格单元格单元格可以包含文本、图像和其他HTML内容表单HTML定义表单1HTML表单用于收集用户输入信息，例如姓名、电子邮件地址或密码表单元素2表单包含各种元素，例如文本框、密码框、下拉列表、单选按钮和复选框，以便用户输入提交表单3表单数据通过提交按钮发送到服务器，由服务器处理并存储用户提供的信息表单元素HTML文本输入密码输入单选按钮复选框文本输入框用于收集用户输入密码输入框用于收集用户输入单选按钮提供多个选项，用户复选框允许用户从多个选项中的文本信息，例如姓名、地址的敏感信息，例如密码，并将只能选择其中一个选择一个或多个、电子邮件等其隐藏以确保安全性表单属性HTML属性属性name value为表单元素指定一个名称，以便在提交表单时将数据发送到服务器每个为表单元素设置默认值例如，在文本输入框中，value属性可以设置一表单元素都应该有一个唯一的名称，以便服务器可以识别每个值个默认的文本值，以便用户可以轻松开始输入属性属性type id指定表单元素的类型，例如文本输入框、密码框、复选框、单选按钮、下为表单元素提供一个唯一的标识符，以便可以通过JavaScript或CSS选拉列表等不同的表单元素类型有不同的功能和用户交互方式择和操作该元素id属性对于使用JavaScript动态修改表单元素非常有用框架HTML定义框架框架结构HTML框架可以将网页分割成多个区域每个区域可以独立显示框架结构使用frameset标签定义，并通过frame标签设定每个框不同的内容框架可以为用户提供更直观的浏览体验，并将相关架区域的大小和位置内容整合到一个页面框架标签通常包含src属性，用于指定每个框架区域要加载的页面颜色HTML十六进制颜色代码颜色模型

11.

22.RGB例如#FF0000表示红色，使用红、绿、蓝三原色来表示#00FF00表示绿色，颜色，例如rgb255,0,0#0000FF表示蓝色表示红色颜色模型预定义颜色名称

33.HSL

44.使用色调、饱和度和亮度来表HTML支持一些预定义的颜色示颜色，例如hsl0,100%,名称，例如red、green、50%表示红色blue样式HTML样式表内部样式表外部样式表样式属性CSS（层叠样式表）用于定义在style标签中嵌入CSS规将CSS规则存储在单独的文件使用属性和值控制文本、颜色网页的外观和格式则，适用于单个页面中，可以跨多个页面使用、大小、间距等布局HTML块级元素1例如div、p、h1-h6行内元素2例如span、a、img浮动布局3元素脱离文档流，可实现更灵活的布局定位布局4通过position属性控制元素位置，例如static、relative、absolute、fixedHTML布局是网站布局的基础，通过不同的布局方法，可以实现各种各样的网页效果语义化HTML可访问性搜索引擎优化代码可读性移动设备友好使用语义化标签，让网页内容语义化标签可以帮助搜索引擎语义化标签可以使代码更易于语义化标签可以使网页更易于更易于理解和访问，例如使用更好地理解网页内容，从而提阅读和维护，方便开发人员理在移动设备上显示，提升用户article和aside标签高网站排名解网页结构体验多媒体HTML音频和视频图片背景音乐HTML支持音频和视频元素，可以轻松地HTML通过img标签嵌入图片，可以调整使用音频标签可以添加背景音乐，提升用户在网页上嵌入多媒体内容图片大小、添加边框等体验新特性HTML5多媒体支持离线应用程序应用程序接口HTML5增强了对音频和视频的支持HTML5允许创建能够在离线状态下HTML5提供了丰富的API，包括地，简化了媒体内容的嵌入和播放它运行的应用程序，使用缓存和数据库理位置API、拖放API和Web存储还提供了`API存储数据和逻辑，提高用户体验API，使开发人员能够构建更强大的交互式网页应用程序`标签，用于创建动态图形和动画语义化标签HTML5引入了新的语义化标签，如``、``和``，它们可以更准确地描述网页内容，并提高网页的可访问性和搜索引擎优化常用标签HTML5语义化标签多媒体标签

11.

22.增强网页的可读性和可访问性，例如header、footer、简化音频和视频的嵌入，例如audio、videoarticle、aside表单新元素离线应用

33.

44.提供更丰富和直观的表单元素，例如datalist、output、允许网站在没有网络连接的情况下提供服务，例如keygen manifest、service worker语义化标签HTML5结构更清晰语义化标签可以更好地描述页面内容，有利于搜索引擎和屏幕阅读器理解页面结构可访问性增强语义化标签可以帮助残障人士更好地理解页面内容，提升网站可访问性代码更简洁语义化标签可以使代码更易读，更易维护，提升开发效率多媒体标签HTML5音频标签视频标签多媒体属性使用audio标签嵌入音频文件使用video标签嵌入视频文件添加controls属性来显示默认的播放控件表单新元素HTML5日期和时间输入颜色选择器12使用input标签的type属性设置date使用input标签的type属性设置、time或datetime-local，以创建日color，以创建一个颜色选择器期或时间输入框数字输入范围输入34使用input标签的type属性设置使用input标签的type属性设置number，以创建一个数字输入框，并range，以创建一个滑动条，用于选择可以使用min、max和step属性设置一个范围内的值范围和步长离线应用HTML5缓存数据无缝体验网络切换离线应用可以存储数据在本地设备，这样即用户可以在离线状态下使用应用程序，就像应用可以检测网络连接状态，在网络恢复时使没有网络连接也可以访问数据在线一样，提供流畅的用户体验自动更新数据，确保数据同步地理位置HTML5定位用户附近搜索获取用户设备的地理位置信息，例如根据用户位置，提供附近商店、餐厅经纬度坐标、景点等信息天气预报导航服务基于用户位置，提供个性化的天气预提供路线规划，引导用户到达目的地报信息拖放HTML5API拖放操作事件处理拖放API允许用户通过拖放操作将数据从一个位置移动到另一个拖放API提供了一系列事件，允许您在拖放操作的不同阶段执行位置代码拖放操作可以用于各种场景，例如将文件从一个文件夹移动到另例如，您可以使用`ondragstart`事件在用户开始拖动元素时执一个文件夹，将图像从一个网站移动到另一个网站，或者将文本行代码，使用`ondragover`事件在用户将元素拖放到目标元素从一个应用程序移动到另一个应用程序上时执行代码，使用`ondrop`事件在用户将元素放到目标元素上时执行代码存储HTML5Web本地存储数据持久化Web存储提供了一种在用户浏览即使关闭浏览器，存储的数据也器中存储数据的机制会保留两种存储方式•localStorage:存储的数据没有过期时间•sessionStorage:存储的数据仅在当前会话中有效历史管理HTML5页面历史记录History对象HTML5提供了一个新的API来管理浏览器的历史记录，允许开History对象提供了访问浏览器历史记录的方法，如发者控制用户的浏览历史并进行操作，如前进和后退等pushState和replaceState，可以修改当前页面历史记录条目，而不会重新加载页面跨文档消息传输HTML5概述优势

11.

22.跨文档消息传输XDM允许XDM提供了一种更安全的方不同源的网页之间进行安全地式来交换数据，因为它限制了通信访问，并防止跨站点脚本XSS攻击机制应用场景

33.

44.XDM使用postMessage XDM常用于构建复杂的webAPI来发送和接收消息，并使应用程序，例如协作工具、聊用origin属性来验证消息来天应用程序和跨域数据共享源。