简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML标签的理解分析与列表表格表单的理解应用——2019.8.30
Blogger Information
Blog 7
fans 0
comment 1
visits 6003
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML标签的理解分析与列表表格表单的理解应用——2019.8.30
四糸乃大冒险
Original
691 people have browsed it

Html是由标签元素与属性构成的。标签声明了元素的结构，元素的表现形式又由属性控制。

一个页面中的大体是由文档类型声明标签（<!DOCTYPE html>）、html文档根元素（<html>）、头部声明标签（<head>）、和主体标签（<body>）构成。其中body标签一般是可显示给用户观察的内容区域，而head标签范围则是对于文档的资源以及标题图标的各种声明，用户是无法直接看到的。具体的结构如下图

 `@P9LU3CY2]}23QQH4@XN]7.png


现在了解完基本的一点概念，让我们来康康新盆友——列表

列表嘛~顾名思义，就是列清单或者显示一长条可以分条的数据。

类型嘛也就那么几种让我们拿rpg游戏里常有的信息来操练操练：

首先是无序列表，当勇者刚到新手村的时候，他需要买的东西一般不会有分先后顺序全都要买的，这时候用无序列表<ul>就可以了，里面每一条都用<li>标签包裹起来

<!-- 无序列表 -->    <h3>勇者购物清单</h3>    <ul>        <li>勇者的武器</li>        <li>勇者的防具</li>        <li>勇者的消耗品</li>    </ul>

当勇者买完东西后需要去寻找靠谱的伙伴，这时候就得有个优先级了，从第一优先级往后排，用有序列表来排列，这次外面的那个标签变成了<ol>,这样包裹的列表就会有自带序列号了~

<!-- 有序列表 -->
    <h3>勇者寻找同伴指南</h3>
    <ol>
        <li>会治疗的</li>
        <li>会嘲讽的</li>
        <li>会输出的</li>
</ol>

伙伴找完了，接下来勇者就要用传送功能了，这时候需要能点击使用的列表——导航！

往<ul>标签包裹的<li>标签中再包裹一个<a>链接标签，这个列表就形成了可点击导航的列表。

   <!-- 导航 -->
    <h3>接下来去哪？</h3>
    <ul>
        <li><a href="float:left">铁匠铺</a></li>
        <li><a href="float:left">炼金屋</a></li>
        <li><a href="float:left">商店</a></li>
        <li><a href="float:left">公会</a></li>
        </ul>

当然有时候需要菜单啥的做得人性化点，可以用<dl>标签包裹<dt>与<dd>标签，

<dt>标签显示这一条项目，而<dd>标签跟在<dt>标签后面是作为这个项目的说明~

    <!-- 定义列表 -->
    <dl>
        <dt><a href="">返回</a></dt>
        <dd>回到上一个地方</dd>
        <dt><a href="">菜单</a></dt>
        <dd>打开操作列表</dd>
        <dt><a href="">退出</a></dt>
        <dd>结束冒险</dd>
        <dt><a href="">闲逛</a></dt>
        <dd>去随便哪个地方</dd>
    </dl>

现在一切具备，让我们看看勇者们是想怎么安排自己明天的计划的：

<ul>
        <li>
            <h4>上午</h4>
            <dl>
                <dt>前往集市</dt>
                <dd>这里可是个好地方，大清早说不定有廉价的治疗***水</dd>
                <dt>南边的山坡</dt>
                <dd>听村长说那边最近野猪有点暴躁，咱们去看看情况</dd>
                <dt>酒馆</dt>
                <dd>如果明天天气不好那就去酒馆打听消息</dd>
            </dl>
        </li>
        <li>
            <h4>下午</h4>
            <dl>
                <dt>剑道馆</a></dt>
                <dd>勇者当然要努力练习剑技，万一哪天能遇上神秘的石中剑，还成功拔出来了，那岂不是很帅！</dd>
                <dt>教堂</dt>
                <dd>锻炼两小时，去教堂转转看有没有可爱的修女妹妹出来寻找队伍，毕竟奶妈稀少啊~</dd>
                <dt>决斗场</dt>
                <dd>强大的对手当然能激发自身的潜能！而且勇者可是要打败魔王的啊！区区决斗场还是无法阻挡我的！</dd>
                <dt>闲逛</a></dt>
                <dd>去随便哪个地方碰运气，万一有什么奇遇呢~</dd>
            </dl>
        </li>
        <li>
            <h4>晚上</h4>
            <dl>
                <dt>打工！</dt>
                <dd>勇者的活动需要资金！埋头苦干才有光明的未来！</dd>
                <dt>赌场！</dt>
                <dd>打工是不可能打工的！一本万利！就在今晚！</dd>
                <dt>劫富济贫</dt>
                <dd>我就是穷人，打劫富有的山贼来救济一下穷人的自己不是很正常的嘛~</dd>
                <dt>睡觉</dt>
                <dd>早睡早起，才有好身体来打倒魔王</dd>
            </dl>
        </li>
    </ul>

84$}OE`3{JCQA`64@2J]BI2.png

好吧~！那么先让勇者一行人去睡一觉。

咱们回头来看看表格与列表之间的不同：

一般来讲列表只是罗列出一条条物品一样的罗列清单式的标签。

而表格则是适合多条属性有多个关联属性的数据。拿勇者去商店的时候看到商品列表来看

商品都有名字价格和库存数量，如果用列表来显示实在是不适合又不美观。这时候用<table>标签来显示就再适合不过了，其中还能用border属性来控制边框的宽度，宽也能用width来控制，cellspacing则是控制每个格之间的空隙，cellpadding则是控制边缘到格内内容的距离。表格中还能用rowpan属性来控制表格的竖向合并，colspan则是横向合并。看看下面列的简单示范~

<table border="1" width="500" cellspacing="0" cellpadding="5">
        <caption>武器商品列表</caption>
        <!-- 表头 -->
        <thead>
            <tr bgcolor="yellow">
                <th>名称</th>
                <th>库存</th>
                <th>单价</th>
            </tr>
        </thead>
        <!-- 主体 -->
        <tr>
            <td>生***的铁剑</td>
            <td  rowspan="3">1</td>
            <td>50g</td>
        </tr>
        <tr>
            <td>全新铁剑</td>
            <td>250g</td>
        </tr>
        <tr>
            <td>锻造过的银制剑</td>
            <td>550g</td>
        </tr>
 
        <!-- 底部 -->
        <tr>
            <td colspan="2">合计需价格</td>
            <td>0g</td>
        </tr>
</table>

X@TLH5)ARZ(_(~9U`TVNOAQ.png

网页中就这个样子

理解完这个表格与列表，勇者突然跟咱抗议，说没给他搞个设定，那好那好咱们来用表单来给他搞个设定用表单：

<h3>勇者角色重设</h3>
    <form action="resct.php" method="post">
        <p>
            <label for="game_name">角色名：</label>
            <input type="text" id="game_name" name="game_name" placeholder="不能超过8个字符"><!-- 一般来说这个文本框是输入文字数据的属性，一般用在简短的文字比如昵称之类的功能上-->
        </p>
        <p>
            <label for="password">解放密码：</label>
            <input type="password" name="password" id="password" placeholder="必须在6-12位之间" </p><!-- 这个密码框会将输入的数据直接隐藏不可见，所以用于密码设置是最适合的-->
            <p>
                <label for="email">求救箱</label>
                <input type="email" name="email" id="email" placeholder="help@email.com"><!-- 这个文本框是输入符合邮箱结构数据的属性，他拥有判断是不是输入email数据的功能所以用在邮箱输入再适合不过了-->
            </p>
            <p>
                <label for="">性别：</label>
                <input type="radio" name="gengder" id="boy" checked><label for="boy">男孩</label>
                <input type="radio" name="gengder" id="girl"><label for="girl">女孩</label>
                <input type="radio" name="gengder" id="futa"><label for="futa">扶她</label><!-- 这个单选框是只能选择一个选项的标签，用在只能选一个选项的场景中非常适合-->
            </p>
            <p>
                <label for="age">年龄：</label>
                <input type="number" name="age" id="age" min="12" max="80"><!-- 这个数字框是只能选择一个整数的标签，用在只能输入整数有上下限的场景中非常适合比如说年龄-->
 
            </p>
            <p>
                <label for="">天赋</label>
                <!-- 下拉列表 -->
                <select name="" id="">
                    <optgroup>
                            <option value="">无能</option>
                            <option value="">武术精通</option>
                            <option value="">刀具精通</option>
                            <option value="">冷兵器精通</option>
                            <option value="">热武器精通</option>
                            <option value="">载具王者</option>
                    </optgroup>
                    <optgroup label="能力">
                        <option value="">冲刺</option>
                        <option value="">防御</option>
                        <option value="">隐蔽</option>
                    </optgroup>
                </select><!-- 下拉列表框适合使用在选择数据的数据量过多的场景中，这样就会有利于画面的整洁-->
            </p>
            <p>
                <label for="">学习倾向：</label>
                <input type="checkbox" name="school[]" value="sox" id="sox"><label for="sox">社交</label>
                <input type="checkbox" name="school[]" value="shop" id="shop"><label for="shop">经商</label>
                <input type="checkbox" name="school[]" value="fire" id="fire"><label for="fire">战斗</label>
                <input type="checkbox" name="school[]" value="going" id="going"><label for="going">探索</label>
                <input type="checkbox" name="school[]" value="miorr" id="miorr"><label for="miorr">经营</label><!-- 这个多选框适合于选择多个属性的场景，像添加功能的这类地方-->
            </p>
            <p>
                <input type="button" value="确定重设" name="submit">
                <button>不改了</button><!-- 所有的表单都需要一个提交功能，一般都是直接用像这样的按钮标签来控制-->
            </p>
    </form>

 显示在网页中就这样：

C_1{D)9JFJHYIRX}HJDV0)Q.png

那么勇者现在是啥意思呢？哦，回去睡觉了啊，这样真的能打到魔王嘛？

那么本次就先这么告一段落了。在这里总结一下，列表一般用于罗列清单或者做导航用的。表格则是表现有关系的数据而做的，表单则是使用于类似于对单个对象的多个属性进行操作的场景，这三个功能各有用处，配合属性控制样式估计能搞出来有模有样的界面出来。


Correction status：qualified

Teacher's comments：作业写得非常的轻松幽默,估计生活也是一个开朗幸福的人... 总结的相当好, 对于新人非常的友好, 值得一看
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！