学习HTML中标签，元素及属性和列表、表单的运用 19年8月30日

1.谈谈你对html标签, 元素与属性的理解, 并举例说明
HTML标签是由一对<>及标签名组成，分两种

双标签,<p></p> ，<td></td>，由起始标签和结束标签组成，结束标签是<>内加上/和标签名

单标签<hr/>,由标签名和/组成

HTML元素是组成HTML文档最基本的部件，简单来说，就是由起始标签和结束标签和标签中的内容组成元素，比如<p>这个一个段落元素内容</p>

HTML的标签属性指的是一个标签他拥有的属性，让标签拥有更多的特征或信息，比如<h1 align="center">，让h1标签的元素内容居中

2.列表有几种, 如何定义?

<!-- 1.无序列表 -->
 
    <ul>
        <li>1.机油，1个，300</li>
        <li>2.火花塞，1个，200</li>
        <li>3.油门，1个，1000</li>
    </ul>
<!-- 2.有序列表 -->
    <ol>
        <li>机油，1个，300</li>
        <li>火花塞，1个，200</li>
        <li>油门，1个，1000</li>
    </ol>
<!-- 3.定义列表 -->
    <dl>
        <dt>php</dt>
        <dd>全球最流行的通用服务器端编程语言</dd>
    </dl>

运行实例 »

3.列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?

区别，标签不一样，列表标签为ul,ol,li,dl,dt,表格table,且tr,td标签必须在table标签内

           显示内容含义不一样

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

4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>

实例

 <h3>工作计划</h3>
    <ul>
        <li>1、09：00 晨会</li>
        <li>2、10：00-12：00 客户需求处理</li>
        <li>3、14：30-16：30 代码提交</li>
        <li>4、16：30-17：30 填写工作日报</li>
    </ul>

    <h3>工作计划</h3>
    <ol>
        <li>09：00 晨会</li>
        <li>10：00-12：00 客户需求处理</li>
        <li>14：30-16：30 代码提交</li>
        <li>16：30-17：30 填写工作日报</li>
    </ol>

    <h3>工作计划</h3>
    <dl>
        <dt>09：00晨会</dt>
        <dd>确定当天工作内容及安排</dd>
        <dt>10：00-12：00 客户需求处理</dt>
        <dd>完成客户提交的需求并进行处理</dd>
        <dt>14：30-16：30 代码提交</dt>
        <dd>提交代码及说明到代码管理平台</dd>
        <dt>16：30-17：30 填写工作日报</dt>
        <dd>完成当天工作日报</dd>
    </dl>

运行实例 »

5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan

实例

    <table border="1" width="500" cellspacing="0" cellpadding="5">
        <caption>
            <h3>购物车</h3>
        </caption>
        <!-- 表头 -->
        <thead>
            <tr bgcolor="lightblue">
                <th>类别</th>
                <th>序号</th>
                <th>名称</th>

                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <!-- 主体 -->
        <tr>
            <td rowspan="3" align="middle" valign="middle">商<br>品<br>类<br>别</td>
            <td>1</td>
            <td>商品1</td>
            <td>800</td>
            <td>1</td>
            <td>800</td>
        </tr>
        <tr>

            <td>2</td>
            <td>商品2</td>
            <td>300</td>
            <td>2</td>
            <td>600</td>
        </tr>
        <tr>
            <td>3</td>
            <td>商品3</td>
            <td>7800</td>
            <td>1</td>
            <td>7800</td>
        </tr>
        <!-- 底部 -->
        <tr>
            <td colspan="4" align="right">合计:</td>
            <td>4</td>
            <td>9200</td>
        </tr>

    </table>

实例

    <h3>用户注册</h3>
    <form action="login.php" method="POST">
        <p>
            <label for="username">账号：</label>
            <input type="text" id="username" name="username" placeholder="请输入英文或数字">
        </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="emaple@email.com">
        </p>
        <p>
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" min="16" max="80">
        </p>


        <p>
            <label for="lessson">请选择专业方向</label>
            <!-- 下拉列表 -->
            <select name="" id="">
                <optgroup label="前端">
                        <option value="">请选择</option>
                        <option value="">HTML5</option>
                        <option value="">CSS3</option>
                        <option value="">JavaScript</option>
                 </optgroup>
             
                <optgroup label="后端">
              
                <option value="">php</option>
                <option value="">mysql</option>
                <option value="">laravel</option>
                </optgroup>
           </select>
        </p>

        <P>
            <LAbel for="">爱好：</LAbel>
            <input type="checkbox" name="hobby[]" value="book" id="book"><label for="book">看书</label>
            <input type="checkbox" name="hobby[]" value="sport" id="sport"><label for="sport">运动</label>
            <input type="checkbox" name="hobby[]" value="travel" id="travel"><label for="travel">旅游</label>
        </P>

        <P>
            <LAbel for="male">性别</LAbel>
            <input type="radio" name="gender" id="male"><label for="male">男生</label>
            <input type="radio" name="gender" id="female"><label for="female">女生</label>
            <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label>


        </P>

        <p>
            <input type="submit" name="submit" value="提交">
            <input type="reset" name="reset" value="重填">
      
        </p>
    </form>

form标签使用来创建供用户输入的html表单

label标签一般用作表单录入的含义显示，比如姓名，性别等

input标签，根据type属性不同，录入和表现方式也不同，例如text普通文本（账户名，备注），password密码，email邮箱，number数值（年龄，或者价格范围），submit提交按钮（表单的事务提交），checkbox多选（爱好，意见，建议，投诉），radio单选（性别，或者是否的选项）

select标签一般用来创建下拉列表框

optgroup标签用来定义下拉列表框的选项组

option标签用来定义下拉列表框的子选项

，