博主信息
博文 40
粉丝 2
评论 1
访问量 46462
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
语义化的文本元素, 连接元素, 列表元素, 图像元素, 表格元素
万物皆对象
原创
858人浏览过

语义化的文本元素, 连接元素, 列表元素, 图像元素, 表格元素

实例

实例

<!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>
    <!-- p标签: 标记一个段落,会独占文档的一行  -->
    <p>This is a "p" tag</p>
    <hr>

    <!-- pre标签: 预格式化的文本, 对空格,tab 有效  -->
    <pre>演示pre标签          <-可以隔空</pre>
    <hr>

    <!-- time标签: 定义时间日期 -->
    <time>2020-04-03</time><br>
    <hr>

    <!-- abbr标签: 标记缩写的单词 -->
    <abbr title="Hyper Text Markup Language">HTML</abbr>
    <hr>

    <!-- address标签: 用于定义文档/文章作者联系信息 -->
    <address>
        作者: Tom <br>
        访问我们: tom@qq.com<br>
        USA
    </address>
    <hr>

    <!-- code标签: 用于定义计算机代码文本 -->
    <code>一段计算机代码内容</code>

    <div style="height: 20px;background: #ccc;text-align: center;">分割线</div>

    <!-- a标签: 跳转到某个网站连接(url) _blank在新选卡打开, _self在当前选项卡打开会覆盖-->
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
    <hr>
    
    <!-- ul和li标签: 无序列表 -->
    <ul>
        <li>苹果</li>
        <li>雪梨</li>
        <li>芒果</li>
    </ul>
    <hr>

    <!-- ol和li标签: 有序列表 定义start属性从3开始,默认是从1开始 -->
    <ol start="3">
        <li>牛奶</li>
        <li>面包</li>
        <li>饼干</li>
    </ol>
    <hr>

    <!-- dl,dt,dd标签: 项目描述列表 -->
    <dl>
        <dt>厨房</dt>
            <dd>冰箱</dd>
            <dd>微波炉</dd>
        <dt>客厅</dt>
            <dd>电视机</dd>
            <dd>空调</dd>    
    </dl>
    <hr>

    <!-- img标签: 插入图像 src属性:图片的路径或者url -->
    <img src="" alt="图片描述">
    <hr>

    <!-- table tr th td therd tbody tfoot caption colgroup->col 表格 -->
    <table width="500" align="center" border="1" cellpadding="5" cellspacing="0">
        <caption>课程信息表</caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>课程</th>
                <th>时间</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td rowspan="2">PHP</td>
                <td>2020-04-03</td>
                <td>正常</td>
            </tr>
            <tr>
                <td>2</td>
                <!-- <td>JavaScript</td> -->
                <td>2020-04-05</td>
                <td>正常</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Jquery</td>
                <td>2020-04-09</td>
                <td>正常</td>
            </tr>
            <tr>
                <td>4</td>
                <td>CSS</td>
                <td>2020-04-06</td>
                <td>正常</td>
            </tr>
            <tr>
                <td>5</td>
                <td>HTML</td>
                <td>2020-04-07</td>
                <td>正常</td>
            </tr>
        </tbody>
        <tfoot>
            <tr bgcolor="wheat">
                <td>备注: </td>
                <td colspan="3">请提前10分钟上课</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

运行实例 »

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





批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学