web——html基础_html-js-css

作者：小琛
欢迎转载，请标明出处

文章目录列表无序列表有序列表自定义列表表格属性实现单元格合并表单input系列文本、密码、文本提示框实现单选实现重置关于button 下拉菜单文本域lable实现文字可点击综合例子

列表

当显示内容排列规整时，即可使用列表，列表可以分为无序列表、有序列表、自定义列表三种类型。

无序列表

ul：无序列表标签，可以也只能包含多个lili：无序列表中的每一项

    <!-- 无序列表 -->
    <ul></ul>
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
    </ul>

有序列表

ol：有序列表标签，可以包含多个lili：列表中的每一项

    <!-- 有序列表 -->
    <ol>
        <li>康琛100分</li>
        <li>刘建波0分</li>
    </ol>

有序列表会自动生成顺序，从1开始

自定义列表

dl：自定义列表的标签dt：自定义列表的标题dd：自定义列表的每一项内容

    <!-- 自定义列表 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>找回账号</dd>
    </dl>

表格属性

table：表格的标签，包裹表格的所有内容
border：表格的边框宽度
tr：表格的每一行，包裹th或td
th：单元格的表头，会加粗标明
td：表格每一行的每一个单元格
caption：单元格的大标题

实现单元格合并

若要实现某些单元格合并，使用合并属性，其中赋值为合并几行、几列

rowspan="“行合并
clospan=”"列合并
合并要保证表格内容的合理化，即只能同一行、同一列内容

<!-- 表格 -->
    <table border="2" >
        <caption><strong>成绩单</strong></caption>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>评价</th>
            </tr>
            <tr>
                <td>康琛</td>
                <!-- rowspan与colspan合并单元格，属性为合并几个 -->
                <td rowspan="2">男</td>
                <td rowspan="2">22</td>
                <td rowspan="2">小伙子很棒</td>
            </tr>
            <tr>
                <td>刘建波</td>
            </tr>
    </table>

表单

应用场景：登录界面、搜索界面、注册界面…

input系列

在vscode中输入input，点击回车会出现以下标签：< input type=“”>

input系列提供了很多功能选项，

文本、密码、文本提示框

例子：实现输入账号、密码

    <!-- placeholder占位符，用于提示用户输入内容 -->
    文本框：<input type="text" placeholder="提示词">
    <br>
    密码框：<input type="password" placeholder="密码">
    <br>

实现过程为输入input，选择text文本，password密码，自主添加一些前缀文字。密码栏的输入会默认为密文输入placeholder为占位符，说人话就是提示用户该输入框输入何内容，只需要在标签后添加该属性并赋值即可实现单选

input中radio为实现单选的属性。在vscode中添加两个radio属性的input即可

    单选框1：<input type="radio">
    单选框2：<input type="radio">

但是，我们发现，这两个选项并没有实现单选，仍然是两个都可以选择，因为我们还需要一步重要的工作：

radio标签中有一个属性为name，若要实现多个选项的单选，需要将这若干个选项中的name属性设定为相同的内容

例如：

    <!-- 利用name实现单选，checked为默认选择 -->
    性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女

实现重置

实现重置按钮的流程分为两步

在网页中添加重置按钮，input中的reset选项利用form标签将需要重置的所有内容包裹

例如：

    <!-- form配合reset可以实现重置 -->
    <form action="">
    用户名：<input type="text">
    <br>
    <br>
    密码：<input type="password">
    <br>
    <br>
    <input type="reset" >
    </form>

点击重置：

关于button

button是input里的一个选项，相当于一个没有任何作用的按钮，但其实button还是一个独立的标签，配合其自身的type属性可以实现其它按钮。
例如：

这样做的原因是，为了后续的CSS和JS配合方便

下拉菜单

select：下拉菜单标签整体，将内容包裹在里
option：下拉菜单的每一项
selected：默认选项

例如：

    <!-- 下拉菜单 -->
    <select name="" id="">
        <option value="" selected>北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
    </select>

文本域

textarea：文本域标签
cols：可见宽度
rows：可见行数

    <!-- 文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

lable实现文字可点击

使用场景：当设置一个选项是否选择时，可以点击按钮，也可以点击对应的文字，例如：点击按钮或男都可以选择
实现方法有两种：

将label放在文字前，并将其中的for属性和后续按钮的id属性设置为相同的值将整个文字和按钮全部放到label中，删掉label的for属性

例如：

    性别：
    <label for="1">男</label><input type="radio" name="sex" id="1">
    <label>女<input type="radio" name=sex></label>

综合例子实现优秀学生信息表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优秀学生表格</title>
</head>
<body>
    <table border="2" width="300" height="400">
        <caption><h3>优秀学生信息表格</strong></h3>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高三</td>
            <td>张三</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>赵四</td>
            <td>120</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tr>
    </table>
</body>
</html>

个人信息登记界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息登录网</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
    昵称：<input type="text" placeholder="请输入昵称">
    <br><br>
    性别：<input type="radio" name="sex">男<input type="radio" name="sex">女
    <br><br>
    所在城市：<select>
        <option >上海</option>
        <option >北京</option>
        <option selected>深圳</option>
    </select>
    <br><br>
    婚姻状况：
    <label><input type="radio" name="marriage">未婚</label>
    <label><input type="radio" name="marriage">已婚</label>
    <label><input type="radio" name="marriage">保密</label>
    <br><br>
    喜欢的类型：
    <label><input type="checkbox" name="type" checked>可爱</label>
    <label><input type="checkbox" name="type" checked>性感</label>
    <label><input type="checkbox" name="type">御姐</label>
    <label><input type="checkbox" name="type">萝莉</label>
    <label><input type="checkbox" name="type">小鲜肉</label>
    <label><input type="checkbox" name="type">大叔</label>
    <br><br>
    个人介绍：
    <br><br>
    <textarea cols="50" rows="20"></textarea>
    <br><br>
    <h3><strong>我承诺</strong></h3>
    <ul>
        <li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
    </ul>
    <input type="radio">我同意所有条款
    <br><br>
    <button type="submit">免费注册</button>
    <button type="reset">重置</button>
    </form>
</body>
</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322513.html

web——html基础

发表评论

评论列表（0条）