HTML 基础_html/css_WEB-ITnose-html教程-PHP中文网

1、html 简介

　　W3C（World Wide Web Consortium），W3C 组织，万维网联盟，这个组织制订网页标准。W3C 标准不是一个标准，而是一系列的标准的集合，包含三部分的标准：结构标准，表现标准和动作标准，与结构标准对应的是 HTML，与表现标准对应的是 CSS，与动作标准对应的是 JavaScript。

　　HTML 是一种在 Web 上使用的通用标记语言，允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 的关键是标签，其作用是呈现内容。浏览器用于读取 HTML 文件，并将其作为网页显示，他并不是直接显示的 HTML 标签，但是可以使用标签来决定如何展现 HTML 页面的内容给用户。

　　HTML 指的是超文本标记语言：Hyper Text Markup Language。HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页。HTML 文档包含了 HTML 标签及文本内容，HTML文档也叫做 web 页面。

　　HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签通常是成对出现的，比如

和

立即学习“前端免费学习笔记（深入）”；
，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

　　HTML标签和 HTML元素通常都是描述同样的意思，但是严格来讲，一个 HTML 元素包含了开始标签与结束标签，如：

我是一个段落。

。

2、HTML 标签

　　HTML 文档由 HTML 元素定义。开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容，空元素在开始标签中进行关闭，以开始标签的结束而结束，大多数 HTML 元素可拥有属性。

　　HTML 文档由嵌套的 HTML 元素构成：

我是一个段落。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta charset="UTF-8"> 5     <title>示例</title> 6 </head> 7 <body> 8 <p style="color:red">我是一个段落。</p> 9 </body>10 </html>

登录后复制

　　HTML 元素可以设置属性，属性是 HTML 元素提供的附加信息，属性一般描述于开始标签，属性总是以名称/值对的形式出现，比如：name="value"。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么你必须使用单引号。

　　适用于大多数 HTML 元素的属性：

　　　　①：id　　定义元素的唯一 id
　　　　②：class　　为 html 元素定义一个或多个类名(classname)
　　　　③：style　　规定元素的行内样式（inline style 内联样式）
　　　　④：title　　描述了元素的额外信息 (作为工具条使用)

　　(1)、基础标签

　　HTML5 声明：。声明有助于浏览器正确显示网页，也是在告诉浏览器这是一个 HTML5 的网页。声明位于文档中的最前面的位置，处于标签之前，标签没有结束标签，声明不区分大小写。

　　 标签告知浏览器这是一个 HTML 文档。标签是 HTML 文档中最外层的元素，也是文档的根元素，但是不包含 doctype 元素，也就是声明，doctype 元素必须位于 html 元素之前，标签是所有其他 HTML 元素的容器。HTML5 中增加了一个新属性：manifest，值为 URL 用于定义一个 URL，在这个 URL 上描述了文档的缓存信息。

　　 与标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体，文档的头部由标签定义，而主体由标签定义。

