03-body标签中相关标签

发布时间：2020-12-14 19:49:04 所属栏目：资源来源：网络整理

导读：今日主要内容：列表标签、、表格标签表单标签一、列表标签列表标签分为三种。，无序列表中的每一项是英文单词解释如下： ul：unordered list，“无序列表”的意思。 li：list item，“列表项”的意思。示例：张三李四王五效果：注意： li不能

标签、标签、标签

这三个标签有与没有的区别：

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

例子：

人物介绍小马哥 18 男中国

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;tfoot</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>小岳岳<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>45<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>男<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>

        <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tfoot</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;thead</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>邓紫棋<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>23<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>女<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>           
        <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;thead</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;table</span><span style="color: #0000ff"&gt;></span></pre>

效果：

三、表单标签

表单标签用表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。

属性：

name：表单的名称，用于JS来操作或控制表单时使用；
id：表单的名称，用于JS来操作或控制表单时使用；
action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
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方式下使用。

Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
Multipart/form-data：上传附件时，必须使用这种编码方式。

：输入标签（文本框）

用于接收用户输入。

属性：

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：文本框只读，不能编辑，光标点不进去。属性值可以不写。

例子：

逗比<<< 女

效果：

四种按钮的举例：

< < < <

效果：

标签里面的每一项用表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

</code>标签：多行文本输入框</h3> text就是“文本”，area就是“区域”。 属性： <ul> <li> <code>value</code>：提交给服务器的值。</li> <li> <code>rows="4"</code>：指定文本区域的行数。</li> <li> <code>cols="20"</code>：指定文本区域的列数。</li> <li> <code>readonly</code>：只读。</li> </ul> <div class="cnblogs_code"> <pre><form> <textarea name="txtInfo" rows="4" cols="20">路飞学城</textarea> </form></pre> </div> 效果： <img src="http://img50.lidatong.com.cn//uploads/allimg/c20201214/bca19130278edca6a96ab00b329e898c.gif" alt="" width="302" height="95"> <h3>?</h3> <h3 id="表单的语义化">表单的语义化</h3> 比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。 <div class="cnblogs_code"> <pre> <form> <pre><code> <fieldset> <legend>账号信息</legend> 姓名：<input value="呵呵" >逗比<br> 密码：<input type="password" value="pwd" size="50"><br> </fieldset> <fieldset> <legend>其他信息</legend> 性别：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br> 爱好：<input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="bat">打豆豆 </fieldset> </form></pre></code></pre> </div> 效果： <img src="http://img50.lidatong.com.cn//uploads/allimg/c20201214/d99a56096cccd545adc17ae1ae1be081.gif" alt="" width="665" height="344"> <h3 id="label标签"> <code><label></code>标签</h3> 我们先来看下面一段代码： <div class="cnblogs_code"> <pre><input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女</pre> </div> 对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。 本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。 解决方法如下： <div class="cnblogs_code"> <pre><input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" /> <label for="nv">女</label></pre> </div> 上方代码中，input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。 当然了，复选框也有label：（任何表单元素都有label） <div class="cnblogs_code"> <pre><input type="checkbox" id="kk" /> <label for="kk">10天内免登陆</label> </pre> </div> ok,基本上HTML标签就给大家介绍到这里，基本上呢，标准的div+css布局，我们常用的的标签如下： <div class="cnblogs_code"> <pre>div p h1 span a img ul ol dl input</pre> </div> 看到的朋友，加个关注，有什么问题及时留言，及时改正！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/273860.html" target="_blank">web-services – Android studio getSlotFromBufferLocked：</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/261863.html" target="_blank">web-scraping – 获取reddit数据</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/243109.html" target="_blank">iis – WiX：安装程序总是更改AppPool以启用32位应用程序</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/268331.html" target="_blank">将值重新加载到数组中比javascript中的最后一个位置发生一个</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/243298.html" target="_blank">单元测试 – 单元测试Web Api 2模拟用户</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/267744.html" target="_blank">JQuery AJAX实现目录浏览与编辑的代码</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/243362.html" target="_blank">GWT – 让CellTable Cell使用HTML吗？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/243283.html" target="_blank">html – div在td中绝对定位时留空间</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/262923.html" target="_blank">svg – 删除由角度组件创建的主机HTML元素选择器</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/247910.html" target="_blank">小程序原生高颜值组件库--ColorUI组件库</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/244428.html" target="_blank">我可以使用本地文件系统中的图像作为HTML背景吗？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/245442.html" target="_blank">微信小程序 picker 中range-key的坑</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/267296.html" target="_blank">使用jQueryMobile实现滑动翻页效果的方法</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/237799.html" target="_blank">dedecms织梦增加微信公众号平台发布插件的教程</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/253325.html" target="_blank">元素设置float属性后，其后面的元素的位置问题</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/261192.html" target="_blank">Twitter小部件宽度的HTML/CSS</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/255738.html" target="_blank">小程序中canvas的拖拽功能详解</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/276953.html" target="_blank">html – 使div不自动伸展到容器宽度</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/262323.html" target="_blank">您如何从表单构造函数动态更新Django Form Meta类</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/265361.html" target="_blank">微信小程序 form组件详解</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> 【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。 建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果 Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同 <script type="text/javascript" src="//js.users.51.la/21280179.js"></script> </div> </body> </html>

