摘要：超文本标记语言的结构包括头部分，和主体部分，期中头部提供关于网页的信息，主体部分提供网页的具体内容。超文本标记语言是标准通用语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
html的定义：
html超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片，链接，甚至音乐，程序等非文字语言。
超文本标记语言的结构包括“头”部分（head），和“主体”部分（body），期中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
超文本标记语言是标准通用语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
html的基本结构：
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>title>
5 head>
6 <body>
7 body>
8 html>
从上面可以看的，第一个是告诉浏览器这是html文档的开始，然后最后一个是告诉浏览器这是html的终止。标签
之间的文本是头部信息，
</p>
<p>之间的文本是文档标题，会显示在浏览器窗口的标题栏。<meta charset="utf-8">是设置网页编码的语句，让浏览器读取到本编码属于utf-8。<body>之间的是文本的正文。</p>
<p><span style="font-size: 14pt;">html的标签元素：</span></p>
<pre><span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul type="disc"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>这是无需列表<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>这是无序列表<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>这是无序列表<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol type="a" start="1"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>这是有序列表<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>这是有序列表<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>这是有序列表<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>标题一<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>123<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>321<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">21</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>标题二<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">22</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>344<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">23</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>455<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">24</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>标题三<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">25</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>676<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">26</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>665<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">27</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">28</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>好好学习天天向上！<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>好好学习天天向上！<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>好好学习天天向上<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">29</span> 好好学习天天向上！<span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span>好好学习天天向上！<span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span>好好学习天天向上!<span style="color: #0000ff;"><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">30</span>
<span style="color: #008080;">31</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">32</span>
<span style="color: #008080;">33</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre>
<p> <ul>在html中表示的是无序列表，其中属性type有属性值：disc（列表前的符号：实心圆点）circle（列表前的符号：符号为空心圆）square（列表前的符号：符号为方形）。</p>
<p><ol>在html中表示的是有序列表，其中属性type有属性值：1，a，A，i，l（用来设置项目前面的标记），属性start属性值是：数值（排序的起点数值）。</p>
<p><dl>在html中表示的是定义列表。</p>
<p><br />是换行符。</p>
<p><p>标签是用来定义一个段落，也可以用来换行。</p>
<p><span style="font-size: 14pt;">超链接</span><span style="color: #008080;"> ：</span></p>
<pre><em id="__mceDel"><em id="__mceDel"><span style="color: #008080;"> 1 <html></span> <br /> <head> <br /><span style="color: #0000ff;"> <</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>超链接<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.baidu,com"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_blank"</span><span style="color: #0000ff;">></span>百度一下<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.jd.com"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_self"</span><span style="color: #0000ff;">></span>到京东<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#target"</span><span style="color: #0000ff;">></span>点我跳到指定的位置<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>学习编程没有捷径<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>学习编程没有捷径<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>学习编程没有捷径<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>学习编程没有捷径<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">hr </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="500"</span><span style="color: #ff0000;"> color</span><span style="color: #0000ff;">="red"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> align</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">><br /> <a name="target">跳到这里来！</a><br /></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>学习编程没有捷径<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>学习编程没有捷径<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>学习编程没有捷径<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></em></em></pre>
<p>定义超链接<a href="URL"></a></p>
<p>a标签用来定义一条超链接，其中要有的是href属性，href的作用是指明超链接要链接到的网址。除了href属性，还有title属性表示连接的提示信息。target属性表示链接的打开方式，即当点击了链接，选择是在另一个页面打开还是在本页面打开。其属性值包括_blank（新的空白页），_self（当前页），_top（当前页）</p>
<p><a href="#target" _blank>百度一下</a> href 的值可以是外部链接，也可以是内部文件，如***.html</p>
<p>锚点：有时候我们在浏览网页会发现，有些网页比较人性化，会有点击返回的按钮。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。上面的：</p>
<p><a href="#target">带你我跳到指定位置</a></p>
<p><a name="target" >调到这</a></p>
<p>align.可以对段落进行设置。属性align的值包括left（左对齐），center（居中），right（右对齐）。</p>
<p><span style="font-size: 14pt;">img标签：</span></p>
<p> </p>
<pre><span style="color: #008080;">1</span> 1 <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> 2 <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> 3 <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">4</span> 4 <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>坂井泉水真美！<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> 5 <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span> 6 <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span> 7 <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="bjqs.jpg"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="500"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="500"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="女神啊！"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="图片损坏"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">8</span> 8 <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">9</span> 9 <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre>
<p> </p>
<p>属性：src，属性值：url，说明：图像资源的地址</p>
<p>属性：width，属性值：像素（px），说明：图像宽度</p>
<p>属性：height，属性值：像素（px），说明：图像高度</p>
<p>属性：alt，属性值：替代文字，说明：图像的替代文字</p>
<p></p>
<p>标题：</p>
<pre><span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>标题一<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>标题二<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>标题三<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>标题四<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h5</span><span style="color: #0000ff;">></span>标题五<span style="color: #0000ff;"></</span><span style="color: #800000;">h5</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h6</span><span style="color: #0000ff;">></span>标题六<span style="color: #0000ff;"></</span><span style="color: #800000;">h6</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre>
<p></p>
<p>文本格式化，一些常用于设置文本字体的元素：</p>
<p><b>定义粗文本</b><br /></p>
<p><i>定义斜文本</i><br /></p>
<p><del>定义删除文本</del><br /></p>
<p><sup>定义上标字</sup><br /></p>
<p><sub>定义下标字</sub><br /></p>
<p>实体字符：</p>
<p>> 大于号（>）</p>
<p>< 小于号（<）</p>
<p>" 引号（"）</p>
<p>® 注册商标</p>
<p>© 版权</p>
<p>& ©</p>
</div>
<div class="mt-64 tags-seach" >
<div class="tags-info">
<a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a>
<a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a>
<a style="width:120px;" title="html 用法" href="https://www.ucloud.cn/yun/tag/html yongfa/">html 用法</a>
<a style="width:120px;" title="html浮动用法" href="https://www.ucloud.cn/yun/tag/htmlfudongyongfa/">html浮动用法</a>
<a style="width:120px;" title="html box用法" href="https://www.ucloud.cn/yun/tag/html boxyongfa/">html box用法</a>
<a style="width:120px;" title="html下拉菜单用法" href="https://www.ucloud.cn/yun/tag/htmlxialacaidanyongfa/">html下拉菜单用法</a>
</div>
</div>
<div class="entry-copyright mb-30">
<p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p>
<p>转载请注明本文地址：https://www.ucloud.cn/yun/2079.html</p>
</div>
<ul class="pre-next-page">
<li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/2078.html">上一篇：Chrome调试技巧</a></li>
<li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/2080.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/113293.html"><b>补习前端（css+<em>html</em>）<em>基础</em>-1：</b></a></h2>
<p class="ellipsis2 good">摘要：标签将表单内容的一部分打包，生成一组相关表单的字段。提示和注释注释元素是空元素，它仅包含属性。注释此元素只能存在于部分，不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。
1.HTML 标签:
实例
组合表单中的相关元素：
health information
height:
weight:
定义和用法
fieldset 元素...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-1542.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/15/small_000001542.jpg" alt=""><span class="layui-hide64">marek</span></a>
<time datetime="">2019-08-29 15:24</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/52356.html"><b>补习前端（css+<em>html</em>）<em>基础</em>-1：</b></a></h2>
<p class="ellipsis2 good">摘要：标签将表单内容的一部分打包，生成一组相关表单的字段。提示和注释注释元素是空元素，它仅包含属性。注释此元素只能存在于部分，不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。
1.HTML 标签:
实例
组合表单中的相关元素：
health information
height:
weight:
定义和用法
fieldset 元素...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-1314.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/13/small_000001314.jpg" alt=""><span class="layui-hide64">douzifly</span></a>
<time datetime="">2019-08-02 10:26</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/90723.html"><b>JSDuck<em>用法</em>详解</b></a></h2>
<p class="ellipsis2 good">摘要：语法父类名表示当前类继承于哪个类的标签。成员标签成员标签作用于类中的配置属性函数事件。表明可被子类继承，和一起使用。示例获取圆的面积圆的半径面积值作用于函数，表明函数的标签。作用于函数，表明构造函数参数的标签，用法同。
字数：3692字
阅读时间：15分钟
前言
首先，咱们有一个前提，JSDuck对我们而言只是一个便于API查看的文档化工具。因此，只要它能够满足我们文...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-570.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000570.jpg" alt=""><span class="layui-hide64">xiaochao</span></a>
<time datetime="">2019-08-21 18:41</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/79269.html"><b>webpack<em>基础</em><em>用法</em></b></a></h2>
<p class="ellipsis2 good">摘要：的用法全在配置中是在环境下运行的，学习之前，请先自行安装环境含安装第一步全局安装第二步建立项目文件夹，如一直回车下去项目目录本地安装搭建目录结构在项目根目录下的简单目录结构如下入口文件安装时，自动建立
----------webpack的用法全在配置中！！webpack是在node环境下运行的，学习webpack之前，请先自行安装node环境（含npm）；
安装webpack：
第一步...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-89.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/00/small_000000089.jpg" alt=""><span class="layui-hide64">yexiaobai</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>
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/89899.html"><b>SVG<em>基础</em>教程(超级详细)</b></a></h2>
<p class="ellipsis2 good">摘要：光滑三次贝塞尔曲线指令跟在指令或指令后面补刀，它会自动在基础上生成一个对称点，所以指令只需要两个点就可以。二次贝塞尔曲线是控制点，表示的是曲线的终点。
一、内置图形:
rect(矩形)
circle(圆)
ellipse(椭圆)
line(直线)
polyline(折线)
polygon(多边形)
path(路径)
二、内置图形的html属性或(css样...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-27.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/00/small_000000027.jpg" alt=""><span class="layui-hide64">张宪坤</span></a>
<time datetime="">2019-08-21 17:42</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-223.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/02/small_000000223.jpg" alt=""></a>
<h3><a href="https://www.ucloud.cn/yun/u-223.html" rel="nofollow">BlackHole1</a></h3>
<h6>男<span>|</span>高级讲师</h6>
<div class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(223)" id="attenttouser_223" 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-223.html" class="box_hxjz">阅读更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121033.html">#闪购#RackNerd：4核8G内存100G SSD硬盘5TB流量，$89/年，洛杉矶DC02机房</a></h3>
<p>阅读 2471<span>·</span>2021-09-24 10:29</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/120596.html">怎么创建虚拟主机-如何创建虚拟主机？</a></h3>
<p>阅读 3777<span>·</span>2021-09-22 15:46</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119114.html">操作符sizeof与函数strlen哪些事</a></h3>
<p>阅读 2550<span>·</span>2021-09-04 16:41</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116725.html">前端每日实战：56# 视频演示如何用纯 CSS 描述程序员的生活</a></h3>
<p>阅读 2960<span>·</span>2019-08-30 15:53</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115997.html">移动端项目的注意点</a></h3>
<p>阅读 1238<span>·</span>2019-08-30 14:24</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115467.html">JavaScript实现简单的购物车</a></h3>
<p>阅读 3023<span>·</span>2019-08-30 13:19</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113038.html">CSS中选择器的权重值</a></h3>
<p>阅读 2135<span>·</span>2019-08-29 14:17</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112237.html">使用jQuery监听扫码枪输入并禁止手动输入的实现方法</a></h3>
<p>阅读 3486<span>·</span>2019-08-29 12: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/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> 