0基础学web----HTML基础-CSDN博客

本文链接：https://blog.csdn.net/QQ675396947/article/details/121916106

02-列表-无序和有序

无序列表：

 <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>

无序列表：

  <ol>
        <li>小姐姐：100分</li>
        <li>小帅哥：80分</li>
        <li>小可爱：60分</li>
    </ol>

03-列表-自定义

  <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>

04-表格-使用

 <table>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐诶真好看</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才狗毛</td>
        </tr>
    </table>

 <table border="1" width="200" height="500">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐诶真好看</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才狗毛</td>
        </tr>
    </table>

05-表格-表格标题和表头单元格

 <table border="1">
        <thead>
            <caption><strong>学生成绩单</strong></caption>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100分</td>
                <td>小哥哥真帅气</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <td>100分</td>
                <td>小姐姐诶真好看</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>郎才狗毛</td>
            </tr>
        </tfoot>
    </table>

06-表格-结构标签

 <table border="1">
        <thead>
            <tr>
                <td>姓名</td>
                <td>成绩</td>
                <td>评语</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100分</td>
                <td>小哥哥真帅气</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <td>100分</td>
                <td>小姐姐诶真好看</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>郎才狗毛</td>
            </tr>
        </tfoot>
    </table>

没有任何变化，该结构标签只是方便于开发的结构概括。

07-表格-合并单元格

 <table border="1">
        <thead>
            <caption><strong>学生成绩单</strong></caption>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100分</td>
                <td rowspan="2">小哥哥真帅气</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <td>100分</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>

09-表单-input基本使用

<body>
    <div>
        <!-- 文本输入框 -->
        账号：<input type="text">
    </div>
    <br>
    <div>
        <!-- 密码框 -->
        密码：<input type="password">
        <br>
    </div>
    <div>
        <!-- 单选框 -->
        <input type="radio">男
        <input type="radio">女
        <br>
    </div>
    <div>
        <!-- 多选框 -->
        <input type="checkbox">唱
        <input type="checkbox">rea
        <input type="checkbox">篮球
    </div>
    <div>
        <!-- 上传文件 -->
        <input type="file">
    </div>
    <div>
        <!-- 提交按钮 -->
        <input type="submit">
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 自定义按钮 -->
        <input type="button" value="自定义按钮">
    </div>

</body>

10-表单-input占位符（提示信息）

文本框提示使用placeholder标签

<body>
    账号：<input type="text" placeholder="请输入账号">
    密码：<input type="password" placeholder="请输入密码">
    
</body>

11-表单-单选功能和默认选中

单选功能需要使用name属性，将他们分配到同一组才能实现单选功能。

<body>
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
</body>

checked属性是让单选框进行默认选择。

<body>
    <input type="radio" name="sex" >男
    <input type="radio" name="sex" checked>女
</body>

12-表单-上传多个文件

<body>
    <input type="file" multiple>
</body>

可多个文件同时进行上传

13-表单-按钮input

<body>
    <input type="submit">
    <input type="reset">
    <input type="button" value="自定义按钮">
</body>

注意：按钮需要添加名字或更改名字需要用到value属性进行操作。

14-表单-按钮button

<body>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">自定义按钮</button>
</body>

15-表单-下拉菜单

<body>
    <select>
        <option >北京</option>
        <option >上海</option>
        <option >深圳</option>
        <option >广州</option>
        <option selected>曹县</option>
    </select>
</body>

16-表单-文本域

<body>
    <textarea cols="30" rows="10">文本框</textarea>
</body>

17-表单-label标签

<body>
    性别：
    <!-- 方法一： -->
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <!-- 方法二 -->
    <label><input type="radio" name="sex" >女</label>
</body>

扩大点击范围，单机单选文字都可以进行单选选择。

18-语义化标签

<body>
    <div>这是第一行</div>
    <div>这是第二行</div>
    <span>这是第三行</span>
    <span>这是第四行</span>
</body>

19-字符实体

想要视频教学？

请点击下方链接吧！

https://www.bilibili.com/video/BV1Kg411T7t9?p=1