HTML之body标签中的相关标签补充

felix0913 发布于2019-04-23 11:49 / 899人阅读

摘要：一列表标签列表标签分为三种。二表格标签表格标签用表示。单元格和单元格之间的距离外边距，像素为单位。例如表示当前单元格在水平方向上要占据两个单元格的位置。输入标签文本框输入标签文本框用于接收用户输入。

一列表标签

　　列表标签分为三种。

　　1、无序列表
，无序列表中的每一项是

　　　　英文单词解释如下：

　　　　　　a.ul：unordered list，“无序列表”的意思。

　　　　　　b.li：list item，“列表项”的意思。

　　　　示例：

1 2 3 4 5

张三</li>
李四</li>
王五</li> </ul>

　　　　效果：

　　　　注意：

　　　　　　a.li不能多带带存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

　　　　　　b.我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

　　　　属性：

　　　　　　1.type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。

　　　　　　　　效果如下：

　　　　　　　　列表之间是可以嵌套的。我们来举个例子：
　　　　　　　　代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

北京市</b>

海淀区</li>
朝阳区</li>
东城区</li>        </ul>    </li>
广州市</b>

天河区</li>
越秀区</li>        </ul>    </li> </ul>

　　　　　　　　效果:

　　　　　　　　声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。

　　2、有序列表
，里面的每一项是

　　　　英文单词：Ordered List。

　　　　例如：

1 2 3 4 5

嘿哈</li>
哼哈</li>
呵呵</li> </ol>

　　　　效果：

　　　　属性：

　　　　　　1.type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

　　　　　　效果：

　　　　　　和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。

　　　　　　ol和ul就是语义不一样，怎么使用都是一样的。
　　　　　　ol里面只能有li，li必须被ol包裹。li是容器级。

　　　　　　ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举例如下：

1 2 3 4 5

1. 嘿哈</li>
2. 哼哈</li>
3. 呵呵</li> </ul>

　　3、定义列表

：definition title 列表的标题，这个标签是必须的 b.

：definition description 列表的列表项，如果不需要它，可以不加

　　　　备注：dt、dd只能在dl里面；dl里面只能有dt、dd。

　　　　代码：

1 2 3 4 5 6 7 8 9 10 11

第一条规则</dt>: 不准睡觉</dd>; 不准交头接耳</dd>; 不准下神</dd>
第二条规则</dt>: 可以泡妞</dd>; 可以找妹子</dd>; 可以看mv</dd> </dl>

　　　　效果：

　　　　上图可以看出，定义列表表达的语义是两层：

　　　　　　（1）是一个列表，列出了几个dd项目

　　　　　　（2）每一个词儿都有自己的描述项。

　　　　备注：dd是描述dt的。

　　　　定义列表用法非常灵活，可以一个dt配很多dd：

1 2 3 4 5 6 7 8 9

北京</dt>: 国家首都，政治文化中心</dd>; 污染很严重，PM2.0天天报表</dd>
上海</dt>: 魔都，有外滩、东方明珠塔、黄浦江</dd>
广州</dt>: 中国南大门，有珠江、小蛮腰</dd> </dl>

　　　　还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

北京</dt>

国家首都，政治文化中心</dd>

污染很严重，PM2.0天天报表</dd> </dl>

上海</dt>

魔都，有外滩、东方明珠塔、黄浦江</dd> </dl>

广州</dt>: 中国南大门，有珠江、小蛮腰</dd> </dl>

　　　　京东案例（京东首页最下方）

　　　　dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。

二表格标签

　　表格标签用

表示。
　　一个表格

是由每行组成的，每行是由

组成的。
　　所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
　　在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。

　　例如，一行的单元格：

1 2 3 4 5 6 7 8

            

</td>
         </td>
         </td>
         </td>
    </tr>
</table>
















　　上面的表格中没有加文字，所以在生成的网页中什么都看不到。
　　例如，3行4列的单元格：







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23




                                    

小马哥</td>
           18</td>
           男</td>
           山东</td>
      </tr>
 
      

