摘要：可能一些有心的开发者会把的写的语义明白些，比如导航栏的用，边栏的用。
0. HTML5中最看重的理念“语义化”相比HTML有什么区别？
在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容，这里搜集整理了一些语义化标签方面的问题和解答，以供大家参考。
简单来说就是：描述内容的含义(meaning)
比如说
标签就是段落的意思，在HTML5中所有的标签都有它书面上的语义。而没有语义的标签在HTML中有，在HTML5中就没有了，比如"块级元素" 与"行内元素" 变成了“外围内容” 与“短语内容” 。"语义" 与"显示" 分离，HTML5代码中出现的标签都是让开发人员或浏览器一看就知道是干什么用的东西，至于显示效果那是CSS3（Cascading Style Sheet）需要干的事情，所以在HTML5中这个两个好基友终于距离产生了美。
可以提升可访问性与互操作性（兼容性会更好）；
改进搜索引擎的优化；
一般来说可以让HTML文件更小；
让代码更好唯护，与CSS3的关系更和谐。
1. HTML5中的
第一，对这个几个标签的理解：
HTML5的设计者们可以说是用心良苦呀，他们认真分析HTML4.0中出来的问题，也就是当下最流行的写页面的方式就是"DIV+CSS" ，我们也不难发现只要用到这个就可以把页面写即简单又漂亮。没有繁琐的标签在里面，需要什么功能就去加标签就可以了。
而是什么呢？这个我们下一个问题详细说明。问题的关键在于
没有任何的语义，也就是说他要干的事是什么全凭开发者说了算。这就造成了严重的开发规范不统一，也就是说页面的导航栏是
，页面的边栏也是
，唯一区分它们的就是
id 。可能一些有心的开发者会把
的
id 写的语义明白些，比如：导航栏的
id 用
，边栏的
id 用
。这样的写法对其他的开发者看来还是很好的，因为看到
id 就可以知道这个
是干什么用的了。但是还是有一大部分的开发者会这么写，如：导航栏的
id 用
div1 ，边栏的
id 用
div2 ，这样的写法对用户来说的可能没有什么区别，因为开发者知道他们都代表什么，而对其他的开发者来说这真的是灭顶之灾，用英文来说就是“reading the fucking code”，而对开发者本身可能时间一长也不知道是什么意思了，但是下次开发的时候他们一定还有人是这么干的；
回到正题，经过上面的介绍大家也许已经知道为什么在HTML5引用上面的标签了吧，就是为了解决开发规范不统一的问题同时也为了增强语义，有人也许会问为什么HTML5为什么那么在意语义？用了上面的标签可以说带来什么好处呢？这个答案用一个非常简单的话来说的那就是：为了统一规范与新功能的出现。
他们这些标签功能就是代替功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；
第二，这几个标签的语义与用法：
特别提示：
HTML5规范不推荐对有辅助性的页脚链接用
HTML5中不允许将
特别提示：
同样不能用在
他与
特别提示：
如果使用多个
如果是与文章的主要内容有关系的图像需要用
特别提示：
页脚并不一定是要位于所在元素的末尾，不过通常是这样的；
他不可以放在
2. HTML5通用的容器、
在HTML5中的生存含义？
这个标签在很久很久以前就已经出现在HTML中了，他的全拼是（division）。而在HTML5中的很多的新标签都是他的功能的统一定义而已，因为
本身没有任何的语义，但是可以对他增加CSS样式，这样就可以很好的为页面做出一些我们理想中的效果。那么在HTML5为什么他还存在呢？那就是因为，在某些时候你会发现你用HTML5中的任何一个标签都不合适你现在需要的语义，所以在这个时候就需要用到
这个标签了。既然说到
，那么也要说说与他相对应的
这个标签，他也是一个没有任何语义的标签，起到的功能与作用是和
一样的，只不过用法不一样：
是块级的无语义容器，
是短语的无语义容器。
的用法相信朋友们用的一定比我熟悉，所以这里关于他的用法就不多说了，只是针对在HTML5中对
的使用我提几点建议：
如果你觉得用HTML5中的新的标签比用合适就一定要用新的标签，因为
没有任何的语义，这个是HTML5所不倡导的；
如果效果需要的话可以在HTML5新标签的外面加一个标签，这样对HTML中的语义不会产生太大的影响。
3. 元素title属性对语义的重要性是什么？
title 属性这个刚一看会不会想到</b>标签？但是不要弄到错了，他们是完全不同的东西。平时在我们开发的时候很少会用到这个属性，首先说一下它是干什么的吧，其实他就是一个具有提示作用的属性，对于屏幕阅读器来说可以为用户朗读文本，所以正确的使用可以提升页面的访问性。</p>
<b>4. HTML5中的新标签对于写文本启到一些重要影响的标签有哪些？</b>
<p>在写这个问题的答案之前先说说关于这些标签的理解与用法：</p>
<pre>
<p>明确html5的核心思想就是语义，所以不管是什么标签就看表达的意思，而不是看展现的效果；</p>
<p>关于文本的相关标签可以适当的想象成是语文中的标点符号这样可以方便记意与运用；</p>
</pre>
<p>明白上面的两点我们在来说这些新的标签的语义与用法吧：<br><b><address></b>、<b><figure></b>、<b><time></b>这三个标签下一个问题中详细说这里就先不说了；<br><b><strong></b>、<b><em></b>这个两个标签在HTML4.0中就已经有了，但是在这里还是要说一下，因为在以前可能很少用到它们因为很少有人去注意语义；</p>
<p>
<b><strong></b>表示的是重要的文本（默认为粗体显示）——重点是语义上的表达而不是展现的效果这个需要记住哦</p>
<p>
<b><em></b>表示的是强调的文本（默认为斜体）</p>
<p><b><mark></b>标签是HTML5中的新元素，用来突出显示文本，它的效果就像是用荧光笔给重点的语句做标记一样；<br><b><span></b>标签这个也是在HTML中就已经有的了，以前的文章也大概的提过一下但是没有详细的说明，下面就详细的说明一下：</p>
<p>
<b><span></b>没有任何的语义，所以正确的使用方式是需要在没有其它合适有标签的时候才可以用它；</p>
<p>它是短语级别的标签所以不会另起一行；</p>
<p>同<b><div></b>一样在一定的情况下可以添加<b><span></b>标签利用微格式来增加语义；</p>
<p>一般的情况下需要用CSS来控制它的显示样式因为它没有样式的展现样式；</p>
<p><b><wbr></b>一个与<b><br></b>很像的新标签，区别在于它不会强制换行；<br><b><ruby></b>、<b><rp></b>、<b><rt></b>这几个标签就像是语文中的音标一样；<br><b><meter></b>可以用它做一些测量结果的显示与投票结果的显示（现在的问题是浏览器对它的支持不好）；<br><b><progress></b>同样的一个进度条的显示，可以用做一些很好的与用户交互的效果，问题是浏览器的兼容现在也不好。</p>
<b>5. HTML5中<b><address></b>、<b><figure></b>、<b><time></b>标签的正确用法与注意事项有哪些是你不知道的?</b>
<p><b><address></b>这个标签是新的，所以用他的人很少。至于正确的用法当然也很少有人去研究它，下面简单的总结一下：</p>
<p>
<b><address></b>是用来定义与HTML页面或页面一部分有关的作者、相关人员或组织的联系信息，通常位于页面底部或相关部分内；</p>
<p>大多数时候，联系信息是作者的电子邮件或是指向联系信息页的链接，这个是正确的，不能用来标记“联系我们”中的办公地点，这是错误的用法；</p>
<p>提供的信息要准确，不是说电子邮件的地址的正确性，而是说需要对应上提供信息的人，如果一个页面中有好多相关的人，那么提供信息的时候一定要确定信息准确性，不要张冠李戴；</p>
<p>
<b><address></b>标签中不能有<b><h1></b>~<b><h6></b>、<b><article></b>、<b><address></b>、<b><aside></b>、<b><footer></b>、<b><header></b>、<b><hgroup></b>、<b><nav></b>、<b><section></b>等标签；</p>
<p><b><figure></b>这个元素是用来引入图表、图形、照片等，对应的场景就是像是杂志中的图片一样，在HTML5之前是没有一个专门的标签来做这个事的，之前如果实现这个功能就是用没有语义的<b><div></b>标签；</p>
<pre>
<p>用法提示：<br>
1. <b><figure></b>元素可以包含多个内容块，但是只能有一个<b><figcaption></b>（可以理解成给图表加标题）标签；<br>
2. 可以用<b><h1></b>~<b><h6></b>来给<b><figure></b>增加标题；<br>
3. <b><figcaption></b>不能多带带出现，需要有配套的内容一起出现。</p>
</pre>
<p><b><time></b>可以通过这个标签标记一个具体的时间或日期，应用场景通常就是一篇文章的发表时间。</p>
<pre>
<p>需要注意的是：<br>
1. <b>datetime</b>中的时间最好与<b><time></b>标签中的文本元素日期一样，写法可以不一样；<br>
2. 如果这个时间是代表整个文章或是页面的时间需要添加<b>pubdate</b>属性；<br>
3. 不要在<b><time></b>标签中使用不确切的时间如：“今天中午”、“上周末”；<br>
4. 如果 使用<b>pubdate</b>属性需要注意的是要在同一个父标签下面不要出现张冠李戴的问题；<br>
5. <b><time></b>标签不能在嵌套另一个<b><time></b>标签；<br>
6. <b>datatime</b>中的时间格式需要是标准的机器可能的时间 如:YYYY-MM-DDThh:mm:ss</p>
</pre>
<p>其实作为新的标签，它们的用法还有很多，这里只是说了一些最基础的东西，不过我认为用会上面所有的东西就可以说是入门了。</p>
<b>5. 关于<b><em></b>、<b><strong></b>与<b><b></b>、<b><i></b>的前世今生？</b>
<p>各位开发过HTML的朋友都知道<b><em></b>与<b><i></b>、<b><strong></b>与<b><b></b>它们的展现形式一样的，一个是斜体一个是粗体，那么它们在HTML5中是怎么平相处的呢？下面我们来重点讲一下<b><b></b>、<b><i></b>的前世今生：</p>
<pre>
<p>在很早以前，互联网那时还没有一个叫作CSS的东西出现的时候，为了区分文本中的重点与特殊的含意的文字<b><b></b>、<b><i></b>这对兄弟出现了。在它们的帮助下，页面的文字与用户之间的交互得到了提升。<br>
然而好景不长，在互联网飞速发展的情况下，很快出现一个叫CSS的东西，它的责任就是用来控制页面的表现形式的，当然也包括<b><b></b>、<b><i></b>所表现的形式，所以在HTML4.0与XHTML1中就有开发人员建议废弃<b><b></b>、<b><i></b>，取面代之的就是<b><strong></b>、<b><em></b>+CSS，因为他们有语义性可以更好的与用户交互。可是问题并没有就此结束，因为在开发的时候在一些情况下发现用<b><strong></b>、<b><em></b>总是不能很的好的表示语义，为此，在HTML5中<b><b></b>、<b><i></b>又以修改后的面貌展现给我们了，所以在HTML5中又重新启用了<b><b></b>、<b><i></b>这对兄弟。</p>
</pre>
<p>那么具体在HTML5中什么时候用它们呢？<br><b><b></b>标签表示出于实用的目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其它的语义和语气，用于：关键词，产品名，操作指令等等；<br><b><i></b>标签表示一块不同于其它文字的文字，具有不同的语态或语气，用于：分类名称，技术术语，外语中的惯用词等等。</p>
<b>6. 如何使用ARIA提升可访问性？</b>
<p>语义真的有那么重要么？通过语义又怎么提高访问性与增加SEO的搜索的呢？因为现在一些SEO与浏览器或是屏幕阅读器（一个给残障人士用的文章阅读器）都在根据HTML5的新标准做一些新的功能，他们会跟具新的语义直接与自身的功能相对应。如果网页的开发者也是这么做的，那么你的网站的应用性会大大的增加。<br>
上面又强调了一下语义的重要性，下面告诉大家一个更好的增强语义的小窍门，一定要好好看哦，因为这个小窍门朋友们不一定知道的：</p>
<p>概念介绍：<em>WAI-ARIA(Web Accessibility Initiative"s Accessible Rich Internet Applications)</em>无障碍网页倡议之可访问的富互联网应用，简称ARIA，他就是一种技术规范。他在HTML提供的语义的基础之上，他会使用属性来填补一些语义上的空白。</p>
<p>ARIA的用法：</p>
<p>正确运用ARIA中的地标角色：<br><br>
<p>role ="banner"(横幅)</p>
<p>role="navigation"(导航)</p>
<p>role="main"(主体)</p>
<p>role="complementary"(补充性内容)</p>
<p>role="contentinfo"(内容信息)<br>
> 小提示：地标角色只是ARIA规范中的一种，如果你感兴趣可以去官网阅读一下（地址：http://www.w3.org/TR/wai-aria/ ）</p>
</p>
<p>将屏幕阅读器测试列入你的日常开发中；（因为他是最能直接反映出你的网站语义写的好不好的东西）；</p>
<p>正确的为标签制定<b>id</b>与类（语义性一定要明显）；</p>
<p>正确使用<b>class</b>类以及他提供的微格式；</p>
<p>关于<b>class</b>的微格式，因为有很多人都知道或是认为<b>class</b>的属性是只能为一组元素应用CSS样式，其实并不是这样的，其实他还可以在不引用额外的标签下来增强语义，这就是微格式，微格式是使用约定的<b>class</b>名称来标示一块HTML从而来增强与应用程序、智能搜索与搜索机器人的交互。关于微格式的使用可以看看这个网址：http://microformats.org</p>
<b>7. 你想到过网页文件的命名会影响你网站的体验么？</b>
<p>这个一听第一感觉就是不靠谱，一个文件的名字还会影响到网站的体验？<br>
正确的答案确实是：<strong><em>是的！</em></strong><br>
如：文件名： <em>Html_First_Blog.htm</em> 与 <em>html-first-blog.html</em><br>
这个两个文件名不管是在用户的体验上与搜索引擎上都第二个完胜第一个。是不是有人会问为什么 ？？<br>
下面我就说一下有如下几点是需要我们注意的：</p>
<p>文件名需要用小写字母：<br>
应用场景就是最简单的输入地址吧，你认为下面哪种写起来更方便，这个请自己体会吧：<br><br>
<p>http://192.168.0.1/TestHtml/The_First/Html5.html</p>
<p>http://192.168.0.1/testhtml/the-first/html5.html</p>
</p>
<p>用短横线分隔单词：<br>
大家一定会认为，用"_"挺好，其实这是做C开发时候的写法，也可以说是习惯，但是在网站中“-”是搜索引擎更喜欢的style；</p>
<p>使用标准的扩展名：<br>
现在用好多的网站都是用.htm的扩展名，这个浏览器也不会报错，但是标准的扩展名就是.html的所以大家以后写的时候就不要省时间少写一个字母“l”了。</p>
<p>记住以上几点才是正确的写网页文件的命名方法哦，不要把写其它语言的方法放进来。</p>
<b>参考文章：</b>
<pre>
<p>http://blog.csdn.net/lihui130135/article/details/45033967<br>http://blog.csdn.net/lihui130135/article/details/45150501<br>http://blog.csdn.net/lihui130135/article/details/44748415</p>
</pre>
</div>
<div class="mt-64 tags-seach" >
<div class="tags-info">
<a style="width:120px;" title="服务器托管" href="https://www.ucloud.cn/site/product/uhybrid.html">服务器托管</a>
<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/yun/tag/shenrulijiexilie/">深入理解系列</a>
<a style="width:120px;" title="深入理解linux" href="https://www.ucloud.cn/yun/tag/shenrulijielinux/">深入理解linux</a>
<a style="width:120px;" title="深入理解webrtc" href="https://www.ucloud.cn/yun/tag/shenrulijiewebrtc/">深入理解webrtc</a>
<a style="width:120px;" title="深入理解python" href="https://www.ucloud.cn/yun/tag/shenrulijiepython/">深入理解python</a>
</div>
</div>
<div class="entry-copyright mb-30">
<p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p>
<p>转载请注明本文地址：https://www.ucloud.cn/yun/60861.html</p>
</div>
<ul class="pre-next-page">
<li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/60860.html">上一篇：HTML项目代码编写规范</a></li>
<li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/60862.html">下一篇：如何做好移动端的响应式设计：Viewport控制</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/49586.html"><b><em>深入</em><em>理解</em><em>HTML5</em><em>标签</em></b></a></h2>
<p class="ellipsis2 good">摘要：可能一些有心的开发者会把的写的语义明白些，比如导航栏的用，边栏的用。
0. HTML5中最看重的理念语义化相比HTML有什么区别？
在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容，这里搜集整理了一些语义化标签方面的问题和解答，以供大家参考。
语义化这个概念应该说是伴着HTML5应运而生，那么什么是HTML5中所谓的语义化？
简单来说就是：描述...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-95.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/00/small_000000095.jpg" alt=""><span class="layui-hide64">scq000</span></a>
<time datetime="">2019-08-01 14:47</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/111019.html"><b>[ 学习路线 ] 学完这些去阿里！GOGOGO</b></a></h2>
<p class="ellipsis2 good">摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐
以下知识点是前辈师兄总结
1、HTML/HTML5基础：
1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-1272.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/12/small_000001272.jpg" alt=""><span class="layui-hide64">zhaochunqi</span></a>
<time datetime="">2019-08-28 18:06</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/85548.html"><b>[ 学习路线 ] 学完这些去阿里！GOGOGO</b></a></h2>
<p class="ellipsis2 good">摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐
以下知识点是前辈师兄总结
1、HTML/HTML5基础：
1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-1407.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/14/small_000001407.jpg" alt=""><span class="layui-hide64">learn_shifeng</span></a>
<time datetime="">2019-08-21 10:27</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/115207.html"><b>前端技术 博客文章、书籍 积累</b></a></h2>
<p class="ellipsis2 good">摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行
书籍
《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-356.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000356.jpg" alt=""><span class="layui-hide64">LiangJ</span></a>
<time datetime="">2019-08-30 12:58</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/79267.html"><b>前端技术 博客文章、书籍 积累</b></a></h2>
<p class="ellipsis2 good">摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行
书籍
《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-269.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/02/small_000000269.jpg" alt=""><span class="layui-hide64">codercao</span></a>
<time datetime="">2019-08-19 18: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-347.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000347.jpg" alt=""></a>
<h3><a href="https://www.ucloud.cn/yun/u-347.html" rel="nofollow">jifei</a></h3>
<h6>男<span>|</span>高级讲师</h6>
<div class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(347)" id="attenttouser_347" 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-347.html" class="box_hxjz">阅读更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/124937.html">SSL加密为什么能保证安全</a></h3>
<p>阅读 3001<span>·</span>2021-11-25 09:43</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123015.html">ASEMI肖特基二极管SBT40100VDC正向压降温度系数</a></h3>
<p>阅读 3208<span>·</span>2021-11-11 16:54</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122823.html">#11.11#RackNerd：美国VPS年付$12起，洛杉矶/纽约等6机房可选</a></h3>
<p>阅读 581<span>·</span>2021-11-02 14:42</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121709.html">半月湾vps：美国CN2 GIA方案(DC5)机房,1Gbps带宽,三网CN2 GIA线路,$109</a></h3>
<p>阅读 3522<span>·</span>2021-09-30 09:58</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121574.html">PuTTY – 老牌免费开源Windows SSH远程客户端软件</a></h3>
<p>阅读 3491<span>·</span>2021-09-29 09:44</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117518.html">那些很熟却又不是很熟的知识</a></h3>
<p>阅读 1068<span>·</span>2019-08-30 15:56</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117105.html">初级前端开发面试总结</a></h3>
<p>阅读 1902<span>·</span>2019-08-30 15:54</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116010.html">Vue源码之目录结构</a></h3>
<p>阅读 2813<span>·</span>2019-08-30 15:43</p></li>
</ul>
</div>
<!-- 云社区相关服务 -->
<div class="com_layuiright-box">
<h3 class="top-com-title"><span>云社区相关服务</span></h3>
<div class="community-box flex_box flex_wrap community-box1">
<a href="https://www.ucloud.cn/yun/question/add.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon1.png" alt="提问">
<span>提问</span>
</a>
<a href="https://www.ucloud.cn/yun/article" rel="nofollow">
<img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon2.png" alt="学习">
<span>学习</span>
</a>
<a href="https://www.ucloud.cn/yun/user/vertify.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon4.png" alt="认证">
<span>认证</span>
</a>
<a href="https://www.ucloud.cn/site/product/uhost.html?ytag=seo" rel="nofollow">
<img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon5.png" alt="产品">
<span>产品</span>
</a>
<a href="https://spt.ucloud.cn/30001?ytag=seo" rel="nofollow">
<img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon6.png" alt="技术服务">
<span>技术服务</span>
</a>
<a href="https://spt.ucloud.cn/30001?ytag=seo" rel="nofollow">
<img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon3.png" alt="售前咨询">
<span>售前咨询</span>
</a>
</div>
</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.surfercloud.com/">SurferCloud</a></p>
<p><a href="https://ucloudstack.com/" >私有云</a></p><p><a href="https://pinex.it" >pinex</a></p> <p><a href="https://www.renyucloud.com/" ></a></p> <p><a href="https://www.picpik.ai" >AI Art Generator</a></p> <p><a href="https://www.uwin-link.com" >工厂仿真软件</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/ask/">专业问答</a></p>
<p><a href="https://www.ucloud.cn/yun/kc.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>
