HTML body标签中的相关标签2-html教程-PHP中文网

列表标签 ul ol dl

列表标签分为三种：

无序列表 ul
有序列表 ol
定义列表 dl

无序列表, 无序列表中的每一项是

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

登录后复制

效果：
HTML body标签中的相关标签2

立即学习“前端免费学习笔记（深入）”；

注意：

li 不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

属性

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

效果如下：
HTML body标签中的相关标签2

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

<body>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

登录后复制

效果：
HTML body标签中的相关标签2

属性：

type="属性值"；属性值可以是：1，a，A，i，I; 结合start属性表示从几开始

定义列表

dl 没有属性。dl的子元素只能是 dt 和 dd

dt：列表的标题，这个标签是必须的
dd：列表的列表项，可以不写

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

<dl>
 <dt>第一条规则</dt>
 <dd>不准睡觉</dd>
 <dd>不准交头接耳</dd>
 <dd>不准下神</dd>

 <dt>第二条规则</dt>
 <dd>可以泡妞</dd>
 <dd>可以找妹子</dd>
 <dd>可以看mv</dd>
</dl>

登录后复制

效果：
HTML body标签中的相关标签2

表格标签

表格标签用表示
一个表格<table>是由每行<code><tr>组成的，每行是由<code><td>组成的。<br>所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="html"><table> <tr> <td></td> <td></td> <td></td> </tr> </table></pre>

登录后复制

</div><h4>属性</h4>
<ul class=" list-paddingleft-2">
<li><p>border：边框。像素为单位</p></li>
<li><p>style="border--collapse;collapse;"：单元格的线和表格的边框合并</p></li>
<li><p>width：宽度。像素为单位</p></li>
<li><p>height：高度。像素为单位</p></li>
<li><p>bordercolor：表格边框的颜色</p></li>
<li>
<p>align：表格的水平方式。属性值可以填：left right center</p>
<blockquote>注：这里不是设置表格里的内容的对齐方式，如果想要设置内容的对齐方式，要对单元格标签进行设置</blockquote>
</li>
<li><p>cellpadding：单元格内容到边的距离。像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0</p></li>
<li><p>cellspacing：单元格和单元格之间的距离(外边距)。像素为单位，默认下为0</p></li>
<li><p>bgcolor=""：表格的背景颜色</p></li>
<li><p>background="路径"：背景图片。背景图片的优先级大于背景颜色</p></li>
</ul>
<h4> 行</h4>
<p>一个表格就是一行一行组成的</p>
<p><strong>属性</strong></p>
<ul class=" list-paddingleft-2">
<li><p>dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右；rtl：从右到左</p></li>
<li><p>bgcolor：设置这一行的单元格的背景颜色</p></li>
<li><p>height：一行的高度</p></li>
<li><p>align="center"：一行的内容水平居中显示，取值：left，center，right</p></li>
<li><p>valign="center"：一行的内容垂直居中，取值：top，middle，bottom</p></li>
</ul>
<h4> 单元格</h4>
<p><strong>属性</strong></p>
<ul class=" list-paddingleft-2">
<li><p>align：内容横向对齐方式。属性值为: left right center</p></li>
<li><p>valign：内容的纵向对齐方式。属性值为: top middle bottom</p></li>
<li><p>width：绝对值或者相对值(%)</p></li>
<li><p>height：单元格的高度</p></li>
<li><p>bgcolor：设置单元格的背景色</p></li>
<li><p>background：设置单元格的背景图片</p></li>
</ul>
<h4>单元格的合并</h4>
<p>如果要将两个或多个单元格合并，则就要删掉其余单元格，只留一个单元格<br>单元格的属性：</p>
<ul class=" list-paddingleft-2">
<li><p>colspan：横向合并。如colspan="2"表示当前单元格在水平方向上要占据两个单元格位置</p></li>
<li><p>rowspan：纵向合并。如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格位置</p></li>
</ul>
<h4> 表格的标题。使用时和tr标签并列</h4>
<p>效果：<br><img  src="https://img.php.cn/upload/article/000/000/005/06dcf1df41543c8ce78c070efae5cef3-4.png" alt="HTML body标签中的相关标签2" ></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10684">
                            <img src="https://img.php.cn/upload/webcode/000/000/013/176327820790052.jpg" alt="传媒公司模板(RTCMS)1.0">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10684">传媒公司模板(RTCMS)1.0</a>
                            <p>传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="传媒公司模板(RTCMS)1.0">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10684" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="传媒公司模板(RTCMS)1.0">
                        </a>
                    </div>
                