小岳岳</td>
           45</td>
           男</td>
           河南</td>
      </tr>
 
      

邓紫棋</td>
           23</td>
           女</td>
           香港</td>
      </tr>
 
  </table>
















　　
　　效果：
　　　　
　　上图中的表格好像没看到边框呀，不急，接下来看看
标签的属性。
　　

的属性：

border：边框。像素为单位。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签
：行　　　　一个表格就是一行一行组成的嘛。
　　属性：

dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度
align="center"：一行的内容水平居中显示，取值：left、center、right
valign="center"：一行的内容垂直居中，取值：top、middle、bottom

 
　　
标签、标签、标签　　　　这三个标签有与没有的区别：
　　　　　　1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
　　　　　　2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
例子：

进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background="路径src/..."：背景图片。
背景图片的优先级大于背景颜色。


　　单元格带边框的效果：
　　　　
　　备注：表格中很细表格边线的制作：
　　CSS的写法：







1




style="border-collapse:collapse;"
















　　
　　




：单元格
　　属性：

align：内容的横向对齐方式。属性值可以填：left right center。
如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。


 
　　单元格的合并
　　　　如果要将两个单元格合并，那肯定就要删掉一个单元格。
　　　　单元格的属性：

colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上


　　　　效果：（横向合并）
　　　　　　
　　　　效果举例：（纵向合并）
　　　　　　
　　 ：加粗的单元格。相当于  + 
　　　　a.属性同 标签
 
　　
：表格的标题。使用时和tr标签并列
　　　　效果：
　　　　　　
 
　　表格的












1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28




="1">                                                                                          
人物介绍</caption>
      

小马哥</td>
                 18</th>
                 男</td>
                 ="3">中国</td>
            </tr>
        </tbody>
     
    


小岳岳</td>
                 45</td>
                 男</td>
                 
            </tr>
        </tfoot>
    

邓紫棋</td>
                 23</td>
                 女</td>          
            </tr>
        </thead>
 
    </table>
















　　
　　　　效果：

 


三 表单标签

　　表单标签用
表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
 
　　属性：
　　　　a.name：表单的名称，用于JS来操作或控制表单时使用；
　　　　b.id：表单的名称，用于JS来操作或控制表单时使用；
　　　　c.action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
　　　　d.method：表单数据的提交方式，一般取值：get(默认)和post
　　form标签里面的action属性和method属性，在后面课程给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。 
　　get提交和post提交的区别：
　　　　GET方式：
　　　　　　将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
　　　　　　特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
　　　　POST方式：
　　　　　　将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
　　　　　　特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
　　Enctype：
　　　　表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
　　　　　　a.Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
　　　　　　b.Multipart/form-data：上传附件时，必须使用这种编码方式。
　　：输入标签（文本框）
　　　　用于接收用户输入。







1




<input type="text" />
















　　　　
　　　　属性：

type="属性值"：文本类型。属性值可以是：

text（默认）
password：密码类型
radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
checkbox：多选按钮，名字相同的按钮作为一组进行选择。
checked：将单选按钮或多选按钮默认处于选中状态。当标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。
hidden：隐藏框，在表单中包含不希望用户看见的信息
button：普通按钮，结合js代码进行使用。
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
file：文件选择框。
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。




value="内容"：文本框里的默认内容（已经被填好了的）
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。


　　　　例子：







1
2
3
4
5
6
7
8
9
10
11





      姓名：<input value="呵呵" >逗比

      昵称：<input value="哈哈" readonly="">

      名字：<input type="text" value="name" disabled="">

      密码：<input type="password" value="pwd" size="50">

      性别：<input type="radio" name="gender" value="male" checked="">男
            <input type="radio" name="gender" value="female" >女

      爱好：<input type="checkbox" name="love" value="eat">吃饭
            <input type="checkbox" name="love" value="sleep">睡觉
            <input type="checkbox" name="love" value="bat">打豆豆
  </form>
















　　
