Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 语义化的文本元素, 连接元素, 列表元素, 图像元素, 表格元素
Blogger Information
Blog 40
fans 2
comment 1
visits 38806
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
语义化的文本元素, 连接元素, 列表元素, 图像元素, 表格元素
万物皆对象
Original
748 people have browsed it

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

实例

实例

<!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>

运行实例 »

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





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