2019年8月31日html基础作业

**一、1. 谈谈你对html标签, 元素与属性的理解, 并举例说明**

html这种超文本语言就好比一个团队，既然是团队就必然有团队成员，每个html元素就等同于html的成员，每个成员又各自有自己的职能负责着属于自己的工作任务，那么属性就是成员（元素）的技能

例如：html 是团长，body就是副团长，其中团队包含着许多成员，如：h1定义了标题，同时还具有标题主次、文本大小的属性，a定义了连接，它的属性有"href"用来存放连接地址。html元素是可以同时存在多个属性的，可以说各个都是复合型人才，组合到一起就呈现出了我们所看的html页面。

**二、列表有几种, 如何定义?**

html中列表分为3种，无序列表、有序列表、定义列表

1、无序列表

<ul>
<li>List Contents</li>
<li>List Contents</li>
</ul>

2、有序列表

<ol>
<li>List Contents</li>
<li>List Contents</li>
</ol>

3、定义列表

<dl>
<dt>List title</dt>
<dd>List Contents</dd>
<dt>List title</dt>
<dd>List Contents</dd>
</dl>

**三、列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?**

列表与表格的外在表现形式不同，列表以纵向排列内容、表格同时横向、纵向排列内容。

列表：通常列表用于网站的新闻类列表、文章类列表、因为这以一类的内容表现较为简单，通常只包含标题、和摘要、作者、发布时间，用列表来展现，页面标签布局比较简练整洁，列表中的每一行相对独立，更易于页面后期维护和识别。

表格：通常用于数据比较复杂的内容表现，常用于内容页中、后台管理页面、数据繁杂的页面，表格可以充分展示每一行、每一列都包含哪些内容，同时表格的单元格排列和外边框，在数据繁杂的表现下更为紧凑，表格的每一行和每一列之间依赖关系较强。

**四、. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次:**

<li>第一次听课线上学习的感受</li>
<li>我学习到了那些知识点</li>
</ul>

<ol>
<li>第一课、环境配置</li>
<li>第二课、html基础知识</li>
</ol>

<dl>
<dt>环境配置</dt>
<dd>所需软件：PhpStudy</dd>
<dt>IDE</dt>
<dd>所需软件：VsCode、Typora</dd>
</dl>

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

<table width="900" border="1" cellspacing="0" cellpadding="10" align="center">
  <caption>2019年8月31日库存</caption>
  <thead bgcolor="#00CCFF">   
      <th colspan="7">商品库存总价清单</th>    
  </thead>
  <tr>  
    <th>商品名称</th>
    <th>所属商家名称</th>
    <th>商品分类</th>
    <th>是否上架</th>
    <th>剩余库存</th>
    <th>单价</th>
    <th>销售主管签字</th>
  </tr>
  <tr>
    <td align="center">衬衫</td>
    <td align="center">silent的***店铺</td>
    <td align="center">***</td>
    <td align="center">已上架</td>
    <td align="center">1000件</td>
    <td align="center">90元</td>
    <td align="center" rowspan="2">以签</td>
  </tr>
  <tr>
    <th colspan="5">剩余库存总价：</th>   
    <td bgcolor="#FF6600">90000元</td>
  </tr>
  <tr>
    <td align="center">裙子</td>
    <td align="center">silent的***店铺</td>
    <td align="center">***</td>
    <td align="center">已下架</td>
    <td align="center">600件</td>
    <td align="center">100元</td>
    <td align="center"  rowspan="2">未签</td>
  </tr>
  <tr>
    <th colspan="5">剩余库存总价：</th>   
    <td bgcolor="#FF6600">60000元</td>
  </tr> 
</table>

**六、编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义****

<h2>新用户注册</h2>
<form action="silent.php" method="post">
  <p>
    <label for="username"><strong>帐号：</strong></label>
    <input id="username" type="text" placeholder="用户名不得包含特殊字符，例如：#￥%&"  style="width:300px;"/>
  </p>
  <p>
    <label for="userpassword"><strong>密码</strong>：</label>
    <input id="userpassword" type="password" placeholder="密码首字母必须为大写"  style="width:300px;"/>
  </p>
  <p>
    <label for="useremail"><strong>年龄</strong>：</label>
    <input id="useremail"  value="18" type="number" placeholder="请输入年龄"  style="width:300px;"/>
  </p>
  <label for="sex"><strong>性别</strong>：</label>
  <select id="sex">
    <option>请选择</option>
    <option>男</option>
    <option>女</option>
    <option>你猜？</option>
  </select>
  <label for="team"><strong>加入团队</strong></label>
  <select id="team"> 
    <option>请选择团队</option>
    <optgroup label="联盟"> 
    <option>打死部落</option>
    <option>队长别开***是我</option>
    </optgroup>
    <optgroup label="部落"> 
    <option>打死联盟</option>
    <option>队长你在不开团，我就去对面了</option>
    </optgroup>
  </select>
  <p>
  <label><strong>出生村落</strong></label>
   <label for="village1">高家庄</label>
   <input id="village1" name="attack" type="radio" />
   <label for="village2">马家盒子</label>
   <input id="village2" name="attack" type="radio" />
  </p>
  <p>
   <label><strong>你的擅长</strong></label>
   <label for="goodat1">进攻</label>
   <input id="goodat1" name="attack" type="checkbox" />
   <label for="goodat2">防御</label>
   <input id="goodat2" name="defense"  type="checkbox" /> 
   <label for="goodat3">偷袭</label>
   <input id="goodat3" name="sneak"  type="checkbox" /> 
   </p>
  <p>
    <label for="useremail"><strong>安全邮箱</strong>：</label>
    <input id="useremail" type="email" placeholder="邮箱格式：youremailname@ServerAddress.com"  style="width:300px;"/>
  </p>
  <p>
    <label for="Invitationcode "><strong>***：</strong></label>
    <input id="Invitation code" pattern="[0-9]" type="text" placeholder="请输入5位***"  style="width:120px;"/>
  </p>
  <button>提交进入战场</button>
  <button type="reset">重新填写</button>
</form>