　　　　效果：

　　　　四种按钮的举例：







1
2
3
4
5
6
7





        <input type="button" value="普通按钮">

        <input type="submit"  value="提交按钮">

        <input type="reset" value="重置按钮">

        <input type="image" src="images/bojie.jpeg" width="400" value="图片按钮2">

        <input type="file" value="文件选择框">
</form>
















　　
　　　　效果：
　　　　　　
　　标签里面的每一项用表示。select就是“选择”，option“选项”。
　　　　select标签和ul、ol、dl一样，都是组标签。
　　




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29





    ="3">
        /option>
        /option>
        /option>
        /option>
        /option>
    </select>
    



 
    












　　
　　　　效果:
　　　　　　
　　</code>标签：多行文本输入框</h3>
<p>　　　　text就是“文本”，area就是“区域”。</p>
<p><strong>　　　　属性：</strong></p>
<p><strong>　　　　　　a.</strong><code>value</code>：提交给服务器的值。</p>
<p>　　　　　　b.<code>rows="4"</code>：指定文本区域的行数。</p>
<p>　　　　　　c.<code>cols="20"</code>：指定文本区域的列数。</p>
<p>　　　　　　d.<code>readonly</code>：只读。</p>



<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
1
2
3

</td>
<td class="code">

<code class="python plain"><form></code>
<code class="python spaces">        </code><code class="python plain"><textarea name</code><code class="python keyword">=</code><code class="python string">"txtInfo"</code> <code class="python plain">rows</code><code class="python keyword">=</code><code class="python string">"4"</code> <code class="python plain">cols</code><code class="python keyword">=</code><code class="python string">"20"</code><code class="python plain">>路飞学城<</code><code class="python keyword">/</code><code class="python plain">textarea></code>
<code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">form></code>



</td>

</tr>

</tbody>

</table>






<p>　　</p>
<p>　　　　效果：</p>
<p>　　　　　　</p>
<h3> </h3>
<h3 id="表单的语义化">　　表单的语义化</h3>
<p>　　　　比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。</p>



<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

</td>
<td class="code">

<code class="python plain"><form></code>
 
<code class="python spaces">       </code><code class="python plain"><fieldset></code>
<code class="python spaces">       </code><code class="python plain"><legend>账号信息<</code><code class="python keyword">/</code><code class="python plain">legend></code>
<code class="python spaces">       </code><code class="python plain">姓名：<</code><code class="python functions">input</code> <code class="python plain">value</code><code class="python keyword">=</code><code class="python string">"呵呵"</code> <code class="python plain">>逗比<br></code>
<code class="python spaces">       </code><code class="python plain">密码：<</code><code class="python functions">input</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"password"</code> <code class="python plain">value</code><code class="python keyword">=</code><code class="python string">"pwd"</code> <code class="python plain">size</code><code class="python keyword">=</code><code class="python string">"50"</code><code class="python plain">><br></code>
<code class="python spaces">       </code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">fieldset></code>
 
<code class="python spaces">       </code><code class="python plain"><fieldset></code>
<code class="python spaces">       </code><code class="python plain"><legend>其他信息<</code><code class="python keyword">/</code><code class="python plain">legend></code>
<code class="python spaces">       </code><code class="python plain">性别：<</code><code class="python functions">input</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"radio"</code> <code class="python plain">name</code><code class="python keyword">=</code><code class="python string">"gender"</code> <code class="python plain">value</code><code class="python keyword">=</code><code class="python string">"male"</code> <code class="python plain">checked</code><code class="python keyword">=</code><code class="python plain">"">男</code>
<code class="python spaces">             </code><code class="python plain"><</code><code class="python functions">input</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"radio"</code> <code class="python plain">name</code><code class="python keyword">=</code><code class="python string">"gender"</code> <code class="python plain">value</code><code class="python keyword">=</code><code class="python string">"female"</code> <code class="python plain">>女<br></code>
<code class="python spaces">       </code><code class="python plain">爱好：<</code><code class="python functions">input</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"checkbox"</code> <code class="python plain">name</code><code class="python keyword">=</code><code class="python string">"love"</code> <code class="python plain">value</code><code class="python keyword">=</code><code class="python string">"eat"</code><code class="python plain">>吃饭</code>
<code class="python spaces">             </code><code class="python plain"><</code><code class="python functions">input</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"checkbox"</code> <code class="python plain">name</code><code class="python keyword">=</code><code class="python string">"love"</code> <code class="python plain">value</code><code class="python keyword">=</code><code class="python string">"sleep"</code><code class="python plain">>睡觉</code>
<code class="python spaces">             </code><code class="python plain"><</code><code class="python functions">input</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"checkbox"</code> <code class="python plain">name</code><code class="python keyword">=</code><code class="python string">"love"</code> <code class="python plain">value</code><code class="python keyword">=</code><code class="python string">"bat"</code><code class="python plain">>打豆豆</code>
<code class="python spaces">       </code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">fieldset></code>
 
