HTML的基本工具用法-CSDN博客

本文链接：https://blog.csdn.net/weixin_67522335/article/details/132046905

本文详细介绍了HTML基础，包括有序列表（disc、circle、square样式）、无序列表、自定义列表（dl/dt/dd）、表格的合并单元格、表单元素如input、button和checkbox，以及折叠选项和进度条的实现。

摘要由CSDN通过智能技术生成

HTML基础

列表

列表

有序示例代码

<!-- 属性type：序号样式(disc实心圆 circle心圆 square 实心方框)  -->
<body>
  <-- reversed  倒序   type="用什么方式表示"-->
    <ol type="1" start="9" reversed>
        <li>爱学你就来</li>
        <li>爱来不来</li>
        <li>不来算求</li>
        <li>去求吧你</li>
        <li>说累是啥</li>
        <li>恁咋这样咧</li>
        <li>这人咋这样</li>
        <li>不是啥好人</li>
        <li>我才是好人</li>
    </ol>
  </body>

运行结果

在这里插入图片描述

无序示例代码

<body>
   <ul type="circle">
        <li>10</li>
        <li>20</li>
        <li>30</li>
        <li>40</li>
        <li>50</li>
        <li>60</li>
        <li>70</li>
        <li>80</li>
        <li>90</li>
        <li>00</li>
    </ul>
    </body>

运行结果

在这里插入图片描述

自定义示例代码

<body>
<dl>
        <dt>第二章
            <dd>123</dd>
            <dd>741</dd>
            <dd>8520</dd>
            <dd>963</dd>
            <dd>456</dd>
        </dt>
    </dl>
</body>

实现效果

在这里插入图片描述

表格

tr	是行
td	是列
cellspacing 属性-定义表格单元格之间的空间
cellpadding 属性-表示单元格边框与单元格内容之间的距离

合并单元格

如果要将两个或多个列合并为一个列，将使用 colspan 属性
如果要合并两行或更多行，则将使用 rowspan 属性

<table border="1px" width="400px" style="text-align: center;" cellspacing="10px" cellpadding="20px">
                <caption>联系人表</caption>
                <tr>
                    <th colspan="2"><img src="/QianDuan/1(1).ico" alt="">姓名:张展</th>
                </tr>
                <tr>
                    <th rowspan="2" style="background-image: url(/QianDuan/1\(1\).ico);">联系方式</th>
                    <td>7418520963</td>
                </tr>
                <tr>
                    <td style="background-color: yellow;">12345523552</td>
                </tr>
                </table>

输入input

<form action="">
        <fieldset>
            <legend>Personal information</legend>
            <label for="user">用户名</label><input type="text" name="" id="user" ><br>
            <label for="paw">密码</label><input type="password" name="" id="paw"><br>

按纽

  <input type="button" value="点击"><br>
            <input type="submit" value="提交"><br>

也可以直接使用button

<button>点击按钮</button>

选择

 性别：<input type="radio" name="sex" id="">女<input type="radio" name="sex" id="">男 <br>
  爱好:<input type="checkbox" name="hobby" id="">游泳
       <input type="checkbox" name="hobby" id="">读书
       <input type="checkbox" name="hobby" id="">打游戏 <br>

折叠选项

 <select name="" id="">
                <option value="">山西省</option>
                <option value="">河北省</option>
                <option value="">河南省</option>
                <option value="">山东省</option>
                <option value="">内蒙古自治区</option>
            </select><br>

实例效果
在这里插入图片描述

进度条

<iframe src="hhttps://www.hao123.com/?src=from_pc_logon/" width="600px" height="400px" name="myhtml"></iframe>

实例效果
在这里插入图片描述