HTML 02

news2025/6/18 18:19:35

1.列表

布局内容排列整齐的区域

(1)无序列表

写法：

    <ul>
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    </ul>

浏览器中显示： 

注意：

ul标签里只能包裹li标签

li标签里可以包裹任何内容

(2)有序列表

需要规定顺序的区域

写法：

    <ol>
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>

注意：

ol标签里只能包裹li标签

li标签里可以包裹任何内容

(3)定义列表

dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述

写法：

    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
    </dl>

注意：

dl标签里只能包含dt和dd

dt和dd标签里可以包裹任何内容

2.表格

与excel表格类似，展示数据

有几行就写几个tr，有几列就写几个td 

写法：添加边框需要border

    <table border="1">
        <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>

表格结构标签

<table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <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>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>第一</td>
                <td>第一</td>
                <td>第一</td>
            </tr>
        </tfoot>
    </table>

在浏览器中看不出区别，一般是不写的

3.合并单元格

多个单元格合并成一个，合并同类信息

(1)跨行合并

            <tr>
                <td>张三</td>
                <td>99</td>
                <!-- 跨列合并 -->
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>

(2)跨列合并

            <tr>
                <td>总结</td>
                <!-- 跨行合并 -->
                <td colspan="3">第一</td>
            </tr>

效果如图：

4.表单

收集用户信息

使用场景：登录，注册，搜索

input标签type属性值不同则功能不同

 写法：

    <!-- 输入什么显示什么，单行文本 -->
    文本框：<input type="text">
    <br><br>
    <!-- 输入什么都以点的形式显示 -->
    密码框：<input type="password">
    <br><br>
    单选框：<input type="radio">
    <br><br>
    多选框：<input type="checkbox">
    <br><br>
    上传文件：<input type="file">

(1)占位符placeholder：提示用户

    文本框：<input type="text" placeholder="请输入">
    <br><br>
    密码框：<input type="password" placeholder="输入密码">

(2)单选框radio

实现单选功能要加name，且两个选项的name值一样（两个选项不会同时选中），checked默认选中

    性别：
    <input type="radio" name="gender"> 男
    <!-- 默认选中女 -->
    <input type="radio" name="gender" checked> 女

(3)多文件上传

添加multiple

    上传文件：<input type="file" multiple>

(4)多选框默认选中

同样是添加checked

    兴趣：
    <input type="checkbox"> 读书
    <input type="checkbox" checked> 运动
    <input type="checkbox" checked> 听音乐

(5)下拉菜单

默认显示第一个option，也可以加关键字selected

写法：

    城市：
    <select>
        <option>北京</option>
        <option>深圳</option>
        <option>杭州</option>
        <option>上海</option>
        <!-- 默认选择武汉 -->
        <option selected>武汉</option>
    </select>

(6)文本域 

    <!-- 右下角有拖拽功能，一般禁用，工作中用CSS设置尺寸 -->
    <textarea>请输入评论</textarea>

(7)label标签

写法：

    性别：
    <!-- 完整写法 -->
    <input type="radio" name="gender" id="man"> 
    <label for="man">男</label>
    <!-- 简单写法 -->
    <label><input type="radio" name="gender"> 女 </label>

发现点击文字也能选择，不用一定要点圆圈

(8)按钮-button

写法：

    <!-- form 表单区域 -->
    <form action="">
        用户名：<input type="text">
        <br><br>
        密码：<input type="password">
        <br><br>

        <!-- 省略type属性，默认功能是提交 -->
        <button type="submit">提交</button>
        <!-- 按钮和文本要在表单区域中才能重置 -->
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>

5.无语义的布局标签：div和span标签

6.字符实体

在网页中显示预留字符

我们发现在代码中打了很多空格，但是网页只会显示一个

使用字符实体可以解决这个问题，还可以让<p>显示而不被识别

    北京是中国的首都，上海在中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国
    &lt;p&gt;

案例1：