<code class="python spaces">   </code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">form></code>



</td>

</tr>

</tbody>

</table>






<p>　　</p>
<p>　　　　效果：</p>
<p></p>
<p> </p>
<p> </p>
<h3 id="label标签"><code>　　<label></code>标签</h3>
<p>　　　　我们先来看下面一段代码：</p>



<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
1
2

</td>
<td class="code">

<code class="python plain"><</code><code class="python functions">input</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"radio"</code> <code class="python           
               
                                           
                       
                 </div>
            
                     <div class="mt-64 tags-seach" >
                 <div class="tags-info">
                                                                                                                    
                         <a style="width:120px;" title="超融合服务器" href="https://www.ucloud.cn/site/product/utrion.html">超融合服务器</a>
                                             
                         <a style="width:120px;" title="私有云" href="https://www.ucloud.cn/site/product/ucloudstack.html">私有云</a>
                                                                                                                                                 
                                      
                     
                    
                                                                                               <a style="width:120px;" title="php中的map标签" href="https://www.ucloud.cn/yun/tag/phpzhongdemapbiaoqian/">php中的map标签</a>
                                                                                                           <a style="width:120px;" title="java中的标签库" href="https://www.ucloud.cn/yun/tag/javazhongdebiaoqianku/">java中的标签库</a>
                                                                                                           <a style="width:120px;" title="jsp中的fn标签" href="https://www.ucloud.cn/yun/tag/jspzhongdefnbiaoqian/">jsp中的fn标签</a>
                                                                                                           <a style="width:120px;" title="html单标签双标签" href="https://www.ucloud.cn/yun/tag/htmldanbiaoqianshuangbiaoqian/">html单标签双标签</a>
                                                         
                 </div>
               
              </div>
             
               <div class="entry-copyright mb-30">
                   <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p>
                 
                   <p>转载请注明本文地址：https://www.ucloud.cn/yun/1219.html</p>
               </div>
                      
               <ul class="pre-next-page">
                 
                                  <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/1218.html">上一篇：【代码笔记】Web-CSS-CSS Align</a></li>  
                                                
                                       <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/1220.html">下一篇：常用H5</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/2313.html"><b><em>html</em><em>之</em>css选择器学习</b></a></h2>
                                                     <p class="ellipsis2 good">相关内容：什么是css选择器标签选择器类选择器id选择器并集选择器（分组选择器）交集选择器后代选择器子标签选择器属性选择器相邻兄弟选择器伪类选择器伪元素选择器（伪对象选择器）首发时间：2018-03-02 修改：2018-04-30：修改了排版，增加了伪类选择器，伪元素选择器，在原本简略的介绍的基础上增加了描述并修改了某些术语描述。2018-05-05：修改了部分伪类选择器的注解，由于之前发生了小...</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 13: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/54402.html"><b>网页中下载文件的<em>相关</em>总结</b></a></h2>
                                                     <p class="ellipsis2 good">摘要：对于通过去下载文件时跨域的问题有一个解决思路是自己写一个代理服务代理服务负责在服务端下载文件并配置好跨域相关的信息然后请求走代理服务进行下载。

