r语言做网站,百度平台客服,一对一直播网站开发,更改菜单排序wordpressHTML 一、HTML介绍1.HTML概念2.文档声明3.字符编码4. HTML标签5. HTML属性 二、标签1.meta标签2.语义标签3.布局标签4.列表5.超链接6.图片7.字符实体8.内联格式9.HTML 表格10.HTML 表单 三、HTML5新特性1. 本地存储2. Cookie3. 语义化标签4.多媒体元素5.表单增强6.Canvas7.SVG … HTML 一、HTML介绍1.HTML概念2.文档声明3.字符编码4. HTML标签5. HTML属性 二、标签1.meta标签2.语义标签3.布局标签4.列表5.超链接6.图片7.字符实体8.内联格式9.HTML 表格10.HTML 表单 三、HTML5新特性1. 本地存储2. Cookie3. 语义化标签4.多媒体元素5.表单增强6.Canvas7.SVG 矢量图形支持8.拖放API9.地理定位10.离线Web应用程序 cache manifest11. Web Workers12.Web Sockets 一、HTML介绍
1.HTML概念
HTML 是超文本标记语言HyperText Markup Language的缩写。用于创建网页的标记语言被用来描述和定义网页的结构和内容。HTML 使用标记来包围不同部分的文本或图像并告诉浏览器如何显示这些内容。HTML 是构建万维网的基础之一它定义了网页的结构包括标题、段落、链接、图像等元素。HTML 文件通常以 .html 或 .htm 扩展名结尾。
2.文档声明
HTML已经由HTML4 XHTML2.0 HTML5 HTML 文档声明Document Type DeclarationDTD是在 HTML 文档的开头声明的一行代码用于告诉浏览器使用哪个 HTML 规范来解释该文档。它的目的是确保浏览器能够正确地解释和渲染 HTML 文档。
HTML5 的文档声明如下所示
!DOCTYPE htmlHTML 4.01 的文档声明如下
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd文档声明位于 HTML 文档的开头通常是在 html 元素之前。
3.字符编码
字符编码Character Encoding是一种将字符集中的字符映射到数字代码的方式。它决定了浏览器如何解释和显示网页中的文本内容。
常见的字符编码包括 UTF-8这是一种变长字符编码能够表示 Unicode 字符集中的所有字符。UTF-8 是目前 web 开发中最常用的字符编码因为它能够兼容几乎所有的字符集并且支持多语言文本。 UTF-16与 UTF-8 类似UTF-16 也是 Unicode 的一种编码方式但是它使用固定长度的 16 位编码来表示字符。 ISO-8859-1Latin-1这是一种单字节编码主要用于西欧语言。它包含了 ISO 标准中的第一个 256 个字符。 GB2312、GBK、GB18030这些是中文字符编码标准用于表示简体中文字符。GB2312 是早期的标准GBK 是它的扩展GB18030 则是更加完整和兼容性更好的标准。
在 HTML 中可以通过在文档的 meta 元素中指定字符编码来告诉浏览器使用哪种编码来解释文档。例如
meta charsetUTF-84. HTML标签
HTML标签由一对尖括号组成成对顺序出现。每个 HTML 标签通常包含两个部分起始标签opening tag和结束标签closing tag。起始标签用于指示元素的开始结束标签用于指示元素的结束。标签之间可以包含文本内容、其他标签、属性等。浏览器会对不正确的标签进行修正。
标签可以分为语义标签和非语义标签主要基于它们在页面上的语义含义和作用来区分。 语义标签Semantic Elements 语义标签是具有明确含义和语义的 HTML 元素它们传达了元素在文档中的意义和结构使得文档更易于理解和维护。使用语义标签有助于提高文档的可读性、可访问性和搜索引擎优化SEO因为它们能够为浏览器、屏幕阅读器和搜索引擎提供更多的信息。常见的语义标签包括 header、nav、main、section、article、aside、footer、figure、figcaption 等。 非语义标签Non-semantic Elements 非语义标签是没有明确语义含义的 HTML 元素它们被用作样式或布局的目的而不是传达内容的结构或含义。非语义标签通常用于创建视觉效果但并不提供关于文档内容的任何额外信息。常见的非语义标签包括 div、span、b、i、font 等。
总的来说语义标签更倾向于传达文档内容的意义和结构而非语义标签更倾向于样式和布局的目的。在编写 HTML 代码时应该尽可能地使用语义标签来提高文档的可读性和可访问性。
标签还可以分为以下几类 块级元素Block-level Elements这些元素在页面上以块的形式显示即它们会从新行开始占据其父元素的整个可用宽度。常见的块级元素包括 div、p、h1 到 h6、ul、ol、li 等。一般用于页面布局 内联元素行内元素Inline Elements这些元素在页面上以行内的形式显示即它们只占据其内容所需的宽度并且不会强制换行。常见的内联元素包括 span、a、strong、em、img、input 等。一般用于包裹文字 内联块元素行内块元素Inline-block Elements这些元素结合了块级元素和内联元素的特点它们在页面上以行内的形式显示但可以设置宽度和高度并且可以在同一行上显示多个元素。常见的内联块元素包括 div通过设置 display: inline-block;、img、input 等。 可替换元素Replaced Elements这些元素的内容由外部资源如图片、视频决定并且浏览器会根据资源的类型和属性来展示它们而不是直接展示 HTML 中定义的内容。常见的可替换元素包括 img、video、iframe 等。 特殊元素这些元素具有特殊的功能或语义不同于普通的块级或内联元素。例如html、head、body、title 等是文档结构的基本元素meta 用于指定文档的元数据script 用于嵌入脚本代码等。
5. HTML属性
id为元素定义唯一标识符。class为元素定义一个或多个类名用于 CSS 样式。src定义图像、音频、视频等资源的 URL。href定义链接目标的 URL。alt定义图像的替代文本。
二、标签
1.meta标签
meta主要用于设置网页中的一些元数据元数据并不是给用户看的
charset 指定网页的字符集 。name 指定的数据的名称 。 keywords表示网站的关键字可以同时指定多个关键字关键字间使用,隔开用于搜索引擎优化SEO。description表示网站的描述信息通常在搜索结果中显示。viewport视口用于控制页面在移动设备上的显示方式。author作者指定页面的作者。robots搜索引擎蜘蛛用于控制搜索引擎蜘蛛对页面的抓取和索引行为。 content 指定的数据的内容会作为搜索结果的超链接上的文字显示。charset字符编码指定文档的字符编码。例如 告诉浏览器使用 UTF-8 编码来解释文档。http-equiv用于模拟 HTTP 头部中的响应字段。它可以用来指示浏览器在处理文档时执行某些特定的操作类似于服务器发送的 HTTP 头部。常见的 http-equiv 属性值包括 content-type指定文档的 MIME 类型和字符集。例如meta http-equivcontent-type contenttext/html; charsetUTF-8 会告诉浏览器文档的 MIME 类型为 HTML并且使用 UTF-8 字符集。refresh指定页面自动刷新或重定向的时间间隔和目标。例如meta http-equivrefresh content5;urlhttps://example.com 表示页面将在 5 秒后自动跳转到 https://example.com。cache-control指定页面的缓存控制行为。例如meta http-equivcache-control contentno-cache 表示禁用缓存。pragma类似于 cache-control用于控制页面的缓存行为。例如meta http-equivpragma contentno-cache 也表示禁用缓存。
这些 http-equiv 属性可以影响浏览器对文档的处理方式但它们不会直接影响文档的内容或样式。通常情况下应该尽量避免使用 http-equiv 属性而是通过适当配置服务器端的 HTTP 头部来实现相应的功能。
meta charsetutf8 version1/
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableyes/
meta namedescription content京东JD.COM-专业的综合网上购物商城!/
meta nameKeywords content网上购物,网上商城,京东/2.语义标签
块元素
h1-h6标题一般一个页面只有一个h1。hgroup标题组多层次的标题。它将一组h1 h6元素分组。p段落页面中的一个段落由空行或第一行缩进将相邻的文本块分开。blockquote长引文用缩进表示所包含文本。可以用cite属性表示引文来源用cite元素表示来源的文本表述。
行内元素
q短引文用一个简短的内联引号包围文本。大多数浏览器通过在文本周围加上引号来实现。该元素用于不需要段落分隔的短引文。br/换行。em强调/斜体表示强调作用。em元素可以嵌套每一级嵌套表示更高的强调程度i元素效果与它相同不过i不属于语义标签。strong重要表示重要性、严肃性或紧迫性。浏览器通常以粗体字呈现内容b元素效果与它相同不过b不属于语义标签。
h5新增语义标签
header页眉介绍性的内容footer页脚通常包含有关作者的信息、版权或文件链接nav导航链接可以是当前文档内的也可以是到其他文档的。常见例子是菜单、目录和索引main文档主内容中心主题直接相关或扩展的内容article文章自成一体独立分发可重复使用section文档中的节没有一个更具体的语义元素来代表aside页面内容以外的内容其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现mark重要或强调的文本为参考或记事目的而被标记或突出的文本表明其相关性和重要性summarydetails的标题为details指定一个摘要、标题或图例。点击summary 可以切换details。打开和关闭details用户能够查看或隐藏的额外细节其中的信息只有被切换到 打开 状态时才可见。必须使用summary提供一个摘要或标签figure自包含内容独立的内容用figcaption元素指定一个可选的标题。比如图示、图表、照片、代码清单等figcaptionfigure的标题描述其父元素time定义日期/时间可能包括datetime属性将日期翻译成机器可读的格式以便获得更好的搜索引擎结果或自定义功能。
3.布局标签
header表示网页的头部页眉main表示网页的主体部分一个页面中只会有一个mainfooter表示网页的底部页脚nav表示网页中的导航aside和主体相关的其他内容侧边栏article表示一个独立的文章section表示一个独立的区块上边的标签都不能表示时使用sectiondiv 块元素没有任何的语义就用来表示一个区块。目前来讲div还是主要的布局元素span 行内元素没有任何的语义一般用于在网页中选中文字
4.列表
html共有三种列表
有序列表ol li
olliFirst item/liliSecond item/liliThird item/li
/ol无序列表ul li
ulliItem one/liliItem two/liliItem three/li
/ul自定义列表dl dt dd
dldtHTML/dtddHyperText Markup Language/dddtCSS/dtddCascading Style Sheets/dddtJavaScript/dtddA programming language commonly used in web development/dd
/dl
嵌套列表可以在列表里嵌套列表形成多级列表CSS 来自定义有序和无序列表的项目符号和序号样式
styleul.custom-list {list-style-type: square;}ol.custom-list {list-style-type: upper-roman;}
/style
ul classcustom-listliSquare item one/liliSquare item two/li
/ul
ol classcustom-listliRoman numeral item one/liliRoman numeral item two/li
/ol
5.超链接
HTML 中的超链接hyperlink通过 a 标签创建用于在网页之间导航或在网页和其他资源如文件、电子邮件地址等之间创建链接。行内元素。
a hrefURLLink Text/ahref 属性指定链接的目标 URL。Link Text用户可见的、可点击的文本。
可以链接到另一个网页也可以链接到同一网页的不同部分锚点
!-- 目标位置 --
h2 idsection1Section 1/h2
pContent of section 1.../p!-- 链接到目标位置 --
a href#section1Go to Section 1/atarget指定链接打开地方 _self默认值在本页面打开_blank在新窗口或标签页中打开链接。 链接到电子邮件地址 a hrefmailto:exampleexample.comSend an Email/a链接到电话 a hreftel:1234567890Call Us/a链接到本地其他文件页面 a href../test4/test4.html超链接4/a直接将超链接的href属性设置为#这样点击超链接以后页面跳转转到当前页面的顶部的位置 可以使用javascript:;来作为href的属性值此时点击这个超链接什么也不会发生。 title提供链接的额外信息当用户将鼠标悬停在链接上时显示。 a hrefhttps://www.example.com titleGo to Example.comVisit Example/adownload指示浏览器下载链接指向的文件而不是导航到它如果资源是可下载的文件。 a hrefpath/to/file.pdf downloadDownload PDF/arel指定当前文档与链接目标之间的关系。常见的值包括 noopener 和 noreferrer与 target_blank 一起使用以提高安全性和隐私性。 a hrefhttps://www.example.com target_blank relnoopener noreferrerVisit Example/a使用 CSS 可以改变链接的外观。 改变链接颜色 stylea {color: blue; /* 普通状态下的链接颜色 */}a:visited {color: purple; /* 用户已访问过的链接颜色 */}a:hover {color: red; /* 鼠标悬停时的链接颜色 */}a:active {color: green; /* 链接被点击时的颜色 */}
/style去掉链接下划线 stylea {text-decoration: none;}a:hover {text-decoration: underline; /* 悬停时显示下划线 */}
/style6.图片
图片标签用于向当前页面中引入一个外部图片。img标签是一个自结束标签这种元素属于替换元素块和行内元素之间具有两种元素的特点
src属性指定的是外部图片的路径路径规则和超链接是一样的alt图片的描述默认情况下不会显示有些浏览器会在图片无法加载时显示搜索引擎会根据alt中的内容来识别图片title提供额外的信息当用户将鼠标悬停在图片上时显示style通过内联样式指定图片的样式width图片的宽度单位是像素或者百分比height 图片的高度单位是像素或者百分比 宽度和高度中如果只修改了一个则另一个会等比例缩放一般情况在pc端不建议修改图片的大小需要多大的图片就裁多大但是在移动端经常需要对图片进行缩放大图缩小
将图片使用base64编码这样可以将图片转换为字符通过字符的形式来引入图片不需要获取图片得发送请求加载速度快。
使用 元素实现响应式图片 元素可以根据不同的屏幕尺寸或设备条件显示不同的图片。
picturesource srcsetimage-large.jpg media(min-width: 800px)source srcsetimage-medium.jpg media(min-width: 400px)img srcimage-small.jpg altResponsive image
/picturepicture标签 在 HTML 中picture 元素用于提供响应式图片以便根据不同的设备和显示条件如屏幕宽度、像素密度等加载不同的图片资源。这可以优化性能和用户体验。下面是如何使用 picture 元素实现响应式图片的详细说明。
picturesource srcsetimage-large.jpg media(min-width: 800px)source srcsetimage-medium.jpg media(min-width: 400px)img srcimage-small.jpg altResponsive image
/picturepicture包含一个或多个 source 元素和一个 img 元素。source定义不同的图片资源及其媒体条件。 srcset 属性指定图片的路径或 URL。media 属性指定媒体查询条件。 img提供默认图片当没有匹配的媒体查询时使用。
根据屏幕宽度加载不同的图片
picturesource srcsetimage-large.jpg media(min-width: 1200px)source srcsetimage-medium.jpg media(min-width: 768px)source srcsetimage-small.jpg media(min-width: 480px)img srcimage-default.jpg altResponsive image
/picture解释 当屏幕宽度大于或等于 1200px 时加载 image-large.jpg。当屏幕宽度在 768px 到 1199px 之间时加载 image-medium.jpg。当屏幕宽度在 480px 到 767px 之间时加载 image-small.jpg。如果屏幕宽度小于 480px加载 image-default.jpg。
根据设备像素密度加载不同的图片
picturesource srcsetimage-highres.jpg media(min-resolution: 2dppx)img srcimage-default.jpg altResponsive image
/picture解释 当设备像素密度大于或等于 2dppx典型的 Retina 显示屏时加载 image-highres.jpg。否则加载 image-default.jpg。
使用不同的图片格式如 WebP 和 JPEG
picturesource srcsetimage.webp typeimage/webpsource srcsetimage.jpg typeimage/jpegimg srcimage-default.jpg altResponsive image
/picture解释 如果浏览器支持 WebP 格式则加载 image.webp。否则加载 image.jpg。如果上述两者都不适用则加载 image-default.jpg。
使用 srcset 和 sizes 属性进行更高级的响应式图片
srcset 和 sizes 属性允许为不同的屏幕尺寸和分辨率提供多种图片选项。
img srcimage-default.jpgsrcsetimage-small.jpg 480w,image-medium.jpg 768w,image-large.jpg 1200wsizes(max-width: 600px) 480px,(max-width: 1200px) 768px,1200pxaltResponsive image解释 srcset 列出了不同分辨率的图片及其宽度描述。sizes 描述了图片在不同媒体查询下应该占据的宽度。 详细说明 如果视口宽度小于或等于 600px使用 480px 宽的图片。如果视口宽度在 600px 到 1200px 之间使用 768px 宽的图片。如果视口宽度大于 1200px使用 1200px 宽的图片。
7.字符实体
实体名称显示结果描述nbsp; 空格gt;大于号lt;小于号amp;与copy;©版权reg;®注册商标trade;™商标times;×乘号divide;÷除号iquest;¿倒问号
8.内联格式
在 HTML 中内联框架iframe用于在网页中嵌入另一个 HTML 文档。iframe 可以在一个网页中展示来自不同源的内容如视频、地图、其他网页等。
iframe srcURL/iframesrc指定嵌入内容的 URL。 iframe srchttps://www.example.com/iframewidth 和 height指定 iframe 的宽度和高度可以用像素或百分比。 iframe srchttps://www.example.com width600 height400/iframename为 iframe 指定一个名称以便其他链接或脚本可以引用它。 iframe srchttps://www.example.com namemyIframe/iframesandbox启用额外的安全和限制选项。 iframe srchttps://www.example.com sandboxallow-scripts allow-same-origin/iframeallowfullscreen允许全屏显示。 iframe srchttps://www.example.com allowfullscreen/iframeframeborder设置边框宽度一般用 CSS。 iframe srchttps://www.example.com frameborder0/iframeloading指定加载策略lazy、eager。 iframe srchttps://www.example.com loadinglazy/iframereferrerpolicy控制 Referer HTTP 头的发送策略。 iframe srchttps://www.example.com referrerpolicyno-referrer/iframe使用iframe 安全性 使用 sandbox 属性限制嵌入内容的行为提高安全性。注意跨域问题不同源的内容可能会有访问限制。嵌入的内容可能会影响你的网站性能和用户体验。 性能 使用 loadinglazy 延迟加载 iframe可以提高页面初始加载速度。避免嵌入过多的 iframe因为每个 iframe 都会增加页面的加载时间。 兼容性 检查不同浏览器对 iframe 属性的支持情况确保跨浏览器兼容性。
9.HTML 表格
HTML 表格用于以行和列的形式显示数据。表格由 table 元素定义包含若干 tr (表格行)每个表格行又包含若干 td (表格数据单元) 和 th (表格头单元)。
tabletrth表头1/thth表头2/th/trtrtd数据1/tdtd数据2/td/trtrtd数据3/tdtd数据4/td/tr
/tabletable定义表格。tr定义表格行。td定义表格数据单元。th定义表格头单元通常用于表头。
表格部分
thead定义表格头部包含表头行。tbody定义表格主体包含数据行。tfoot定义表格底部包含总结行或脚注行。
tabletheadtrth表头1/thth表头2/th/tr/theadtbodytrtd数据1/tdtd数据2/td/trtrtd数据3/tdtd数据4/td/tr/tbodytfoottrtd总结1/tdtd总结2/td/tr/tfoot
/table属性
colspan合并列。rowspan合并行。
tabletrth colspan2合并两列的表头/th/trtrtd rowspan2合并两行的数据/tdtd数据2/td/trtrtd数据3/td/tr
/table表格样式
通过 CSS 可以美化表格如添加边框、背景颜色、对齐方式等。
styletable {width: 100%;border-collapse: collapse;}th, td {border: 1px solid black;padding: 8px;text-align: left;}th {background-color: #f2f2f2;}tr:nth-child(even) {background-color: #f9f9f9;}
/style10.HTML 表单
HTML 表单Form用于收集用户输入的数据并将其发送到服务器进行处理。表单由 form 元素定义包含各种输入字段和提交按钮。
form actionsubmit.php methodpost!-- 输入字段 --input typetext nameusername placeholder请输入用户名input typepassword namepassword placeholder请输入密码!-- 提交按钮 --button typesubmit提交/button
/form常见表单控件 文本输入框input typetext input typetext nameusername placeholder请输入用户名密码输入框input typepassword input typepassword namepassword placeholder请输入密码单选按钮input typeradio input typeradio namegender valuemale 男
input typeradio namegender valuefemale 女复选框input typecheckbox input typecheckbox namehobby valuereading 阅读
input typecheckbox namehobby valuemusic 音乐下拉菜单select select namecityoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueguangzhou广州/option
/select文本域textarea textarea namemessage placeholder请输入留言/textarea文件上传input typefile input typefile namefile表单属性
action定义表单提交的目标 URL。method定义提交表单的 HTTP 方法GET 或 POST。target定义提交后在哪个窗口显示结果。autocomplete定义是否启用表单字段的自动完成。enctype定义表单数据的编码类型通常用于文件上传时值为 multipart/form-data。novalidate定义是否禁用表单的客户端验证。
表单按钮
提交按钮button typesubmit提交/button重置按钮button typereset重置/button
表单验证
required 属性定义字段为必填项。表单验证 API使用 JavaScript 进行自定义验证。
三、HTML5新特性
1. 本地存储
本地存储是指在用户的浏览器或设备上保存数据的能力。通过本地存储网页应用程序可以在用户的设备上存储和检索数据而无需将所有数据都传输到服务器上。这样做可以提高应用程序的性能并允许在离线状态下访问应用程序。
HTML5引入了几种本地存储机制包括Web Storage和IndexedDB。Web Storage提供了一种简单的键值对存储方式包括sessionStorage和localStorage两种类型而IndexedDB则是一个更为强大、面向对象的客户端存储数据库允许存储结构化数据并支持索引。
Web Storage Web Storage是HTML5提供的一种在客户端即用户的浏览器上存储数据的机制用于将键值对数据保存在用户设备上。
sessionStorage: sessionStorage对象允许你存储特定于一个会话的数据。会话指的是用户在关闭标签页或浏览器窗口之前打开的所有页面。当用户关闭标签页或浏览器窗口时存储的数据将被清除。通过JavaScript的sessionStorage对象您可以将字符串键值对存储在特定于当前会话的存储区域中并在同一页面或同一窗口中的其他页面中访问这些数据。
sessionStorage.setItem(key, value) //存储数据
sessionStorage.getItem(key) //获取数据
sessionStorage.removeItem(key) //删除数据
sessionStorage.clear() //删除所有数据localStorage: localStorage对象允许你存储特定于某个域名的数据。这意味着存储在localStorage中的数据将一直存在直到被显式删除。它不受会话结束、标签页关闭或浏览器重启的影响。与sessionStorage类似您可以使用JavaScript的localStorage对象将数据存储为字符串键值对并且该数据将一直保留在用户的设备上直到被手动删除关闭页面也会存在。可以多窗口多页面共享。
localStorage.setItem(key, value) //存储数据
localStorage.getItem(key) //获取数据
localStorage.removeItem(key) //删除数据
localStorage.clear() //删除所有数据Web Storage的优点包括
简单易用采用简单的键值对存储方式易于使用。支持大容量相比传统的CookieWeb Storage的存储容量更大可以存储更多的数据。安全性存储在Web Storage中的数据不会随着每个HTTP请求发送到服务器有助于保护用户隐私。
本地存储特性
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大sessionStorage约5M、localStorage约20M只能存储字符串可以将对象JSON.stringify() 编码后存储
IndexedDB IndexedDB是一个浏览器内置的用于存储大量结构化数据的低级API。它提供了一种在客户端即浏览器中存储和检索可通过键访问的对象的方法。IndexedDB允许开发者存储和检索大量数据并且支持复杂的查询操作适合用于构建复杂的Web应用程序或离线应用程序。
对象存储IndexedDB使用对象存储来组织数据。每个数据库可以包含多个对象存储空间每个对象存储空间可以存储不同类型的对象。事务IndexedDB使用事务来确保数据的完整性和一致性。对于读取和写入数据的操作都需要在事务内执行。异步操作IndexedDB的API是异步的这意味着大部分操作都是通过回调函数或Promise进行处理的。索引IndexedDB允许为存储的对象指定一个或多个索引这样就可以通过这些索引来高效地检索数据。IndexedDB适合存储大量结构化数据比如离线应用程序的数据、浏览器缓存数据、本地日志等。它也常用于在Web应用程序中实现数据的本地存储和离线访问功能。IndexedDB通常与Web Worker一起使用因为IndexedDB的操作可能会阻塞主线程为了避免对用户界面的影响通常会将IndexedDB的操作放在独立的后台线程中执行。
bodyh1学生信息管理/h1divlabel forname姓名/labelinput typetext idnamelabel forage年龄/labelinput typenumber idagebutton onclickaddStudent()添加学生/button/divdiv idstudentListh2学生列表/h2ul idlist/ul/divscriptvar db;var request window.indexedDB.open(student_db, 1);request.onerror function(event) {console.error(数据库打开出错);};request.onsuccess function(event) {db event.target.result;displayStudents();};request.onupgradeneeded function(event) {var db event.target.result;var objectStore db.createObjectStore(students, { keyPath: id, autoIncrement:true });objectStore.createIndex(name, name, { unique: false });objectStore.createIndex(age, age, { unique: false });};function addStudent() {var name document.getElementById(name).value;var age document.getElementById(age).value;var transaction db.transaction([students], readwrite);var objectStore transaction.objectStore(students);var request objectStore.add({ name: name, age: age });request.onsuccess function(event) {displayStudents();};request.onerror function(event) {console.error(添加学生失败);};}function displayStudents() {var transaction db.transaction([students], readonly);var objectStore transaction.objectStore(students);var list document.getElementById(list);list.innerHTML ;objectStore.openCursor().onsuccess function(event) {var cursor event.target.result;if (cursor) {var li document.createElement(li);li.textContent cursor.value.name - cursor.value.age 岁;list.appendChild(li);cursor.continue();}};}/script
/body2. Cookie
Cookie 是存储在用户计算机上的小型文本文件由 Web 服务器发送并由 Web 浏览器保存。Cookie 用于在不同页面之间传递状态信息通常用于跟踪会话、存储用户偏好设置和身份验证等。
每个 Cookie 包含以下几部分信息
名称Cookie 的名称。值Cookie 的值。域Cookie 所属的域。路径Cookie 的路径。过期时间Cookie 的有效期。安全标志如果设置为 Secure则 Cookie 仅通过 HTTPS 发送。HttpOnly 标志如果设置为 HttpOnly则 Cookie 不能通过 JavaScript 访问。
设置 Cookie
document.cookie usernameJohnDoe; expiresThu, 18 Dec 2023 12:00:00 UTC; path/;usernameJohnDoe设置 Cookie 名称为 username值为 JohnDoe。expires设置 Cookie 的过期时间。如果未设置Cookie 在会话结束时关闭浏览器失效。path设置 Cookie 的路径。默认情况下Cookie 仅在设置它的路径及其子路径中可用。
读取 Cookie
function getCookie(name) {let cookies document.cookie.split(;);for (let i 0; i cookies.length; i) {let cookie cookies[i].trim();if (cookie.indexOf(name ) 0) {return cookie.substring(name.length 1, cookie.length);}}return ;
}// 使用示例
let username getCookie(username);
if (username ! ) {alert(Welcome again username);
} else {alert(Welcome new user!);
}删除 Cookie
删除 Cookie 的方法是将它的过期时间设置为一个过去的时间
document.cookie username; expiresThu, 01 Jan 1970 00:00:00 UTC; path/;;Cookie 的属性
expires指定 Cookie 的到期时间。如果未设置Cookie 在会话结束时失效。max-age指定 Cookie 的有效期以秒为单位。与 expires 类似但更精确。path指定 Cookie 的路径默认是当前路径及其子路径。domain指定 Cookie 的域名默认是当前域名。secure指定 Cookie 仅通过 HTTPS 发送。HttpOnly指定 Cookie 不能通过 JavaScript 访问。 Cookie 适用于需要与服务器交互的状态信息存储如用户登录状态以及需要跨页面和子域共享的小型数据。Local Storage 适用于需要长期存储较大数据的情况不需要与服务器频繁交互如用户设置、主题选择。Session Storage 适用于在当前会话中需要临时存储数据的情况如临时表单数据、页面状态。
3. 语义化标签
4.多媒体元素
在 HTML 中可以使用 audio 元素来嵌入音频文件。
audio srcaudio-file.mp3 controls/audiosrc指定音频文件的路径或 URL。 audio srcaudio-file.mp3/audiocontrols显示音频控件。 audio srcaudio-file.mp3 controls/audioautoplay音频加载后自动播放。 audio srcaudio-file.mp3 autoplay/audioloop音频播放结束后重新播放。 audio srcaudio-file.mp3 loop/audiomuted音频默认静音。 audio srcaudio-file.mp3 muted/audiopreload指定音频文件的预加载行为auto, metadata, none。 audio srcaudio-file.mp3 preloadauto/audio可以使用 source 元素为不同格式的音频文件提供多个源以提高浏览器兼容性。
audio controlssource srcaudio-file.mp3 typeaudio/mpegsource srcaudio-file.ogg typeaudio/oggYour browser does not support the audio element.
/audiotrack 元素用于指定 audio 或 video 元素的文本轨道如字幕、字幕、描述等。它允许您为您的媒体内容提供多语言或多版本的文本。
可以使用 JavaScript 来控制音频播放并处理各种事件。
play(): 播放音频。pause(): 暂停音频。load(): 重新加载音频。
常用事件
play: 当音频开始播放时触发。pause: 当音频暂停时触发。ended: 当音频播放结束时触发。timeupdate: 当音频播放位置改变时触发。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML Audio Example/title
/head
bodyaudio idmyAudio controlssource srcaudio-file.mp3 typeaudio/mpegsource srcaudio-file.ogg typeaudio/oggYour browser does not support the audio element./audiobutton onclickplayAudio()Play/buttonbutton onclickpauseAudio()Pause/buttonbutton onclickreloadAudio()Reload/buttonscriptconst audio document.getElementById(myAudio);function playAudio() {audio.play();}function pauseAudio() {audio.pause();}function reloadAudio() {audio.load();}audio.addEventListener(play, () {console.log(Audio is playing);});audio.addEventListener(pause, () {console.log(Audio is paused);});audio.addEventListener(ended, () {console.log(Audio has ended);});audio.addEventListener(timeupdate, () {console.log(Current time: audio.currentTime);});/script
/body
/html5.表单增强
表单增强是指在网页开发中为表单元素添加一些额外的功能和属性以提高用户体验和数据的完整性。 新增表单类型 HTML5引入了一些新的表单类型这些新的表单类型可以帮助浏览器更好地验证用户输入的数据并在移动设备上提供更好的输入体验。例如使用input typeemail可以告诉浏览器这是一个邮箱地址输入框从而在提交表单前进行邮箱格式的验证。 email用于接受电子邮件地址的输入。url用于接受URL地址的输入。tel用于接受电话号码的输入。number用于接受数值的输入。date、month、week、time、datetime-local用于接受日期和时间相关的输入分别表示日期、月份、周、时间、本地日期时间。range用于接受一定范围内数字的输入。color用于接受颜色值的输入。 验证属性 HTML5引入了一些内置的验证属性可以在不需要JavaScript的情况下进行基本的数据验证。例如使用input typetext required将会强制要求用户在提交表单前填写该字段否则将会收到相应的提示信息。 required指定字段是否为必填项如果添加了这个属性则用户在提交表单时必须填写该字段。pattern使用正则表达式定义输入的模式如果输入不符合模式要求则会触发验证失败。min 和 max用于限制数值输入的最小值和最大值。minlength 和 maxlength用于限制输入的最小长度和最大长度。type对于文本输入框可以使用不同的type属性来指定输入的类型如email、url、tel等浏览器会进行相应的格式验证。step对于数字输入框可以指定数字的间隔步长。title为字段添加一个标题用于说明输入的要求通常当鼠标悬停在输入字段上时会显示。autocomplete指示浏览器是否应该自动完成输入字段。可以是on允许自动完成或者off禁止自动完成。autofocus指定页面加载后该字段是否自动获得焦点。 自定义验证规则 除了内置的验证属性外还可以使用JavaScript自定义验证规则。通过JavaScript编写自定义的验证逻辑可以实现更复杂的验证需求比如检查密码强度、确认密码是否一致等。这样可以在客户端即时反馈错误信息给用户提高用户体验。 实时反馈 表单增强还包括实时反馈用户输入。通过JavaScript监听用户输入事件可以实时对用户的输入进行验证和处理及时提示用户输入是否符合要求。这种实时反馈可以避免用户在提交表单后才发现输入错误提高用户对数据输入的可控性。
6.Canvas
canvas是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。 Canvas是HTML5新增的一个用于在网页上绘制图形和动画的元素。使用Canvas开发者可以通过JavaScript动态地在网页上生成图形、图表、动画等视觉内容。canvas 只支持两种形式的图形绘制矩形和路径由一系列点连成的线段。
在HTML中我们可以通过canvas标签来创建一个Canvas元素例如
canvas idmyCanvas width400 height200/canvas这个canvas标签定义了一个固定大小的画布可以通过CSS样式或者直接设置width和height属性来调整其显示大小。
通过JavaScript的Canvas API可以在Canvas上绘制各种图形包括线条、矩形、圆形、路径等。常用的绘图方法包括strokeRect()绘制矩形轮廓、fillRect()填充矩形、arc()绘制圆弧、lineTo()绘制直线路径等。
Canvas也支持在画布上绘制文本内容可以使用fillText()和strokeText()等方法来绘制文本并指定字体、颜色等属性。
开发者可以直接访问和修改Canvas上每个像素的颜色值以实现一些复杂的图形处理效果。
Canvas可以用于创建动画效果通过在每一帧更新画布内容并使用定时器控制刷新频率实现动画效果。
Canvas元素也支持事件处理比如鼠标点击、移动等事件开发者可以通过监听这些事件来实现交互式的Canvas应用。 script// 获取Canvas元素var canvas document.getElementById(myCanvas);var ctx canvas.getContext(2d);// 绘制矩形ctx.fillStyle red; // 设置填充颜色为红色ctx.fillRect(10, 10, 50, 50); // 绘制一个宽50、高50的矩形起始点坐标为(10, 10)// 添加文本ctx.font 16px Arial;ctx.fillStyle blue; // 设置文本颜色为蓝色ctx.fillText(Hello, Canvas!, 10, 80); // 在坐标(10, 80)处绘制文本/script7.SVG 矢量图形支持
SVGScalable Vector Graphics可缩放矢量图形是一种用于描述二维矢量图形的XML标记语言它可以通过文本编辑器编辑也可以通过代码或矢量图形编辑软件生成。SVG图形可以在HTML中嵌入并且支持被JavaScript、CSS和动画脚本操作。不同于Canvas它支持圆形、矩形以及简单和复杂曲线 矢量图形 SVG使用矢量图形来描述图像与基于像素的位图图形不同矢量图形使用数学公式来定义形状因此无论如何缩放图像都不会失真。这使得SVG非常适合用于图标、图表和其他需要在不同尺寸和分辨率下保持清晰度的场景。 嵌入方式 在HTML中可以使用svg标签将SVG图形嵌入到页面中例如 svg width100 height100circle cx50 cy50 r40 strokeblack stroke-width3 fillred /
/svg基本形状 SVG支持多种基本形状如矩形、圆形、椭圆、线段、多边形等每种形状都有相应的SVG标签来描述开发者可以利用这些标签来创建各种复杂的图形。 路径 除了基本形状外SVG还支持使用路径来描述更加复杂的图形开发者可以使用path标签来定义路径从而绘制出各种自定义的曲线和图案。 样式和动画 与HTML元素类似SVG图形可以通过CSS样式表来定义样式如颜色、边框、填充等属性。此外SVG也支持通过CSS和JavaScript来添加动画效果以实现图形的交互和视觉效果。 交互性 由于SVG图形是文档对象模型DOM的一部分因此可以通过JavaScript来控制和修改SVG图形比如改变形状、颜色、位置等属性实现交互式功能。
8.拖放API
拖放Drag and DropAPI 是一组用于实现网页元素拖拽和放置的功能的接口它使得开发者能够轻松地为网页添加拖放交互功能。用户可以使用鼠标选择可拖动元素将这些元素拖动到可放置元素然后通过释放鼠标按钮来放置它们。在拖动操作期间可拖动元素的半透明表示会跟随指针。 您可以自定义哪些元素可以拖动、可拖动元素产生的反馈类型以及可放置元素。
拖放操作通常指用户在页面上点击并按住鼠标左键不放随后移动鼠标最终释放鼠标左键的操作。这个过程中被拖拽的元素会跟随鼠标的移动而移动直到被放置到目标区域。
拖放API主要包含了一系列事件这些事件允许开发者在拖放过程中监听并执行相应的操作。常见的事件包括dragstart拖拽开始、drag拖拽中、dragenter进入目标区域、dragover在目标区域中移动、dragleave离开目标区域、drop释放鼠标进行放置、dragend拖动结束等。
通过设置draggable属性为true可以使得元素变为可拖拽的。例如div draggabletrue.../div。
拖放API还提供了一系列的 JavaScript 方法用于控制拖拽操作的行为比如setData设置拖拽数据、getData获取拖拽数据、preventDefault阻止默认操作等。
文件拖放
div iddrop-area将文件拖到此处/divscriptvar dropArea document.getElementById(drop-area);// 阻止浏览器默认行为[dragenter, dragover, dragleave, drop].forEach(eventName {dropArea.addEventListener(eventName, preventDefaults, false);});function preventDefaults (e) {e.preventDefault();e.stopPropagation();}// 处理拖入效果dropArea.addEventListener(dragenter, () {dropArea.style.background #f7f7f7;});// 处理拖出效果dropArea.addEventListener(dragleave, () {dropArea.style.background #ffffff;});// 实现文件拖放dropArea.addEventListener(drop, handleDrop, false);function handleDrop(e) {let dt e.dataTransfer;let files dt.files;handleFiles(files);}function handleFiles(files) {for (let i 0; i files.length; i) {const file files[i];console.log(文件名:, file.name, 文件大小:, file.size, 文件类型:, file.type);}}
/script9.地理定位
10.离线Web应用程序 cache manifest
Cache Manifest 是一种用于创建离线 Web 应用程序的技术它允许开发者指定需要在客户端缓存的文件列表在没有网络连接时浏览器可以使用缓存中的这些文件来加载应用程序。
Cache Manifest 文件是一个简单的文本文件通常以.appcache作为后缀名它定义了需要在离线状态下缓存的文件列表包括 HTML、CSS、JavaScript、图像等资源。浏览器会根据这个清单文件下载和存储相关资源并在离线状态时使用这些资源来呈现应用程序。
开发者需要在应用程序的根目录下创建一个以.appcache为扩展名的文本文件并在其中列出需要缓存的文件路径例如
CACHE MANIFEST
# 版本号
# Version 1.0.0CACHE:
index.html
styles.css
script.js
images/logo.pngNETWORK:
*FALLBACK:
/ /offline.html在 CACHE MANIFEST 文件中CACHE 区块用于列出需要离线缓存的文件列表。这些文件会在首次访问应用程序时被下载并存储在本地缓存中以备离线时使用。NETWORK 区块允许开发者指定不需要缓存的文件、URL模式或域名。在该区块中添加星号*表示除了 CACHE 中列出的资源外其他所有资源都需要联网获取。FALLBACK 区块定义了一个替代方案当用户请求的资源不可用时如离线状态浏览器将使用 FALLBACK 中指定的替代页面来代替请求的页面。当应用程序的 CACHE MANIFEST 文件内容发生变化时浏览器会重新下载和缓存指定的文件。开发者可以通过修改版本号或者修改 CACHE MANIFEST 文件来触发应用程序的更新。
使用html manifestmanifest.appcache
11. Web Workers
Web Workers 是一种在 Web 应用程序中运行后台脚本的机制它允许开发者将耗时的任务、大量计算或需要与服务器进行大量数据交换的操作放在独立的线程中执行从而不会阻塞主线程提高了 Web 应用程序的性能和响应速度。
Web Workers 允许创建额外的工作线程使得耗时操作可以在后台线程中执行不影响主线程的执行。让复杂耗时的后台执行每个 Web Worker 都有自己独立的全局上下文Global Context它们无法访问 DOM也无法直接使用 window 和 document 对象无法访问主线程的变量和函数。这样做的好处是可以避免 Web Worker 对主线程的干扰同时提高了 Web 应用程序的安全性。主线程和 Web Worker 之间可以通过消息进行通信。主线程可以向 Web Worker 发送消息Web Worker 也可以向主线程发送消息从而实现二者之间的数据交换和协作。
Web Workers 适合用于处理大量数据的计算、复杂的算法运算、大规模数据的处理和网络请求等耗时操作以及需要长时间运行的任务。
目前存在两种类型的 Web WorkersDedicated Workers专用 Worker和 Shared Workers共享 Worker。Dedicated Workers 只能被创建它们的脚本所调用一个专用线程对应一个主线程而 Shared Workers 则可以被多个脚本共享一个共享线程对应多个主线程。
主线程通过 new Worker(scriptURL) 来创建一个 Worker 实例其中scriptURL是指定 Worker 线程执行脚本的 URL。在 Worker 线程中可以通过监听 onmessage 事件来接收来自主线程的消息。在 Worker 线程中可以通过调用 postMessage(data) 方法向主线程发送消息data 可以是任意序列化的数据。在主线程中可以通过调用 worker.terminate() 方法来终止 Worker 线程。在 Worker 线程中可以使用 importScripts() 方法加载其他 JavaScript 脚本类似于在主线程中使用 script 标签。当 Worker 线程抛出未捕获的异常时会触发 onerror 事件并可在主线程中监听该事件。navigator.hardwareConcurrency 属性这个只读属性返回设备的逻辑处理器内核数量可以帮助决定在 Worker 线程中执行并行计算的最佳线程数。
不可用于Service Worker Service Worker是一种特殊类型的 Web Worker它主要用于实现像缓存、消息推送、网络代理等与网络相关的功能通常用于创建离线应用程序和向客户端推送通知。
使用场景
计算密集型任务例如图像处理、数值计算、复杂算法等。通过将这些任务放入 Web Worker 中进行处理可以避免阻塞主线程保持页面的响应性。大规模数据处理当需要处理大量数据时比如数据排序、搜索、过滤等操作可以利用 Web Worker 在后台进行处理从而提高页面的性能和响应速度。网络请求与数据缓存Web Worker 可以用于执行网络请求处理返回的数据并将数据进行本地缓存这样可以避免阻塞主线程对 UI 的渲染影响。实时通信和消息推送Web Worker 可以用于接收服务器端的实时消息推送然后将消息传递给主线程实现实时通信功能。文件操作对文件的读取、解析、处理等操作是典型的 Web Worker 使用场景尤其是对大型文件的处理可以避免阻塞主线程。加密和安全操作Web Worker 可以用于执行加密和安全相关的操作例如密码学运算、身份验证等确保这些敏感操作不会暴露在主线程中。
12.Web Sockets
Web Sockets可以在客户端和服务器之间进行双向通信的技术。它允许在单个TCP连接上进行全双工通信从而使得客户端和服务器能够实时、高效地交换数据。长连接
全双工通信与传统的HTTP请求不同Web Sockets允许客户端和服务器在同一个连接上同时进行发送和接收操作实现了真正的双向通信。持久连接一旦建立了Web Sockets连接它将保持打开状态直到客户端或服务器明确关闭连接。这意味着可以在不断开连接的情况下持续进行数据交换避免了HTTP的短连接模式带来的开销。低延迟由于Web Sockets使用单个TCP连接并且不需要重复建立连接因此它能够实现低延迟的实时通信非常适合于需要快速交换数据的场景比如在线游戏、股票行情等。跨域支持Web Sockets遵循同源策略但通过特定的协议和头部它也可以支持跨域通信。客户端通过JavaScript代码发起Web Sockets连接请求然后服务器端也可以使用相应的技术建立对应的Web Sockets连接。一旦连接建立成功客户端和服务器就可以通过发送消息的方式进行实时的数据交换。
适用于实时聊天、实时数据更新、协作编辑。
// 服务器端代码Node.jsconst WebSocket require(ws);const wss new WebSocket.Server({ port: 8080 });wss.on(connection, function connection(ws) {ws.on(message, function incoming(message) {// 收到消息时向所有连接的客户端广播该消息wss.clients.forEach(function each(client) {if (client ! ws client.readyState WebSocket.OPEN) {client.send(message);}});});
});
!-- 客户端页面 --!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleWebSocket 聊天室/title
/head
bodydiv idchat/divinput typetext idmessageInputbutton onclicksendMessage()发送/buttonscriptconst ws new WebSocket(ws://localhost:8080);ws.onopen function() {console.log(已连接至WebSocket服务器);};ws.onmessage function(event) {const chatDiv document.getElementById(chat);chatDiv.innerHTML div event.data /div;};function sendMessage() {const messageInput document.getElementById(messageInput);ws.send(messageInput.value);messageInput.value ;}/script
/body
/html
