简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 列表的分类与表格的关系
Blogger Information
Blog 9
fans 1
comment 0
visits 9151
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
列表的分类与表格的关系
jiangxiaobai
Original
934 people have browsed it

元素：

元素就是组成html的基本对象，并且任何网页浏览器都可以直接运行HTML文件。

标签：

标签就是具体的代码块比如<head></head><div></div><a></a>大部分的标签都是成对出现的。

当然也有单标签，比如<hr/><img/><br/>等

属性：

为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形式出现

比如img表的的"href"，和input标签的"type"属性等。



前端开发中经常使用的标签  列表

列表有有三种：

无序列表<ul></ul>

有序列表<ol></ol>

定义列表<dl></dl>

表格标签<table></table>

列表与表格的关系，什么时候用列表，时候用表格？

大多数情况下我们一般使用的都是无序列表<ul></ul>一般用在网站的导航栏，新闻页面的标题等。

表格一般用在显示网站数据，也用做布局使用，主要就是显示一个数据表里面的数据，一般在网站后台管理系统中比较常用。


一个小demo案例--工作计划

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>工作计划--列表标签的使用</title>
</head>

<body>
<h2>工作计划</h2>
<ul>
<li>html元素属性之间的关系</li>
<li>前端课程开发讲解</li>
<li>php实战cms</li>
</ul>
<ol>
<li>开发环境的搭建</li>
<li>html标签的使用</li>
<li>css样式表的使用</li>
<li>php大型实战cms</li>
</ol>
<dl>
<dt>前端主要学习的内容</dt>
<dd>前端主要学习html,css,js，jquery...</dd>
<dt>后端主要学习的内容</dt>
<dd>后端开发中主要学习php后端语言以及mysql关系型数据库</dd>
</dl>

</body>

</html>

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>工作计划--列表标签的使用</title>
</head>

<body>
    <h2>工作计划</h2>
    <ul>
        <li>html元素属性之间的关系</li>
        <li>前端课程开发讲解</li>
        <li>php实战cms</li>
    </ul>
    <ol>
        <li>开发环境的搭建</li>
        <li>html标签的使用</li>
        <li>css样式表的使用</li>
        <li>php大型实战cms</li>
    </ol>
    <dl>
        <dt>前端主要学习的内容</dt>
        <dd>前端主要学习html,css,js，jquery...</dd>
        <dt>后端主要学习的内容</dt>
        <dd>后端开发中主要学习php后端语言以及mysql关系型数据库</dd>
    </dl>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

商品清单demo案例

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品清单--demo</title>
</head>

<body>
    <table border="1" cellspacing='0' cellpadding="5" width="300" >

        <caption>清单demo</caption>
        <tr>
            <th>分类</th>
            <th>书名</th>
            <th>价格</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
        <tr>
            <td rowspan="5">书籍大全</td>
            <td>php</td>
            <td>20</td>
            <td>5</td>
            <td>80</td>
        </tr>
        <tr>
            <td>jquery</td>
            <td>20</td>
            <td>2</td>
            <td>60</td>
        </tr>
        <tr>
            <td>asp</td>
            <td>20</td>
            <td>2</td>
            <td>60</td>
        </tr>
        <tr>
            <td>java</td>
            <td>20</td>
            <td>2</td>
            <td>60</td>
        </tr>
        <tr>
            <td>c#</td>
            <td>20</td>
            <td>2</td>
            <td>60</td>
        </tr>
        <tr>
            <td colspan='3'>合计</td>
            <td>13</td>
            <td>350</td>

        </tr>
    </table>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

注册表单demo

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册demo</title>
</head>

<body>
    <h2>注册demo</h2>
    <form action="">
        <p>
            <label for="username">姓名:</label>
            <input type="text" name="username" id="username" placeholder="请填写用户名">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" placeholder="输入密码">
        </p>
        <p>
            <label for="age">年龄:</label>
            <input type="number" name="age" id="age" min="18" max="100">
        </p>
        <p>
            <label for="hobby">爱好:</label>
            <input type="checkbox" name="hobby[]" id="daqiu">
            <label for="daqiu">打球:</label>

            <input type="checkbox" name="hobby[]" id="game">
            <label for="game">游戏:</label>

            <input type="checkbox" name="hobby[]" id="code" checked>
            <label for="code">编程</label>
        </p>
        <p>
            <label for="">性别:</label>
            <label for="male">男生<input type="radio" name="gender" id="male"></label>
            <label for="female">女生<input type="radio" name="gender" id="female"></label>
            <label for="secret">保密<input type="radio" name="gender" id="secret" checked></label>
        </p>
        <p>
            <label for="">课程：</label>
            <select name="" id="">
                <optgroup label="前端">
                    <option value="">html</option>
                    <option value="">css</option>
                    <option value="">javascript</option>
                </optgroup>
                <optgroup label="后端">
                    <option value="">php</option>
                    <option value="">mysql</option>
                    <option value="">laraver</option>
                </optgroup>
            </select>
        </p>
        <p>
            <label for="">按钮：</label>
            <input type="submit" value="提交">
            <input type="reset" value="重填">
            <input type="button" value="按钮">
            <button>提交</button>
        </p>

    </form>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：unqualified

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！