0. 概述
文件下载是web应用中很常见的场景，在浏览器中下载文件, 最基本的方式就是——在页面内隐藏iframe, 然后将文件下载地址加载到iframe中, 从而触发浏览器的下载行为。 此外, html5引入a标签的download属性,  ...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-265.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/02/small_000000265.jpg" alt=""><span class="layui-hide64">shusen</span></a>
                                    <time datetime="">2019-08-02 15:57</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/87184.html"><b>网页中下载文件的<em>相关</em>总结</b></a></h2>
                                                     <p class="ellipsis2 good">摘要：对于通过去下载文件时跨域的问题有一个解决思路是自己写一个代理服务代理服务负责在服务端下载文件并配置好跨域相关的信息然后请求走代理服务进行下载。

0. 概述
文件下载是web应用中很常见的场景，在浏览器中下载文件, 最基本的方式就是——在页面内隐藏iframe, 然后将文件下载地址加载到iframe中, 从而触发浏览器的下载行为。 此外, html5引入a标签的download属性,  ...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-382.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000382.jpg" alt=""><span class="layui-hide64">taowen</span></a>
                                    <time datetime="">2019-08-21 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-left">
                            <a href="https://www.ucloud.cn/yun/1226.html"><img src="https://images2018.cnblogs.com/blog/1364810/201805/1364810-20180518183155757-557925292.png" alt=""></a>
                        </div>  
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/1226.html"><b><em>HTML</em><em>之</em><em>body</em><em>标签</em><em>中的</em><em>相关</em><em>标签</em></b></a></h2>
                                                     <p class="ellipsis2 good">摘要：一字体标签字体标签包含标题标题使用至标签进行定义。定义最大的标题，定义最小的标题。如果想要更大的字体，那就只能通过样式来解决微软雅黑设置字体类型。注意在写字体时，微软雅黑这个字不能写错。一 字体标签　　字体标签包含：h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>　　...</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: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/79643.html"><b>努力翻译一篇中文最友好的，Web Audio API的使用<em>相关</em>的文章</b></a></h2>
                                                     <p class="ellipsis2 good">摘要：前言本文翻译自上的利用，这是中的的一个入门教程。原文是英文，但有日本同志翻译的日文版。这是为了提供一个基本的低音増幅效果在这个例子中可以设定过滤器的种类，周波数，甚至的值。如果是过滤器的话，可以提供一个比指定周波数低的低音増幅。

