web——html基础

小琛

已于 2022-05-29 16:00:43 修改

阅读量95

点赞数

分类专栏： web前端文章标签：前端 html vscode

于 2022-05-27 15:43:16 首次发布

本文链接：https://blog.csdn.net/qq_44745063/article/details/124999935

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

文章目录

列表

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

无序列表

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

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

在这里插入图片描述

有序列表

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

    <!-- 有序列表 -->
    <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>