资讯专栏INFORMATION COLUMN

HTML查漏补缺

daydream / 2624人阅读

摘要:规定了标记语言的规则,这样浏览器才能正确地呈现内容不基于,所以不需要引用标签都用来做什么的提供有关页面的元信息,常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器如何布局或重载页面,搜索引擎和其它网络服务。

HTML规范

HTML规范文档

H4时代被规定为错误的行为,在H5时代全都被合理化了,比如标签不区分大小写、只有开始标签没有结束标签、属性值不带引号等等错误,H5全部允许它们存在

遗漏的标签知识

</b>标签 定义文档的标题,它是 <b>head</b> 部分中<strong>唯一必需</strong>的元素</p> <p> <p><b><address></b>标签</p> <p>该标签定义文档或文章的作者/拥有者的联系信息</p> <p>不应该用于描述通讯地址,除非它是联系信息的一部分</p> <p>这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在<b><time></b>元素中)。</p> </p> <p>应该使用 <b><h1> - <h6></b> 来表示<strong>标题</strong>,使用<b><em></b> 标签来表示<strong>强调</strong>的文本,应该使用 <b><strong></b> 标签来表示<strong>重要</strong>文本,应该使用 <b><mark></b> 标签来表示<strong>标注的/突出显示</strong>的文本。</p> <p> <p><b><base></b>标签</p> <p>该标签用于指定一个文档中包含的所有<strong>相对<b>URL</b></strong>的基本<b>URL</b> </p> <p>通常情况下,浏览器会从当前文档的 <b>URL</b> 中提取相应的元素来填写<strong>相对<b>URL</b></strong>中缺少的部分,使用 <b><base></b> 标签后,浏览器将不再使用当前文档的 <b>URL</b>,而使用<b><base></b>标签中指定的基本 <b>URL</b> 来解析所有的<strong>相对<b>URL</b></strong>,包括 <b><a></b>、<b></b> 之间的文本,而其他浏览器将提交 <b>value</b> 属性的内容;所以为了避免提交不同的值,在 <b>HTML</b> 表单中最好使用 <b>input</b> 元素来创建按钮</p> <p>使用<b>button</b>元素与使用 input 元素创建的按钮之间的不同之处在于:在<b><button></b> 与 <b><button/></b>之间 ,可以放置内容,比如文本或图像</p> <p>使用 <b>input</b> 元素来创建按钮请始终为按钮规定 <b>type</b> 属性。<b>Internet Explorer</b> 的默认类型是 <b>"button"</b>,而其他浏览器中(包括 <b>W3C</b> 规范)的默认值是 <b>"submit"</b>。</p> </p> <p> <p><b><caption ></b>标签</p> <p>该标签定义表格标题,必须紧随 table 标签之后。</p> <p>只能对每个表格定义一个标题,通常这个标题会被居中于表格之上</p> </p> <p> <p><b><cite></b> 标签</p> <p>通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题</p> <p>它可以使你或者其他人从文档中自动摘录参考书目,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示(当然需要通过写相应的程序来处理)</p> <p>该标签体现了语义化的便利</p> </p> <p> <p><b><details></b>标签和<b><summary></b> 标签</p> <p> <b><summary></b> 标签为 <b>details</b> 定义标题</p> <p>标题是可见的,用户点击标题时,会显示出 <b>details</b> </p> </p> <p> <p><b><meter></b>标签</p> <p>该标签定义已知范围或分数值内的标量测量,比如说表示3/10</p> <p>注意表示进度不应该用该标签而是<b><process></b>标签</p> </p> <p> <p><b><figure></b> 标签与<b><figcaption></b> 标签</p> <p> <b><figure></b>标签规定独立的流内容(图像、图表、照片、代码等等),<b>figure</b> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。</p> <p> <b><figcaption></b> 标签定义 <b>figure</b> 元素的标题,<b><figcaption></b> 标签应该被置于<b>figure</b>元素的<strong>第一个</strong>或<strong>最后一个</strong>子元素的位置</p> </p> <p> <p><b><template></b>标签</p> <p>该标签可以定义<b>html</b>片段,但是不会被渲染</p> <p>可以通过<b>js</b>来将片段显示到页面上</p> </p> <p> <p><b><table></b>标签</p> <p>单元格默认平分<b>table</b>的宽度, <b>table</b>决定了<strong>整个表格</strong>的宽度</p> <p>不设置单元格宽高时,宽高由内容撑开;</p> <p>只设置高度时,内容撑开宽度,当宽度不可再变时,将会撑开高度;</p> <p>只设置宽度时,内容只撑开高度;</p> <p>当宽高均设置时,内容可以只撑开表格高度,而<strong>不能撑开宽度</strong> </p> <p> <b>table</b>里面的单元格的宽度会转换成百分比,当单元格宽度和超过<b>table</b>的宽度是<strong>不会溢出</strong>的,而是会撑开高度</p> </p> <p> <p><b><link></b>标签</p> <p>定义文档与外部资源的关系</p> <p> <b>rel = stylesheet</b>,链接外部样式表</p> <p> <b>rel = dns-prefetch</b>,<b>dns</b>预解析(异步)</p> <p> <b>rel = prefetch</b>,预加载图片等(异步)</p> <p> <b>rel = prerender</b>,预渲染(异步)</p> <p> <b>rel = icon</b>,定义<b>title</b>图标</p> <p> <b>rel = alternate</b>,定义文档的替代版本(比如打印页、翻译或镜像),可做<b>RSS</b>。</p> <p>........见<b>W3C</b> </p> </p> <b>课后小验证</b> <p> <p><b>HTML</b>是什么,<b>HTML5</b>是什么</p> <p> <b>HTML</b>是超文本标记语言(<b>Hyper Text Markup Language</b>)</p> <p>是用来描述网页的一种<strong>标记</strong>语言,而不是编程语言;标记语言是一套<strong>标记标签</strong> </p> <p>与<b>XML</b>的区别:<b>HTML</b>的设计宗旨是<strong>显示</strong>数据,而<b>XML</b>的设计宗旨是<strong>传输</strong>数据;<b>HTML</b>的标签是预定义的,而<b>XML</b>的标签是使用者自己定义的</p> <p> <b>HTML5</b>是最新的 <b>HTML</b> 标准,拥有新的元素,更丰富的内容,更强大的适配性</p> </p> <p> <p><b>HTML</b>元素标签、属性都是什么概念?</p> <p> <b>HTML</b>元素指的是从开始标签(<b>start tag</b>)到结束标签(<b>end tag</b>)的所有代码,开始标签与结束标签之间的内容是<b>HTML</b>元素的元素内容</p> <p> <b>HTML</b>元素标签就是指一个<b>HTML</b>元素的开始标签和结束标签,浏览器不会直接显示标签,但是会使用这些标签来解释页面的内容</p> <p> <b>HTML</b>元素属性提供了有关<b>HTML</b>元素的更多的信息,比如图片的<b>URL</b>,元素的类名等</p> </p> <p> <p>文档类型是什么概念,起什么作用?</p> <p> <b>Web</b> 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能<strong>正确地</strong>显示文档。</p> <p> <b>HTML</b>文档中使用<b><!DOCTYPE></b>声明帮助浏览器正确地显示网页,<b><!DOCTYPE></b>声明告诉了浏览器当前的<b>HTML</b>文档是用什么<b>HTML</b>版本编写的,这样浏览器才能完全正确地显示出 <b>HTML</b> 页面</p> <p> <b><!DOCTYPE></b> 声明必须是 <b>HTML</b> 文档的第一行,位于 <b><html></b> 标签之前,且要注意它不属于<b>HTML</b>标签</p> <p>在 <b>HTML 4.01</b> 中,<b><!DOCTYPE></b> 声明引用 <b>DTD</b>,因为 <b>HTML 4.01</b> 基于标准通用标记语言(<b>SGML</b>)。<b>DTD</b> 规定了标记语言的规则,这样浏览器才能正确地呈现内容</p> <p> <b>HTML5</b> 不基于 <b>SGML</b>,所以<strong>不需要</strong>引用 <b>DTD</b> </p> </p> <p> <p><b>meta</b>标签都用来做什么的?</p> <p>提供有关页面的元信息,常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。</p> <p> <b>charset</b>属性规定文档的编码方式,建议为<b>UTF-8</b> </p> <p> <b>content</b>属性定义与 <b>http-equiv</b> 或 <b>name</b> 属性相关的元信息</p> <p> <p><b>http-equiv</b>属性把对应的 <b>content</b> 属性关联到 <b>HTTP</b> 头部。</p> <pre>* `content-type`:用于指定内容类型,默认为`text/html` * `refresh`: 设置文档多久刷新一次 * `default-style`:指定首选的样式表</pre> </p> <p> <p><b>name</b>属性把对应的 <b>content</b> 属性关联到一个名词。</p> <pre>* `author` * `description` * `generator` * `keywords` * `viewport`:控制页面的尺寸和比例,以便响应式</pre> </p> <p> <p><b>meta</b>标签是可扩展的,各浏览器产商可以自己定义一些特定的内容</p> <pre>* `http-equiv = "X-UA-Compatible" content = "IE = edge"`:为 `IE8` 指定不同的页面渲染模式 * `name = "format-detection" content="telphone = no"`:关闭`iOS`电话号码自动识别 * `name = "renderer" content = "webkit"`:`360`浏览器指定内核 </pre> </p> </p> <p> <p><b>Web</b>语义化是什么,是为了解决什么问题</p> <p> <b>Web</b>语义化简单的说就是在编写<b>HTML</b>文档时,选择合适的标签将内容本身进行合理的描述,而不去管它的样式,使页面有良好的结构,页面元素有含义;同时对于类名、<b>id</b>名称也要命名的能够描述内容;从而能够让人和机器都容易理解(提升可读性、可维护性)</p> <p> <b>Web</b>语义化在方便开发人员阅读代码同时也有利于让机器(搜索引擎,爬虫)读懂文档内容,从而利用机器来对索引好的内容作各种处理和挖掘,比如<b>SEO</b>(搜索引擎优化)</p> <p> <b>Web</b>语义化在抛开<b>CSS</b>的情况下,页面也能呈现出清晰的结构</p> <p> <b>Web</b>语义化可以方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以更合适的方式来渲染网页(提高无障碍性)</p> <p> <b>Web</b>语义化有利于<b>SEO</b> </p> </p> <p> <p>链接是什么概念,对应什么标签?</p> <p>指从一个网页指向一个目标的连接关系</p> <p>对应<b><a></b>标签,<b><link></b>标签,<b><script></b>标签,<b><area></b>标签</p> </p> <p> <p>表单标签都有哪些,对应着什么功能,都有哪些属性</p> <table> <thead><tr> <th>标签</th> <th>功能</th> </tr></thead> <tbody> <tr> <td>form</td> <td>表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息</td> </tr> <tr> <td>fieldset</td> <td>将表单内的相关元素分组</td> </tr> <tr> <td>fieldset</td> <td>为 fieldset 元素定义标题</td> </tr> <tr> <td>button</td> <td>表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方</td> </tr> <tr> <td>input</td> <td>用于为基于Web的表单创建交互式控件,以便接受来自用户的数据</td> </tr> <tr> <td>textarea</td> <td>表示一个多行纯文本编辑控件</td> </tr> <tr> <td>option</td> <td>用于定义在<select>, <optgroup> 或<datalist> 元素中包含的项。<option> 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项</td> </tr> <tr> <td>optgroup</td> <td>会创建包含在一个 <select> 元素中的一组选项</td> </tr> <tr> <td>select</td> <td>是一种表单控件,可创建选项菜单。菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。</td> </tr> <tr> <td>datalist</td> <td>与input元素结合来定义选项列表,包含了一组<option>元素,这些元素表示input的合法值</td> </tr> <tr> <td>meter</td> <td>用来显示已知范围的标量值或者分数值</td> </tr> <tr> <td>process</td> <td>用来显示一项任务的完成进度</td> </tr> <tr> <td>output</td> <td>表示计算或用户操作的结果</td> </tr> <tr> <td>label</td> <td>表示用户界面中项目的标题</td> </tr> </tbody> </table> </p> <p> <p><b>ol</b>, <b>ul</b>, <b>dl</b>, <b>dd</b>, <b>dt</b>等这些标签都适合用在什么地方,举个例子</p> <p> <b>ol</b>为有序列表,适用于有顺序的列表,比如说排行榜</p> <p> <b>ul</b>为无序列表,适用于不在意顺序的列表,比如说菜单</p> <p> <b>dl</b>为定义列表,<b>dt</b>是定义列表的标题,<b>dd</b>是定义列表的具体描述,比如说术语解释表</p> </p> <p> <p>如何提升无障碍性</p> <p>为 img 提供 alt 属性</p> <p>noscript</p> <p>input 和 label 对应</p> <p>图形验证码与语音验证码</p> <p>文字和背景有足够对比度</p> <p>键盘可操作</p> <p>语义化</p> </p> <p> <p><b>JSON-LD</b></p> <p><b>JavaScript Object Notation for Linked Data</b></p> <p>是一种基于<b>JSON</b>表示和传输互联数据(<b>Linked Data</b>)的方法</p> <p>结构化数据就是按一定的结构产生的一系列描述你网站内容的信息,它能帮助搜索引擎的爬虫更好地了解你网页中所要展现的内容,并在搜索结果中有更丰富得展现,而非千篇一律的链接,即提高搜索排名,美化搜索结果。它还能够被其他一些应用所读取使用,比如:<b>Gmail</b>, <b>Facebook</b>, <b>Twitter</b> 等,甚至还可以是 <b>Siri</b>,可穿戴设备,或是车载导航系统。</p> <p>JSON-LD与互联数据(Linked Data)</p> <p> <p>示例</p> <pre><script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "name": "John Doe", "jobTitle": "Graduate research assistant", "affiliation": "University of Dreams", "additionalName": "Johnny", "url": "http://www.example.com", "address": { "@type": "PostalAddress", "streetAddress": "1234 Peach Drive", "addressLocality": "Wonderland", "addressRegion": "Georgia" } } </script></pre> </p> </p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a> <a style="width:120px;" title="补缺" href="https://www.ucloud.cn/yun/tag/buque/">补缺</a> <a style="width:120px;" title="html对象.html" href="https://www.ucloud.cn/yun/tag/htmlduixiang//">html对象.html</a> <a style="width:120px;" title="html嵌套html" href="https://www.ucloud.cn/yun/tag/htmlqiantaohtml/">html嵌套html</a> <a style="width:120px;" title="html调用html" href="https://www.ucloud.cn/yun/tag/htmldiaoyonghtml/">html调用html</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。</p> <p>转载请注明本文地址:https://www.ucloud.cn/yun/52296.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/52295.html">上一篇:TCP/IP基础总结性学习(8)</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/52297.html">下一篇:37个JavaScript基本面试问题和解答</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/93833.html"><b>前端背景知识<em>查漏</em><em>补缺</em></b></a></h2> <p class="ellipsis2 good">摘要:提交内容可以是一个提议想法初步描述该阶段是对所提交新特性的正式建议。在这个阶段需具备以下条件指定一名成员作为审阅通过有实现的或者初步编写标准,包括问题描述解决方案示例语法语义关键的算法及抽象实现在的复杂度等该阶段是会出现标准中的第一个版本。 ECMAScript 与 JavaScript ECMAScript 是一套脚本语言的规范,内部编号 ECMA-262 该规范由 Ecma(Eu...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-765.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/07/small_000000765.jpg" alt=""><span class="layui-hide64">developerworks</span></a> <time datetime="">2019-08-22 15:53</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/52091.html"><b>前端背景知识<em>查漏</em><em>补缺</em></b></a></h2> <p class="ellipsis2 good">摘要:提交内容可以是一个提议想法初步描述该阶段是对所提交新特性的正式建议。在这个阶段需具备以下条件指定一名成员作为审阅通过有实现的或者初步编写标准,包括问题描述解决方案示例语法语义关键的算法及抽象实现在的复杂度等该阶段是会出现标准中的第一个版本。 ECMAScript 与 JavaScript ECMAScript 是一套脚本语言的规范,内部编号 ECMA-262 该规范由 Ecma(Eu...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1329.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/13/small_000001329.jpg" alt=""><span class="layui-hide64">incredible</span></a> <time datetime="">2019-08-02 10:03</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/82672.html"><b>【面试篇】JS基础知识<em>查漏</em><em>补缺</em></b></a></h2> <p class="ellipsis2 good">摘要:因为在页面加载完成后,引擎维护着两个队列,一个是按页面顺序加载的执行队列,还有一个空闲队列,使用定时函数就是将回调函数加入到空闲队列中,故和其他定时器是并发执行的。 1.window.onload和$(document).ready()的区别: ①执行时间:window.onload会在所有元素,包括图片,引用文件加载完成之后执行,而$(document).ready()则会在HTML...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1601.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001601.jpg" alt=""><span class="layui-hide64">myeveryheart</span></a> <time datetime="">2019-08-20 16:02</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-1049.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001049.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1049.html" rel="nofollow">daydream</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1049)" id="attenttouser_1049" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-1049.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122546.html">程序员的算法趣题Q54: 偷懒的算盘(2)</a></h3> <p>阅读 1100<span>·</span>2021-10-14 09:43</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122243.html">#便宜#无忧云:2核/2G/50G硬盘/3Mbps不限流量/洛阳BGP线路/首月9.9元,限量200</a></h3> <p>阅读 1145<span>·</span>2021-10-11 11:07</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/118266.html">野草云:新增香港云服务器CN2+BGP宽带 1GB内存 3M 带宽 月费 19元起</a></h3> <p>阅读 3111<span>·</span>2021-08-18 10:23</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113655.html">CSS多列布局(栅格布局)</a></h3> <p>阅读 1484<span>·</span>2019-08-29 16:18</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111190.html">利用HTML和CSS实现常见的布局</a></h3> <p>阅读 998<span>·</span>2019-08-28 18:21</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/108206.html">js执行机制</a></h3> <p>阅读 1473<span>·</span>2019-08-26 12:12</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/105745.html">如何实现一个这样的级联组件</a></h3> <p>阅读 3759<span>·</span>2019-08-26 10:11</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/104609.html">Node中间层服务编写框架中的思考</a></h3> <p>阅读 2501<span>·</span>2019-08-23 18:04</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/gpu.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud (优刻得科技股份有限公司)"></a></h6> <p>UCloud (优刻得科技股份有限公司)是中立、安全的云计算服务平台,坚持中立,不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品,并深入了解互联网、传统企业在不同场景下的业务需求,提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>|</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>