【HTML】day01

列表

作用:布局内容排序整齐的区域。

列表分类:无序列表、有序链表、定义列表

无序列表

    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>
            <h1>h1</h1>
        </li>
    </ul>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ul>li*4>a -->
    <h4>友情链接</h4>
    <ul>
        <li><a href="https://www.hayaizo.cn">Hayaizo</a></li>
        <li><a href="https://www.souhu.com">搜狐</a></li>
        <li><a href="https://www.sina.com">新浪</a></li>
        <li><a href="https://www.163.com">网易</a></li>
    </ul>
</body>
</html>

有序列表

    <ol>
        <li></li>
    </ol>

自定义列表

dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情。

表格

标签名说明
table表格
trtable row 行
thtable head 表头
tdtable data 内容
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>100</td>
            <td>99</td>
        </tr>
    </table>

表格结构标签

标签名含义说明
thead表格头部表格头部内容
tbody表格主体主要内容区域
tfoot表格底部汇总信息区域

合并单元格

rowspan:跨行合并

colspan:跨列合并

input标签基本使用

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

type说明
text文本
password密码框
radio单选框
checkbox多选框
file上传文件

input需要绑定name才可以进行单选,name相同的只能选一个

input标签占位符

placeholder

    账号:<input type="text" placeholder="请输入账号"> <br>
    密码:<input type="password" placeholder="请输入密码"> <br>
    性别:<input type="radio" name="sex" checked><input type="radio" name="sex">

上传文件

默认情况下,文件上传表单控件只能上传一个文件,可以添加multiple属性实现多文件上传

下拉框

    <select>
        <option selected>北京</option>
        <option selected>武汉</option>
        <option selected>长沙</option>
    </select>

文本域

<textarea rows="10" cols="20">评论区</textarea>

lable标签-增大范围

按钮 - button

type属性值说明
submit提交按钮
reset重置按钮
button普通按钮

无语义的布局标签

  • 布局网页(划分网页区域,摆放内容)

    • div:独占一行

    • span:不换行

有语义的布局标签

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

字符实体

在网页中显示预留字符

显示结果描述实体名称
空格&nbsp;
<小于&lt;
>大于&gt;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DolphinScheduler——奇富科技的调度实践

目录 一、技术架构 二、业务挑战 2.1 调度任务量大 2.2 运维复杂 2.3 SLA要求高 三、调度优化实践 3.1 重复调度 3.2 漏调度 3.3 Worker服务卡死 3.4 任务重复运行 四、服务监控 4.1 方法耗时监控 4.2 任务调度链路监控 五、用户收益 原文大佬的这篇调度系统案例…

【Gitee】创建第一个仓库并提交第一次代码

目录 第一步&#xff1a;注册登录 第二步&#xff1a;创建第一个仓库 1、我的工作台 → 创建我的仓库 2、填写内容 3、创建 第三步&#xff1a;第一次提交代码 1、参考资料 2、操作 2.1 idea创建项目 2.2 项目内容推送至远程 最后&#xff1a;平台相关资料库 第一步…

1.Zookeeper理论基础

1.Zookeeper的基本概念 是一个分布式应用协调框架 &#xff0c;java编写的。客户端 /服务端 的架构模式。CP设计(一致性&#xff0c;分区容错) 它主要是用来解决分布式应用中经常遇到的一些数据管理问题&#xff0c;如&#xff1a;服务注册服务、状态同步服务、集群管理、分布…

解决物理机装不上VMnet1和VMnet8的虚拟网卡问题

问题描述&#xff1a; 博主在使用虚拟机时&#xff0c;发现物理机的ping命令连接不上虚拟机&#xff0c;导致xshell软件也连接不上&#xff0c;最后发现问题是更改适配器设置中没有虚拟机的网卡&#xff08;VMnet1和VMnet8&#xff09;&#xff1a; 方法一&#xff1a; 博主搜…

虽然写了不少前端代码,但是我真没搞懂什么是 JavaScript

追溯到 1998 年第一次拥有个人电脑开始&#xff0c;JavaScript 可能是我最早接触的编程语言&#xff0c;不过这么多年过去了&#xff0c;我现在又变得迷糊了&#xff0c;我反倒搞不清楚什么是 JavaScript 了。 一、历史 JavaScript最早是由Brendan Eich在1995年发明的。当时&…

SPC 之 I-MR 控制图

概述 1924 年&#xff0c;美国的休哈特博士应用统计数学理论将 3Sigma 原理运用于生产过程中&#xff0c;并发表了 著名的“控制图法”&#xff0c;对产品特性和过程变量进行控制&#xff0c;开启了统计过程控制新时代。 什么是控制图 控制图指示过程何时不受控制&#xff…

【pyinstaller打包记录】程序使用多进程,打包后,程序陷入死循环

