7月2日作业无序列表与表格学习总结 - PHP作业

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--无序列表-->
<ul>
     <!--a标签href属性等链接路径-->
    <li><a href="/">首页</a></li>
    <li><a href="/">图库</a></li>
    <li><a href="/">平面素材</a></li>
    <li><a href="/">室内素材</a></li>
    <li><a href="/">首页</a></li>
</ul>
<hr>
<!--tabley就是表格的意思-->
<table border="1" cellpadding="10"  cellspacing="0" width="500" align="left">
<!-- caption 表头-->
    <caption><h3>工资表</h3></caption>
<!-- thead 表头 一张表格只有一个表头  -->
    <thead>
<!-- tr 行   -->
<!--th(代替td） 单元格 多个单元格组成行-->
<!--bgcolor背景色-->
    <tr bgcolor="aqua">
        <th>编号</th>
        <th>姓名</th>
        <th>工号</th>
        <th>工资</th>
        <th>实发</th>
        <th>备注</th>
    </tr>
    </thead>
<!-- tbody 表格主体内容  必须要写 -->
    <tbody>
<!-- align属性=表格的左中右   -->
    <tr align="center">
<!--  width 属性表格的宽度，数值根据场景跳整      -->
        <td width="50">1</td>
        <td width="200">曾庆柳</td>
        <td width="70">001</td>
        <td width="70">3000</td>
        <td width="50">3500</td>
<!-- rowspan属性行的合并       -->
        <td width="50" rowspan="4">请财务人员注意</td>
    </tr>
    <tr>
        <td>2</td>
        <td>张三</td>
        <td>002</td>
        <td>2500</td>
        <td>3000</td>
    </tr>
    <tr>
        <td>3</td>
        <td>李四</td>
        <td>003</td>
        <td>2000</td>
        <td>2500</td>
    </tr>
    <tr>
<!-- colspan 列表合并行      -->
        <td colspan="3">总计</td>
<!--        <td></td>-->
<!--        <td></td>-->
        <td>7500</td>
        <td>9000</td>
    </tr>


    </tbody>

</table>
</body>
</html>

运行实例 »

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

表单与表单中的控件元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与表单中的控件元素</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="get" name="register" >

<!--    id 和for属性是通过对应值来绑定的 跟前后顺序无关-->
    <p>
        <label for="username">帐号：</label>
<!--    placeholder 提示信息  autofocus自动获取  -->
        <input type="text" id="username" name="uwername" placeholder="不超过8个字符" autofocus>
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="6-12个字母或数字">
    </p>
    <p>
        <label for="email">邮箱：</label>
<!--   required 必填项     -->
        <input type="email" id="email" name="email" placeholder="exampl@mail.com" required>
    </p>
    <p>
        <label for="age">年龄：</label>
<!-- min max属性是设置取值范围       -->
        <input type="number" id="age" name="age" min="16" max="70">
    </p>
    <p>
        <label for="birthday">生日：</label>
        <input type="date" id="birthday"name="birthday">
    </p>
<!--  下拉列表   -->
    <p>
        <label for="course">素材</label>
        <select name="course" id="course" sizz="1">
<!--            selected属性默认选项-->
            <option value="0" selected>请选择</option>
            <option value="1">平面素材</option>
            <option value="2">室内素材</option>
            <option value="3" >广告素材</option>
        </select>
    </p>

    <p>
<!--        复选框-->
<!--     爱好lable for属性可任意绑定子级下面的fof属性值    -->
        <label for="programme">爱好：</label>

        <input type="checkbox" name="hobby[]" value="game" id="game">
        <label for="game">摄影</label>

        <input type="checkbox" name="hobby[]" value="programe" id="programme">
        <label for="programme">跑步</label>

<!--        checked 默认值-->

        <input type="checkbox" name="hobby[]" value="programme" id="movies" checked>
        <label for="movies">看电影</label>
    </p>
<!--     radio 单选按钮     -->
<!--    name属性值必须一样-->
    <p>
       <label for="male">性别</label>

        <input type="radio" name="gender" value="male" id="male">
        <label for="male">男</label>

        <input type="radio" name="gender" value="female" id="female">
        <label for="female">女</label>

        <input type="radio" name="gender" value="secrecy" id="secrecy" checked>
        <label for="secrecy">保密</label>
    </p>

<!--    textarea 文本域-->
    <p>
        <label for="comment">个人简介</label>
<!--不要设置value -->
<!--        cols 列  rows 行    maxlength 多少个字 placeholder 提示-->
        <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea>
    </p>

<!--    input 按钮-->
    <p>
        <input type="submit" name="submit" value="提交" >
<!--        reset重置，不是删除，回到默认-->
        <input type="reset" name="reset" value="重置" >
<!--button就是按钮意思   默认type属性值submit -->
        <button type="submit">提交1</button>
        <button type="button">Ajax</button>

    </p>


</form>

</body>
</html>

运行实例 »

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

Correction status：qualified

Teacher's comments：看样子, 你是落下了不少作业, 尽快追上大部队

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

列表

表单与表单中的控件元素