html部分知识总结-2019年8月30日20点

问题一：谈谈你对html标签, 元素与属性的理解, 并举例说明

答：

1. html标签一般分为双标签和单标签，双标签为成对的标签，有开头和结尾，如<h1></h1>、<p></p>、<span></span>等，单标签为单个的标签，如<br>、<hr>等。

2. html元素是可以描述网页的构成，是从开始标签<div>到结束标签</div>之间的所有代码。

3. html属性是由元素属性和值来组成，如a标签中的href、target，img标签中的src、width、height属性等，对应调用链接和图片，浏览器根据预设来显示效果。

问题二：列表有几种, 如何定义?

答：列表分为无序列表、有序列表及定义列表

1. 无序列表：

   
   

   <ul>
   <li>无序列表</li>
   <li>无序列表</li>
   <li>无序列表</li>
   </ul>

   
   

2. 有序列表：

   
   

   <ol>
   <li>有序列表</li>
   <li>有序列表</li>
   <li>有序列表</li>
   </ol>

   
   

3. 定义列表：

   
   

   <dl>
   <dt>标题</dt>
   <dd>内容</dd>
   <dd>内容</dd>
   <dd>内容</dd>
   </dl>

   
   

问题三：列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?

答：列表和表格简单来说都是对成列数据的展示，区别在于列表常用于展示单一格式的内容，而表格常用于展示比较复杂的内容，通过表格展示可以一目了然。

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

答：

1.无序列表实例

<ul>
<li>1.学会前端</li>
<li>2.学会php编程</li>
<li>3.根据实际需求学会解决问题的方式与方法</li>
</ul>

2.有序列表实例

<ol>
<li>学会前端</li>
<li>学会php编程</li>
<li>根据实际需求学会解决问题的方式与方法</li>
</ol>

3.定义列表实例

<dl>
<dt>学习目标</dt>
<dd>1.学会前端</dd>
<dd>2.学会php编程</dd>
<dd>3.根据实际需求学会解决问题的方式与方法</dd>
</dl>

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

答：

<table border="1" width="600" cellspacing="0" cellpadding="5">
        <caption>
            <h3>仪表台避光垫</h3>
        </caption>
        <!-- 表头 -->
        <thead>
            <th>名称</th>
            <th>编号</th>
            <th>颜色</th>
            <th>价格</th>
            <th>数量</th>
            <th>金额</th>
        </thead>
        <!-- 表体 -->
        <tr>
            <td rowspan="3">防滑避光垫</td>
            <td>1</td>
            <td>黑色黑边</td>
            <td>68</td>
            <td>1</td>
            <td>68</td>
        </tr>
        <tr>
            <td>2</td>
            <td>黑色红边</td>
            <td>68</td>
            <td>2</td>
            <td>136</td>
        </tr>
        <tr>
            <td>3</td>
            <td>黑色咖边</td>
            <td>58</td>
            <td>1</td>
            <td>58</td>
        </tr>
        <!-- 表尾 -->
        <tr>
            <td colspan="4" align="center">总计：</td>
            <td>4</td>
            <td>262</td>
        </tr>
    </table>

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

答：

<form action="#">
        <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="请输入密码" />
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="example@qq.com" />
        </p>
        <p>
            <label for="">性别：</label>
            <input type="radio" id="male" name="sex" /><label for="male">男</label>
            <input type="radio" id="female" name="sex" /><label for="female">女</label>
            <input type="radio" id="secrecy" name="sex" checked /><label for="secrecy">保密</label>
        </p>
        <p>
            <label for="">爱好：</label>
            <input type="checkbox" id="basketball" name="fonds[]" /><label for="basketball">篮球</label>
            <input type="checkbox" id="work" name="fonds[]" /><label for="work">编程</label>
            <input type="checkbox" id="music" name="fonds[]" /><label for="music">听歌</label>
        </p>
        <p>
            <label for="">课程：</label>
            <select name="" id="">
                    <option value="">请选择</option>
                <optgroup label="后端">
                    <option value="">php</option>
                    <option value="">mysql</option>
                    <option value="">laravel</option>
                </optgroup>
                <optgroup label="前端">
                    <option value="">html</option>
                    <option value="">css</option>
                    <option value="">javascript</option>
                </optgroup>
            </select>
        </p>
        <p>
            <input type="submit" name="submit" value="提交" />
            <input type="reset" name="reset" value="重置" />
            <input type="button" name="button" value="按钮" />
        </p>
        <p>
            <button type="">提交</button>
        </p>
    </form>

问题七：写出总结, 对于这些常用标签的应用场景进行分析

答：

1. a标签：<a href="链接，可相对地址也可以绝对地址" target="_self当前页/_blank新开一页">链接标题</a>

2. img标签：<img src="图片地址，可用相对地址也可用绝对地址" width="宽度" height="高度" />宽和高可只写一个，浏览器会自动缩放。

3. ul.li无序列表最常用，ol.li有序列表常用语排序列表场景，dl.dt.dd用于带摘要的新闻列表等

4. table常用于展示格式比较复杂的列表场景，如员工信息列表等

5. form表单在用户注册、用户登录、企业网站的在线留言、在线订购等场景都要用到。