HTML常用标签的使用

nevermind 发布于2019-08-02 10:38 / 3203人阅读

摘要：但是，可以在正常的文档主体中使用。该名称可以用作标签，标签的属性值，或标签和标签的属性值。标签元素用于为基于的表单创建交互式控件，以便接受来自用户的数据。标签的元素表示表格数据即通过二维数据表表示的信息。

一、常见标签详解 1、标签</b> <p>HTML内联框架元素 <iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，但不能包含正文和框架集。但是，<iframe>可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。</p> <b>属性</b> <p>只详细说明几个重要的属性</p> <p> <strong>frameborder</strong> 取值为1时（默认值），告诉浏览器在当前iframe与其他iframe之间绘制边框，取0时则无需绘制此边框。</p> <p> <strong>name</strong> 嵌入的浏览上下文（框架）的名称。该名称可以用作<a>标签，<form>标签的target属性值，或<input> 标签和 <button>标签的formtaget属性值。</p> <p> <strong>height</strong> 以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的高度。</p> <p> <strong>width</strong> 以CSS像素格式HTML5，或以像素格式HTML 4.01，或以百分比格式指定frame的宽度。</p> <p> <strong>src</strong> 嵌套页面的URL地址。使用遵守同源策略的 "about:blank" 来嵌套空白页。</p> <b>2、<a>标签</b> <p>HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。</p> <b>属性</b> <p> <strong>download</strong> 此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。</p> <p> <strong>href</strong> 这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（＃），它指定一个内部目标在当前文档中的位置（ID）开头的名字。URL不限于网页（HTTP）的文件。URL可能使用浏览器所支持的任何协议。例如，文件，FTP，大多数用户代理mailto工作。PS:<em>可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。</em>除此之外href可以接：<br> 1、无协议的写法，如：//qq.com<br> 2、链接到本页某个部分#xxx 也可以是查询语句?name=xxx 或者相对路径./xxx.html<br> 3、伪协议javascript:alert(1); 点击不跳转不刷新javascript:;</p> <p> <strong>target</strong> 该属性指定在何处显示链接的资源。取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:<br> _self: 当前页面加载。此值是默认的，如果没有指定属性的话。<br> _blank: 新窗口打开。<br> _parent: 加载响应到当前框架的父框架。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。（嵌套一层iframe标签，在上层打开）<br> _top: 加载响应进入顶层浏览（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。（嵌套多层iframe标签，最顶层打开）</p> <b>3、<form>标签</b> <p>HTML <form> 元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。</p> <b>属性</b> <p> <strong>action</strong> 一个处理这个form信息的程序所在的URL。这个值可以被 <button> 或者 <input> 元素中的 formaction 属性重载（覆盖）。</p> <p> <strong>method</strong> 浏览器使用这种 HTTP 方式来提交 form. 可能的值有:<br> 1、post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.<br> 2、get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 "?" 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。（如果是GET的话和a标签功能一样）<br> 这个值可以被 <button> 或者 <input> 元素中的 formmethod 属性重载（覆盖）。</p> <p> <strong>name</strong> 这个form的名字。在HTML4中，这个用法不被推荐(作为替代，应该使用id). HTML5中，一个文档中的多个form当中，name必须唯一而不仅仅是一个空字符串。</p> <p> <strong>target</strong> 一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里, 这是一个用于 browsing context 浏览器上下文的名字/关键字 (举例来说, 标签页tab, 窗口window, or 或者行内 frame). 如下的关键字含有特别的含义:<br> 1、_self: 在当前HTML4或HTML5文档页面重新加载返回值。这个是默认值。译注：也就是说如果这个文档在一个frame中的话，self是在当前frame（document）中重新加载的，而不是整个页面（window）。<br> 2、_blank: 以新的HTML4或HTML5文档窗口加载返回值。<br> 3、_parent: 在父级的frame中以HTML4或HTML5文档形式加载返回值，如果没有父级的frame，行为和_self一致。<br> 4、_top: 如果是HTML 4文档: 清空当前文档，加载返回内容；HTML5: 在当前文档的最高级内加载返回值，如果没有父级，和_self的行为一致。<br> 5、iframename: 返回值在指定frame中加载。</p> <b>4、<input>标签</b> <p>HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。</p> <b>属性</b> <p><input>标签的属性非常多，这里我只写几种常用的属性，更多可在MDN上查找</p> <p> <strong>name</strong> 控件的名称，与表单数据一起提交。</p> <p> <strong>value</strong> 控件的初始值. 此属性是可选的，除非type 属性是radio或checkbox。注意，当重新加载页面时，如果在重新加载之前更改了值，Gecko和IE将忽略HTML源代码中指定的值。</p> <p> <strong>checked</strong> 如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.</p> <p> <strong>disabled</strong> 这个布尔属性表示此表单控件不可用。特别是在禁用的控件中， click 事件将不会被分发。并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。</p> <p> <strong>type</strong> 控件类型的显示。如果这个属性没有指定，默认的类型是 text。可用的值包括：<br> 这里只写出几个常用的类型，详细可以查看MDN<br> 1、button：无缺省行为按钮。<br> 2、checkbox：复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。<br> 3、password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度。<br> 4、radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。<br> 5、submit：用于提交表单的按钮。<br> 6、text：单行字段；换行会将自动从输入的值中移除。</p> <b>5、<button>标签</b> <p>HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。</p> <b>属性</b> <p> <strong>name</strong> button的名称，与表单数据一起提交。</p> <p> <strong>value</strong> button的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。</p> <p> <strong>type</strong> button的类型。可选值：<br> 1、submit: 此按钮提交表单数据给服务器。未指定时，此值为默认值，或者如果此属性动态变为空值或无效值。<br> 2、reset: 此按钮重置所有组件为初始值。<br> 3、button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。<br> 4、menu: 此按钮打开一个由指定<menu>元素进行定义的弹出菜单。</p> <b>6、<table>标签</b> <p>HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。</p> <b>属性</b> <p>表格标签支持全局属性。所有属性现在已经弃用（请使用CSS代替）。</p> <b>相关</b> <p>其它表格相关的HTML元素: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;</p> <p>可能特别有用的关于设定表格元素样式的 CSS 属性：<br> width 控制表格的宽度；<br> border, border-style, border-color, border-width, border-collapse, border-spacing 控制单元格边框，规则和框架方面；<br> margin 和padding 设定特定的单元格内容样式；<br> text-align 和vertical-align 定义文本和单元格内容的对齐方式。</p> <b>二、HTML标签注意事项</b> <b>HTML标签是什么</b> <p>通过HTMl标签是可以清晰的看出网页的内部结构，简单的来说就是通过标签，我们可以来声明这是个什么东西，而不是用来决定这个东西是什么样子，例如：<strong><strong></strong>和<strong><b></strong>的默认CSS样式是一样的，为什么还要有两个标签,这是因为strong是一个逻辑状态，而bold是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用strong呈现出的表现形式不同于单纯的加粗。因为bold是一个物理状态，他没有区分表现形式和内容。如果让bold做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。<br>很多人喜欢用<div>和<span>这样的无含义标签从头用到尾，这样是不对的，因为看起来会很费劲，都会要加上class，这样就会降低代码可读性，</p> <b>关于块级元素和内联元素的区别</b> <p>HTML标签是没有块级元素和内联元素的区别，什么时候才有？只有在CSS里面才有，例如，我们都以为<div>是块级元素，但如果是下面这样，还能说<div>是块级元素吗？</p> <pre><style> div{ display: inline; } </style></pre> <p>现在<div>就是内联元素了，也就是说HTML无法控制一个元素是块级元素还是内联元素，也就是说HTML只是定义这是一个什么东西，而不是去管它是什么样子。</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/product/uhost.html">云服务器</a> <a style="width:120px;" title="服务器托管" href="https://www.ucloud.cn/site/product/uhybrid.html">服务器托管</a> <a style="width:120px;" title="html常用的空标签" href="https://www.ucloud.cn/yun/tag/htmlchangyongdekongbiaoqian/">html常用的空标签</a> <a style="width:120px;" title="html常用标签" href="https://www.ucloud.cn/yun/tag/htmlchangyongbiaoqian/">html常用标签</a> <a style="width:120px;" title="html常用单标签" href="https://www.ucloud.cn/yun/tag/htmlchangyongdanbiaoqian/">html常用单标签</a> <a style="width:120px;" title="html基本常用标签" href="https://www.ucloud.cn/yun/tag/htmljibenchangyongbiaoqian/">html基本常用标签</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p> <p>转载请注明本文地址：https://www.ucloud.cn/yun/52489.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/52488.html">上一篇：变量和函数提升</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/52490.html">下一篇：三栏布局只知道圣杯、双飞翼，最终评级是……F</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/52437.html"><b>沃土前端系列 - <em>HTML</em><em>常用</em><em>标签</em></b></a></h2> <p class="ellipsis2 good">摘要：由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。是的缩写，中文的意思是超文本标记语言，它是制作网页的标准语言。 html是什么 HTML是Hyper Text Markup Language的缩写，中文的意思是超文本标记语言，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。那什么是超文本呢？所谓超文本，就是指图像、视频、动画、...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-756.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/07/small_000000756.jpg" alt=""><span class="layui-hide64">lbool</span></a> <time datetime="">2019-08-02 10:34</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/108416.html"><b><em>HTML</em>之<em>常用</em><em>标签</em></b></a></h2> <p class="ellipsis2 good">摘要：提示判断版本决定是否显示，使用如下请升级浏览器参考链接标签代码参考自绿叶学习网，网址部分代码参考自菜鸟教程，网址如有侵权，请联系删除 HTML之常用标签介绍了前端中常用的标签，讲解了行内元素和块元素的区别，同时重点解释了语义化的意义！ html标签 html控制页面结构，良好的页面结构有利于seo优化 html常用标签 ...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-48.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/00/small_000000048.jpg" alt=""><span class="layui-hide64">余学文</span></a> <time datetime="">2019-08-26 12:17</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/53365.html"><b>第三天·<em>HTML</em><em>常用</em><em>标签</em></b></a></h2> <p class="ellipsis2 good">摘要：如果希望某段文本强制换行显示，就需要使用换行标签在中直接敲回车来换行是不起作用的。标签的属性用于指定超链接目标的。这是因为标识符几乎可以用在所有的标签中。一·- 单词缩写：headHTML的-代表了六个等级的标题，其中标签比较重要，因此要尽量少用。一般是给logo使用，或者是页面中最重要的标题。 Heading level 1 Heading level 2 Heading leve...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-387.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000387.jpg" alt=""><span class="layui-hide64">guqiu</span></a> <time datetime="">2019-08-02 12:08</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/1224.html"><b>第六课 <em>Html</em>5<em>常用</em><em>标签</em> <em>html</em>5学习1</b></a></h2> <p class="ellipsis2 good">摘要：标签的认识一标签的分类双标签如单标签如换行标签二标签的关系嵌套关系如与父子关系并列关系如与兄弟关系三排版标签标题标签比较重要，一般用作网站的段落标签水平线标签单标签换行标签标签网页布局标亲盒子四文本格式化标签文本加粗标签不推荐使用的加粗标HTML标签的认识一、标签的分类1、双标签如 2、单标签如换行标签二、标签的关系1、嵌套关系如与title 父子关系2、并列关系如与兄弟关系...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1590.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/15/small_000001590.jpg" alt=""><span class="layui-hide64">siberiawolf</span></a> <time datetime="">2019-04-23 11:50</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/54680.html"><b><em>常用</em><em>的</em><em>HTML</em><em>标签</em>详解与总结</b></a></h2> <p class="ellipsis2 good">摘要：今天，我们就来详细介绍常用的标签。标签对文字字符进行换行处理。标签加入水平分割线。标签语义强调，表示重视。标签有序列表标签。即定义描述，用于添加该名词的具体解释。标签用来显示图片。默认内容标签下拉列表，以和两个标签配合完成。对于很多HTML初学者来说，记忆和掌握标签是一门很难搞的功课。今天，我们就来详细介绍常用的HTML标签。对于标签的掌握，更多的是要通过练习，熟能生巧。 stlye...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-181.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/01/small_000000181.jpg" alt=""><span class="layui-hide64">DobbyKim</span></a> <time datetime="">2019-08-02 16: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/49646.html"><b><em>HTML</em>5<em>常用</em><em>标签</em>分类</b></a></h2> <p class="ellipsis2 good">HTML5常用标签分类标签（空格分隔）： HTML 前端开发 [TOC] 一.HTML文档标签 : 定义文档类型. : 定义HTML文档. : 定义文档的头部.(头部内包含) (1). ``: 定义元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词. (2). ``:定义页面上的所有链接规定默认地址或默认目标. (3). ``: 定义文档的标题. (4). ``: 定...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1704.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/17/small_000001704.jpg" alt=""><span class="layui-hide64">canopus4u</span></a> <time datetime="">2019-08-01 14:54</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-645.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/06/small_000000645.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-645.html" rel="nofollow">nevermind</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(645)" id="attenttouser_645" 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-645.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/130831.html">tensorflow1.8</a></h3> <p>阅读 3361<span>·</span>2023-04-26 00:05</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123065.html">C语言实现入门级小游戏——扫雷</a></h3> <p>阅读 801<span>·</span>2021-11-11 16:55</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121082.html">单片机入门指南</a></h3> <p>阅读 3286<span>·</span>2021-09-26 09:46</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117536.html">TP5实现表格拖动排序并保存到数据库功能</a></h3> <p>阅读 3308<span>·</span>2019-08-30 15:56</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117275.html">前端基础入门五（掌握jQuery的常用api，实现动态效果）</a></h3> <p>阅读 708<span>·</span>2019-08-30 15:55</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116755.html">【零基础入门】 css学习笔记（4）布局与定位介绍</a></h3> <p>阅读 2799<span>·</span>2019-08-30 15:53</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/114152.html">关于响应式布局，你必须要知道的</a></h3> <p>阅读 1830<span>·</span>2019-08-29 17:11</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113957.html">python大佬养成计划----HTML网页设计（表单）</a></h3> <p>阅读 693<span>·</span>2019-08-29 16:52</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>  <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>  <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div>  <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>  <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>

资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

HTML常用标签的使用