<body>
    <ul>
        <li>
            <img src="./image/1.jpg" height="100">
            <h3>城市风景</h3>
        </li>
        <li>
            <img src="./image/2.jpg" height="100">
            <h3>高楼</h3>
        </li>
        <li>
            <img src="./image/3.jpg" height="100">
            <h3>城市</h3>
        </li>
    </ul>
</body>

案例2：

<body>
    <h1>注册信息</h1>
    <form>
        <!-- 表单区域 -->

        <!-- 个人信息 -->
        <h2>个人信息</h2>
        <label>姓名：</label><input type="text" placeholder="请输入姓名">
        <br><br>
        <label>密码：</label><input type="password" placeholder="请输入密码">
        <br><br>
        <label>确认密码：</label><input type="password" placeholder="确认密码">
        <br><br>
        <label>性别</label>
        <label><input type="radio" name="gender"> 男</label>
        <label><input type="radio" name="gender" checked> 女</label>
        <br><br>
        <label>居住城市：</label>
        <select>
            <option>北京</option>
            <option>深圳</option>
            <option>武汉</option>
            <option>上海</option>
            <option>杭州</option>
        </select>

        <!-- 教育经历 -->
        <h2>教育经历</h2>
        <label>最高学历</label>
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option>本科</option>
            <option>大专</option>
        </select>
        <br><br>
        <label>学校名称：</label><input type="text">
        <br><br>
        <label>所学专业：</label><input type="text">
        <br><br>
        <label>在校时间：</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
        </select>
        --
        <select>
            <option>2018</option>
            <option>2019</option>
            <option>2020</option>
        </select>

        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称：</label><input type="text">
        <br><br>
        <label>工作描述：</label>
        <br><br>
        <textarea></textarea>
        <br><br>

        <!-- 协议按钮 -->
        <input type="checkbox"><label>已阅读并同意以下协议：</label>
        <ul>
            <li><a href="#"> 《用户服务协议》</a></li>
            <li><a href="#"> 《隐私政策》</a></li>
        </ul>
        <br><br>
        <button>免费注册</button>
        <button type="reset">重新填写</button>
    </form>
</body>

效果：

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1503605.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

算法学习系列（四十）：贡献法

算法学习系列（四十）：贡献法

目录 引言概念一、孤独的照片二、牛的基因学三、字串分值 引言 关于这个贡献法考的不是很多&#xff0c;主要题型是出现在需要枚举每一个组合这类题&#xff0c;出现的次数较多。没有固定的模板&#xff0c;就是一种思想&#xff0c;跟贪心一样&#xff0c;每个题都是不一样的…
阅读更多...
探讨系统测试的最佳实践与思维模式！

探讨系统测试的最佳实践与思维模式！

这是测试活动过程详解系列的最后一篇文章。之前的想法&#xff0c;是对测试过程各重要环节进行拆解&#xff0c;然后介绍这个环节重点要做的事情&#xff0c;为什么要做这些事&#xff0c;以及注意事项。 前面几篇文章分别介绍了单元测试、集成测试、回归测试阶段要解决的问题…
阅读更多...
yolo模型中神经节点Mul与Sigmoid 和 Conv、Concat、Add、Resize、Reshape、Transpose、Split

yolo模型中神经节点Mul与Sigmoid 和 Conv、Concat、Add、Resize、Reshape、Transpose、Split

yolo模型中神经节点Mul与Sigmoid 和 Conv、Concat、Add、Resize、Reshape、Transpose、Split 在YOLO&#xff08;You Only Look Once&#xff09;模型中&#xff0c;具体作用和用途的解释&#xff1a;
阅读更多...
qt 日志 格式化打印 QMessagePattern

qt 日志 格式化打印 QMessagePattern

进入 qt源码 调试：qt creator debug 无法进入 qt源码 调试-CSDN博客 qt为 格式化打印 日志 提供了一个简易的 pattern（模式/格式） 词法解析类QMessagePattern，该类在qt的专门精心日志操作的源码文件Src\qtbase\src\corelib\global\qlogging.cpp 中 该类直接在构造函数中…
阅读更多...
基于springboot+vue的食品安全管理系统（源码+论文）

