资讯专栏INFORMATION COLUMN

第二天·初识HTML

Pocher / 1399人阅读

摘要:一什么是是超文本标记语言,超文本的意思就是指页面内可以包含图片链接,甚至音乐程序等非文字元素。这表示着元素的结尾这表示元素在此结束在本例中即段落在此结束。元素指定了当前的字符编码是,它包括了非常多人类已知语言的字符。

一·什么是HTML

HTML(HyperText Markup Language)是超文本标记语言,“超文本”的意思就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。HTML不是一种编程语言,而是一种标记语言。所谓的标记语言实际上就是一套标记标签。总之,HTML的作用就是通过标记标签来描述网页,使得网页的结构在浏览器中展现出来。

二·HTML的结构 1.骨架

HTML有自己的语法骨架格式:



  
    
    My test page
  
  
    My test image
  
2.标签

以下图这个

标签为例

这样的标签一般包括以下几部分:
1.开始标签(The opening tag):这里包含了元素的名称(本例为p),被开、闭尖括号所包围。这表示元素从此开始或者开始起作用——在本例中即段落由此开始。
2.闭合标签(The closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——这表示元素在此结束——在本例中即段落在此结束。
3.内容(The content):这是一个元素的内容,这个例子中就是所输入的文本本身。
4.元素(The element):开标签、闭标签与内容相结合,便是一个完整的元素。

3.元素的属性

元素有时候会有属性,比如下图:

属性(Attribute)包含了关于元素的一些额外信息,这些信息不会出现在内容中,但是一般会影响元素的显示或者动作。上面的例子中,class是一个属性名,editor-note是属性的值。
一个属性一般包括以下三点:

在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。

属性的名称,并接上一个等号。

由引号所包围的属性值。

4.元素之间的嵌套

我们可以将一个元素置于其他元素之中,这种方式被称为嵌套,例如我们强调某一部分文字,可以使用元素包裹,意味着这段文字被强调:

My cat is very grumpy.


在嵌套过程中,标签的顺序是很重要的,在这个例子中我们首先使用 p 标签,然后是 strong 标签,接着我们需要先闭合 strong 标签,最后再闭合 p 标签。下面是个错误的示范:

My cat is very grumpy.

5.空元素

有一些元素并不包含内容,也没有闭标签,例如“骨架”中的元素:
My test image
它包含了两个属性,但是这里并没有 闭合标签,也没有内部内容。因为图像元素不需要包含内容来产生效果,它的作用是向其所在的位置嵌入一个图像。

三.解析HTML文档

我们再回头看我们的HTML骨架:



  
    
    My test page
  
  
    My test image
  

用于声明文档类型,文档类型的声明必须位于HTML的第一行,它的意思是该HTML是HTML5。如果是其他版本的HTML那么声明方法会不同,但是我们现在只要用HTML5的声明就可以了。具体其他HTML版本的声明可以参考HTML 标签

浏览器解析HTML有三种方式:
1.标准模式(非怪异模式):在该模式中,页面按照HTML与CSS的定义渲染。
2.怪异模式:在该模式中则尝试模拟更旧的浏览器的行为。
3.部分怪异(近乎标准)模式: 一些浏览器(例如,那些基于Mozilla的Gecko渲染引擎的,或者Internet Explorer 8在strict mode下)也使用一种尝试于这两者之间妥协的“近乎标准”(almost standards)模式,实施了一种表单元格尺寸的怪异行为,除此之外符合标准定义。
总结:一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。HTML5提供的是标准模式,向后兼容的, 等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的 标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

元素包含了整个页面的内容,有时也被称作根元素或根标签。

元素规定了文档相关的配置信息,包括文档的标题,引用的样式和脚本等等,标签中的内容一般不会直接出现在页面中。具体内容可以参考标签里有什么? Metadata-HTML中的元数据

元素含了想让用户在访问页面时看到的内容,不管是文本,图像,视频,游戏,可播放的音轨或其他内容。

元素指定了当前的字符编码是UTF-8,它包括了非常多人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,具体的字符编码原理可以参考字符编码笔记:ASCII,Unicode 和 UTF-8

元素用于表述那些不能由其他元素表述的任何元数据,包括页面的说明,关键字,最后修改日期,和其它的元数据。具体可以参考HTML meta标签总结与属性使用介绍、 - HTML(超文本标记语言) | MDN

</b>元素设置了页面的标题,标题显示在浏览器标签页上,而且在你将网页添加到收藏夹或喜爱中时将作为默认名称。</p> <b>四·HTML其他</b> <b>1.关于属性</b> <b>(1)布尔属性</b> <p>有时候我们会看到一些属性没有值,但是仍然合法,例如:<input type="text" disabled>(<b>disabled</b>属性用于使表单输入变为不可用(变灰色),此时用户不能向他们输入任何数据。)只有当属性值和属性名相等的时候才能这样使用属性,这是一种简写。</p> <b>(2)属性值的引号</b> <p>有一些粗糙的网站中会用一些奇怪的标记风格,有的开发者会不给属性值加引号,有时浏览器会误解我们的标记,始终添加引号会避免很多问题,使得代码更易读。</p> <b>(3)单引号或双引号</b> <p>属性值用单引号或者双引号都可以,这只是代码风格的问题,但是千万不要在一条属性值里混用,尽量避免在同一套代码中混用,这样可以增加你代码的易读性。而如果你已经使用了一种引号,在这个引号中你可以嵌套另外一种引号。</p> <b>2.HTML中的空白</b> <p>有一些代码中会包含很多的空格,但是实际上这是没有必要的,例如下面两端代码是等价的:</p> <pre><p>Dogs are silly.</p></pre> <pre><p>Dogs are silly.</p></pre> <p>无论用了多少空白(包括空白字符和换行),当我们渲染这些代码的时候,HTML解释器会将连续出现的空白字符减少为一个多带带的空格符·</p> <b>3.HTML中的特殊字符</b> <p>在HTML中,<b><</b>、<b>></b>、<b>"</b>、<b>"</b>、<b>&</b>是特殊字符,它们本身就是HTML语法的一部分,因此,如果直接把它们包含进我们的文本中有时会出现错误,如果想要在文本中使用它们就必须使用字符引用(表示字符的特殊编码),它们每个字符以<b>&</b>开始,以<b>;</b>结束,具体如下表:</p> <table> <thead><tr> <th>原义字符</th> <th>等价字符引用</th> </tr></thead> <tbody> <tr> <td><</td> <td><b><</b></td> </tr> <tr> <td>></td> <td><b>></b></td> </tr> <tr> <td>"</td> <td><b>"</b></td> </tr> <tr> <td>"</td> <td><b>'</b></td> </tr> <tr> <td>&</td> <td><b>&</b></td> </tr> </tbody> </table> <p>维基百科这一篇中收录了全部的字符引用表:XML和HTML字符实体引用列表</p> <b>4.HTML注释</b> <p>就如同大部分的编程语言一样,在HTML中也可以书写注释,注释是被浏览器忽略,且对用户不可见的,它们的目的是允许我们来描述代码的工作的。如果我们在若干年以后重新查看我们的代码库,或者处理别人的代码,注释是很有用的。为HTML添加注释,需要特殊记号:<b><!--</b>和<b>--></b>包括起来,例如:</p> <pre><p>I"m not inside a comment</p> <!-- <p>这是一条注释!</p> --></pre> <b>5.HTML标签的语义化</b> <p>语义化的标签,旨在让标签有自己的含义,选择最合适最正确的标签,具体左右有三:</p> <p>代码结构清晰,方便阅读,有利于团队合作开发。</p> <p>方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。</p> <p>3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="超融合服务器" href="https://www.ucloud.cn/site/product/utrion.html">超融合服务器</a> <a style="width:120px;" title="专线服务" href="https://www.ucloud.cn/site/active/network.html?ytag=seo">专线服务</a> <a style="width:120px;" title="第二天" href="https://www.ucloud.cn/yun/tag/diertian/">第二天</a> <a style="width:120px;" title="二天" href="https://www.ucloud.cn/yun/tag/ertian/">二天</a> <a style="width:120px;" title="docker初识" href="https://www.ucloud.cn/yun/tag/dockerchushi/">docker初识</a> <a style="width:120px;" title="初识关系数据库" href="https://www.ucloud.cn/yun/tag/chushiguanxishujuku/">初识关系数据库</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。</p> <p>转载请注明本文地址:https://www.ucloud.cn/yun/53277.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/53276.html">上一篇:前端--iframe爬坑记录</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/53278.html">下一篇:001-html入门</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/53790.html"><b><em>第</em><em>二天</em></b></a></h2> <p class="ellipsis2 good">摘要:学习用时小时学习目标第二天任务目标是否已达成麻麻嘚。摘录一个笔记第二天笔记以下是原文爱上前端,用技术带给用户最优美的体验。为文本框命名,以备后台程序使用。 codepen好像崩了?-_-|| 2019.3.6 怎么也要至少过一遍鸭。学习用时:3小时学习目标:第二天任务目标是否已达成:麻麻嘚。 今天学了什么? 勉强再认了一次各种标签(虽然感觉还是认不住),ol,ul,li和dl,dt,d...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1519.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/15/small_000001519.jpg" alt=""><span class="layui-hide64">warkiz</span></a> <time datetime="">2019-08-02 14:25</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/83497.html"><b>angular - 收藏集 - 掘金</b></a></h2> <p class="ellipsis2 good">摘要:如何在中使用动画前端掘金本文讲一下中动画应用的部分。与的快速入门指南推荐前端掘金是非常棒的框架,能够创建功能强大,动态功能的。自发布以来,已经广泛应用于开发中。 如何在 Angular 中使用动画 - 前端 - 掘金本文讲一下Angular中动画应用的部分。 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1593.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/15/small_000001593.jpg" alt=""><span class="layui-hide64">AlexTuan</span></a> <time datetime="">2019-08-20 17:19</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-left"> <a href="https://www.ucloud.cn/yun/1272.html"><img src="https://img2018.cnblogs.com/blog/1547176/201901/1547176-20190123202511468-100533710.png" alt=""></a> </div> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/1272.html"><b><em>初识</em><em>HTML</em></b></a></h2> <p class="ellipsis2 good">摘要:注意对于中文网页需要使用声明编码,否则会出现乱码。声明不是标签它是指示浏览器关于页面使用哪个版本进行编写的指令。这两个元素是专门为定义样式而生的。点击点我会自动打开一个新窗口跳转到页面点我直接跳转到百度页面点我HTML是什么? 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。 本质上是浏览器可识别的规则,我们按照规则写网页,浏览...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1725.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/17/small_000001725.jpg" alt=""><span class="layui-hide64">番茄西红柿</span></a> <time datetime="">2019-04-23 11:52</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-left"> <a href="https://www.ucloud.cn/yun/1265.html"><img src="https://common.cnblogs.com/images/copycode.gif" alt=""></a> </div> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/1265.html"><b><em>初识</em><em>HTML</em></b></a></h2> <p class="ellipsis2 good">摘要:注意对于中文网页需要使用声明编码,否则会出现乱码。声明不是标签它是指示浏览器关于页面使用哪个版本进行编写的指令。这两个元素是专门为定义样式而生的。点击点我会自动打开一个新窗口跳转到页面点我直接跳转到百度页面点我HTML是什么? 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。 本质上是浏览器可识别的规则,我们按照规则写网页,浏览...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1725.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/17/small_000001725.jpg" alt=""><span class="layui-hide64">番茄西红柿</span></a> <time datetime="">2019-04-23 11:52</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/1520.html"><b><em>初识</em>DOM(文档对象模型)</b></a></h2> <p class="ellipsis2 good">摘要:什么是什么是什么叫做呢的全称是文档对象模型,定义了表示和修改文档所需的对象这些对象的行为和属性以及这些对象之间的关系。对象即为宿主对象,由浏览器厂商定义,用来操作的功能的一类对象和集合。简单来说,就是用来操作和的,它是一系列对象的集合。什么是DOM 什么叫做DOM呢? • DOM的全称是Document Object Model 文档对象模型,DOM定义了表示和修改文档所需的对象、这些对象的...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1642.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001642.jpg" alt=""><span class="layui-hide64">Elle</span></a> <time datetime="">2019-04-23 13:10</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-1685.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001685.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1685.html" rel="nofollow">Pocher</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1685)" id="attenttouser_1685" 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-1685.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/124842.html">#黑五#virtono:全场VPS、虚拟主机最低3折优惠,VPS首月€2.68起</a></h3> <p>阅读 2783<span>·</span>2021-11-24 10:21</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122097.html">2.《JSP应用开发案例教程》第1章 JSP概述</a></h3> <p>阅读 1387<span>·</span>2021-10-11 10:57</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/120441.html">云主机的ip地址是什么东西-云ip地址怎样设置?</a></h3> <p>阅读 2554<span>·</span>2021-09-22 15:24</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/120261.html">ftp主机是什么-ftp主机地址是什么?</a></h3> <p>阅读 2332<span>·</span>2021-09-22 14:58</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115433.html">js制作简易计算器(-)</a></h3> <p>阅读 2204<span>·</span>2019-08-30 13:16</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112359.html">前端文章- 收藏集 - 掘金</a></h3> <p>阅读 3366<span>·</span>2019-08-29 13:05</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111764.html">line box,inline box及vertical-align分析</a></h3> <p>阅读 3301<span>·</span>2019-08-29 12:14</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/110368.html">MyBatis的常见属性总结select、insert、update、delete</a></h3> <p>阅读 3270<span>·</span>2019-08-27 10:55</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/product/uhost.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/Z7TLrpAi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/MWraMsBh.png" alt="混合云"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/ucloudstack.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/ifzOxvjW.png" alt="私有云"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/utrion.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/VDqwC1iN.png" alt="超融合服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220630/pJwnviKN.png" alt="服务器托管"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uxzone.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220630/CDb5uXxp.jpeg" alt="idc机房托管"> </a> </div> <div> <a href="https://www.ucloud.cn/site/active/network.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/230227/XWsSXmvm.png" alt="专线服务"> </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>