简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML标签20190902作业
Blogger Information
Blog 14
fans 0
comment 0
visits 9703
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标签20190902作业
德性的博客
Original
660 people have browsed it

一、html标签, 元素与属性

        HTML文档是由各种HTML元素组成的，如html元素（HTML文档根元素）、head（HTML头部）元素、

body（HTML主体）元素、title(HTML标题)元素和p（段落）元素等，这些元素都是通过尖括号“<>”组成的

标签形式来表现的。

        标签有单标签和双标签，

        单标签如<img src="test.jpg">

        双标签是一对标签<p>test</p>

       属性提供了对HTML元素的描述和控制信息，例如要设置<p>元素中文字内容的颜色为红色，字号为30像素

在<p>元素名称的尖括号内添加了“style="color:#ff0000;font-size:30px"”内容，浏览器就会按照设定的效果来显示内容。

        如：<p style="color:#ff0000;font-size:30px">test</p>

二、列表

        有三种有序、无序和定义列表

        有序列表：有序列表也是一列项目，列表项目使用数字进行标记。


        <ol>
            <li>Coffee</li>
            <li>Milk</li>
        </ol>

        无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

        <ul>
                <li>Coffee</li>
                <li>Milk</li>
        </ul>

        定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。

        <dl>
            <dt>Coffee</dt>
                <dd>Black hot drink</dd>
            <dt>Milk</dt>
                <dd>White cold drink</dd>
        </dl>

三、列表与表格的区别与联系

    如果用一列数据表示用列表，如果用多列数据表示用表格。

    当单行单列数据时表格和列表都可以

    对于多列且每一列之间有关联的数据适合用表格进行组织。

四、用列表制作工作计划

实例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=uul , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用三种列表制作工作计划</title>
</head>

<body>
    <ul>
        <li>2019年第1周，完成工作任务A</li>
        <li>2019年第2周，完成工作任务B</li>
        <li>2019年第3周，完成工作任务C</li>
        <li>2019年第4周，完成工作任务D</li>
        <li>2019年第5周，完成工作任务E</li>
    </ul>
    <ol>
        <li>2019年第1周，完成工作任务A</li>
        <li>2019年第2周，完成工作任务B</li>
        <li>2019年第3周，完成工作任务C</li>
        <li>2019年第4周，完成工作任务D</li>
        <li>2019年第5周，完成工作任务E</li>
    </ol>
    <dl>
        <dt>2019年1月份工作计划</dt>
        <dd>第1周，完成工作任务A</dd>
        <dd>第2周，完成工作任务B</dd>
        <dd>第3周，完成工作任务C</dd>
        <dd>第4周，完成工作任务D</dd>
        <dt>2019年2月份工作计划</dt>
        <dd>第5周，完成工作任务E</dd>
        <dd>第6周，完成工作任务F</dd>
        <dd>第7周，完成工作任务G</dd>
        <dd>第8周，完成工作任务H</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>
    <table border="1" width="800" cellspacing="0" cellpadding="5">
        <caption>
            <h3>商品清单</h3>
        </caption>
        <thead>
            <th>序号</th>
            <th>类别</th>
            <th>品名</th>
            <th>规格</th>
            <th>单价</th>
            <th>单位</th>
            <th>数量</th>
            <th>金额</th>
        </thead>
        <tr>
            <td>1</td>
            <td rowspan="3">食品</td>
            <td>花生</td>
            <td>1#</td>
            <td>5</td>
            <td>公斤</td>
            <td>10</td>
            <td>50</td>
        </tr>
        <tr>
            <td>2</td>
            <td>瓜子</td>
            <td>2#</td>
            <td>2</td>
            <td>公斤</td>
            <td>5</td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>苹果</td>
            <td>4#</td>
            <td>5</td>
            <td>公斤</td>
            <td>2</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4</td>
            <td rowspan="2">日用品</td>
            <td>牙膏</td>
            <td>2#</td>
            <td>10</td>
            <td>支</td>
            <td>2</td>
            <td>20</td>
        </tr>
        <tr>
            <td>5</td>
            <td>洗发水</td>
            <td>4#</td>
            <td>20</td>
            <td>瓶</td>
            <td>10</td>
            <td>200</td>
        </tr>
        <tr>
            <td colspan="6" align="center">合计：</td>
            <td>29</td>
            <td>290</td>
        </tr>
        <tfoot>
            <tr>
                <td>备注：</td>
                <td colspan="7">以上清单为2019年第1周的数据</td>
            </tr>
        </tfoot>

    </table>
</body>

</html>

运行实例 »

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

六、注册表单

实例

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

<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>
    <h3>用户注册</h3>
    <form action="login.php" method="POST">
        <p>
            <label for="username">账号：</label>
            <input type="text" id="username" name="username" placeholder="不能超过8个字符">
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="必须6-12位之间">
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="example@test.com">
        </p>
        <p>
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" min="16" max="80">
        </p>
        <p>
            <label for="kc">课程</label>
            <select name="kc" id="kc">
                <optgroup label="前端">
                    <option value="">请选择</option>
                    <option value="HTML">HTML</option>
                    <option value="CSS">CSS</option>
                    <option value="JavaScript" selected>JavaScript</option>
                </optgroup>
                <optgroup label="后端">
                        <option value="PHP">PHP</option>
                        <option value="C++">C++</option>
                        <option value="JAVA">JAVA</option>
                </optgroup>
            </select>
        </p>
        <p>
            <label for="">爱好：</label>
            <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label>
            <input type="checkbox" name="hobby[]" value="music" id="music"><label for="music">音乐</label>
        </p>
        <p>
            <label for="">性别：</label>
            <input type="radio" name="gender" id="male"><label for="male">男生</label>
            <input type="radio" name="gender" id="female"><label for="female">女生</label>
        </p>
        <p>
            <input type="submit" name="submit" value="提交">
            <input type="reset" name="reset" value="重写">
            <input type="button" name="button" value="按钮">
            <button>注册</button>
        </p>
    </form>
</body>

</html>

运行实例 »

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

七、总结

  1.  列表有三种，分别是无序列表、有序列表、定义列表三种；列表主要用于单列显示，表格用于多列相关性数据显示；

  2. 表格<table>有标题<captioon>、表头<thead>、表体、表格脚本<tfoot>四部分组成，<tr>用于显示行;

    <th>用于表头内加粗字体显示列，<td>用于显示一般字体的列，多用于表体；rowspan用于合并列单元格， 

    colspan用于合并行单元格；

  3. 表单<from>是向服务器提交数据的界面，包含很多控件。


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！