前言
本文翻译自MDN上的《Web Audio APIの利用》，这是HTML5中的Web Audio API的一个入门教程。原文是英文，但有日本同志翻译的日文...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-609.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/06/small_000000609.jpg" alt=""><span class="layui-hide64">caikeal</span></a>
                                    <time datetime="">2019-08-19 18: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-1197.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/11/small_000001197.jpg" alt=""></a>
                    <h3><a href="https://www.ucloud.cn/yun/u-1197.html" rel="nofollow">felix0913</a></h3>
                    <h6>男<span>|</span>高级讲师</h6>
                    <div class="flex_box_zd user-msgbox-atten">
                     
                                                                      <a href="javascript:attentto_user(1197)" id="attenttouser_1197" 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-1197.html" class="box_hxjz">阅读更多</a>
                    </div>
                      <ul class="user-msgbox-ul">
                                                  <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123743.html">朋友去大厂面试Python开发工程师，看完准备过程我傻眼了</a></h3>
                            <p>阅读 712<span>·</span>2021-11-18 10:02</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117512.html">关于移动端1px的解决方法</a></h3>
                            <p>阅读 1375<span>·</span>2019-08-30 15:56</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115542.html">前端开发知识点之 html &css</a></h3>
                            <p>阅读 2477<span>·</span>2019-08-30 13:47</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112094.html">页面制作（切图）第一章</a></h3>
                            <p>阅读 2494<span>·</span>2019-08-29 12:43</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111572.html">字体图标(font-icon)，你还有什么理由不使用它？</a></h3>
                            <p>阅读 646<span>·</span>2019-08-29 11:19</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111214.html">图解CSS3 读书笔记——背景</a></h3>
                            <p>阅读 1629<span>·</span>2019-08-28 18:23</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/108611.html">puppeteer爬虫</a></h3>
                            <p>阅读 2559<span>·</span>2019-08-26 12:23</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/102135.html">再次简单明了总结flex布局，一看就懂...</a></h3>
                            <p>阅读 2886<span>·</span>2019-08-23 15:29</p></li>
                                                
                      </ul>
                </div>

                   <!-- 文章详情右侧广告-->
              
  <div class="com_layuiright-box">
                  <h6 class="top-com-title"><span>最新活动</span></h6> 
           
         <div class="com_adbox">
                    <div class="layui-carousel" id="right-item">
                      <div carousel-item>
                                                                                                                       <div>
                          <a href="https://www.ucloud.cn/site/product/uhost.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/Z7TLrpAi.png" alt="云服务器">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uhybrid.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/MWraMsBh.png" alt="混合云">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/ucloudstack.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/ifzOxvjW.png" alt="私有云">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/utrion.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/VDqwC1iN.png" alt="超融合服务器">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uhybrid.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220630/pJwnviKN.png" alt="服务器托管">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uxzone.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220630/CDb5uXxp.jpeg" alt="idc机房托管">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/active/network.html?ytag=seo"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/230227/XWsSXmvm.png" alt="专线服务">                                 
                          </a>
                        </div>
                                                                   
                    
                        
                      </div>
                    </div>
                      
                    </div>                    <!-- banner结束 -->
              
<div class="adhtml">

