1209 作业

1209 作业

列表元素有:

1.无序列表 ul+li

<ul>
<li>内容</li>
</ul>

2.有序列表 ol+li

<ol>
<li>内容</li>
</ol>

3.自定义列表 dl+dt+dd

<dl>
<dt>名称</dt>
<dd>内容</dd>
</dl>

表格的制作:

    <!-- 
    table 组成表格的结构
    caption 表格标题
    thead 表头 每个表格只允许出现一次
    tbody 主体
    tr 每个表格的行数
    td 每个表格的列数 ~ 所有表格内容都在里面填写 
    th 是td的扩展版，文字居中且加粗
    colspan 行合并
    rowspan 列合并
    -->
    <table border="1">
        <caption>php中文网14期学员课程表</caption>
        <thead>
            <tr>
            <th colspan="2"></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        </thead>
    <tbody>
        <tr>
            <td rowspan="4">上午</td>
            <td>1</td>
            <td>HTML</td>
            <td>CSS</td>
            <td>PHP</td>
            <td>JS</td>
            <td>MYSQL</td>
        </tr>
        <tr>
            <td>2</td>
            <td>PHP</td>
            <td>JS</td>
            <td>CSS</td>
            <td>CSS</td>
            <td>JS</td>
        </tr>
        <tr>
            <td>3</td>
            <td>CSS</td>
            <td>PHP</td>
            <td>MYSQL</td>
            <td>HTML</td>
            <td>JS</td>
        </tr>
        <tr>
            <td>4</td>
            <td>HTML</td>
            <td>CSS</td>
            <td>JS</td>
            <td>PHP</td>
            <td>CSS</td>
        </tr>
        <tr>
            <th colspan="7">中午休息</th>
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td>5</td>
            <td>JS</td>
            <td>PHP</td>
            <td>MYSQL</td>
            <td>CSS</td>
            <td>PHP</td>
        </tr>
        <tr>
            <td>6</td>
            <td>实战</td>
            <td>实战</td>
            <td>实战</td>
            <td>实战</td>
            <td>实战</td>
        </tr>
        <tr>
            <td>7</td>
            <td colspan="4">课外活动</td>
            <td>全体大扫除</td>
        </tr>
    </tbody> 
    </table>

表格示例如下图

表单的控件与实例:

 action 接收表单内容的程序
 method 提交内容的方式，有两种
 value 数据内容
 name 数据的变量名
 1. GET 方法提交的内容显示在URL中，即也是默认方式
 2. POST 方法提交到请求体中，如数据库，JS等
 type:控件类型，text：通用类型，email:邮箱，password：密码/非明文
 required 提交的数据不能为空
 placeholder 提示文本
 radio 单选框
 checkbox 复选框
 checked 默认选项
 select 下拉框 由 option 赋值 默认值为selected
 hidden 隐藏域

例子如下

通用型：
<label for="username">姓名:</label>
<form action="demo.php" method="POST">
    <input type="text" id="username" required placeholder="用户名">
</form>

---

邮箱类型：
<label for="email">邮箱:</label>
<form action="demo.php" method="POST">
    <input type="email" id="email" required placeholder="name@url.com">
</form>

---

密码类型：
<label for="password">密码:</label>
<form action="demo.php" method="POST">
    <input type="password" id="password" required placeholder="至少8位数且有字母">
</form>

---

单选框：
<label for="boy">性别:</label>
  <div>
    <!-- 单选按钮共用名称的name属性值，否则无法实现唯一性 -->
    <input type="radio" name="sex" value="boy" id="boy" /><label for="boy" checked>男</label>
    <input type="radio" name="sex" value="girl" id="girl" /><label for="girl">女</label>
  </div>

---

复选框：
<label for="#">兴趣:</label>
  <div>
    <!-- 复选框的name属性值应该写与数组的格式名称[],这样才确保服务器可以接收到一组值 -->
    <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
    <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
    <input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label>
  </div>

示例如下图