<h2>表单标签 </h2>
<p>表单标签用表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的，选择的</p>
<p><strong>属性：</strong></p>
<ul class=" list-paddingleft-2">
<li><p>name：表单的名称，用于JS来操作或控制表单时使用</p></li>
<li><p>id：表单的名称，用于JS来操作或控制表单时使用</p></li>
<li><p>action：指定表单数据的处理程序，一般是PHP</p></li>
<li><p>method：表单数据的提交方式，一般取值：get(默认)和 post</p></li>
</ul>
<p>action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。</p>
<p><strong>get提交和post提交的区别：</strong><br>GET方式：<br>将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。<br>特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。</p>
<p>POST方式：<br>将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。<br>特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。</p>
<p><strong>Enctype：</strong><br>表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。</p>
<ul class=" list-paddingleft-2">
<li><p>Application/x-www-form-urlencoded：<strong>默认</strong>加密方式，除了上传文件之外的数据都可以</p></li>
<li><p>Multipart/form-data：<strong>上传附件时，必须使用这种编码方式</strong>。</p></li>
</ul>
<h4> 输入标签(文本框)</h4>
<p>用于接收用户输入</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="html">&lt;input type='text' /&gt;</pre>登录后复制</div><p><strong>属性：</strong></p>
<ul class=" list-paddingleft-2">
<li>
<p>type="text"：文本类型。属性值可以为：</p>
<blockquote></blockquote>
</li>
<ul class=" list-paddingleft-2" style="list-style-type: square;">
<li><p>注：如果要限制上传文件的类型，需要配合JS来实现验证，对上传文件的安全检查：一是扩展名的检查，二是文件数据内的检查</p></li>
<li><p>text(默认)：文本类型</p></li>
<li><p>password：密码类型</p></li>
<li><p>radio：单选按钮，名字相同的按钮作为一组进行单选(单选按钮，天生不能互斥，如果想要互斥，必须要有相同的name属性)</p></li>
<li><p>checkbox：多选按钮，名字相同的按钮作为一组进行选择</p></li>
<li><p>checked：将单选按钮或多选按钮默认处于选择状态。当标签的type="radio"时，可以用这个属性，属性值也是checked</p></li>
<li><p>hidden：隐藏框，在表单中包含不希望用户看见的信息</p></li>
<li><p>button：普通按钮，结合JS代码进行使用</p></li>
<li><p>submit：提交按钮，传送当前表单的数据给服务器或者其他程序处理，这个按钮不需要写value自动就会有"提交"文字，点击按钮后，这个表单就会被提交到form标签的action属性中指定的我那个页面区</p></li>
<li><p>reset：重置按钮，清空当前表单的内容，并设置为最初的默认值</p></li>
<li><p>image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片</p></li>
<li>
<p>file：文件选择框</p>
<blockquote></blockquote>
</li>
</ul>
<ul class=" list-paddingleft-2" style="list-style-type: square;"></ul>
<li><p>value="内容"：文本框里的默认内容</p></li>
<li>
<p>size="50"：表示文本框可以显示五十个字符，一个英文或一个中文都算一个字符</p>
<blockquote><p>注：size属性值的单位不是像素</p></blockquote>
</li>
<li><p>readonly：文本框只读，不能编辑。因为它的属性值是readonly,所以属性值可以不写</p></li>
<li><p>disabled：文本框只读，不能编辑。光标点不进去，属性值可以不写</p></li>
</ul>
<h4> 下拉列表选项</h4>
<p>标签里面的每一项都用表示，select是"选择"，option是<br>"选项"</p>
<p><strong>属性：</strong></p>
<ul class=" list-paddingleft-2">
<li><p>mutiple：可以对下啦列表中的选项进行多选，没有属性值</p></li>
<li><p>size=""：如果属性值大于 1，则列表为滚动视图，默认属性值为1，即下拉视图</p></li>
</ul>
<p><strong>属性：</strong></p>
<ul class=" list-paddingleft-2"><li><p>selected：预选中。没有属性值</p></li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="html">    &lt;form&gt;
        &lt;select&gt;
            &lt;option&gt;小学&lt;/option&gt;
            &lt;option&gt;初中&lt;/option&gt;
            &lt;option&gt;高中&lt;/option&gt;
            &lt;option&gt;大学&lt;/option&gt;
            &lt;option selected=&quot;&quot;&gt;研究生&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;&lt;br&gt;

        &lt;select size=&quot;3&quot;&gt;
            &lt;option&gt;小学&lt;/option&gt;
            &lt;option&gt;初中&lt;/option&gt;
            &lt;option&gt;高中&lt;/option&gt;
            &lt;option&gt;大学&lt;/option&gt;
            &lt;option&gt;研究生&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;&lt;br&gt;

        &lt;select multiple=&quot;&quot;&gt;
            &lt;option&gt;小学&lt;/option&gt;
            &lt;option&gt;初中&lt;/option&gt;
            &lt;option selected=&quot;&quot;&gt;高中&lt;/option&gt;
            &lt;option selected=&quot;&quot;&gt;大学&lt;/option&gt;
            &lt;option&gt;研究生&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;&lt;br&gt;

    &lt;/form&gt;</pre>登录后复制</div><p>效果：<br><img  src="https://img.php.cn/upload/article/000/000/005/2e749b5c165e05f1d51d3c2eb4b80a60-5.png" alt="HTML body标签中的相关标签2" ></p>
<h4> 多行文本输入框</h4>
<p>text是"文本"，area是"区域"</p>
<p><strong>属性：</strong></p>
<ul class=" list-paddingleft-2">
<li><p>value：提交给服务器的值</p></li>
<li><p>rows=""：指定文本区域的行数</p></li>
<li><p>cols=""：指定文本区域的列数</p></li>
<li><p>readonly：只读</p></li>
</ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="html">&lt;form&gt;
        &lt;textarea name=&quot;txtInfo&quot; rows=&quot;4&quot; cols=&quot;20&quot;&gt;路飞学城&lt;/textarea&gt;
&lt;/form&gt;</pre>登录后复制</div><p><img  src="https://img.php.cn/upload/article/000/000/005/2e749b5c165e05f1d51d3c2eb4b80a60-6.png" alt="HTML body标签中的相关标签2" ></p>
</td>

以上就是HTML body标签中的相关标签2的详细内容，更多请关注php中文网其它相关文章！