元素包含了所有的头部标签元素。在元素中你可以插入脚本(scripts)，样式文件(CSS)，及各种 meta 信息。可以添加在头部区域的元素标签有 7 个: ，<style>，<meta>，<link>，<script>，<noscript> 和 <base>。</style> </title></strong></p> <p> </p> <p>　　<strong><meta>标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。</strong><strong><meta>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他Web服务。注意：<meta> 通常位于区域内，在 HTML 中 <meta> 标签没有结束标签。</strong></p> <p>　　<strong>元数据（Metadata）是数据的数据信息，<meta> 标签提供了 HTML 文档的元数据。注意：元数据通常以名称/值对出现。注意：如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。</strong><strong>在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易</strong>：HTML 4.01： <meta http-equiv="content-type" content="text/html; charset=UTF-8">，<strong>HTML5： <meta charset="UTF-8"></strong>。</p> <p>　　<strong><meta> 标签使用实例：</strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">1 定义编码格式：<meta charset="UTF-8">2 为搜索引擎定义关键词：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">3 为网页定义描述内容：<meta name="description" content="HTML基础">4 定义网页作者：<meta name="author" content="Mr mo">5 每30秒中刷新当前页面：<meta http-equiv="refresh" content="30">6 常用的针对移动网页优化过 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"></pre><div class="contentsignin">登录后复制</div></div> </p> <p>　　<strong>上面实例最后一项代码解析：</strong></p> <p>　　<strong>width：控制 viewport(可视区) 的大小，可以是指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度，单位为缩放为 100% 时的 CSS 的像素。</strong></p> <p><strong>　　height：和 width 相对应，指定高度。</strong></p> <p><strong>　　initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。</strong></p> <p><strong>　　maximum-scale/minimum-scale：允许用户缩放到的最大/最小比例。</strong></p> <p><strong>　　user-scalable：用户是否可以手动缩放。</strong></p> <p> </p> <p>　　<strong><title> 标签定义HTML文档的标题。使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。</title></strong></p> <p>　　<strong><title> 标签在所有 HTML 文档中是必需的。<title>元素：</title> </title></strong></p> <p>　　　　<strong>①：定义浏览器工具栏中的标题。</strong></p> <p><strong> 　　　　②：提供页面被添加到收藏夹时的标题。 </strong></p> <p><strong>　　　　③：显示在搜索引擎结果中的页面标题。</strong></p> <p>　　<strong>注意：一个 HTML 文档中不能有一个以上的 <title> 元素。如果你遗漏了 <title> 标签，文档作为 HTML 是无效的。</title> </title></strong><strong><title> 标签定义了不同文档的标题。定义了浏览器工具栏的标题。当网页添加到收藏夹时，显示在收藏夹中的标题。显示在搜索引擎结果页面的标题。所以选择标题的时候，一定要简短，有说明性，采用关键词，与页面内容相关。</title></strong></p> <p> </p> <p>　　<strong><style> 标签定义了 HTML 文档的样式信息。</style></strong><strong>在 <style> 元素中，你可以规定在浏览器中如何呈现 HTML 文档，每个 HTML 文档能包含多个 <style> 标签。</style></strong><strong>注意：如果没有使用 "scoped" 属性，则每一个 <style> 标签必须位于 head 头部区域。</style></strong><strong>"scoped" 属性是 HTML5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。</strong><strong>在 HTML5 中可以不定义类型（type）属性，默认值为 "text/css"。如需链接外部样式表，就使用 <link> 标签。<style>定义文本样式，<link> 定义资源引用地址。</style></strong></p> <p> </p> <p>　　<strong><link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">。注意： link 元素是空元素，它仅包含属性，此元素只能存在于 head 部分，不过它可出现任何次数。</strong></p> <p> </p> <p>　　JavaScript 使 HTML 页面具有更强的动态和交互性。HTML 脚本标签 <script> 用于定义客户端脚本。<noscript> 标签定义了不支持脚本浏览器输出的文本，对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说，该元素非常有用。</script></p> <p> 　　<strong><script> 标签定义客户端脚本，比如 JavaScript。</script></strong><strong><script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。</script></strong>JavaScript 最常用于图片操作、表单验证以及内容动态更改。<strong>注意：如果使用 "src" 属性，则 <script> 元素必须是空的。</script></strong></p> <p>　　<strong>有多种执行外部脚本的方法：</strong></p> <p>　　　　<strong>①：如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）。</strong></p> <p><strong>　　　　② ：如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行。</strong></p> <p><strong>　　　　③：如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本。</strong></p> <p>　　<strong>在 HTML5 中 "type" 属性是可选的。src 属性规定外部脚本的 URL。</strong><strong>defer 属性用于规定当页面已完成解析后，执行脚本，仅适用于外部脚本。charset 属性用于规定在脚本中使用的字符编码，仅适用于外部脚本。</strong><strong>"async" 属性是 HTML5 中的新属性，用于规定异步执行脚本，仅适用于外部脚本。</strong></p> <p>　　<strong>引用外部脚本的语法：<script src="URL"></script> 其中 src="RUL" 中填写同级目录下的外部脚本文件名。</strong></p> <p>　　<strong>注意：</strong></p> <p>　　　　<strong>①：外部脚本文件可以是任意扩展名，通常开发者会将 JavaScript 外部脚本的扩展名写为 script.js。 </strong></p> <p><strong>　　　　②：在外部脚本文件中，只能包含脚本语言代码，不能包含其他代码，如HTML代码等，也不能包含 <script> 标签，因为 <script>元素属于 HTML 语言中的元素。</script></strong></p> <p><strong>　　　　③：在引用外部脚本文件时，<script> 标签与 </script> 标签之间不能有其他代码，包括脚本语言代码。</strong></p> <p><strong>　　　　④：虽然在引用外部脚本文件时，<script> 标签与 </script>标签之间不能有其他代码，但标签也不能被省略。</strong></p> <p> 　　<strong><noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<noscript> 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。<noscript> 标签用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别 <noscript> 标签但无法支持其中的脚本的浏览器，如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。在 HTML4.01 中，<noscript> 标签只允许插入到元素中，而在 HTML5 中，<noscript> 标签可以插入到和区域中。</noscript> </noscript> </noscript> </noscript> </noscript> </noscript> </noscript></strong></p> <p> </p> <p>　　<strong> 标签定义文档的主体。元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。在 HTML 4.01 中，所有 body 元素的"呈现属性" 已废弃。在 HTML 5 中，删除了所有 body 元素的"呈现属性"，可以使用样式定义。</strong></p> <p> </p> <p>　　<strong>HTML 标题是通过 <h1> - <h6> 标签来定义的。<h1> 定义最大的标题，<h6> 定义最小的标题。要确保将 HTML 标题标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为你的网页的结构和内容编制索引。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。</h6> </h1> </h6> </h1> </h6> </h1></strong></p> <p> </p> <p>　　<strong>HTML 段落是通过 <p> 标签来定义的，HTML 可以将文档分割为若干段落，浏览器会自动地在段落的前后添加空行。</p></strong></p> <p> 元素是块级元素，该元素会自动在其前后创建一些空白。<strong>如果希望在不产生一个新段落的情况下进行换行，就使用 <br> 标签。</strong><strong>我们无法确定 HTML 被显示的确切效果，屏幕的大小，以及对窗口的调整都可能导致不同的结果，对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。</strong><strong>每个段落前空 2 个字，可用 CSS 样式定义：<p style="text-indent:2em"></p></strong></p> <p> </p> <p>　　<strong><br> 标签插入一个简单的换行符。</strong>没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的，<br> 就是一个空元素，所有空元素都必须被关闭 <br>。<strong>在写地址信息或者写诗词时 <br> 标签非常有用。注意：请使用 <br> 标签来输入空行，而不是分割段落。</strong></p> <p> </p> <p>　　<strong><hr> 标签在 HTML 页面中创建水平线，用于分隔内容。<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线，该元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。在 HTML5 中，<hr> 定义内容中的主题变化，并显示为一条水平线，而在 HTML 4.01 中，<hr> 标签仅仅显示为一条水平线。可使用 CSS 来为 <hr> 元素定义样式。</strong></p> <p> </p> <p>　　<strong>HTML 注释  。</strong> <strong>注释标签用来在源文档中插入注释，注释不会在浏览器中显示。可以使用注释对你的代码进行解释，这样做有助于在以后的时间对代码的编辑，特别是代码量很大的情况下很有用，也可以在注释内容存储针对程序所定制的信息，在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作，这些动作可能是简单的包括其他文件中的文本（即所谓的服务器端包含，server-inside include），也可能是复杂地执行其他命令去动态生成文档的内容。</strong></p> <p> </p> <p>　　<strong>(2)、样式标签</strong></p> <p>　　<strong><article> (H5) 标签定义一个文章区域。<article> 标签定义独立的内容，他定义的内容本身必须是有意义的且必须是独立于文档的其余部分。<article> 的潜在来源：论坛帖子、博客文章、新闻故事、评论。</article></article></article></strong></p> <p>　　<strong><aside> (H5) 标签定义页面的侧边栏内容。<aside> 标签定义 <article> 标签外的内容，<aside> 的内容应该与附近的内容相关。<aside> 的的内容可用作文章的侧栏。</aside></aside></article></aside></aside></strong></p> <p>　　<strong><section> (H5) 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。</section></strong></p> <p>　　<strong><header> (H5) 标签定义文档或者文档的一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，你可以定义多个 <header> 元素。注意：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。</header> </address></footer></header></header></header></header></strong></p> <p>　　<strong><footer> (H5) 标签定义 <section> 或 document 的页脚，也就是用于定义文档或者文档的一部分区域的页脚。<footer> 元素应该包含它所包含的元素的信息，在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个 <footer> 元素。假如你使用 <footer> 元素来插入联系信息，应该在 <footer> 元素内使用 <address> 标签。</address></footer></footer></footer></footer></section></footer></strong></p> <p>　　<strong><hgroup> (H5) 标签被用来对标题元素进行分组。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。</h6> </h1></hgroup></hgroup></strong></p> <p>　　<strong><details> (H5) 标签规定了用户可见的或者隐藏的需求的补充细节。<details> 标签用来供用户开启关闭的交互式控件，任何形式的内容都能被放在 <details> 标签里边。<details> 元素的内容对用户是不可见的，除非设置了 open 属性。该标签与 <summary> 标签配合使用可以为 details 定义标题，标题是可见的，用户点击标题时，会显示出 details。属性 open 用于规定 details 是否可见。</summary></details></details></details></details></strong></p> <p>　　<strong><summary> (H5) 标签为 <details> 元素定义一个可见的标题，当用户点击标题时会显示出详细信息。注意：<summary> 元素应该是 <details> 元素的第一个子元素。</details></summary></details></summary></strong></p> <p>　　<strong><dialog> (H5) 标签定义一个对话框、确认框或窗口。open 属性规定 dialog 元素是有效的，用户可以与它进行交互。</dialog></strong></p> <p>　　</p> <p>　　<strong><div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分，该元素没有特定的含义，他是可用于组合其他 HTML 元素的容器，<strong>常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。<div> 元素是块级元素，所以浏览器会默认在他前后添加一个换行符，如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性，常被用来布局网页。<strong>它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法，该元素的作用就是用于显示表格化的数据。 <p>　　<strong><span> 标签用于对文档中的行内元素进行组合，该标签没有固定的格式表现，也没有特定的含义，当对它应用样式时，它才会产生视觉上的变化，如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。被 <span> 元素包含的文本，可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。</span></span></span></span></span></span></strong></p> <p> </p> <p>　　<strong>(3)、格式标签</strong></p> <p>　　<strong><wbr> (H5) (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。如果单词太长，或者担心浏览器会在错误的位置换行，那么就可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机），他的作用就是告诉浏览器在这个标记处可以断行，但只是建议而不是必定会在此处断行，因为要根据整行文字长度而定，因此只要在连续的文本中间适当的插入若干 <wbr> 标签就能解决断行问题。</wbr></wbr></wbr></strong></p> <p>　　<strong><meter> (H5) 标签定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。注意： <meter> 不能作为一个进度条来使用，进度条请使用 <progress> 标签。</progress></meter></meter></strong></p> <p>　　<strong><progress> (H5) 标签定义运行中的任务进度（进程）。请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。注意：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter> 标签代替。</meter></progress></progress></progress></strong></p> <p>　　<strong><time> (H5) 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的，在该元素的内容中未指定日期或时间时，使用该属性。该元素能够以浏览器可读的方式对日期和时间进行编码，比如，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。datetime 属性规定日期/时间。另一种方式，则是由元素的内容给定日期/时间，该属性在所有浏览器中不会渲染任何特殊的效果。</time></strong></p> <p>　　<strong><mark> (H5) 标签定义带有记号的文本，请在需要突出显示文本时使用 <mark> 标签。</mark></mark></strong></p> <p> </p> <p>　　<strong>HTML 使用 <b> 与 <i> 标签对输出的文本进行格式定义，如：b粗体或 i斜体。通常标签 <strong> 替换加粗标签 <b> 来使用，<em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与 <i> 定义粗体或斜体文本。<strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。</em></strong>现今所有主要浏览器都能渲染各种效果的字体，不过，未来浏览器可能会支持更好的渲染效果。</i></b></i></em></b></strong></i></b></strong></p> <p>　　<strong><b> 标签定义粗体的文本。注意：根据 HTML5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。HTML5 规范声明：标题应该用 <h1> - <h6> 标签表示，被强调的文本应该用 <em> 标签表示，重要的文本应该用 <strong> 标签表示，被标记的或者高亮显示的文本应该用 <mark> 标签表示。也可以使用 CSS 的 "font-weight" 属性设置粗体文本。</mark></strong></em> </h6> </h1></b></b></strong></p> <p>　　<strong><i> 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。<i> 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。在没有其他适当语义的元素可以使用时，就使用 <i> 元素。其他语义的元素如下：<em> 元素定义被强调的文本，<strong> 元素定义重要的文本，<mark> 元素定义被标记的/高亮显示的文本，<cite> 元素定义作品的标题，<dfn> 元素定义一个定义项目。在 HTML 4.01 中，<i> 标签呈现斜体的文本，然而，在 HTML5 中没有必要这么做，可以使用样式表来格式化 <i> 元素中的文本。</i></i></dfn></cite></mark></strong></em></i></i></i></strong></p> <p>　　<strong><strong> 标签是一个短语标签，用来定义计算机程序的样本重要的文本。注意：并不反对使用这个标签，但是如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS，这样可能会取得更丰富的效果。所有短语标签：<em> 呈现为被强调的文本，<strong> 定义重要的文本，<dfn> 定义一个定义项目，<code> 定义计算机代码文本，<samp> 定义样本文本。<var> 定义变量，可以将此标签与 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"> 及 <code> 标签配合使用。在 HTML 4.01 中，<strong> 标签定义加粗的被强调的文本，而在 HTML5 中，<strong> 标签定义重要的文本。</strong></p> <p>　　<strong><em> 标签是一个短语标签，用来呈现为被强调的文本。注意：并不反对使用这个标签，但是如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS ，这样可能会取得更丰富的效果。</strong></p> <p>　　<strong><dfn> 标签是一个短语标签，用来定义一个定义项目。<code> 标签是一个短语标签，用来定义计算机代码文本。<samp> 标签是一个短语标签，用来定义计算机程序的样本文本。<var> 标签是一个短语标签，用来定义变量。提示：我们并不反对使用这些标签，但是如果你只是为了达到某种视觉效果而使用这些标签的话，我们建议你使用 CSS ，这样可能会取得更丰富的效果。</strong></p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1521"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680092127151.png" alt="硅基智能"> </a> <div class="aritcle_card_info"> <a href="/ai/1521">硅基智能</a> <p>基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="硅基智能"> <span>62</span> </div> </div> <a href="/ai/1521" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="硅基智能"> </a> </div> <p>　　<strong><cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。注意：人名不属于作品的标题。在 HTML 4.01 中，<cite> 标签定义一个引用，而在 HTML5 中，<cite> 标签定义作品的标题。</strong></p> <p>　　<strong><big> 标签定义大号文本，HTML5 不再支持，可以使用 CSS 代替。</strong></p> <p>　　<strong><small> 标签定义小号文本，主要用于定义小型文本和旁注。</strong></p> <p>　　<strong><pre class="brush:php;toolbar:false;"> 标签定义预格式文本，</strong>也就是在 HTML 代码中的文本编写什么样，就会在 HTML 页面显示什么样，<strong>对空行和空格可进行控制，也就是被包围在 <pre class="brush:php;toolbar:false;"> 标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。<pre class="brush:php;toolbar:false;"> 标签的一个常见应用就是用来表示计算机的源代码。</strong></p> <p>　　<strong><bdo> 标签定义文本方向。</strong>bdo 指的是 bidi 覆盖(Bi-Directional Override)，用来覆盖默认的文本方向。<p><bdo dir="rtl">我会反着显示。</bdo></p> dir 为 <bdo>标签的属性，rtl 是值，定义反向显示，该属性另一个值是 ltr，是默认值，文本方向是正常显示的。</p> <p>　　<strong><bdi> (H5) 标签允许设置一段文本，使其脱离其父元素的文本方向设置。bdi 指的是 bidi 隔离（Bi-directional Isolation）。在发布用户评论或其他你无法完全控制的内容时，该标签很有用。</strong></p> <p>　　<strong><q> 标签定义短的引用。浏览器经常会在这种引用的周围插入引号，该元素有一个属性 cite，值为 URL 用于规定引用的源 URL。请使用 <blockquote> 来标记摘自另一个源的块引用。</strong></p> <p>　　<strong><blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。该元素也有一个属性 cite，值为 URL 用于规定引用的来源。如果标记是不需要段落分隔的短引用，请使用 <q>。在 HTML 4.01 中，<blockquote> 标签定义一段长引用，而在 HTML5 中，<blockquote> 标签定义摘自另一个源的块引用。</strong></p> <p>　　<strong><del> 标签定义被删除文字。<ins> 标签定义被插入文本。提示：<del> 和 <ins> 一起使用，描述文档中的更新和修正，浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。</strong><del> 和 <ins> 拥有相同的两个属性：cite 和 datetime，cite 的值都为 URL ，<del> 的 cite 属性规定一个文档的 URL，该文档解释了文本被删除的原因，<ins> 的 cite 属性规定一个文档的 URL，该文档解释了文本被插入的原因。datetime 的值表示为：YYYY-MM-DDThh:mm:ssTZD，<del> 规定文本被删除/被插入的日期和时间。</p> <p>　　<strong><s> 标签对那些不正确、不准确或者没有用的文本进行标识。<s> 标签不应该用来定义替换的或者删除的文本，如果要定义替换的或者删除的文本，请使用 <del> 和 <ins> 标签。在 HTML 4.01 中，<s> 标签已被废弃，并且被用来给文本加删除线，而 HTML5 重新定义了 <s> 标签，现在是被用来定义那些不再正确的文本。</strong></p> <p>　　<strong><u> 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。在 HTML 中，<u> 元素已废弃，原被用来定义下划线，而在 HTML5 中重新定义了 <u> 元素。提示：请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。注意：HTML5 规范建议开发者尽量使用其他元素替代 <u> 元素。</strong></p> <p>　　<strong><sup> 标签定义上标。</strong>上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。<strong>上标文本能用来添加脚注。</strong></p> <p>　　<strong><sub> 标签定义下标文本。</strong>下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。<strong>下标文本能用来表示化学公式。</strong></p> <p>　　<strong><abbr> 标签定义缩写。</strong>当把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时，<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。<abbr> 标签用来表示一个缩写词或者首字母缩略词。通过对缩写词语进行标记，就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。</p> <p>　　<strong><address> 标签定义文档作者或拥有者的联系信息。</strong>如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息，如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。<address> 元素的文本通常呈现为斜体，大多数浏览器会在该元素的前后添加换行，或可用 <br/> 换行显示。不应该使用 <address> 标签来描述邮政地址，除非这些信息是联系信息的组成部分。<address> 元素通常被包含在 <footer> 元素的其他信息中。</p> <p> </p> <p>　　<strong>(4)、链接标签</strong></p> <p>　　<strong><a> 标签定义超链接，用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性，它指定链接的目标。如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。通常在当前浏览器窗口中显示被链接页面，除非规定了其他 Target 属性。可以使用 CSS 来改变链接的样式。</strong></p> <p>　　<strong>HTML 使用超级链接与网络上的另一个文档相连，几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当你把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在 <a> 标签中使用 href 属性来描述链接的地址，</strong><strong>默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线；访问过的链接显示为紫色并带上下划线；点击链接时，链接显示为红色并带上下划线。</strong><a href="url">跳转</a> "链接文本" 不必一定是文本，图片或其他 HTML 元素都可以成为链接，使用 Target 属性，可以定义被链接的文档在何处显示。</p> <p>　　<strong><a> 标签的 target 属性。target="_blank" 定义在新窗口显示目标网页。target="_self" 定义在当前窗体打开目标网页，此为默认值，这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。target="_top" 定义在当前窗体打开链接，并替换当前的整个窗体(框架页)。假如你的页面被固定在框架之内，可用 _top 值跳出框架。用 top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。框架网页中在上部窗口中显示目标网页。target="_parent" 这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集，如果这个引用是在窗口或者在顶级框架中，那么它与目标 self 等效，框架网页中当前整个窗口位置显示目标网页。</strong></p> <p>　　<strong>去掉超链接的下划线，并定义颜色（默认定义为黑色）：a{color:#000;text-decoration:none}　　</strong><strong>定义鼠标移动到超链接上的颜色，a:hover{color:red}</strong></p> <p><strong>　　图像超链接：<a href="http://www.aaa.com"><img src="images/demo.jpg" alt="HTML 基础_html/css_WEB-ITnose" ></a></strong></p> <p><strong>　　本文本链接：<p><a href="/index.html">本文本</a> 指向本网站中的一个页面的链接。</p>。相对路径，如 htef="/abc/"，代表本站内超文本。</strong></p> <p>　　<strong>HTML 链接的 id 属性。也可用class，id 是代表唯一的，而 class 是一个集，也就是所有 class 名称一样的都可被定义。id 属性可用于创建在一个 HTML 文档书签标记。用 id 命名那么这个书签就是唯一的。在 HTML 文档中插入ID：<a id="tips">超链接</a>。在 HTML 文档中创建一个链接到 "超链接(id="tips"）"：<a href="#tips">跳转</a>。或者，从另一个页面创建一个链接到 "超链接(id="tips"）部分"：<a href="index.html#tips">点我跳转</a>。</strong></p> <p><strong>　　电子邮件链接：<a href="mailto:123456@qq.com">电子邮件</a></strong> 当前系统需要安装 EMAIL 客户端程序才能使用，可用火狐/IE 测试，会跳转链接到一个邮件。</p> <p> </p> <p>　　<strong><base> 标签定义页面中所有链接的默认地址或默认目标。</strong><strong>该标签作为 HTML 文档中所有的链接标签的默认链接。</strong>在 HTML 中，<base> 标签没有结束标签，且为为元信息标签。在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部，而且 <base> 标签需要排在 <head> 元素中第一个元素的位置，这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。<base target="_blank"> 可定义页面中所有的超链接都从新窗口打开，如其中有不需要在新窗口打开的，可在 <a> 标签内自行定义：<a href="url" target="_self">链接</a>。<br /></p> <p class="sycode"> <pre class="precsshui"> 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>示例</title> 6 <base href="http://www.demo.com/images/" target="_blank"> 7 </head> 8 <body> 9 <img src="images.gif" alt="HTML 基础_html/css_WEB-ITnose" ><br/>10 <a href="http://www.demo.com">跳转</a>11 </body>12 </html></pre><div class="contentsignin">登录后复制</div></div> </var></samp></code></dfn></strong></em></strong></strong></p> <p>　　上面代码中，图像是默认链接的 demo.com 中一张名为 images 的图片，点击超链接跳转到该网站，并且在新窗口打开目标页面。</p> <p> </p> <p>　　<strong><nav> (H5) 标签定义导航链接的部分，并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域，在不同设备上(手机或者PC)可以制定导航链接是否显示，以适应不同屏幕的需求。</nav></nav></nav></strong></p> <p> </p> <p>　　<strong>(5)、图像标签</strong></p> <p>　　<strong>HTML 图像是通过<img alt="HTML 基础_html/css_WEB-ITnose" > 标签来定义的。图像的名称和尺寸是以属性的形式提供的，添加动态图片和添加静态图片格式是一样的，只是图像文件格式可能会有所不同。注意：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img alt="HTML 基础_html/css_WEB-ITnose" > 标签的作用是为被引用的图像创建占位符。通过在 <a> 标签中嵌套 <img alt="HTML 基础_html/css_WEB-ITnose" > 标签，可以给图像添加到另一个文档的链接，浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。在 HTML 中，<img alt="HTML 基础_html/css_WEB-ITnose" > 标签没有结束标签。</a></strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><img src="images/head.gif" style="max-width:90%" style="max-width:90%" alt="替代文本" title="图片描述"> </pre><div class="contentsignin">登录后复制</div></div> </p> <p>　　<strong><img alt="HTML 基础_html/css_WEB-ITnose" > 标签有两个必需的属性：src 和 alt。要在页面上显示图像，就需要使用源属性(src)，src 指 "source（来源）"，源属性的值是图像的 URL 地址，URL 指存储图像的位置。如果从另一个文件夹中添加图像，需要选择图片的路径：<img src="D/images/logo.jpg" alt="HTML 基础_html/css_WEB-ITnose" >。如果从另一个网站中添加图像，需要选择网站图片的路径，假如名为 "head.gif" 的图像位于 www.demo.com 的 images 目录中，那么其 URL 为 http://www.demo.com/images/head.gif。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</strong></p> <p>　　<strong>注意：title 属性用于把鼠标移动到图片上时显示文字信息，只有在重要的图片或者网站标志 LOGO 上加此属性。width 和 height 属性用于设置图像的高度与宽度。属性值默认单位为像素：px。指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。注意：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件，加载图片是需要时间的，在加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。</strong></p> <p>　　<strong>ismap 属性是一个布尔属性，可直接使用，用于将图像规定为服务器端图像映射，图像映射指的是带有可点击区域的图像。usemap 属性值为 #mapname 用于将图像定义为客户器端图像映射。HTML5 中增加了一个新属性 crossorigin 值为 anonymous、use-credentials 用于设置图像的跨域属性。</strong></p> <p>　　在文字中插入图像，需要使用 CSS 定义，图像需要与文字底部对齐则定义为：.img{vertical-align:bottom}，如果这里不设置的话图像会与文字底部会有一点距离。图像需要与文字中间对齐则设置为：.img{vertical-align:middle}。图像需要与文字顶部对齐则设置为-：.img{vertical-align:top}。</p> <p>　　<strong>vertical-align 这个属性的默认值是 baseline（基线），插入的 img 元素会放置在父元素的基线上，由于图片撑起了高度，所以文字下移。其实并不是文字下移，而是图像的高度与文字不同，就像鹤立鸡群。vertical-align 是“垂直的”+“对齐”的意思，用于设置元素的垂直排列的，多用在表格中，用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐，所有浏览器都支持 vertical-align 属性。</strong></p> <p>　<strong>　它的值比较多：</strong><br><strong>　　　　baseline：基线，默认值。元素放置在父元素的基线上。</strong><br><strong>　　　　sub：垂直对齐文本的下标。</strong><br><strong>　　　　sup：垂直对齐文本的上标。</strong><br><strong>　　　　top：把元素的顶端与行中最高元素的顶端对齐。</strong><br><strong>　　　　text-top：把元素的顶端与父元素字体的顶端对齐。</strong><br><strong>　　　　middle：把此元素放置在父元素的中部。</strong><br><strong>　　　　bottom：把元素的顶端与行中最低的元素的顶端对齐。</strong><br><strong>　　　　text-bottom：将支持valign特性的对象的文本与对象底端对齐。</strong><br><strong>　　　　length：用长度值指定由基线算起的偏移量，可以为负值。基线对于数值来说为 0。</strong><br><strong>　　　　percentage(%)：用百分比指定由基线算起的偏移量，可以为负值，基线对于百分数来说就是 0%。</strong></p> <p><strong>　　vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值，这会使元素降低而不是升高。在表格单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。valign 用来定义表格的对齐方式，valign 代表行的垂直对齐方式，(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))。valign 可以通俗的理解为上中下，而和 align 的区别是： align 为左中右，用于设置文本的对齐方式，text-align:center 居中，text-align:left 居左，text-align:right 居右。</strong></p> <p>　　定义图像在文字中的位置也可以将底外边距设置为负值，强行设置，假如图像的高度为 90px，则可定义为：.img1{margin-bottom:-45px;}，也就是图像距离底部缩进45个像素。像素不同可以定义其处在不同的位置，但是这样设置会增加本行的高度。不建议这样定义，但可用在特殊地方。</p> <p> </p> <p>　　<strong><map> 标签定义图像地图。<area> 标签定义图像地图中的可点击区域。可用于创建图像映射，使其带有可供点击区域的图像地图，其中的每个区域都是一个超级链接。</map></strong></p> <p><strong> 　　<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。<img alt="HTML 基础_html/css_WEB-ITnose" > 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器)，所以应同时向 <map> 添加 id 和 name 属性。注意: 在 HTML5 中, 如果 id 属性在 <map> 标签中指定, 则必须同样指定 name 属性。name 属性用于为 image-map 规定名称，必需的属性。</map></map></map></map></strong></p> <p><strong>　　<area> 标签定义图像映射内部的区域。注意：<area> 元素永远嵌套在 <map> 元素内部。<img alt="HTML 基础_html/css_WEB-ITnose" > 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。在 HTML 中，<area> 标签没有结束标签。</map></map></strong></p> <p><strong>　　<area> 标签属性，href 属性规定区域的目标 URL。alt 属性规定区域的替代文本，如果使用 href 属性，则该属性是必需的。coords 属性值为 coordinates 规定区域的坐标。shape 属性值为（default(默认)、circle、rect、poly）规定区域的形状。target 属性规定在何处打开目标 URL。media 属性规定目标 URL 是为何种媒介/设备优化的，默认为：all。在 HTML5 中增加了一个新属性 rel ，他的值为（alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag)）规定当前文档与目标 URL 之间的关系。</strong></p> <p><strong>　　图像映像的语法：</strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">1 <img src="images/demo.jpg" alt="太阳系" usemap="#sun">2 <map name="sun">3 <area shape="circle" coords="132,570,122" alt="太阳" href="index.html" target="_blank">4 </map></pre><div class="contentsignin">登录后复制</div></div> </p> <p>　　<strong><area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等：rect : 矩形，coords 对应的坐标为左上角和右下角。circle : 圆，coords 对应的是圆心(x，y)，和半径 r。poly：多边形，coords 对应的是每个点的坐标。</strong></p> <p>　　<strong>下面列出了每种形状的适当值：</strong></p> <p><strong>　　</strong><strong>圆形：shape="circle"，coords="x,y,r" 这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。</strong></p> <p><strong>　　矩形：shape="rectangle"，coords="x1,y1,x2,y2" 第一对坐标是矩形的左上角的顶点坐标，另一对坐标是对角的顶点坐标(右下角)，("0,0" 是图像左上角的坐标)，请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。</strong></p> <p><strong>　　多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..." 每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标；定义多边形则需要更多数量的顶点。</strong></p> <p>　　<strong>用 HTML 语言创建图像映射时，我们需要确定图像区域中的点坐标，用以下几种方法可以实现：</strong></p> <p>　　　　<strong>①：可以利用系统自带的画图工具确定坐标。</strong></p> <p><strong>　　　　②：可以用 PS 确定坐标。按 Ctrl+r 快捷键，右键选定显示距离为像素，默认是厘米。</strong></p> <p><strong>　　　　③：采用逆向思维把图像转换成图像映射，可以利用以下代码实现：</strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">1 <p>2 <a href="http://www.baidu.com/" target="_blank"><img src="images/demo.jpg" ismap alt="太阳系"></a>3 </p></pre><div class="contentsignin">登录后复制</div></div> </p> <p>　　<strong>之所以图片代码前引用一段 url 是为了鼠标停留在图片上时，可以在浏览器窗口的状态栏中看到返回值出现的点坐标，小手指点在哪里，对应的就是像素点的纵横坐标值，记下这个值，把它应用到创建图像映射的语法中，就能实现区域取值了。注意：某些浏览器不支持此功能不能查看坐标返回值，比如 360浏览器，可以使用 IE 浏览器记录。</strong></p> <p> </p> <p>　　<strong><canvas> (H5) 标签定义图形，比如图表和其他图像，标签只是图形容器，你必须使用脚本来绘制图形。<canvas> 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。注意：<canvas> 标签只是图形容器，必须使用脚本来绘制图形。<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。width 和 height 属性规定画布的宽度和高度。</canvas></canvas></canvas></canvas></canvas></strong></p> <p>　　<strong><figure> (H5) 标签规定独立的流内容（图像、图表、照片、代码等等）。<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的，如果被删除，则不应对文档流产生影响。提示：<figcaption> 元素被用来为 <figure> 元素定义标题。</figure></figcaption></figure></figure></strong></p> <p><strong>　　<figcaption> (H5) 标签为 <figure> 元素定义标题。<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。</figure></figcaption></figure></figcaption></strong></p> <p>　　<strong><picture> (H5) 标签可以设置多张图片，主要被</picture></strong><strong>用来处理响应式图片。<picture> 元素类似于 <video> 和 <audio> 元素。<picture> 元素本身没有属性，被用来当做 <source> 元素的容器。<source> 元素是用来加载多媒体的比如视频和音频，已经被更新用到图片的加载并且一些新的属性已经被添加，srcset 属性的必需的，定义了图片资源。<picture> 元素可以设置不同的资源，第一个设置的资源为首选使用的：</picture></source></source></picture></audio></video></picture></strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">1 <picture>2 <source srcset="smallflower.jpg" media="(max-width:400px)">3 <source srcset="flowers.jpg">4 <img src="imges/flowers.jpg" alt="Flowers">5 </picture></pre><div class="contentsignin">登录后复制</div></div> </p> <p>　　注意：火狐浏览器支持 picture 标签。360 和 IE 不支持 picture 标签，需要搭载 JS 环境让 IE 浏览器识别 picture 标签。</p> <p> </p> <p><strong>　　(6)、多媒体标签</strong></p> <p>　　<strong><audio> (H5) 标签定义音频内容，也就是定义声音，比如音乐或其他音频流。目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。有些浏览器不支持某种格式，建议采取两种格式写，用 MP3 或 Wav 就可以。音频格式的 MIME 类型：MP3-MIME-type：audio/mpeg 。Wav-MIME-type：audio/wav 。Ogg-MIME-type：audio/ogg 。可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。</audio></audio></audio></strong></p> <p>　　<strong><audio> 是 HTML5 新增加的标签，src 属性用于规定音频文件的 URL。autoplay 属性：如果出现该属性，则音频在就绪后马上播放。controls 属性：如果出现该属性，则向用户显示音频控件(比如播放/暂停按钮)。loop 属性：如果出现该属性，则每当音频结束时重新开始播放。muted 属性：如果出现该属性，则音频输出为静音。preload 属性值为（auto、metadata、none），用于规定当网页加载时，音频是否默认被加载以及如何被加载。</audio></strong></p> <p>　　<strong><video> (H5) 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器。WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器。Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器。音频格式的 MIME 类型：MP4：video/mp4。WebM：video/webm。Ogg：video/ogg。可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。</video></video></video></strong></p> <p>　　<strong><video> 是 HTML5 新增加的标签，src 属性定义要播放的视频的 URL。width 和 height 属性用于设置视频播放器的宽度/高度。autoplay 属性值：如果出现该属性，则视频在就绪后马上播放。controls 属性：如果出现该属性，则向用户显示控件，比如播放按钮。loop 属性：如果出现该属性，则当媒介文件完成播放后再次开始播放。muted 属性：如果出现该属性，视频的音频输出为静音。poster 属性值为 URL 用于规定视频正在下载时显示的图像，直到用户点击播放按钮。preload 属性值为（auto、metadata、none）：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性。</video></strong></p> <p> </p> <p>　　<strong><source> (H5) 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。<source> 标签允许规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。src 属性用于规定媒体文件的 URL。type 属性规定媒体资源的 MIME 类型。</source></audio></video></source></strong></p> <p>　　<strong><track> (H5) 标签为媒体元素（比如 <audio> and <video>）规定外部文本轨道。这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。src 属性是必需的，用于规定轨道文件的 URL。default 属性规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。kind 属性值为（captions、chapters、descriptions、metadata、subtitles）用于规定文本轨道的文本类型。srclang 属性用于规定轨道文本数据的语言，如果 kind 属性值是 "subtitles"，则该属性是必需的。label 属性规定文本轨道的标签和标题。</video></audio></track></strong></p> <p> </p> <p>　<strong>　(7)、表单标签</strong></p> <p>　　<strong>HTML 表单用于搜集不同类型的用户输入，表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，如：文本域、下拉列表、单选框、复选框等等。</strong></p> <p><strong>　　表单使用表单标签 <form>来设置，多数情况下被用到的表单标签是输入标签<input>。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下：</form></strong></p> <p>　　　　<strong>①：文本字段通过 <input type="text"> 标签来定义，当用户要在表单中键入字母、数字等内容时，就会用到文本字段输入。</strong></p> <p><strong>　　　　②：密码字段通过 <input type="password"> 来定义。注意：密码字段字符不会明文显示，而是以星号或圆点替代。</strong></p> <p><strong>　　　　③：单选框通过 <input type="radio"> 来定义。当用户从若干给定的的选择中选取其一时，就会用到单选框。</strong></p> <p><strong>　　　　④：复选框通过<input type="checkbox"> 来定义。用户需要从若干给定的选择中选取一个或若干选项。</strong></p> <p><strong>　　　　⑤：提交按钮通过<input type="submit"> 来定义。</strong></p> <p><strong>　　　　⑥：下拉列表框通过 <form> 标签下的 <select> 标签来定义。<option value="bmw">BMW（宝马）</option> 标签则是定义下拉列表框中的内容。</select> </form></strong></p> <p>　　<strong>其他：①：预选下拉列表框和下拉列表框格式是一样的，只需在作为预选值的标签中添加 selected(选择)：<option value="audi" selected>Audi（奥迪）</option>。</strong></p> <p><strong>　　②：多行文本输入使用标签 <textarea rows="5" cols="30">定义，其中 rows 为行，cols 为列，可用于设定文本框的大小，也可以不设定，这不影响文本框输入文本的多少，只是会影响文本框显示的大小。更好的方法是通过 CSS 来定义文本域的宽和高。</textarea></strong></p> <p> </p> <p>　　<strong><form> 标签用于创建供用户输入的 HTML 表单。</form> <form> 元素包含一个或多个如下的表单元素：<input><textarea><button> <select><option></option> <optgroup> </optgroup></select></button></textarea> </form></strong><strong><fieldset><label>。注意：表单本身并不可见。HTML5 新增了两个新的属性：autocomplete 和 novalidate，同时不再支持 HTML 4.01 中的某些属性。该标签的属性 action 是必需的，规定当提交表单时，向何处发送表单数据，其值为服务器地址，可能的值：绝对 RUL，指向其他站点，如：action="www.demo.com/index.html"，相对 URL，指向站点内的文件，如：action="index.html"。</label></fieldset></strong></p> <p><strong>　　<form> 属性两个最重要的属性：action 和 method， action 用于规定当提交表单时向何处发送表单数据。而 method 规定用于发送表单数据的 HTTP 方法，默认使用 GET 方式。accept-charset 属性规定服务器可处理的表单数据字符集。name 属性规定表单的名称，可用于在 JS 中引用元素，或者在表单提交之后引用表单数据。enctype 属性规定在向服务器发送表单数据之前如何对其进行编码，适用于 method="post" 的情况。target 属性可用于规定在何处打开 action URL。autocomplete 属性值为（on、off）用于规定是否启用表单的自动完成功能。novalidate 属性：如果使用该属性，则提交表单时不进行验证。</form></strong></p> <p> </p> <p>　　<strong><input> 标签定义一个输入控件，规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件，输入字段可通过多种方式改变，取决于 type 属性。注意：<input> 元素是空的，它只包含标签属性。可以使用 <label> 元素来定义 <input> 元素的标注。可以使用 CSS 来定义 <input> 元素的对齐方式。在 HTML5 中, <input> 添加了几个新属性，并且添加了对应的值。在 HTML 中，<input> 标签没有结束标签。</label> </form></strong></p> <p>　　<strong><input> 元素属性：</strong><strong>type 属性规定要显示的 <input> 元素的类型，他的类型有：text（默认，单行的文本字段，宽度为20个字符）、button(按钮)、radio(单选按钮)、checkbox(复选框)、password(密码)、submit(提交按钮)、image(图像作为提交按钮)、reset(重置按钮)、hidden(隐藏输入字段)、file（定义文件选择字段和 "浏览..." 按钮，供文件上传）。以下都为 HTML5 新增加的 type 属性值：search(用于输入搜索字符串)、url(用于输入 URL 的字段)、email(用于 e-mail 地址)、tel(用于输入电话号码)、color(拾色器)、number(用于输入数字的字段)、range(用于精确值不重要的输入数字的控件，比如 slider 控件)、time(用于输入时间的控件，不带时区)、month(month 和 year 控件，不带时区)、week(week 和 year 控件，不带时区)、</strong><strong>date(date 控件，包括年、月、日，不包括时间)、 datetime(date 和 time 控件，包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区)、 datetime-local(date 和 time 控件，包括年、月、日、时、分、秒、几分之一秒，不带时区)。　　value 属性规定 <input> 元素的值。　　name 属性规定 <input> 元素的名称。　　src 属性规定显示为提交按钮的图像的 URL，只针对 type="image"。　　alt 属性定义图像输入的替代文本，只针对 type="image"。　　checked 属性规定在页面加载时应该被预先选定的 <input> 元素，只针对 type="checkbox" 或者 type="radio"。　　readonly 属性规定输入字段是只读的。　　disabled 属性规定应该禁用的 <input> 元素。　　size 属性规定以字符数计的 <input> 元素的可见宽度。　　maxlength 属性规定 <input> 元素中允许的最大字符数。　　accept 属性值为(audio/* video/* image/* MIME_type)用于规定通过文件上传来提交的文件的类型，只针对 type="file"。</strong><br></p> <p>　　<strong>下面是 HTML5 为 <input> 元素新添加的属性：placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。required 属性规定必需在提交表单之前填写输入字段。</strong><strong>autocomplete 属性值为（on、off）用于规定 <input> 元素输入字段是否应该启用自动完成功能。autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。multiple 属性规定允许用户输入到 <input> 元素的多个值。pattern 属性规定用于验证 <input> 元素的值的正则表达式。step 属性规定 <input> 元素的合法数字间隔。list 属性值为 datalist_id，该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。width 和 height 属性用于规定 <input>元素的宽度/高度，只针对 type="image"。max 和 min 属性规定 <input> 元素的最大/最小值。form 属性值为 form_id 用于规定 <input> 元素所属的一个或多个表单。formaction 属性规定当表单提交时处理输入控件的文件的 URL，只针对 type="submit" 和 type="image"。formenctype 属性规定当表单数据提交到服务器时如何编码，只适合 type="submit" 和 type="image"。formmethod 属性值为（get、post）用于定义发送</datalist></strong></p> </table></strong> </div> </div></strong> </div></strong></p> <div class="everysee"> <h2>大家都在看：</h2> <div> <a href="/faq/1713990.html" title="如何使用Brackets处理HTML动画代码的详细步骤">如何使用Brackets处理HTML动画代码的详细步骤</a> <a href="/faq/1713957.html" title="html源码如何保存在电脑上_html源码本地保存全攻略">html源码如何保存在电脑上_html源码本地保存全攻略</a> <a href="/faq/1713853.html" title="html页面缓存如何刷新_html页面缓存刷新的详细方法">html页面缓存如何刷新_html页面缓存刷新的详细方法</a> <a href="/faq/1713645.html" title="如何在CodePen解决HTML嵌套问题的方法步骤">如何在CodePen解决HTML嵌套问题的方法步骤</a> <a href="/faq/1712480.html" title="如何在线编辑网页HTML_如何通过在线工具编辑网页HTML">如何在线编辑网页HTML_如何通过在线工具编辑网页HTML</a> </div> </div> </div> </div>  <div class="community flexRow newcommunity"> <div class="comleft flexRow newcomlimg"> <a class="newcomlimga" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)" > <img src="https://img.php.cn/upload/Recdownload/000/000/085/66723a3016a41308.jpg" class="comlimg newcomlimg" alt="HTML速学教程(入门课程)"> </a> <div class="comldiv flexColumn newcomldiv"> <a class="comldup newcomldup" target="_blank" rel="nofollow" title="HTML速学教程(入门课程)" href="https://pan.quark.cn/s/f4eedefabd61">HTML速学教程(入门课程)</a> <p class="comlddown newcomlddown">HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！</p> </div> </div> <a class="comright flexRow newcomright" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)"> 下载 </a> </div> <div class="wzconlabels"> <div style="display: inline-flex;float: right; color:#333333;">来源：php中文网</div> </div> <div class="wzconFx"> <a class="wzcf-sc articleICollection " data-id="270119"> <img src="/static/lhimages/shoucang_2x.png"> <span>收藏</span> </a> <a class="wzcf-dz articlegoodICollection " data-id="270119"> <img src="/static/images/images/icon37.png"> <span>点赞</span> </a> </div> <div class="wzconOtherwz"> <a href="/faq/270118.html"> <span>上一篇：神通广大的CSS3选择器_html/css_WEB-ITnose</span> </a> <a href="/faq/270121.html"> <span>下一篇：css3 gradient 渐变_html/css_WEB-ITnose</span> </a> </div> <div class="wzconShengming"> <img src="/static/images/images/benzhanshengming.png" /> <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div> </div>  <div class="wzconZzwz"> <div class="wzconZzwztitle">最新问题</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1714323.html" target="_blank" title="html转markdown工具_html转markdown网页版入口" class="wdcdcTitle">html转markdown工具_html转markdown网页版入口</a> <a href="/faq/1714323.html" class="wdcdcCons">html转markdown网页版入口是https://www.markdowntohtml.com/convert/，支持多种HTML结构解析，操作界面简洁易用，适用于博客迁移、技术文档整理、团队协作和教学资源归档等多场景内容转换需求。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 20:52:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">724</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1714268.html" target="_blank" title="html按钮如何换行_HTML按钮（button）内文本换行（br/white-space）方法" class="wdcdcTitle">html按钮如何换行_HTML按钮（button）内文本换行（br/white-space）方法</a> <a href="/faq/1714268.html" class="wdcdcCons">可通过br标签、white-space属性或span结合display:block实现按钮文本换行：1.使用强制换行；2.设置white-space:pre-line支持换行符；3.用span包裹每行并设为块级元素，适用于复杂样式控制。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 20:33:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">851</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1714219.html" target="_blank" title="如何处理HTML内容可编辑属性的解决办法" class="wdcdcTitle">如何处理HTML内容可编辑属性的解决办法</a> <a href="/faq/1714219.html" class="wdcdcCons">contenteditable属性可使HTML元素直接可编辑，通过设置contenteditable="true"启用，支持所有元素；编辑内容可用innerHTML获取并保存，需注意安全过滤；结合JavaScript控制焦点、光标及CSS样式优化体验，是实现富文本编辑的简单有效方案。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 20:15:27</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">610</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1714197.html" target="_blank" title="txt如何转为html_纯文本（TXT）转HTML格式（标记/结构）方法" class="wdcdcTitle">txt如何转为html_纯文本（TXT）转HTML格式（标记/结构）方法</a> <a href="/faq/1714197.html" class="wdcdcCons">答案：转换TXT到HTML需添加结构化标签，手动方式适合简单内容，用、-等标记段落和标题；Python脚本可自动化处理，识别#开头的行作标题，其余为段落，生成完整HTML文件；也可借助在线工具或支持Markdown的编辑器导出为HTML，Word亦可另存为网页格式。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 20:07:20</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">732</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1714175.html" target="_blank" title="html如何弹窗口_HTML弹窗（alert/modal）实现与交互方法" class="wdcdcTitle">html如何弹窗口_HTML弹窗（alert/modal）实现与交互方法</a> <a href="/faq/1714175.html" class="wdcdcCons">原生JavaScript提供alert、confirm、prompt实现基础弹窗交互，分别用于提示、确认和输入；通过HTML+CSS+JS可构建自定义Modal模态框实现灵活布局与交互控制；引入SweetAlert2等第三方库则能快速集成美观且功能丰富的弹窗组件，提升用户体验。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 20:01:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">290</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1714131.html" target="_blank" title="html缓存数据如何清除_html缓存数据清除的详细教程" class="wdcdcTitle">html缓存数据如何清除_html缓存数据清除的详细教程</a> <a href="/faq/1714131.html" class="wdcdcCons">清除浏览器缓存可解决网页显示异常或加载旧版本问题，具体方法包括：一、通过浏览器设置清除所有时间范围内的缓存文件；二、使用Ctrl+F5或Command+Shift+R强制刷新页面以获取最新资源；三、在开发者工具的Network选项卡中勾选Disablecache临时禁用缓存；四、在站点设置中删除特定网站的缓存数据；五、关闭浏览器后手动删除系统级缓存目录中的文件。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 19:47:26</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">582</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1714043.html" target="_blank" title="html多媒体链接怎么打_html多媒体链接如何打详细说明" class="wdcdcTitle">html多媒体链接怎么打_html多媒体链接如何打详细说明</a> <a href="/faq/1714043.html" class="wdcdcCons">答案：HTML中通过img、audio、video标签分别插入图片、音频和视频，使用src指定路径，controls添加播放控件，a标签可创建多媒体链接，download实现下载，需注意路径与格式兼容性。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 19:26:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">830</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1714020.html" target="_blank" title="html如何打包exe_HTML网页打包为EXE（工具如Electron）方法" class="wdcdcTitle">html如何打包exe_HTML网页打包为EXE（工具如Electron）方法</a> <a href="/faq/1714020.html" class="wdcdcCons">可将HTML网页打包为Windows可运行的EXE文件。一、Electron需Node.js环境，通过npm安装Electron及electron-packager，配置main.js和package.json，执行打包命令生成EXE；二、Web2Exe为图形化工具，设置应用参数、选择主HTML文件后点击生成即可；三、NW.js需下载SDK，编写package.json，资源打包为.nw文件后与nw.exe合并成EXE；四、HTMLExecutable是商业工具，导入HTML后设置图标、窗口样式</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 19:22:04</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">559</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1713990.html" target="_blank" title="如何使用Brackets处理HTML动画代码的详细步骤" class="wdcdcTitle">如何使用Brackets处理HTML动画代码的详细步骤</a> <a href="/faq/1713990.html" class="wdcdcCons">使用Brackets编写HTML动画需先安装配置编辑器并启用实时预览，接着创建含CSS样式和JS脚本的HTML文件，通过内联样式或外部文件定义动画效果，利用@keyframes和transition实现悬停旋转放大及闪烁动画，结合JavaScript添加点击事件控制动态变换，借助Emmet、代码折叠等扩展提升编码效率，实时预览功能可快速调试修改，最终高效完成交互式动画开发。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 19:13:07</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">788</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1713957.html" target="_blank" title="html源码如何保存在电脑上_html源码本地保存全攻略" class="wdcdcTitle">html源码如何保存在电脑上_html源码本地保存全攻略</a> <a href="/faq/1713957.html" class="wdcdcCons">可使用浏览器另存为、复制源码、开发者工具或命令行工具保存网页HTML。首先通过“另存为”可完整保存网页及资源；其次查看源代码并复制粘贴至文本编辑器，保存为.html文件；再者利用开发者工具精准提取特定DOM结构；最后通过curl或wget命令实现自动化抓取，适合批量处理。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-11-11 19:05:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">635</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>相关专题</div> <a href="/faq/zt" target="_blank">更多> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="/faq/javabfydxcbc"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/11/2025111109404372605.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/javabfydxcbc" class="title-a-spanl"><span>Java 并发与多线程编程</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/pythonycclyts"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/10/2025111010420913152.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/pythonycclyts" class="title-a-spanl"><span>Python 异常处理与调试技巧</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/pythoncfysf"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/08/2025110818512988947.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/pythoncfysf" class="title-a-spanl"><span>python除法运算符</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/pythonpf"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/08/2025110818463671013.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/pythonpf" class="title-a-spanl"><span>python 平方</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/pythonzmazk"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/08/2025110818380043301.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/pythonzmazk" class="title-a-spanl"><span>python 怎么安装库</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/pythonzbdyzmx"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/08/2025110818332172473.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/pythonzbdyzmx" class="title-a-spanl"><span>python中不等于怎么写</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/pythonsrghjc"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/08/2025110818290033248.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/pythonsrghjc" class="title-a-spanl"><span>python输入根号教程</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/xpythonsxrjtj"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/08/2025110818244242410.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/xpythonsxrjtj" class="title-a-spanl"><span>学python所需软件推荐</span> </a> </li> </ul> </div> </div> <div class="wzcongg"><script type="text/javascript" src="https://teacher.php.cn/php/NzIzNmE5NjBlOTgwNWZlNTMzN2E0MGEzNmU3NjM3NmI6Og==" ></script></div> </div> </div> <div class="phpwzright"> <div class="wzrOne" style="margin-bottom:31px; padding:0px; width: 366px;"> <script type="text/javascript" src="https://teacher.php.cn/php/N2Q0ODk3NTAwZTFmODQ1NGM4Y2VjYzQzZTVkOTI5NDk6Og==" ></script>  </div> <div class="wzrOne"> <div class="wzroTitle">热门推荐</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1714323.html">html转markdown工具_html转markdown网页版入口</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1714219.html">如何处理HTML内容可编辑属性的解决办法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1714175.html">html如何弹窗口_HTML弹窗（alert/modal）实现与交互方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1714043.html">html多媒体链接怎么打_html多媒体链接如何打详细说明</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1714020.html">html如何打包exe_HTML网页打包为EXE（工具如Electron）方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！"><b>HTML速学教程(入门课程)</b></a> </div> </li> </ul> </div> </div> <div class="wzrTwo"> </div> <div class="wzrTwo"> <div style="position: relative;"><a class="" href="https://teacher.php.cn/jump/67" title="开源免费商场系统" rel="nofollow" target="_blank"><img style="width: 100%; " src="https://img.php.cn/teacher/course/20220930/8ef7a4a308a22ece023e77e5428c0e25.png" alt="开源免费商场系统"></a><span style="position: absolute;right: 5px;border: 1px solid #333;padding: 2px;color: #333;line-height: 14px;font-size: 12px;bottom: 5px;">广告</span></div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div>热门教程</div> <a target="_blank" href="https://www.php.cn/k.html">更多> </a> </div> <div class="wzrthreelist"> <div class="wzrthreeTab"> <div class="check tabdiv" data-id="one">相关推荐 <div></div></div> <div class="tabdiv" data-id="two">热门推荐<div></div></div> <div class="tabdiv" data-id="three">最新课程<div></div></div> </div> <ul class="one"> <script type="text/javascript" src="https://teacher.php.cn/php/MTJjOWU0YjVmMmE1MzI1OTgyNzRlYmJmYjE0MmZkNWY6Og==" ></script> <li> <a target="_blank" href="/course/13.html" title="HTML 基础教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253efc39fecc246.png" alt="HTML 基础教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/13.html">HTML 基础教程</a> <div class="wzrthreerb"> <div >180960次学习</div> <a class="courseICollection" data-id="13"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/12.html" title="HTML+CSS基础入门教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de8ca1761701.png" alt="HTML+CSS基础入门教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/12.html">HTML+CSS基础入门教程</a> <div class="wzrthreerb"> <div >546691次学习</div> <a class="courseICollection" data-id="12"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1022.html" title="HTML+CSS网页基础" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6256990bbf04e971.png" alt="HTML+CSS网页基础"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1022.html">HTML+CSS网页基础</a> <div class="wzrthreerb"> <div >53293次学习</div> <a class="courseICollection" data-id="1022"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a> <div class="wzrthreerb"> <div >64937次学习</div> <a class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div >1484960次学习</div> <a class="courseICollection" data-id="812"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="phpStudy极速入门视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/639.html">phpStudy极速入门视频教程</a> <div class="wzrthreerb"> <div >529754次学习</div> <a class="courseICollection" data-id="639"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/379.html" title="独孤九贱(4)_PHP视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="独孤九贱(4)_PHP视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/379.html">独孤九贱(4)_PHP视频教程</a> <div class="wzrthreerb"> <div >1249519次学习</div> <a class="courseICollection" data-id="379"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="PHP实战天龙八部之仿爱奇艺电影网站"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/801.html">PHP实战天龙八部之仿爱奇艺电影网站</a> <div class="wzrthreerb"> <div >769630次学习</div> <a class="courseICollection" data-id="801"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="/course/1696.html" title="最新Python教程从入门到精通" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png" alt="最新Python教程从入门到精通"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1696.html">最新Python教程从入门到精通</a> <div class="wzrthreerb"> <div >2726次学习</div> <a class="courseICollection" data-id="1696"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a> <div class="wzrthreerb"> <div >64937次学习</div> <a class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png" alt="PHP新手语法线上课程教学"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1655.html">PHP新手语法线上课程教学</a> <div class="wzrthreerb"> <div >6428次学习</div> <a class="courseICollection" data-id="1655"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1654.html" title="支付宝沙箱支付（个人也能用的支付）" class="wzrthreelaimg"> <img src="https://img.php.cn/teacher/course/20240819/172406094466c31510e008b.jpg" alt="支付宝沙箱支付（个人也能用的支付）"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1654.html">支付宝沙箱支付（个人也能用的支付）</a> <div class="wzrthreerb"> <div >4508次学习</div> <a class="courseICollection" data-id="1654"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1650.html" title="麻省理工大佬Python课程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/66592dcfeb1b4698.png" alt="麻省理工大佬Python课程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1650.html">麻省理工大佬Python课程</a> <div class="wzrthreerb"> <div >41271次学习</div> <a class="courseICollection" data-id="1650"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> </div> <script> $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新下载</div> <a href="/xiazai">更多> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }); loading(); }) function loading(reloading=false){ if(reloading){ $("#ai_doubao2_3_wait_right").show(); $("#ai_doubao2_3_wait_left").show(); $("#doubao_error_right").hide(); $("#doubao_error_left").hide(); } $.ajax({ url:'/index.php/api/process?sign=&id=270119&time='+Date.now(), dataType:'json', async:true, headers: { "X-Requested-With": "XMLHttpRequest" // 标记为异步请求 }, type:'post', success:function(result){ if(result.code!=1){ $("#doubao_error_right").show(); $("#ai_doubao2_3_wait_right").hide(); $("#doubao_error_left").show(); $("#ai_doubao2_3_wait_left").hide(); }else{ $("#ai_doubao2_3_wait_right").hide(); $("#ai_doubao2_3_wait_left").hide(); let doubao_answer = `<p>`+result.data.content+`</p>`; $("#doubao_answer_right").html(doubao_answer); $("#doubao_answer_left").html(doubao_answer); let doubao_titles = ''; if(result.data.title){ $.each(result.data.title,function(k,v){ doubao_titles+=`<div class="ai_doubao2_2s"><a rel="nofollow" target="_blank" href="https://doubao.com/chat/new-thread?flow_tracking_source=360_php&channel=360_php_abstract&source=360_db_php_abstract&keywordid=`+"270119"+`&query=参考https://www.php.cn`+"/faq/270119.html的内容，"+encodeURIComponent(v)+`" title="`+v+`"><p><img src="/static/images/doubao_yellowstar.png" alt=""> `+v+`</p></a></div>`; }) } yigeyigezichulai(ai_doubao_titles_show,doubao_titles); } } }) } function ai_doubao_titles_show(str){ $("#ai_doubao_titles_right").html(str); $("#ai_doubao_titles_left").html(str); } function yigeyigezichulai(callback,str){ const textElements = document.querySelectorAll('.yigeyigezichulai p'); textElements.forEach(textElement => { const originalHTML = textElement.innerHTML; const tempDiv = document.createElement('div'); tempDiv.innerHTML = originalHTML; const fragments = []; Array.from(tempDiv.childNodes).forEach(node => { if (node.nodeType === Node.TEXT_NODE) { fragments.push(...node.textContent.split('')); } else { fragments.push(node.outerHTML); } }); textElement.innerHTML = ''; let index = 0; const interval = setInterval(() => { if (index < fragments.length) { const fragment = fragments[index]; if (fragment.startsWith('<')) { textElement.innerHTML += fragment; } else { textElement.innerHTML += fragment; } } else { clearInterval(interval); callback(str); } index++; }, 25); // 每 100 毫秒显示一个片段 }); } // 豆包等待动画 const containers = document.querySelectorAll('.ai_doubao2_3_wait') || []; if (containers.length > 0) { containers.forEach(container => { if (container && container.firstElementChild) { const intervalId = setInterval(() => { if (!container || !container.firstElementChild) { clearInterval(intervalId); return; } const firstChild = container.firstElementChild; container.appendChild(firstChild); }, 300); } }); } // AI总结相关功能 const aiZongjie = document.querySelector('.ai_zongjie'); const aiDoubao = document.querySelector('.ai_doubao'); const closeButton = document.querySelector('.ai_doubao1_R_img'); if (aiZongjie && aiDoubao && closeButton) { aiZongjie.addEventListener('click', () => { aiDoubao.style.display = 'block'; }); closeButton.addEventListener('click', () => { aiDoubao.style.display = 'none'; }); } // 文字动画效果 const textElements = document.querySelectorAll('.ai_doubao2_3s.ai_doubao2_3s_L p') || []; if (textElements.length > 0) { textElements.forEach(textElement => { if (!textElement) return; const originalHTML = textElement.innerHTML; const tempDiv = document.createElement('div'); tempDiv.innerHTML = originalHTML; const fragments = []; Array.from(tempDiv.childNodes).forEach(node => { if (!node) return; if (node.nodeType === Node.TEXT_NODE) { fragments.push(...(node.textContent || '').split('')); } else { fragments.push(node.outerHTML); } }); if (fragments.length === 0) return; textElement.innerHTML = ''; let index = 0; const interval = setInterval(() => { if (!textElement || index >= fragments.length) { clearInterval(interval); return; } const fragment = fragments[index]; if (fragment) { textElement.innerHTML += fragment; } index++; }, 100); }); } // 页面滚动监听相关 const divai_zongjie1 = document.getElementById('ai_zongjie1'); const divai_zongjie2 = document.getElementById('ai_zongjie2'); const divai_zongjie3 = document.getElementById('ai_zongjie3'); if (divai_zongjie2) { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (!entry.isIntersecting && divai_zongjie1) { try { divai_zongjie1.style.display = 'flex'; requestAnimationFrame(() => { if (divai_zongjie1) { divai_zongjie1.classList.add('visible'); } }); } catch (e) { console.log('元素操作失败'); } } else if (divai_zongjie1) { try { divai_zongjie1.classList.remove('visible'); divai_zongjie1.addEventListener('transitionend', () => { if (divai_zongjie1 && !divai_zongjie1.classList.contains('visible')) { divai_zongjie1.style.display = 'none'; } }, { once: true }); if (divai_zongjie3 && divai_zongjie3.style) { divai_zongjie3.style.display = 'none'; } } catch (e) { console.log('元素操作失败'); } } }); }, { threshold: 0, rootMargin: '-90px 0px 0px 0px' }); try { observer.observe(divai_zongjie2); } catch (e) { console.log('观察器初始化失败'); } // 滚动事件处理 window.addEventListener('scroll', () => { const scrollY = window.scrollY || window.pageYOffset; if (divai_zongjie2) { try { divai_zongjie2.style.display = scrollY > 1000 ? 'none' : 'block'; } catch (e) { console.log('滚动处理失败'); } } }); } </script> <div class="wzrfourList"> <div class="wzrfourlTab"> <div class="check" data-id="onef">网站特效 <div></div></div> <div class="" data-id="twof">网站源码<div></div></div> <div class="" data-id="threef">网站素材<div></div></div> <div class="" data-id="fourf">前端模板<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery企业留言表单联系代码" href="/xiazai/js/8071">[表单按钮] jQuery企业留言表单联系代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3音乐盒播放特效" href="/xiazai/js/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5炫酷粒子动画导航菜单特效" href="/xiazai/js/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery可视化表单拖拽编辑代码" href="/xiazai/js/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS仿酷狗音乐播放器代码" href="/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="经典html5推箱子小游戏" href="/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery滚动添加或减少图片特效" href="/xiazai/js/8065">[图片特效] jQuery滚动添加或减少图片特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3个人相册封面悬停放大特效" href="/xiazai/js/8064">[相册特效] CSS3个人相册封面悬停放大特效</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10588" title="鱼福CMS企业网站系统2.0" target="_blank">[企业站源码] 鱼福CMS企业网站系统2.0</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10587" title="杰易OA办公自动化系统" target="_blank">[电商源码] 杰易OA办公自动化系统</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10586" title="Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8" target="_blank">[企业站源码] Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10585" title="仿美团网电脑版加手机版加微信版" target="_blank">[电商源码] 仿美团网电脑版加手机版加微信版</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10584" title="中和网企业建站系统1.0.2" target="_blank">[企业站源码] 中和网企业建站系统1.0.2</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10583" title="仿QQ官方商城整站 for ECSHOP" target="_blank">[电商源码] 仿QQ官方商城整站 for ECSHOP</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10582" title="响应式园林景观设计公司网站系统1.7.1" target="_blank">[企业站源码] 响应式园林景观设计公司网站系统1.7.1</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10581" title="SOHO黄金时代" target="_blank">[电商源码] SOHO黄金时代</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3654" target="_blank" title="绿色风格汽车租赁折扣竖版海报设计下载">[网站素材] 绿色风格汽车租赁折扣竖版海报设计下载</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3653" target="_blank" title="手作陶艺制作工具矢量素材">[网站素材] 手作陶艺制作工具矢量素材</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3652" target="_blank" title="清新水彩野花插画矢量素材">[网站素材] 清新水彩野花插画矢量素材</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3651" target="_blank" title="汽车租赁正方形海报设计ps素材下载">[网站素材] 汽车租赁正方形海报设计ps素材下载</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3650" target="_blank" title="外国节日庆祝活动传单排版设计下载">[网站素材] 外国节日庆祝活动传单排版设计下载</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3649" target="_blank" title="极简风格农场宣传单页设计下载">[网站素材] 极简风格农场宣传单页设计下载</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3648" target="_blank" title="可爱秋日动物合集矢量插图">[网站素材] 可爱秋日动物合集矢量插图</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3647" target="_blank" title="清新秋季南瓜合集矢量插画">[网站素材] 清新秋季南瓜合集矢量插画</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8590" target="_blank" title="驾照考试驾校HTML5网站模板">[前端模板] 驾照考试驾校HTML5网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8589" target="_blank" title="驾照培训服务机构宣传网站模板">[前端模板] 驾照培训服务机构宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8588" target="_blank" title="HTML5房地产公司宣传网站模板">[前端模板] HTML5房地产公司宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8587" target="_blank" title="新鲜有机肉类宣传网站模板">[前端模板] 新鲜有机肉类宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8586" target="_blank" title="响应式天气预报宣传网站模板">[前端模板] 响应式天气预报宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8585" target="_blank" title="房屋建筑维修公司网站CSS模板">[前端模板] 房屋建筑维修公司网站CSS模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8584" target="_blank" title="响应式志愿者服务网站模板">[前端模板] 响应式志愿者服务网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8583" target="_blank" title="创意T恤打印店网站HTML5模板">[前端模板] 创意T恤打印店网站HTML5模板</a> </div> </li> </ul> </div> <script> $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div>   <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a> <a href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a> <a href="/about/jbzx.html" rel="nofollow" target="_blank" title="举报中心" class="cBlack">举报中心</a> <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a> <a href="https://www.php.cn/teacher.html" rel="nofollow" target="_blank" title="讲师合作" class="cBlack">讲师合作</a> <a href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>  <a href="/new/" target="_blank" title="最新文章列表" class="cBlack">最新更新</a> <a href="https://global.php.cn/" target="_blank" title="English" class="cBlack">English</a> <div class="clear"></div> </dt> <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd class="cont2"> <span class="ylwTopBox"> <a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a> <em style="display:none;" class="ylwTopSub"> <p>微信扫码<br/>关注PHP中文网服务号</p> <img src="/static/images/examples/text16.png"/> </em> </span> <span class="ylwTopBox"> <a href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes" target="_blank" class="cBlack"><b class="icon2"></b>技术交流群</a> <em style="display:none;" class="ylwTopSub"> <p>QQ扫码<br/>加入技术交流群</p> <img src="/static/images/examples/text18.png"/> </em> </span> <div class="clear"></div> </dd> </dl> </div> <div class="phpFootRight"> <div class="phpFootMsg"> <span><img src="/static/images/examples/text17.png"/></span> <dl> <dt>PHP中文网订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> </div> <div class="phpFootMsg"> <span><img src="/static/images/examples/text14.png"/></span> <dl> <dt>PHP中文网APP</dt> <dd>随时随地碎片化学习</dd> </dl> </div> </div> </div> </div> <div class="phpFootCode"> <div class="phpFootCodeIn"><p>Copyright 2014-2025 <a href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><b></b></a></div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>  <script> $(function() { //直播倒计时 $(".liveitem").each(function(){ timer(this); }) function timer(obj){ var intDiff = $(obj).data("countdown"); window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); }else{ $(obj).find(".phpZbktBg").remove(); return; } if (hour <= 9) hour = '0' + hour; if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; $(obj).find('.day_show').html(day+""); $(obj).find('.hour_show').html('<s id="h"></s>'+hour+''); $(obj).find('.minute_show').html('<s></s>'+minute+''); $(obj).find('.second_show').html('<s></s>'+second+''); intDiff--; }, 1000); } }); </script> <script type="text/javascript" src="/hitsUp?type=article&id=270119&time=1762866062"></script> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1762866062"></script> <script>article_status = "0";</script> <script type="text/javascript" src="/static/js/jquery.min.js"></script>  <input type="hidden" id="verifycode" value="/captcha.html"> <script src="/static/js/jquery.min.js"></script> <script src="/static/layui/layui.js"></script> <script src="/static/js/common_new.js?2.1" ></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script> <script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script> <script type="text/javascript" src="/static/js/jquery.cookie.js"></script> <script>var topadshow = $.cookie('phpcndatatopadshows');if(!topadshow&&1==2){$('.topimages').show();var topobj = $('.topimages').find('.time');var topobj_day = $('.topimages .time').find('.day');var topobj_hours = $('.topimages .time').find('.hours');var topobj_minutes = $('.topimages .time').find('.minutes');var topobj_second = $('.topimages .time').find('.second');var topday = parseInt(topobj_day.html());var tophours = parseInt(topobj_hours.html());var topminutes = parseInt(topobj_minutes.html());var topsecond = parseInt(topobj_second.html());setInterval(function(){if(topsecond > 0){topsecond = topsecond-1;}else{if(topminutes > 0){topminutes = topminutes-1;topsecond = 59;}else{if(tophours > 0){tophours = tophours-1;topminutes = 59;topsecond = 59;}else{if(topday > 0){topday = topday -1;tophours = 23;topminutes = 59;topsecond = 59;}else{topobj.html("<p><span>活动已结束</span></p>");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});</script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <style> .content img{max-width:100%;} .copy-button { padding: 5px 10px; background-color: #666; border: none; color: #FFF; font-size: 12px; cursor: pointer; border-radius: 5px; position: relative; top: 33px; right: 5px; z-index: 99; float: right; } .copy-button:hover { background-color: #fc3930; } </style> <script> $(document).ready(function(){ $('#gongzhonghao').hover(function(){ $('#gzh').show(); },function(){ $('#gzh').hide(); }) }) </script> <script> layui.use(['jquery','layer'], function(){ $('.test-iframe-handle').click(function(){ layer.open({ type: 2, area: ['1300px', '750px'], content: 'https://www.php.cn/help/ask?q=HTML+%E5%9F%BA%E7%A1%80_html%2Fcss_WEB-ITnose', fixed: true, // 不固定 //maxmin: true, shadeClose: true, title:"智能小助手", btnAlign: 'c', yes: function(index, layero){ // 获取 iframe 的窗口对象 var iframeWin = window[layero.find('iframe')[0]['name']]; var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素 var value = elemMark.val(); if($.trim(value) === '') return elemMark.focus(); // 显示获得的值 layer.msg('获得 iframe 中的输入框标记值：'+ value); } }); }) var is_login = "0"; var show = 0; var ceng = getCookie('ceng'); //文章下拉弹出登录 // if(is_login == 0 && !ceng) // { // window.onscroll = function(){ // var t = document.documentElement.scrollTop || document.body.scrollTop; // var top_div = document.getElementById( "top_div" ); // if( t >= 2500 && show == 0) { // show = 1 // setCookie('ceng',1,1); // $(document).trigger("api.loginpopbox"); // } // } // } //未登录复制显示登录按钮 if(is_login == 0 && false){ $(".code").hover(function(){ $(this).find('.contentsignin').show(); },function(){ $(this).find('.contentsignin').hide(); }); //不给复制 $('.code').bind("cut copy paste",function(e) { e.preventDefault(); }); $('.code .contentsignin').click(function(){ $(document).trigger("api.loginpopbox"); }) }else{ // 获取所有的 <pre> 元素 var preElements = document.querySelectorAll('pre'); preElements.forEach(function(preElement) { // 创建复制按钮 var copyButton = document.createElement('button'); copyButton.className = 'copy-button'; copyButton.textContent = '复制'; // 添加点击事件处理程序 copyButton.addEventListener('click', function() { // 获取当前按钮所属的 <pre> 元素中的文本内容 var textContent = preElement.textContent.trim(); // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容 var tempTextarea = document.createElement('textarea'); tempTextarea.value = textContent; // 将临时 textarea 添加到文档中 document.body.appendChild(tempTextarea); // 选中临时 textarea 中的文本内容并执行复制操作 tempTextarea.select(); document.execCommand('copy'); // 移除临时 textarea 元素 document.body.removeChild(tempTextarea); // 更新按钮文本为 "已复制" this.textContent = '已复制'; }); // 创建AI写代码按钮 var aiButton = document.createElement('button'); aiButton.className = 'copy-button'; aiButton.textContent = 'AI写代码'; aiButton.style.marginLeft = '5px'; aiButton.style.marginRight = '5px'; // 添加点击事件处理程序 aiButton.addEventListener('click', function() { // Generate a random number between 0 and 1 var randomChance = Math.random(); // If the random number is less than 0.5, open the first URL, else open the second if (randomChance < 0.5) { window.open('https://www.doubao.com/chat/coding?channel=php&source=hw_db_php', '_blank'); } else { window.open('https://click.aliyun.com/m/1000402709/', '_blank'); } }); // 将按钮添加到 <pre> 元素前面 preElement.parentNode.insertBefore(copyButton, preElement); preElement.parentNode.insertBefore(aiButton, preElement); }); } }) function setCookie(name,value,iDay){ //name相当于键，value相当于值，iDay为要设置的过期时间（天） var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } function getCookie(name) { var cookieArr = document.cookie.split(";"); for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if(name == cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } function aiask(ask){ layer.open({ type: 2, area: ['1300px', '750px'], content: 'https://www.php.cn/help/ask?q='+encodeURIComponent(ask), fixed: true, // 不固定 //maxmin: true, shadeClose: true, title:"智能小助手", btnAlign: 'c', yes: function(index, layero){ // 获取 iframe 的窗口对象 var iframeWin = window[layero.find('iframe')[0]['name']]; var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素 var value = elemMark.val(); if($.trim(value) === '') return elemMark.focus(); // 显示获得的值 layer.msg('获得 iframe 中的输入框标记值：'+ value); } }); } </script>    <style> .layui-fixbar{display: none;} </style> <div class="phpSdhBox" style="height:240px !important;"> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="/k24.html" target="_blank" class="hover" title="PHP学习"> <b class="icon1"></b> <p>PHP学习</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="https://www.php.cn/blog/detail/1047189.html" target="_blank"> <b class="icon2"></b> <p>技术支持</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="#"> <b class="icon6"></b> <p>返回顶部</p> </a> </div> </div> </li> </div>   <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '11']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script>  <script> setCookie('is_article', 1, 1); </script> </body> </html>