HTML5基础知识下（保姆级）

最新推荐文章于 2024-05-20 21:21:56 发布

宝贝露.

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量171

点赞数 1

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_70365829/article/details/138583799

版权

一、列表（可嵌套）

基本代码

<body>
    <!--有序列表（可嵌套）-->
    <ol type="a"> 
        <li>水果</li>
        <li>
            蔬菜
            <ol type="1"> 
                <li>苹果</li>
                <li>梨子</li>
                <li>香蕉</li>
            </ol>
        </li>
        <li>肉类</li>
    </ol>
    
    
    <!--无序列表-->
    <ul> 
        <li>水果</li>
        <li>
            植物
            <ul type="circle">
                <li>草</li>
                <li>树</li>
                <li>花</li>
            </ul>
        </li>
        <li>肉类</li>
    </ul>
</body>

实现效果

1、type属性

二、表格

<body>
    <!--表格-->
    <table border="1" width="200px" height="80px">
        <!--行-->
        <tr>
            <!--单元格-->
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
    </table>
</body>

1、合并单元格

水平合并：colspan

垂直合并：rowspan

<body>
    <h3>合并单元格8和9(用并colspan)</h3>
    <h3>合并单元格3和6(用rowspan)</h3>
    <p>水平合并：保留左边，删除右边</p>
    <p>垂直合并：保留上面，删除下面</p>
    <!--表格-->
    <table border="1" width="200px" height="80px">
        <!--行-->
        <tr>
            <!--单元格-->
            <td colspan="2">1和2</td>
            <td rowspan="2">3和6</td>
        </tr>
        <tr>
            <td rowspan="2">4和7</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="2">8和9</td>
        </tr>
    </table>
</body>

效果

2、form表单（有用户输入的地方，一定有表单）

<body>
    <form action="url" method="get" name="myform" >
        <!--表单域-->
        <input type="text">
        <!--表单按钮两种表示方法-->
        <input type="submit">
        <button>提交</button>
    </form>
</body>

效果

1）属性

2）表单元素

input属性

text文本、password密码、submit提交

<body>
    <form>
        用户名：<input type="text">
        密码:<input type="password">
    </form>
</body>

<body>
   <form>
        用户名：<input type="text">
        密码:<input type="password">
        <!--点击后，数据被直接提交到数据库-->
        <input type="submit" value="登录">
    </form>
</body>