新手向：HTML进阶

最新推荐文章于 2024-05-20 22:08:52 发布

ma_no_lo

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量952

点赞数 6

文章标签： html 前端

本文链接：https://blog.csdn.net/ma_no_lo/article/details/138256240

版权

一，列表

列表分为有序列表，无序列表，定义列表三种

1.有序列表

ol 嵌套 li，ol 是有序列表，li 是列表条目

<!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>
    <ol>
         <li>Ashto</li>
         <li>Ashto</li>
         <li>Ashto</li>

    </ol>

</body>

</html>

效果如图

2.无序列表

ul 嵌套 li，ul 是无序列表，li 是列表条目

<!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>
    <ul>
        <li>Ashto</li>
        <li>Ashto</li>
        <li>Ashto</li>

    </ul>
</body>

</html>

我们可以通过 list-style-type来调整列表前的符号

<!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>
    <ul>
        <li style="list-style-type: none;">Ashto</li>
        <li>Ashto</li>
        <li>Ashto</li>

    </ul>
</body>

</html>

定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

<!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>
    <dl>
        <dt>CSDN</dt>
        <dd>代码交流平台</dd>
        <dd>资源交流平台</dd>
        <dd>问题解决平台</dd>

    </dl>
</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>
    <table border="1px solid black">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>

</html>

三，表单

表单一般和js一起使用

input标签

<!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>
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <input type="radio" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="file" name="" id="">
</body>

</html>

下拉菜单

主要就是select和option,option就是下拉菜单的内容。

<!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>
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
    </select>
</body>

</html>