【HTML5】-03 结构与标签应用

最新推荐文章于 2021-09-01 19:31:37 发布

Nameless-Y

最新推荐文章于 2021-09-01 19:31:37 发布

阅读量59

点赞数

分类专栏： html5+css3 文章标签： html

本文链接：https://blog.csdn.net/yang1111111112/article/details/113644092

版权

html5+css3 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

学习笔记：

<!-- 声明html5文档类型 -->
<!DOCTYPE html>

<!-- html文档开始标签，对应还有结尾标签 -->
<html>

<!-- 头部，head标签对 -->
<head>

    <meta charset="UTF-8">

    <!-- title用于定义网页标签名 -->
    <title>你好</title>

    <!-- 可以在style标签对中，自定义一些标签 -->
    <style>
        /* <!-- span自定义样式 --> */
        /* 在 style中的注释居然不一样（查了style是css） */
        span{
            color:blue;
        }
        mydiy{
            color:red;
        }
    </style>
    
    
</head>

<!-- 网页要展示的内容放在body标签对中，可以包含很多其他的标签对 -->
<body>
    <header>我是头部标签</header>
    <section>我是一个区域</section>
    <aside>我是侧边栏</aside>
    <footer>我是底部标签</footer>

<!-- hr标签，单标签，用于水平分隔线 -->
<hr>
    <!-- hx各类标题标签对 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题，可以一直到6级</h3>

<hr>
    <!-- ol li标签对是有序列表 -->
    <h2>热门课程排行榜</h2>
    <ol>
        <li>前端开发面试心法 </li>
        <li>零基础学习html</li>
        <li>javascript全攻略</li>
    </ol>
    <!-- ul li 标签对是无序列表 -->
    <h2>最新课程排行</h2>
    <ul>
        <li>版本管理工具介绍—Git篇 </li>
        <li>Canvas绘图详解</li>
        <li>QQ5.0侧滑菜单</li>
    </ul>

<hr>
    <!-- p标签对中用于放置文章段落 -->
    <p>
        <!-- 这是自定义的样式 span 和 myhi -->
        春眠不觉晓<br>
        <span>处处闻啼鸟</span><br>
        <mydiy> 夜来风雨声</mydiy><br>
        花落知多少

    </p>
<hr>
<!-- div定义一个块区，对整个块区操作 -->
<div style="color:#ffa600">
    <!-- table标签对用于创建表格，以及标签对：
        tr：一行（table row）  
        th：头单元格(table headercell)
        td：一个单元格(table datacell，表中的数据单元) 
        thead：表头头部
        tbody：表格主体
        tfoot：表格脚注 
    -->
    <p>表格开始了</p>
    <table>
        <!-- table标签里面可以放caption标签，定义表格标题 -->
        <caption>说明：这是一个表格</caption>

        <thead>
            <tr>
                <th>姓名-----</th>
                <th>头像-----</th>
                <th>百科-----</th>
                <th>作品-----</th>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td>胡歌</td>
                <td>无</td>
                <!-- 使用a标签插入链接，新标签页打开<a href="#" target="_blank"></a> -->
                <td><a href="https://baike.baidu.com/item/%E8%83%A1%E6%AD%8C/312718?fr=aladdin",target="_blank">百科</a></td>
                <td>男</td>

            </tr>
            <tr>
                <td>孙俪</td>
                <td>未知</td>
                <td><a href="">百科</a></td>
                <td>女</td>
            </tr>
        </tbody>
        
        <tfoot>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tfoot>
    </table>
    <p>表格结束了</p>
</div>
<hr>
    <!-- 使用&nbsp;实现空格 -->
    梦里&nbsp;花落知多少
<hr>

</body>

</html>

效果如下：