4.3作业

1、链接元素

a标签可以是一个url跳转
如果a标签中的内容是一个文件，会触发下载
a标签也可是一个锚点，跳转本页面中的指定位置
a标签可可以用来打电话，发邮件。

2、列表元素

无序列表ul
有序列表ol
自定义列表dl

3、表格元素

tr 代表一行
一个td是一个单元格
tbody代表表格的主题部分
thead 指表头
caption 用来表示表格的标题

4、具体代码演示

<!--
 * @Descripttion: 
 * @version: 
 * @Author: pengpeng
 * @Date: 2020-04-04 16:55:41
 * @LastEditors: pengpeng
 * @LastEditTime: 2020-04-04 17:38:34
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <!-- 链接元素的演示 -->
    <div>
        <h2>链接元素</h2>
        <!-- 重新再另一个页面打开url，target 不写默认是_self -->
        <a href="http://www.baidu,com" target="_blank"></a>
        <!-- a标签也可以是一个 下载 -->
        <a href="./0403.zip">我是一个下载按钮</a>
        <!-- a标签也可以是一个锚点 -->
        <a href="#maodian">我是一个锚点</a>
        <!-- a标签也可以用来打电话 -->
        <a href="tel:151359****">打电话</a>
        <!-- 按标签可以用来发邮件 -->
        <a href="mailTo:12346@qq.com">发邮件</a> 
    </div>
    <!-- 列表元素的演示 -->
    <div>
        <div>
            <h2>无序列表</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <div>
            <h2>有序列表</h2>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ol>
        </div>
        <div>
            <h2>自定义列表</h2>
            <dl>
                <dt>水果</dt>
                    <dd>苹果</dd>
                    <dd>栗子</dd>
                    <dd>香蕉</dd>
                <dt>家电</dt>
                    <dd>洗衣机</dd>
                    <dd>冰箱</dd>
                    <dd>电饭锅</dd>
            </dl>
        </div>
    </div>
    <div>
        <h2>表格元素</h2>
        <table border="1" cellspacing="0" width="500" height="700">
            <caption>表格标题</caption>
            <thead>
                <td>id</td>
                <td>name</td>
                <td>sex</td>
                <td>address</td>
            </thead>
           <tbody>
                <tr>
                    <td>1</td>
                    <td>小十三</td>
                    <td>23</td>
                    <td>美国</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>小事儿</td>
                    <td>43</td>
                    <td>英国</td>
                </tr>
           </tbody>
        </table>
    </div>
    <div style="width: 100px;height: 100px;background-color: #6858f8;margin-top: 1000px;" id="maodian"></div>
</body>
</html>

5、总结

以前对表格，表单元素知道的很少，现在才知道原来表格有那么多属性，很多东西都值得学习，这里代码只是做了简单的演示。

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：属性很多, 今晚再教大家一些学习方法

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

form表单元素知识点预习--PHP培训十期线上班

2019-12-20 14:13:14