博客列表 >谈谈你对html标签, 元素与属性的理解, 并举例说明

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

小码哥的博客
小码哥的博客原创
2019年08月31日 18:46:031438浏览

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

答:此元素可告知浏览器其自身是一个 HTML 文档。元素是文档的根元素,属性可以为元素标签添加各种可以丰富展示效果的。

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

答:有三种列表;有序列表<ul><li></li></ul>,无序列表<ol><li></li></ol>,自定义列表<dl><dt></dt><dd></dd></dl>

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

答:列表是单行排列,表格是多行排列。二者可以互相嵌套使用。文章布局排列的时候使用列表,商品展示使用表格,这样优化选择可以减少代码臃肿,加快打开速度!


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

实例

<ul>
        <li>前端布局熟练掌握</li>
        <li>熟练使用Html对页面进行搭建</li>
        <li>熟练使用css进行页面布局</li>
        <li>熟练使用Js进行页面效果的实现</li>
    </ul>
    <ol>
        <li>能把前端所学的根据自己的项目做一个企业的网站</li>
        <li>对经常使用的代码进行封装</li>
        <li>能熟练使用各种页面特效的制作</li>
    </ol>
    <dl>
        <dt>学会使用PHP进行后台搭建</dt>
        <dd>熟练操作Mysql进行各种表的搭建和表与表之间的联系</dd>
        <dt>熟练larave框架的开发流程</dt>
        <dd>结合Lareve框架能快速开发企业网站和各种大型网站的后台</dd>
    </dl>

运行实例 »

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

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


实例

<table border="1px" style="text-align:center;">

        <tr>
            <td colspan="5" style="text-align: center;background-color: brown">
                水果价格清单
            </td>
        </tr>


        <tr style="background-color: chartreuse">
            <td>商品</td>
            <td>数量</td>
            <td>单价</td>
            <td>总价</td>
            <td rowspan="6" style="writing-mode : tb-rl ; width: 20px">
                <strong>购物车清单</strong>
            </td>
        </tr>
        <tr>
            <td>苹果</td>
            <td>20</td>
            <td>5</td>
            <td>100</td>
        </tr>
        <tr>
            <td>梨子</td>
            <td>10</td>
            <td>5</td>
            <td>50</td>
        </tr>
        <tr>
            <td>橙子</td>
            <td>5</td>
            <td>8</td>
            <td>40</td>
        </tr>
        <tr style="background-color: yellow">
            <td colspan="3" style="text-align: right;color: crimson;"><strong>共计:</strong></td>
            <td><strong>190</strong></td>
        </tr>

    </table>

运行实例 »

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

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

实例

<h1>用户注册</h1>
    <form action="1.php" method="POST">

        <label>用户名:</label> <br>
        <input name="user" id="user" type="text" placeholder="请输入用户名" />
        <br><label>密 码:</label>
        <br> <input name="pwd" id="pwd" type="password" placeholder="请输入密码" />
        <br><label>邮 箱:</label>
        <br><input name="email" id="email" type="email" placeholder="请输入邮箱" />
        <br><label>国籍:
            <select name="guojia">
                <option>请选择</option>
                <option>中国</option>
                <option>***</option>
                <option>英国</option>
                <option>德国</option>
                <option>泰国</option>
        </select>
        
    </label>
        <br>
        <label>性别:
        <input type="radio" name="gender"/>男
        <input type="radio" name="gender"/>女
    </label>
        <br>
        <textarea name="message" rows="10" cols="30">
         自我介绍
        </textarea>
        <br/>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <button type="submit">提交</button>

    </form>

运行实例 »

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

7. 写出总结, 对于这些常用标签的应用场景进行分析

答:表单注册一般用于数据与后台交互的一种使用场景,保存用户的信息。表格用于数据内容的展示布局清晰;列表一般对于文章的排列使用最多;超链接标签用于页面之间的跳转和访问;

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议