：表格的标题。使用时和`tr`标签并列

效果：

?
今日主要内容：列表标签、、表格标签表单标签一、列表标签列表标签分为三种。，无序列表中的每一项是英文单词解释如下： ul：unordered list，“无序列表”的意思。 li：list item，“列表项”的意思。示例：张三李四王五效果：注意： li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。属性： `type="属性值"`。属性值可以选：?`disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。效果如下：列表之间是可以嵌套的。我们来举个例子：代码： <北京市海淀区朝阳区东城区 <span style="color: #0000ff"></</span><span style="color: #800000">ul</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: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">><</span><span style="color: #800000">b</span><span style="color: #0000ff">></span>广州市<span style="color: #0000ff"></</span><span style="color: #800000">b</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">ul</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: #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: #0000ff"></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">ul</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: #0000ff"></<span style="color: #800000">ul<span style="color: #0000ff">> 效果: 声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。，里面的每一项是英文单词：Ordered List。例如：嘿哈哼哈呵呵效果：属性： `type="属性值"`。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合`start`属性表示`从几开始`。效果：和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。 ol和ul就是语义不一样，怎么使用都是一样的。ol里面只能有li，li必须被ol包裹。li是容器级。 ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举例如下： 1. 嘿哈 2. 哼哈 3. 呵呵定义列表的作用非常大。英文单词：definition list，没有属性。dl的子元素只能是dt和dd。：definition title 列表的标题，这个标签是必须的：definition description 列表的列表项，如果不需要它，可以不加备注：dt、dd只能在dl里面；dl里面只能有dt、dd。代码：第一条规则不准睡觉不准交头接耳不准下神 <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: #0000ff"><</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>可以泡妞<span style="color: #0000ff"></</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>可以找妹子<span style="color: #0000ff"></</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>可以看mv<span style="color: #0000ff"></</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></<span style="color: #800000">dl<span style="color: #0000ff">> 效果：上图可以看出，定义列表表达的语义是两层：（1）是一个列表，列出了几个dd项目（2）每一个词儿都有自己的描述项。备注：dd是描述dt的。定义列表用法非常灵活，可以一个dt配很多dd：北京国家首都，政治文化中心污染很严重，PM2.0天天报表上海魔都，有外滩、东方明珠塔、黄浦江广州中国南大门，有珠江、小蛮腰还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些：北京国家首都，政治文化中心污染很严重，PM2.0天天报表 <span style="color: #0000ff"><</span><span style="color: #800000">dl</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: #0000ff"></</span><span style="color: #800000">dt</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>魔都，有外滩、东方明珠塔、黄浦江<span style="color: #0000ff"></</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">dl</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">dl</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: #0000ff"></</span><span style="color: #800000">dt</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>中国南大门，有珠江、小蛮腰<span style="color: #0000ff"></</span><span style="color: #800000">dd</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">dl</span><span style="color: #0000ff">></span></pre> 京东案例（京东首页最下方） dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。二、表格标签表格标签用`表示。一个表格是由每行组成的，每行是由组成的。所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。` 例如，一行的单元格：上面的表格中没有加文字，所以在生成的网页中什么都看不到。例如，3行4列的单元格：小马哥 18 男山东 <span style="color: #0000ff"><</span><span style="color: #800000">tr</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>小岳岳<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>45<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>男<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>河南<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">tr</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">tr</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>邓紫棋<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>23<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>女<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>香港<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">tr</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">table</span><span style="color: #0000ff">></span></pre> 效果：上图中的表格好像没看到边框呀，不急，接下来看看标签的属性。的属性： border：边框。像素为单位。 style="border-collapse:collapse;"：单元格的线和表格的边框线合并 width：宽度。像素为单位。 height：高度。像素为单位。 bordercolor：表格的边框颜色。 align：表格的水平对齐方式。属性值可以填：left right center。注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签进行设置） cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。 cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0 bgcolor="#99cc66"：表格的背景颜色。 background="路径src/..."：背景图片。背景图片的优先级大于背景颜色。 ?单元格带边框的效果：备注：表格中很细表格边线的制作：CSS的写法：：行一个表格就是一行一行组成的嘛。属性： dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left） bgcolor：设置这一行的单元格的背景色。注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。 height：一行的高度 align="center"：一行的内容水平居中显示，取值：left、center、right valign="center"：一行的内容垂直居中，取值：top、middle、bottom <h3 id="td单元格"> <td>：单元格属性： align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。 valign：内容的纵向对齐方式。属性值可以填：top middle bottom width：绝对值或者相对值(%) height：单元格的高度 bgcolor：设置这个单元格的背景色。 background：设置这个单元格的背景图片。 <h3 id="单元格的合并">单元格的合并如果要将两个单元格合并，那肯定就要删掉一个单元格。单元格的属性： colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上效果：（横向合并）效果举例：（纵向合并）	：加粗的单元格。相当于`?+? 属性同标签 <h3 id="caption表格的标题使用时和tr标签并列">`