基于springboot+vue的食品安全管理系统（源码+论文）

目录 前言 一、功能设计 二、功能实现 1 首页 2 后台登录 3 食品信息添加页面 4 食品查询 三、库表设计 四、论文 前言 从事食品行业的商家可能会对于食品的储存以及食品的销售&#xff0c;都有着不同门道的想法&#xff0c;那么如何能将这些想法一一实现&#xff0c;…
阅读更多...
图像处理ASIC设计方法 笔记8 卷积计算芯片的结构

图像处理ASIC设计方法 笔记8 卷积计算芯片的结构

（一） P81 卷积芯片内部模板框图 该设计有两个数据通路：图像数据和模板数据。 图像数据是经过帧控制、实时图SPRAM（写控制、 SPRAM读控制、数据读控制）、计算单元； 模板数据是经过模板SPRAM、计算单元。 4.5.4运算单元像素寄存器控制 存储SPRAM写入的64bit数据，输出为…
阅读更多...
FPGA的时钟资源

FPGA的时钟资源

目录 简介 Clock Region详解 MRCC和SRCC的区别 BUFGs 时钟资源总结 简介 7系列FPGA的时钟结构图&#xff1a; Clock Region&#xff1a;时钟区域&#xff0c;下图中有6个时钟区域&#xff0c;用不同的颜色加以区分出来 Clock Backbone&#xff1a;从名字也能看出来&#x…
阅读更多...
PermissionError: [Errno 13] Permission denied: ‘xview/xView_train.geojson‘

PermissionError: [Errno 13] Permission denied: ‘xview/xView_train.geojson‘

原因 如果你试图打开一个文件&#xff0c;但你的路径是一个文件夹&#xff0c;就会发生这种情况。 判断是否是文件夹 import os path r"my/path/to/file.txt" assert os.path.isfile(path) with open(path, "r") as f:pass或者可以看下该文件是否真没有…
阅读更多...
前后端分离项目Docker部署指南（下）

前后端分离项目Docker部署指南（下）

目录 前言&#xff1a; 一.安装nginx 创建目录 上传nginx.conf至/data/nginx/conf文件夹中 运行启动容器 上传静态资源文件 ​编辑 访问结果 前言&#xff1a; 在上一篇博客中&#xff0c;我们深入探讨了如何使用Docker部署一个前后端分离的项目中的后端部分。我们构建…
阅读更多...
二叉树遍历（前中后序的递归/非递归遍历、层序遍历）

二叉树遍历（前中后序的递归/非递归遍历、层序遍历）

二叉树的遍历 1. 二叉树的前序、中序、后序遍历 前、中、后序遍历又叫深度优先遍历 注&#xff1a;严格来说&#xff0c;深度优先遍历是先访问当前节点再继续递归访问&#xff0c;因此&#xff0c;只有前序遍历是严格意义上的深度优先遍历 首先需要知道下面几点&#xff1a; …
阅读更多...
STM32基础--位带操作

STM32基础--位带操作

位带简介 位操作就是可以单独的对一个比特位读和写&#xff0c;这个在 51 单片机中非常常见。51 单片机中通过关键字 sbit 来实现位定义&#xff0c;STM32 没有这样的关键字&#xff0c;而是通过访问位带别名区来实现。 在 STM32 中&#xff0c;有两个地方实现了位带&#xff…
阅读更多...
leetcode 1143. 最长公共子序列【动态规划】

leetcode 1143. 最长公共子序列【动态规划】

