HTML学习（以战养战）

已于 2024-10-31 19:37:33 修改
阅读量1.2k 收藏 42
点赞数 36
文章标签： 学习 css html5
于 2024-10-31 19:34:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65203411/article/details/143364947
版权

  • 前言 

    • 以战养战的原因是，我会通过写一个网页，来逐步将知识记录并学习。

  • div的学习

    • 引入

      • 在上一期中小方（我的代称）通过讲行标签，已经基础的讲了一下idiv的属性，但不全面

    • 属性

      • 双标签：出现<div>,在后面必须出现</div>.(你不写，你就是棒打鸳鸯)
      • 自动分行：在一段内容中，当内容没有达到必须换行的数量时，一旦在这段内容里加入div标签，它必定会换行
      • 格子属性：在html中在不设定行高的情况下，那么在div中内容占用的高都，那么div的行高就有多高（个人的理解）。可以看成高度可变的盒子

    • 运用

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>皮诺康尼折纸大学</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    第一个网页
                </div>
                <div>
                    运用div
                </div>
            </div>
            <div>
                下次尝试新的
            </div>
        </div>
        <div>
            作者：方方不太会
        </div>
    </div>
    
</body>
</html>

    • 实战

      • 来点刺激的 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>皮诺康尼折纸大学</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="daohang">
        <form>
            <table>
                <tr>
                    <td>
                        <a href="#">
                            <img src="./tupian/zzdx-logo.jpg" alt="zzdx-logo">
                        </a>
                    </td>
                    <td>
                        <div>
                            <a href="#">首页</a>
                        </div>
                    </td>
                    <td>
                        <div>
                            <a href="xxgk.html">学校概况</a>
                            <div class="xuexiaogaikang">
                                <div class="xuexiaogaikangfenlan.html">
                                    <a href="xuexaiofengjing.html"></a>
                                    <a href="xuexiaodakaodian.html"></a>
                                    <a href="xuexiaozhushu.html"></a>
                                    <a href="xuexiaoditu.html"></a>
                                    <a href="xuexiaofengguang.html"></a>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div>
                            <a href="xxgk.html">学校地图</a>
                            <div class="xuexiaogaikang">
                                <div class="xuexiaoditufanlan.html">
                                    <a href="xuexaiofengjing.html"></a>
                                    <a href="xuexiaodakaodian.html"></a>
                                    <a href="xuexiaozhushu.html"></a>
                                    <a href="xuexiaoditu.html"></a>
                                    <a href="xuexiaofengguang.html"></a>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div>
                            <a href="xxgk.html">机构设置</a>
                            <div class="xuexiaogaikang">
                                <div class="xuexiaogaikangfanlan.html">
                                    <a href="xuexaiofengjing.html"></a>
                                    <a href="xuexiaodakaodian.html"></a>
                                    <a href="xuexiaozhushu.html"></a>
                                    <a href="xuexiaoditu.html"></a>
                                    <a href="xuexiaofengguang.html"></a>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div>
                            <a href="xxgk.html">教育教学</a>
                            <div class="xuexiaogaikang">
                                <div class="xuexiaogaikangfanlan.html">
                                    <a href="xuexaiofengjing.html"></a>
                                    <a href="xuexiaodakaodian.html"></a>
                                    <a href="xuexiaozhushu.html"></a>
                                    <a href="xuexiaoditu.html"></a>
                                    <a href="xuexiaofengguang.html"></a>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div>
                            <a href="xxgk.html">科学研究</a>
                            <div class="xuexiaogaikang">
                                <div class="xuexiaogaikangfanlan.html">
                                    <a href="xuexaiofengjing.html"></a>
                                    <a href="xuexiaodakaodian.html"></a>
                                    <a href="xuexiaozhushu.html"></a>
                                    <a href="xuexiaoditu.html"></a>
                                    <a href="xuexiaofengguang.html"></a>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div>
                            <a href="xxgk.html">就业方向</a>
                            <div class="xuexiaogaikang">
                                <div class="xuexiaogaikangfanlan.html">
                                    <a href="xuexaiofengjing.html"></a>
                                    <a href="xuexiaodakaodian.html"></a>
                                    <a href="xuexiaozhushu.html"></a>
                                    <a href="xuexiaoditu.html"></a>
                                    <a href="xuexiaofengguang.html"></a>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

  • span的学习

    • 引入

      • 这是一个在前期学习，不常用的一个标签，因为它本身没什么效果

    • 属性

      • 双标签：<span></span>一个都不能少
      • 特性：虽然本身没什么效果，但是可以和css结合，让span包裹的数据有不同于其他数据的效果

    • 运用

      • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        1234567890
    </div>
    <div>
        12345
        <span>678</span>
        9
    </div>
    
</body>
</html>

                       这里有两行，可以看出只是间距变了而已

    • 实战

      • 来点刺激的 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>皮诺康尼折纸大学</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div>
        <table>
            <tr>
                <td>
                    <a href="./xing.html"></a>
                    <img src="./tupina/xing" alt="">
                </td>
                <td>
                    <span class="youxiu">姓名：</span>星
                </td>
                <td>
                    <span class="youxiu">爱好：</span>翻垃圾桶
                </td>
            </tr>
            <tr>
                <td>
                    <a href="./qiong.html"></a>
                    <img src="./tupian/qiong" alt="">
                </td>
                <td>
                    <span class="youxiu">姓名：</span>穹
                </td>
                <td>
                    <span class="youxiu">爱好：</span>翻垃圾桶
                </td>
            </tr>
            <tr>
                <td>
                    <a href="./zhigengniao.html"></a>
                    <img src="./tupian/zhigengniao" alt="">
                </td>
                <td>
                    <span class="youxiu">姓名：</span>知更鸟
                </td>
                <td>
                    <span class="youxiu">爱好：</span>唱歌
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

  • 标题等级

    • 引入

      • 在word中，有一级标题，二级标题，三级标题。其实在html中也有

    • 属性

      • 书写：h+数字
      • 双标签：<h1></h1> <h2></h2> <h3></h3> <h4></h4>等等

    • 运用

      • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
    </div>
    
</body>
</html>

        • 最多到六级哦

    • 实战

      • 来点刺激的 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>不行了</h1>
        <h2>不能再刺激了</h2>
        <h3>身体遭不住了</h3>
        <h4>我还要冲芭芭拉呢</h4>
        <h5>这个就这样</h5>
        <h6>下次再玩刺激点的</h6>
    </div>
    
</body>
</html>

  • 下期预告

    • 图片的引入
    • 视频的插入
    • 超链接的运用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值