html基础入门（列表，表格及表单）

Exclusive_Cat

于 2024-08-12 15:23:30 发布

阅读量567

点赞数 9

文章标签： html 前端

本文链接：https://blog.csdn.net/2302_80464795/article/details/141132272

版权

大家好我是猫咪！！！
今天又来学前端了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<ol type="1"start="6">
    <li>文本标签</li>
    <li>图片标签</li>
    <li>背景标签</li>
    <li>列表标签</li>
</ol>

<ul>
    <li>java</li>
    <li>python</li>
    <li>html</li>
    <li>mysql</li>
</ul>

<a href="Test1.html">跳转到Test1.html</a>
<br/>
<a href="http://www.baidu.com">百度一下</a>

<br/>

<a href="minecraft.mp4">视频</a>

<br/>

<a href="mailto:492539626@qq.com">发送邮件</a>

</body>
</html>

<ol type="1" start="6">：这是有序列表标签，设置了列表项的编号类型为1（数字），开始编号为6。
<li>文本标签</li>：这是列表项标签，表示一个有序列表中的一项，这里文本为"文本标签"。
<ul>：这是无序列表标签，用于创建无序列表。
<li>java</li>：这是列表项标签，表示无序列表中的一项，这里文本为"java"。
<a href="Test1.html">跳转到Test1.html</a>：这是超链接标签，创建了一个指向Test1.html的链接。
<br/>：这是换行标签，用于在文本中插入换行。
<a href="http://www.baidu.com">百度一下</a>：这是一个指向百度网站的链接。
<a href="minecraft.mp4">视频</a>：这是一个指向名为"minecraft.mp4"的视频文件的链接。
<a href="mailto:492539626@qq.com">发送邮件</a>：这是一个指向"492539626@qq.com"邮箱的链接，点击后可以发送邮件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格制作</title>
</head>
<body bgcolor="#ffc0cb">

<!--border=1用于设置表格的边框-->
<table width="400" height="400" border="1">
    <caption>表格的标题</caption>
    <tr>
<!--        colspan表示同一行的多列单元格的合并，跨列合并       -->
        <td colspan="2">1</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>5</td>
        <td>6</td>
        <td rowspan="2">7</td>
        <td>8</td>
    </tr>

    <tr>
        <td>9</td>
        <td>10</td>
        <td>12</td>
    </tr>


</table>

<table width="400" height="400" border="1">
    <tr >
        <td colspan="3" rowspan="2"></td><td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td>
    </tr>
</table>

</body>
</html>

通过<table>标签定义了一个表格，并通过width和height属性设置了表格的宽度和高度。border属性用来设置表格的边框样式。

接着使用<caption>标签定义了表格的标题。

然后使用<tr>标签定义了表格的行。在第一行中，使用<td>标签定义了单元格，并使用colspan属性将前两个单元格合并为一个，跨越了两列。接着定义了两个单独的单元格。这样就完成了第一行的定义。

在第二行中，同样使用<td>标签定义了单元格。在第三个单元格中，使用rowspan属性将其合并为一个，跨越了两行。最后定义了一个单独的单元格。这样就完成了第二行的定义。

最后一共有三行四列的表格就完成了。

整个表格的背景颜色设置为粉色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<form>
    姓名:<input type="text" name="a" size="40">
    <br/>
    年龄:<input type="text" name="b" maxlength="10">
    <br/>
    密码:<input type="password">
    <br/>
<!--    同一组单选框，name的值必须相同    -->
    性别:<input type="radio" name="c" checked>男 <input type="radio" name="c">女
    <br/>
    爱好:<input type="checkbox">唱歌<input type="checkbox">跳舞<input type="checkbox">跑步
    <br/>
    地址:<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>
</form>

</body>
</html>

<form>标签代表表单可以在内部写表单代码，这就像平时我们登录时的输入框