leetcode 1143. 最长公共子序列 int longestCommonSubsequence(char* text1, char* text2) {int len1 strlen(text1);int len2 strlen(text2);int dp[len1 1][len2 1];memset(dp, 0, sizeof(dp));for (int i 1; i < len1; i) {for (int j 1; j < len2; j) {if (t…
阅读更多...
读书笔记之《理解和改变世界》：从信息知识智能的本质看AI

读书笔记之《理解和改变世界》：从信息知识智能的本质看AI

《理解和改变世界: 从信息到知识与智能》作者:是(法) 约瑟夫希发基思&#xff0c; 原作名: Understanding and Changing the World: From Information to Knowledge and Intelligence&#xff0c;2023年出版。 约瑟夫希发基思&#xff08;Joseph Sifakis&#xff09;&#xff…
阅读更多...
【Linux】第一个小程序--进度条

【Linux】第一个小程序--进度条

这篇博客要综合利用以前的知识&#xff0c;来实现一个进度条程序~ 目录 换行&回车 缓冲区 实现简单的倒计时 实现进度条 version1 version2 在开始写这个小程序之前&#xff0c;我们先学习一些预备知识&#xff1a; 换行&回车 缓冲区 在我们运行这个程序时&…
阅读更多...
docker ENTRYPOINT [“sh“,“-c“,“java“,“-jar“,“Hello.jar“] 启动失败问题分析

docker ENTRYPOINT [“sh“,“-c“,“java“,“-jar“,“Hello.jar“] 启动失败问题分析

因为没系统的学过linux语法&#xff0c;所以才会产生如下疑问。大佬请跳过。 问题&#xff1a;当在dockerfile里面配置 ENTRYPOINT ["sh","-c","java","-jar","Hello.jar"] &#xff0c;启动对应容器时会无法正常运行&…
阅读更多...
【MySQL】MySQL 的 SSL 连接以及连接信息查看

【MySQL】MySQL 的 SSL 连接以及连接信息查看

MySQL 的 SSL 连接以及连接信息查看 在上篇文章中&#xff0c;我们学习过 MySQL 的两种连接方式&#xff0c;回忆一下&#xff0c;使用 -h 会走 TCP 连接&#xff0c;不使用 -h 可以使用另两种方式来走 UnixSocket 连接。我们就接着这个话题再聊点别的&#xff0c;首先要纠正一…
阅读更多...
基于springboot+vue实现高校学生党员发展管理系统项目【项目源码+论文说明】

基于springboot+vue实现高校学生党员发展管理系统项目【项目源码+论文说明】

基于springboot实现高校学生党员发展管理系统演示 摘要 随着高校学生规模的不断扩大&#xff0c;高校内的党员统计及发展管理工作面临较大的压力&#xff0c;高校信息化建设的不断优化发展也进一步促进了系统平台的应用&#xff0c;借助系统平台可以实现更加高效便捷的党员信息…
阅读更多...
抓包工具获取请求信息

抓包工具获取请求信息

Charles 下载安装 下载 官方下载地址&#xff1a;https://www.charlesproxy.com/latest-release/download.do 下载后傻瓜式安装就好&#xff0c;这个官方的需要激活&#xff0c;可以选择绿色版或者学习版 绿色版 绿色中文版&#xff1a;https://soft.kxdw.com/pc/Charles.z…
阅读更多...
STM32标准库——（21）Flash闪存

STM32标准库——（21）Flash闪存

1.简介 第一个用途&#xff0c;对于我们这个C8T6芯片来说&#xff0c;它的程序存储器容量是64K&#xff0c;一般我们写个简单的程序&#xff0c;可能就只占前面的很小一部分空间&#xff0c;剩下的大片空余空间我们就可以加以利用&#xff0c;比如存储一些我们自定义的数据&…
阅读更多...
单数码管（arduino）

单数码管（arduino）

1.连接方法 挨个点亮每个灯 #include <Arduino.h>int pin_list[] {4, 5, 19, 21, 22, 2, 15, 18}; int num_pins sizeof(pin_list) / sizeof(pin_list[0]); // 计算数组中的元素数量void setup() {// 设置每个引脚为输出for(int i 0; i < num_pins; i) {pinMode(p…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023