2021-08-05超链接和列表和表单

最新推荐文章于 2023-02-28 16:28:46 发布

shiqikuangsan

最新推荐文章于 2023-02-28 16:28:46 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/shiqikuangsan/article/details/119425154

版权

1.超链接

<body>
    <!--
        开始标记和结束标记中间的内容，是点击触发的内容，页可以是图片文字等
        注意 必须有href属性，才可以点击
        只要该链接在页面中是不可点击的状态，说明要么没有href属性，要么拼写错误
        默认当前页面打开该链接，可以通过target指定 _blank是新窗口打开
        title属性 悬停提示文字
    -->
    <a title="百度一下你就知道" href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="./test.html">test</a>
</body>

2.锚点
返回到选定id的行

<body>
    <p id="top"></p>
    <a href="#a1">早年经历</a><a href="#a2">演艺经历</a><a href="#a3">主要作品</a> 
    <h2 id="a1">早年经历</h2>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <h2 id="a2">演艺经历</h2>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <h2 id="a3">主要作品</h2>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <a href="#top">回到首部</a>
</body>

3.列表

<body>
    无序列表 ：
        <ul>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
            <li>内容4</li>
        </ul>
    有序列表 ：
        <ol type="A">
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
            <li>内容4</li>
        </ol>

    城市 :
        <dl>
            <dt>河北</dt>
            <dd>石家庄</dd>
            <dd>沧州</dd>
            <dd>保定</dd>
            <dt>北京</dt>
            <dd>朝阳区</dd>
            <dd>房山</dd>
        </dl>
</body>

4.table

<body>
    <!--
        cellspacing:设置单元格之间的距离
        cellpadding:内容到单元格之间的距离
        align:水平方向对齐

    -->
    <table border=1 cellspacing="0" cellpadding="10" width=500 align="center" >
        <caption><h2>学生信息表</h2></caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>李四</td>
            <td>19</td>
        </tr>
    </table>
</body>

5.合并单元格
colspan 列合并
rowspan 行合并
6.Input

<body>
    <table border="1" align="center" width="500" cellspacing="0" cellpadding="10">
        <!--
        action:把数据提交到哪去
        method:提交的方式，get/post
            get:get请求方式，明文传输，相对不安全，传递数据较少，效率高
            post:post请求方式，不是明文传输，相对安全，传递数据较多，效率低
                向服务器索要数据，使用get  <模糊查询就行>
                向服务器发送数据，使用post  <安全的数据>
    -->
        <form action="http://www.baidu.com" method="GET" >
            <!--
                name 和 value 用于数据提交的时候传递数据
                        name=value
                name :就是定义的名字，比如我们这里写的username
                    那么服务端就可以通拓username获取我们输入的数据
                value:就是输入框中的数据，用户的输入最终会赋值给value属性
    
                type : 定义输入框的类型
                    text 普通输入域
                    password 密码输入域
                    radio 单选，如果有多个radio，他们的name属性必须一致
                        checked="checked" 单选框的默认选择项
                    checkbox 复选框
                        checked="checked" 复选框的默认选择项和单选一样
                    file 选择文件，比如文件上传等
                    button 普通按钮，没有提交功能
                    submit 提交按钮，会执行action提交数据
                    reset 重置按钮
                    imgage 图片代替提交按钮
                    
                button标签，按钮，放到form中，会提交表单
                label:  无语义标签，加不加不会有任务样式上的变化
                        当for的值和对应的输入框的id值一致的时候

                        点击label标签中的内容就会在对应的输入框中获取焦点(输入状态)
            -->
            <tr>
                <td align="right">
                    <label for="username">用户名:</label>
                </td>
                <td align="letf"><input size="50" type="text" name="username" value="" placeholder="请输入用户名"><br></td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td align="left"><input type="password" name="" id=""><br></td>
            </tr>
            <tr>
                <td align="right">性别:</td>
                <td>
                    <input type="radio" name="sex" value="1">男 
                    <input type="radio" name="sex" checked="checked" value="女">女
                </td>
            </tr>
            <tr>
                <td align="right">爱好:</td>
                <td>
                    <input type="checkbox" name="like" id="" value="篮球">篮球
                    <input type="checkbox" name="like" id="" value="学习">学习
                    <input type="checkbox" name="like" id="" value="打游戏">打游戏
                </td>
            </tr>
            <tr>
                <td align="right">图片:</td>
                <td>
                    <input type="file">
                </td>
            </tr>
            <tr>
                <td align="right">个性签名</td>
                <td>
                    <!-- 多行文本域，cols显示的列数，rows显示的行数-->
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">出生年月日:</td>
                <td>
                    <!--
                        一个select中至少有一个option
                        select定义下拉列表，option是下拉选项 
                        select进行数据传递的时候，使用的是select的name=option的value
                            y=3
                        selected="selected" 默认选项
                        multiple:支持选择多个，按ctrl
                    -->
                    <select multiple name="y" id="">
                        <option value="">选择年份</option>
                        <option value="1">1991</option>
                        <option value="2" selected="selected">1992</option>
                        <option value="3">1993</option>
                        <option value="4">1994</option>
                    </select>
                    <select name="m" id="">
                        <option value="">选择月份</option>
                        <option value="1">1</option>
                        <option value="2" selected="selected">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <button>button按钮(能提交)</button>
                    <!-- <input type="button" value="普通按钮"> -->
                    <input type="submit" value="submit提交">
                    <input type="reset" value="重置"
                </td>
            </tr>
            <tr>
                <td><button>提交</button></td>
            </tr>
        </form>
    </table>
    
</body>

7.百度搜索
可以在输入框中输入内容后直接跳转到百度搜索

<body>
    <form action="https://www.baidu.com/s">
        <input type="text">
        <button>搜索</button>
    </form>
</body>

shiqikuangsan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-05超链接和列表和表单

1.超链接<body>  <a title="百度一下你就知道" hre
复制链接

扫一扫