摘要：向服务器提交表单的通常做法是使用提交按钮。规定浏览器应该自动完成表单默认开启。规定在提交表单时所用的方法默认。规定识别表单的名称对于使用。表单元素表单元素是允许用户在表单中输入内容比如文本域下拉列表单选框复选框等等。
网页的组成
结构（HTML）：超文本标记语言
表现(CSS):层叠样式表
行为(JavaScript):脚本语言
一个良好的网页要结构、表现、行为三者分离
HTML简介是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
title 我的第一个标题
我的第一个段落。
声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落</pre> </p> <b>HTML基本语法</b> <p>HTML中的标签分为成对出现的标签和自结束标签</p> <p>HTML中的标签不区分大小写，但是建议小写</p> <p>标签可以嵌套但不能交叉嵌套</p> <p>成对出现的标签必须正确关闭</p> <p>属性必须有值且值必须加引号</p> <p>注释不能嵌套</p> <pre><!-- 1.标签的分类 --> <!-- 标签分为成对出现的标签和自结束标签两种 -成对出现的标签：如：<html></html> 、<head></head> 、 <p></p> -自结束标签：如：、<input /> 、<br/> --> <!-- 2.标签不区分大小写 --> <P>标签不区分大小写，但建议小写</p> <!-- 3.标签可以嵌套但不能交叉嵌套 --> <div><p>标签可以嵌套，但不能交叉嵌套</div></p> <!-- 4.标签必须正确关闭 --> <p>成对出现的标签必须正确关闭</p> <!-- 5.属性必须有值，且属性值必须加引号 --> <font color="red">我要红</font> <!-- 属性值没有加引号 --> <font color=red>我要红2</font> <!-- 属性没有值 --> <font color="">我要红3</font> <!-- 6.注释不能嵌套 --> <!-- 注释的快捷键是：Ctrl+shift+/ --> <!-- <!-- 我是嵌套的注释 --> --></pre> <b>HTML属性</b> <p>HTML 元素可以设置属性</p> <p>属性可以在元素中添加附加信息</p> <p>属性一般描述于开始标签</p> <p>属性总是以名称/值对的形式出现，比如：name="value"。</p> <table> <thead><tr> <th>属性</th> <th>描述</th> </tr></thead> <tbody> <tr> <td>class</td> <td>为html元素定义一个或多个类名（classname）(类名从样式文件引入)</td> </tr> <tr> <td>id</td> <td>定义元素的唯一id</td> </tr> <tr> <td>style</td> <td>规定元素的行内样式（inline style）</td> </tr> <tr> <td>title</td> <td>描述了元素的额外信息 (作为工具条使用)</td> </tr> </tbody> </table> <b>HTML常用标签</b> <b>标题标签</b> <pre><h1></h1> ~ <h6></h6></pre> <b>div标签</b> <pre><div>我是div标签，我主要用来布局，我默认占用浏览器的一整行</div></pre> <b>p标签</b> <pre><p>我是一个段落，我默认也是占用浏览器的一整行，而且前后要空一行</p> <br> 标签换行（新行)： <p>这个<br>段落<br>分行</p></pre> <b>转义字符</b> <pre>小于号：< 大于号：> 空格： 版权符：©</pre> <b>列表</b> <pre>无序列表 <ul> <li>网页</li> <li>新闻</li> <li>贴吧</li> </ul> 有序列表 <ol> <li>网页</li> <li>新闻</li> <li>贴吧</li> </ol></pre> <b>图片</b> <pre> • 通过img标签向网页中插入一张图片 • alt属性：用来设置当图片无法显示时的描述性信息 • src属性：用来设置图片的路径 • 在相对路径中，通过../来返回上一级目录，返回多级目录使用多个../ </pre> <b>超链接</b> <pre><a href="http://..." target="_blank">这是一个链接</a> • 使用a标签来创建一个超链接 • href属性：用来设置要跳转的页面的地址 • targe属性：用来设置要跳转的页面在何处打开 • _self：在当前窗口打开，默认值 • _blank：在新的窗口打开</pre> <b>表格</b> <table> <thead><tr> <th>标签</th> <th>描述</th> </tr></thead> <tbody> <tr> <td>table</td> <td>定义表格</td> </tr> <tr> <td>th</td> <td>定义表格的表头</td> </tr> <tr> <td>tr</td> <td>定义表格的行</td> </tr> <tr> <td>td</td> <td>定义表格单元</td> </tr> <tr> <td>caption</td> <td>定义表格标题</td> </tr> <tr> <td>colgroup</td> <td>定义表格列的组</td> </tr> <tr> <td>col</td> <td>定义用于表格列的属性</td> </tr> </tbody> </table> <pre><!-- 使用table标签来创建一个表格 --> <table border="1"> <!-- 通过tr标签来表示表格中的行 --> <tr> <!-- 通过th标签来表示表格中的表头 --> <th>姓名</th> <th>阵营</th> <th>职业</th> <th>武器</th> </tr> <tr> <!-- 通过td标签来表示表格中的列（单元格） --> <td>刘备</td> <!-- 跨行合并单元格使用rowspan属性来设置 --> <td rowspan="4" align="center">蜀</td> <td>蜀汉集团董事长</td> <td>双股剑</td> </tr> <tr> <!-- 通过td标签来表示表格中的列（单元格） --> <td>诸葛亮</td> <!-- <td>蜀</td> --> <!-- 跨列合并单元格使用colspan属性来设置 --> <td colspan="2" align="center">蜀汉集团CEO</td> <!-- <td>破扇子</td> --> </tr> <tr> <!-- 通过td标签来表示表格中的列（单元格） --> <td>关羽</td> <!-- <td>蜀</td> --> <td>荆襄总裁</td> <td>青龙偃月刀</td> </tr> <tr> <!-- 通过td标签来表示表格中的列（单元格） --> <td>张飞</td> <!--<td>蜀</td> --> <td>阆中销售经理</td> <td>丈八蛇矛</td> </tr> </table> </pre> <b>表单</b> <p>表单是一个包含表单元素的区域。表单本身并不可见。</p> <b>from</b> <table> <thead><tr> <th align="left">标签</th> <th align="left">描述</th> </tr></thead> <tbody><tr> <td align="left">form</td> <td align="left">定义供用户输入的表单</td> </tr></tbody> </table> <p>属性：</p> <p>Action 属性<p>action 属性*定义在提交表单时执行的动作。</p> <p>向服务器提交表单的通常做法是使用提交按钮。</p> <p>通常，表单会被提交到 web 服务器上的网页。</p> <p>在上面的例子中，指定了某个服务器脚本来处理被提交表单：</p> <p><b><form action="action_page.java"></b></p> <p>如果省略 action 属性，则 action 会被设置为要跳转的页面。</p> </p> <p> <p>Method 属性</p> <p><em>method 属性</em>规定在提交表单时所用的 HTTP 方法（<em>GET</em> 或 <em>POST</em>）：</p> <p><b><form action="action_page.java" method="GET"></b></p> <p><b><form action="action_page.java" method="POST"></b></p> <p>GET（默认方法）：</p> <p> 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。</p> <p> 当您使用 GET 时，表单数据在页面地址栏中是可见的：</p> <pre> `action_page.php?firstname=Mickey&lastname=Mouse` </pre> <p> 注释：GET 最适合少量数据的提交。浏览器会设定容量限制。</p> <p>POST：</p> <p> 如果表单正在更新数据，或者包含敏感信息（例如密码）。</p> <p> POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。</p> </p> <table> <thead><tr> <th align="left">属性</th> <th align="left">描述</th> </tr></thead> <tbody> <tr> <td align="left">accept-charset</td> <td align="left">规定在被提交表单中使用的字符集（默认：页面字符集）。</td> </tr> <tr> <td align="left">action</td> <td align="left">规定向何处提交表单的地址（URL）（提交页面）。</td> </tr> <tr> <td align="left">autocomplete</td> <td align="left">规定浏览器应该自动完成表单（默认：开启）。</td> </tr> <tr> <td align="left">enctype</td> <td align="left">规定被提交数据的编码（默认：url-encoded）。</td> </tr> <tr> <td align="left">method</td> <td align="left">规定在提交表单时所用的 HTTP 方法（默认：GET）。</td> </tr> <tr> <td align="left">name</td> <td align="left">规定识别表单的名称（对于 DOM 使用：document.forms.name）。</td> </tr> <tr> <td align="left">novalidate</td> <td align="left">规定浏览器不验证表单。</td> </tr> <tr> <td align="left">target</td> <td align="left">规定 action 属性中地址的目标（默认：_self）。</td> </tr> </tbody> </table> <pre><form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . </form> </pre> <b>表单元素</b> <p>表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。</p> <b>input</b> <p>类型：</p> <table> <thead><tr> <th align="left">标签</th> <th align="left">描述</th> </tr></thead> <tbody> <tr> <td align="left">input</td> <td align="left">定义输入域</td> </tr> <tr> <td align="left">text</td> <td align="left">文本输入的单行输入字段</td> </tr> <tr> <td align="left">password</td> <td align="left">定义密码字段</td> </tr> <tr> <td align="left">chekbox</td> <td align="left">定义复选框</td> </tr> <tr> <td align="left">radio</td> <td align="left">定义单选按钮输入（选择多个选择之一）</td> </tr> <tr> <td align="left">submit</td> <td align="left">定义提交按钮（提交表单）</td> </tr> <tr> <td align="left">reset</td> <td align="left">定义重置按钮</td> </tr> </tbody> </table> <p>属性：</p> <table> <thead><tr> <th>属性</th> <th>描述</th> </tr></thead> <tbody> <tr> <td>type</td> <td>表单项的类型</td> </tr> <tr> <td>name</td> <td>为控件命名，以备后台程序用</td> </tr> <tr> <td>value</td> <td>提交数据到服务器的值（后台程序使用）</td> </tr> <tr> <td>selected</td> <td>设置默认被选中</td> </tr> </tbody> </table> <b>select</b> <p>定义下拉列表：</p> <pre><select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi" selected="selected">Audi</option> </select></pre> <p><em><option></em> 元素定义待选择的选项.</p> <p>列表通常会把首个选项显示为被选选项.</p> <p>selected 属性来定义预定义选项。</p> <b>textarea</b> <p>定义多行输入字段（<em>文本域</em>）：</p> <p><b><textarea name="message" rows="10" cols="30"> textarea </textarea></b></p> <b>button</b> <p>定义可点击的按钮:</p> <p><b><button type="button" onclick="alert("Hello World!")">Click Me!</button></b></p> <pre><body> <!-- 通过form标签创建一个表单 --> <!-- action属性：用来设置服务器的地址 --> <!-- 通过method属性可以设置表单提交的请求的方式，可选值有GET和POST --> <form action="success.html" method="post"> <!-- 1.表单中的表单项通过input标签表示，表单项的类型通过input标签中的type属性来指定 --> <!-- 2.表单项必须设置name属性值，用户输入的数据通过name属性值进行携带，以键值对的形式发送到服务器， 如：username=admin89&password=999999 --> 用户名：<input type="text" name="username"><br/><br> 密码：<input type="password" name="password"><br><br> <!-- 1.要保证单选按钮单选，必须将它们设置为一组，即将它们的name属性值设置为同一个 2.单选按钮提交的是value属性值，所以必须设置value属性值 3.通过checked="checked"设置默认被选中 --> 性别：<input type="radio" name="gender" value="man" checked="checked">男 <input type="radio" name="gender" value="woman">女<br><br> <!-- 1.必须将复选框它们设置为一组，即将它们的name属性值设置为同一个 2.复选框提交的是value属性值，所以必须设置value属性值 3.通过checked="checked"设置默认被选中 --> 你的爱好： <input type="checkbox" name="hobby" value="money">钱 <input type="checkbox" name="hobby" value="beauty" checked="checked">美女 <input type="checkbox" name="hobby" value="sleeping">睡觉 <br><br> 选择列表： <select name="star"> <!-- 如果没有指定value属性值，提交的是option中的文本值，如果设置了value属性值，提交的就是value属性值 --> <option value="bdyjy">one</option> <option>two</option> <!-- 通过selected="selected"设置默认被选中 --> <option selected="selected">three</option> <option>four</option> <option>five</option> <option value="fbb">six</option> </select> <br><br> <input type="reset"> <!-- 通过value属性值设置按钮中显示的文本 --> <input type="submit" value="登录"> </form> </body></pre> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a> <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p> <p>转载请注明本文地址：https://www.ucloud.cn/yun/54083.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/54082.html">上一篇：如何从零开始定义一个类似websocket的即时通讯协议</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/54084.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-left"> <a href="https://www.ucloud.cn/yun/1244.html"><img src="https://img2018.cnblogs.com/blog/1364810/201812/1364810-20181220002247512-934359161.jpg" alt=""></a> </div> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/1244.html"><b><em>01</em>-<em>html</em>介绍和head标签</b></a></h2> <p class="ellipsis2 good">摘要：三开发工具的使用使用技巧编辑器四介绍的概述全称，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。【转】01-html介绍和head标签主要内容web标准浏览器介绍开发工具介绍HTML介绍HTML颜色介绍HTML规范HTML结构详解一、web标准web准备介绍：w3c：万维网联盟组织，用来制定web标准的机构（组织）web标准：制作网页遵循的规范...</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:51</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/77901.html"><b><em>01</em>.<em>HTML</em></b></a></h2> <p class="ellipsis2 good">摘要：向服务器提交表单的通常做法是使用提交按钮。规定浏览器应该自动完成表单默认开启。规定在提交表单时所用的方法默认。规定识别表单的名称对于使用。表单元素表单元素是允许用户在表单中输入内容比如文本域下拉列表单选框复选框等等。 网页的组成 结构（HTML）：超文本标记语言 表现(CSS):层叠样式表 行为(JavaScript):脚本语言 一个良好的网页要结构、表现、行为三者分离 HTML简...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-939.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000939.jpg" alt=""><span class="layui-hide64">Soarkey</span></a> <time datetime="">2019-08-19 11:48</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/2013.html"><b><em>01</em>-<em>HTML</em>深入</b></a></h2> <p class="ellipsis2 good">摘要：是由行构成行是由单元格构成。单元格跨行单元格可以向下跨越多个行，被占的单元格向右挤。国际贸易是世界经济增长的重要一环，美国公开违反世贸规则，大范围挑起贸易争端，势必破坏全球贸易秩序，危害世界经济增长。1.1 浏览器的工作原理 把一些标签解析成用户可视化的页面 1.2 HTML中的标签与元素 在HTML中以开始，以结束，比如等。 ...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-292.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/02/small_000000292.jpg" alt=""><span class="layui-hide64">LoftySoul</span></a> <time datetime="">2019-04-23 13:32</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/53104.html"><b>JavaWEB开发<em>01</em>——<em>HTML</em></b></a></h2> <p class="ellipsis2 good">摘要：网站信息页面需求分析我们公司的需要一个对外宣传的网站介绍介绍公司的主要业务公司的发展历史公司的口号等等信息技术分析概述超文本标记语言超文本比普通文本功能更加强大可以添加各种样式标记语言通过一组标签来对内容进行描述关键字是由浏览器来解释执行静 1.网站信息页面 1.1需求分析: 我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息 1.2技术分析:...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1313.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/13/small_000001313.jpg" alt=""><span class="layui-hide64">IntMain</span></a> <time datetime="">2019-08-02 11:46</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/87939.html"><b>rem 单位实现页面自适应布局</b></a></h2> <p class="ellipsis2 good">摘要：单位介绍既然扯到了这个单位，那就有必要先解释下这个单位具体含义，上的解释注意图中的画线部分，这个单位需要高版本的浏览器支持，不过，一般用于移动端布局，所以，基本上无需考虑浏览器版本问题，放心用吧。相对于根元素的大小，自动计算出其具体值。 A. 先看一个函数： /* * 设置根元素字体大小 * @param Number minSW 最小缩放的设备屏幕宽度 * @param Nu...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-360.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000360.jpg" alt=""><span class="layui-hide64">xavier</span></a> <time datetime="">2019-08-21 14:31</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-1507.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/15/small_000001507.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1507.html" rel="nofollow">aboutU</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1507)" id="attenttouser_1507" 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-1507.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/118879.html">【如何构建商业级别聊天系统】 MQTT 篇（五）保活 Keep Alive，请不要让你的 MQTT </a></h3> <p>阅读 2484<span>·</span>2021-09-02 15:40</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116921.html">javascript 事件流 捕获与冒泡</a></h3> <p>阅读 1545<span>·</span>2019-08-30 15:54</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115079.html">一个极简主义设计的 Hexo 主题</a></h3> <p>阅读 1064<span>·</span>2019-08-30 12:48</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/114291.html">三列布局（左右固定，中间自适应）</a></h3> <p>阅读 3357<span>·</span>2019-08-29 17:23</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/110989.html">回味background</a></h3> <p>阅读 1033<span>·</span>2019-08-28 18:04</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/109763.html">二叉树遍历</a></h3> <p>阅读 3636<span>·</span>2019-08-26 13:54</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/107338.html">对JavaScript对象的理解</a></h3> <p>阅读 587<span>·</span>2019-08-26 11:40</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/105851.html">精读《源码学习》</a></h3> <p>阅读 2374<span>·</span>2019-08-26 10:15</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>