简介 PyInstaller 是一个用于将 Python 程序打包成可执行文件&#xff08;可执行程序&#xff09;的工具。它能够将 Python 代码和其相关的依赖项&#xff08;包括 Python 解释器、依赖的模块、库文件等&#xff09;打包成一个独立的可执行文件&#xff0c;方便在不同环境中运行…

YOLOv8从入门到入土使用教程!(二)目标预测

⭐⭐⭐瞧一瞧看一看&#xff0c;新鲜的YOLOv9魔改专栏来啦&#xff01;⭐⭐⭐ YOLOv9有效改进专栏汇总|未来更新卷积、主干、检测头注意力机制、特征融合方式等创新 一、本文介绍 本文将演示如何使用YOLOv8进行训练及预测&#xff01;模型训练教程参考下文&#xff1a; YOLOv8从…

python实现常见一元随机变量的概率分布

一. 随机变量 随机变量是一个从样本空间 Ω \Omega Ω到实数空间 R R R的函数&#xff0c;比如随机变量 X X X可以表示投骰子的点数。随机变量一般可以分为两类&#xff1a; 离散型随机变量&#xff1a;随机变量的取值为有限个。连续型随机变量&#xff1a;随机变量的取值是连…

线上问题——学习记录幂等判断失效问题分析

一、业务流程 上图是对save和saveScore两个接口的流程抽象&#xff0c;save是上传答题数据&#xff0c;saveScore则是上传答题分数&#xff0c;为保证幂等和防止并发调用&#xff0c;这两个接口都加了分布式锁&#xff08;还是两层哦&#xff09;。第一层使用的是不同的锁&…

【C++】STL简介 | STL六大组件 | string类 | string类对象操作

目录 1. 什么是STL 2. STL的版本 3. STL的六大组件 4. STL的缺陷 5. 引出string类 6. 标准库中的string类 6.1 string类简介 6.2 string类对象的构造 6.3. string类对象的容量 6.4. string类对象的遍历 6.5. string类对象的修改 6.6. string类非成员函数 6.7. vs…

品优购首页制作

一&#xff0c;常用模块类名命名 二&#xff0c;快捷导航shortcut制作 三&#xff0c;header制作 3.1LOGO SEO优化 3.2 搜索模块定位 四&#xff0c; nav导航制作 五&#xff0c;footer底部制作 六&#xff0c;main主体模块制作 以前书写是模块化中的公共部分 main主体模块是…

GEE入门篇|图像分类(一):监督分类

在遥感中&#xff0c;图像分类是尝试将图像中的所有像素分类为有限数量的标记土地覆盖和/或土地利用类别。 生成的分类图像是从原始图像导出的简化专题图&#xff08;图 1&#xff09;&#xff0c; 土地覆盖和土地利用信息对于许多环境和社会经济应用至关重要&#xff0c;包括自…

鸿蒙开发,对于前端开发来说,究竟是福是祸呢?

提前声明&#xff1a; 先说好哈&#xff0c;不要一上来就开喷&#xff0c;好吧&#xff0c;不感兴趣的话你可以不用看下文直接划走&#xff0c;直接喷俺有点承受不住&#xff0c;心脏不好。如果你感兴趣&#xff0c;你可以先把这篇文章看完&#xff0c;看完后感觉俺讲的还挺有道…

堆和二叉树的动态实现(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

Linux - 基础IO

1、回顾 1.1、来段代码回顾C文件接口 hello.c写文件 #include <stdio.h> #include <string.h> int main() {FILE *fp fopen("myfile", "w");if(!fp){printf("fopen error!\n");}const char *msg "hello bit!\n";int …

xss.haozi.me:0x03及04

这里有一个正则所以&#xff08;&#xff09;要用到实体编码 <a href"javascript:alert1">cc</a> 03 04都一样

在线客服系统部署ssl开启https无法自动获取提示消息解决办法

▇ 增加https无法收发消息&#xff1a; 严格按照教程修改 1./站点目录/public目录下,修改index.php define(whost,wss://kf.tpym.cn); define(wport,443); 2./站点目录/service 目录下,修改config.php // websocket 端口&#xff0c;客服系统网页会连这个端口 $websocket_…

防患未然,OceanBase巡检工具应用实践——《OceanBase诊断系列》之五

1. OceanBase为什么要做巡检功能 尽管OceanBase拥有很好的MySQL兼容性&#xff0c;但在长期的生产环境中&#xff0c;部署不符合标准规范、硬件支持异常&#xff0c;或配置项错误等问题&#xff0c;这些短期不会出现的问题&#xff0c;仍会对数据库集群构成潜在的巨大风险。为…

1999-2022年30省平均受教育年限(含原始数据和具体计算过程+计算结果)

1999-2022年30省平均受教育年限&#xff08;含原始数据和具体计算过程&#xff09; 1、时间&#xff1a;1999-2022年 2、范围&#xff1a;30省&#xff08;剔除西藏&#xff09; 3、计算方式&#xff1a;平均受教育年限&#xff08;未上学人数*0小学人数*6初中人数*9高中人数…