前端学习-HTML基础

车什里

已于 2023-12-08 21:04:44 修改

阅读量23

点赞数

文章标签：学习

于 2023-12-08 20:57:16 首次发布

本文链接：https://blog.csdn.net/qq_45689662/article/details/134886650

版权

@TOC

一、文本格式化标签

<body>
    <strong>加粗</strong>
    <b>加粗</b>
    <strong>加粗</strong>
    <i>我是倾斜</i>
    <em>我是倾斜</em>
    <u>我是下滑线</u>
    <div>我是</div>123
    <div风飘过三千里</div>
    <span>下午</span>
    <span>上午</span><br>
    图像标签的显示：<br>

    <img src="img.png" alt="我是替换的文字">
    <img src="img.png" alt="我是替换的文字" title="我是电话" height="200"  border="15">
<img src="images/img.png" alt="">

</body>

二、合并单元格

<body>
    <table border="1" width="500" height="250" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>

        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>

            <td></td>
            <td></td>
        </tr>
    </table>
</body>

三、无序列表

<body>
    <h4>您喜欢什么食物</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>馒头</li>
    </ul>
</body>

四、有序列表

<body>
    <ol>
        <li>刘德华</li>
        <li>刘德华</li>
        <li>刘德华</li>
    </ol>
</body>

五、自定义列表

<body>
    <dl>
        <dt>工业</dt>
        <dd>工业</dd>
        <dd>工业</dd>
        <dt>工业</dt>
        <dd>工业</dd>
        <dd>工业</dd>
    </dl>
</body>

六、表单域

<body>
    <form action="demo.php" method="get" name="name1">
        <label for="text">用户名：</label><input type="text" id="text" name="username" value="请输入用户值" maxlength="6"> <br>
        密码：<input type="password" name="pwd"><br>
        性别：<label for="nan">男</label> <input type="radio" name="sex" value="男" id="nan" checked="checked"> <label
            for="nv">女</label><input type="radio" name="sex" id="nv" value="女">人妖：<input type="radio" name="sex"
            value="人妖"><br>
        爱好：吃饭<input type="checkbox" name="hobby" id="" value="吃饭">睡觉<input type="checkbox" name="hobby"
            value="睡觉">打豆豆：<input type="checkbox" value="打豆豆：" name="hobby" checked="checked">
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写">
        <input type="button" value="获取短信验证码"> <br>
        上传头像：<input type="file">
    </form>
</body>

七、下拉标签

<body>
    <form action="">
        籍贯：

        <select name="" id="">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="" selected="selected">天津</option>
        </select>
        今日反馈：<textarea name="" id="" cols="30" rows="5">我知道了textarea</textarea>


    </form>


</body>

八、表格表单综合案例

    <form action="">

        <h4>青春不常在 抓紧谈恋爱</h4>
        <table width="500">
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex" id="nan"> <label for="nan">男</label>
                    <input type="radio" id="nv" name="sex"> <label for="nv">女</label>
                </td>
            </tr>
            <tr>

                <td>生日</td>
                <td><select name="" id="">

                        <option value="">2021</option>
                        <option value="">2022</option>
                        <option value="">2023</option>
                        <option value="" selected="selected">请选择年</option>

                    </select>
                    <select name="" id="">

                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="" selected="selected">请选择月</option>

                    </select>
                    <select name="" id="">

                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="" selected="selected">请选择日</option>

                    </select>
                </td>
            </tr>

            <tr>
                <td>所在地区：</td>
                <td><input type="text" name="" id="" value="日本"></td>

            </tr>

            <tr>
                <td>婚姻状况</td>
                <td><input type="radio" name="marry" id="un" checked="checked"><label for="un">未婚</label>
                    <input type="radio" name="marry" id="yi"><label for="yi">离婚</label>
                    <input type="radio" name="marry" id="li"><label for="li">离婚</label>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td><input type="text" value="大学生"></td>
            </tr>
            <tr>
                <td>喜欢的类型：</td>
                <td><input type="checkbox" name="type" id="wumei"><label for="wumei">妩媚</label>
                    <input type="checkbox" name="type" id="keai"><label for="keai">可爱</label>
                    <input type="checkbox" name="type" id="xian"><label for="xian">小鲜肉</label>
                    <input type="checkbox" name="type" id="wumei"><label for="wumei">妩媚</label>
                    <input type="checkbox" name="type" id="wumei"><label for="wumei">妩媚</label>
                </td>
            </tr>


            <tr>
                <td>自我介绍</td>
                <td><textarea name="" id="" cols="30" rows="3"></textarea></td>


            </tr>

            <tr>
                <td></td>
                <td><input type="submit" name="" id="" value="免费注册"></td>
            </tr>


            <tr>
                <td></td>
                <td><input type="checkbox" name="" id="agree" checked="checked"><label for="agree">我同意</label></td>
            </tr>

            <tr>
                <td></td>
                <td><a href="#">立即注册</a></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h2>我承诺</h2>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <ul>
                        <li>单身</li>
                        <li>单身</li>
                        <li>单身</li>
                    </ul>
                </td>
            </tr>

        </table>
    </form>

运行结果：

在这里插入图片描述

九、今日小说排行榜案例

<body>
    <table cellpadding="0" cellspacing="0" align="center" width="500" height="300" border="1">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg" alt=""></td>
                <td>123</td>
                <td>152</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg" alt=""></td>
                <td>123</td>
                <td>152</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg" alt=""></td>
                <td>123</td>
                <td>152</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg" alt=""></td>
                <td>123</td>
                <td>152</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg" alt=""></td>
                <td>123</td>
                <td>152</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg" alt=""></td>
                <td>123</td>
                <td>152</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg" alt=""></td>
                <td>123</td>
                <td>152</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
        </tbody>


    </table>
</body>

运行结果：
在这里插入图片描述