</div>
                <script>
                $(function(){
                    $.ajax({
                        type: "GET",
                                url:"https://www.ucloud.cn/yun/ad/getad/1.html",
                                cache: false,
                                success: function(text){
                                  $(".adhtml").html(text);
                                }
                        });
                    })
                </script>                </div>              </div>
           </div>
        </div>
      </div> 
    </section>
    <!-- wap拉出按钮 -->
     <div class="site-tree-mobile layui-hide">
      <i class="layui-icon layui-icon-spread-left"></i>
    </div>
    <!-- wap遮罩层 -->
    <div class="site-mobile-shade"></div>
    
       <!--付费阅读 -->
       <div id="payread">
         <div class="layui-form-item">阅读需要支付1元查看</div>  
         <div class="layui-form-item"><button class="btn-right">支付并查看</button></div>     
       </div>
      <script>
      var prei=0;

       
       $(".site-seo-depict pre").each(function(){
          var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
          $(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
          $(this).html("").append("<code>"+html+"</code>");
         prei++;
       })
           $(".site-seo-depict img").each(function(){
             
            if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
                $(this).remove();
            }
       })
     $("LINK[href*='style-49037e4d27.css']").remove();
       $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
  $("pre").attr("class","layui-code");
      $("pre").attr("lay-title","");
       $("pre").attr("lay-skin","");
  layui.code(); 
       $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)");
      
});
function copycode(target){
    var id=$(target).parent().parent().attr("id");
  
                  var clipboard = new ClipboardJS("#"+id);

clipboard.on('success', function(e) {


    e.clearSelection();
    alert("复制成功")
});

clipboard.on('error', function(e) {
    alert("复制失败")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
  <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
    <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
    <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

<script>
    function setcode(){
        var _html='';
    	  document.querySelectorAll('pre code').forEach((block) => {
        	  var _tmptext=$.trim($(block).text());
        	  if(_tmptext!=''){
        		  _html=_html+_tmptext;
        		  console.log(_html);
        	  }
    		 
    		  
    		 
      	  });
    	 

    }

</script>

<script>
function payread(){
  layer.open({
      type: 1,
      title:"付费阅读",
      shadeClose: true,
      content: $('#payread')
    });
}
// 举报
function jupao_tip(){
  layer.open({
      type: 1,
      title:false,
      shadeClose: true,
      content: $('#jubao')
    });

}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加载评论
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);

})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("评论内容不能为空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
 $(".button_agree").click(function(){
 var supportobj = $(this);
         var tid = $(this).attr("id");
         $.ajax({
         type: "GET",
                 url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid,
                 cache: false,
                 success: function(hassupport){
                 if (hassupport != '1'){






                         $.ajax({
                         type: "GET",
                                 cache:false,
                                 url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid,
                                 success: function(comments) {

                                 supportobj.find("span").html(comments+"人赞");
                                 }
                         });
                 }else{
                	 alert("您已经赞过");
                 }
                 }
         });
 });
 function attenquestion(_tid,_rs){
    	$.ajax({
    //提交数据的类型 POST GET
    type:"POST",
    //提交的网址
    url:"https://www.ucloud.cn/yun/favorite/topicadd.html",
    //提交的数据
    data:{tid:_tid,rs:_rs},
    //返回数据的格式
    datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
    //在请求之前调用的函数
    beforeSend:function(){},
    //成功返回之后调用的函数
    success:function(data){
    	var data=eval("("+data+")");
    	console.log(data)
       if(data.code==2000){
    	layer.msg(data.msg,function(){
    	  if(data.rs==1){
    	      //取消收藏
    	      $(".layui-layer-tips").attr("data-tips","收藏文章");
    	      $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
    	  }
    	   if(data.rs==0){
    	      //收藏成功
    	      $(".layui-layer-tips").attr("data-tips","已收藏文章");
    	      $(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
    	  }
    	})
    	 
       }else{
    	layer.msg(data.msg)
       }


    }   ,
    //调用执行后调用的函数
    complete: function(XMLHttpRequest, textStatus){
     	postadopt=true;
    },
    //调用出错执行的函数
    error: function(){
        //请求出错处理
    	postadopt=false;
    }
 });
}
</script>
<footer>
        <div class="layui-container">
            <div class="flex_box_zd">
              <div class="left-footer">
                    <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6>
                    <p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p>
              </div>
              <div class="right-footer layui-hidemd">
                  <ul class="flex_box_zd">
                      <li>
                        <h6>UCloud与云服务</h6>
                         <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p>
                         <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p>
                         <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p>
                         <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p>                                                  <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p>
                      </li>
                      <li>
                        <h6>友情链接</h6>                                             <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p>                                             <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p>
                                             <p><a href="https://www.surfercloud.com/">SurferCloud</a></p>                                             <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p>                                             <p><a href="https://pinex.it/">Pinex</a></p>                                             <p><a href="https://www.picpik.ai/zh">AI绘画</a></p>
                                             
                      </li>
                      <li>
                        <h6>社区栏目</h6>
                         <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p>
                     <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p>                      </li>
                      <li>
                        <h6>常见问题</h6>
                         <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p>
                         <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p>
                         <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p>                                                  <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p>                                                
                         <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p>
                      </li>
                      <li>
                          <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span>
                          <p>扫扫了解更多</p></div>
            </div>
            <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div> 
        </div>
    </footer>
</body>
<script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html>

资讯专栏INFORMATION COLUMN

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

HTML之body标签中的相关标签补充

一列表标签

1、无序列表
，无序列表中的每一项是

2、有序列表
，里面的每一项是

二表格标签

单元格的合并

表格的

三表单标签

：输入标签（文本框）

资讯专栏INFORMATION COLUMN

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

HTML之body标签中的相关标签补充

一 列表标签

1、无序列表，无序列表中的每一项是

2、有序列表，里面的每一项是

二 表格标签

单元格的合并

表格的

三 表单标签

：输入标签（文本框）

一列表标签

　　1、无序列表
，无序列表中的每一项是

　　2、有序列表
，里面的每一项是

二表格标签

　　单元格的合并

　　表格的

三表单标签

　　：输入标签（文本框）