前端入门第二天

目录

一、列表、表格、表单

二、列表(布局内容排列整齐的区域)

 1.无序列表(不规定顺序)

2.有序列表(规定顺序)

3.定义列表(一个标题多个分类)

三、表格

1.表格结构标签

2.合并单元

四、表单

1.input 标签基本使用(type)

2.input 标签占位文本(placeholder)

3.radio 单选框(name checked)

4.file 多文件上传(multiple)

5.下拉菜单(select option)

6.文本域(textarea)

7.label标签

方法一:

方法二:

8.按钮(butoon)

9.无语义的布局标签

10.字符实体

五、综合案例


一、列表、表格、表单

示例:(嵌套关系)

二、列表(布局内容排列整齐的区域)

分类:无序列表、有序类别、定义列表(一个标题多个分类)

 1.无序列表(不规定顺序)

  • ul中只能包含li
  • li中可以包含任何内容

2.有序列表(规定顺序)

  • ol中只能包含li
  • li中可以包含任何内容

3.定义列表(一个标题多个分类)

 

  • dl中只能包含dt和dd
  • dt和dd中可以包含任何内容

三、表格

  • th:默认加粗、居中
  • 表格默认没有边框线,border="1"添加边框一像素宽

1.表格结构标签

把内容划分区域

2.合并单元

将多个单元格合并成一个单元格,以合并同类信息

合并单元格的步骤:

  •  不能跨结构标签合并

四、表单

收集用户信息(注册登录搜索)

1.input 标签基本使用(type)

  • text外其他快捷输入,重新打""

2.input 标签占位文本(placeholder)

3.radio 单选框(name checked)

4.file 多文件上传(multiple)

5.下拉菜单(select option)

  • name="" id="" 发送数据
  • value=""发送数据

  • 默认显示第一个,通过selected设置默认显示

6.文本域(textarea)

多行输入文本的表单空间

  • 用CSS设置尺寸
  • 右下角的拖拽功能将禁用

7.label标签

方法一:

方法二:

8.按钮(butoon)

  • 配合 form 标签使用action数据发送地址

9.无语义的布局标签

10.字符实体

  • 在网页中只识别一个空格

五、综合案例

  • 体育新闻(列表)
  • 注册信息(表单)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用宝塔面板访问MySQL数据库

文章目录 前言一、安装访问工具二、查看数据库总结 前言 前面我们已经部署了前后端项目,但是却不能得到数据库的信息,看有谁再使用你的项目。例如员工、用户等等。本次博客进行讲解如何在宝塔面板里面访问MySQL数据库。 一、安装访问工具 1、打开软件商…

TensorFlow2实战-系列教程13:Resnet实战1

🧡💛💚TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 Resnet实战1 Resnet实战2 Resnet实战3 1、残差连接 深度学习中出现了随着网络的堆叠…

scienceplots绘图浅尝

前言 科研写作中,黑压压的文字里面如果能有一些优美的图片无疑会给论文增色不少,绘图的工具有很多,常用的有Excel、Python、Matlab等,Matlab在绘图方面相较于Python有一种更加原生的科研风,而且可视化编辑图例、坐标轴…

ManticoreSearch-(安装配置,集群搭建)-学习总结

ManticoreSearch-(安装配置)-学习总结 基础概念安装搭建集群搭建(基于K8S) 原文地址 https://blog.csdn.net/liuyij3430448/article/details/135955025 基础概念 Manticore Search是一个专门为搜索设计的多存储数据库,具有强大的全文搜索功能,适用于…

【SparkML系列3】特征提取器TF-IDF、Word2Vec和CountVectorizer

本节介绍了用于处理特征的算法,大致可以分为以下几组: 提取(Extraction):从“原始”数据中提取特征。转换(Transformation):缩放、转换或修改特征。选择(Selection&…

15.Golang中的反射机制及应用

目录 概述实践基本应用复杂应用 结束 概述 Golang中的反射用法还是比较简单的 reflect.TypeOf(arg)reflect.ValueOf(arg) 实践 基本应用 package mainimport ("fmt""reflect" )func reflectNum(arg interface{}) {fmt.Println("type ", re…

网络异常案例三_RST

问题现象 在做功能测试的时候,经常看到设备离线的消息(MQTT遗嘱)。 在终端连接的网络设备上抓包分析,看到终端设备发起大量的RST请求。 151这个设备,7min,重置断开了8个TCP连接(mqtt连接&#…

理解部署描述符的元素

理解部署描述符的元素 部署描述符是文件名为web.xml的XML文件,其包含了Web应用程序的配置信息。每个Web应用程序都有一个web.xml文件。web.xml文件的元素可用于指定servlet的初始化参数、不同文件的MIME类型、侦听器类,以及将URL模式映射到servlet上。一…

2024年,AI 掀起数据与分析市场的新风暴

2024 年伊始,Kyligence 联合创始人兼 CEO 韩卿在其公司内部的飞书订阅号发表了多篇 Rethink Data & Analytics 的内部信,分享了对数据与分析行业的一些战略思考,尤其是 AI 带来的各种变化和革命,是如何深刻地影响这个行业乃至…

防御挂马攻击:从防御到清除的最佳实践

挂马攻击,也称为马式攻击(Horse Attack),是一种常见的网络攻击手段。攻击者通过在目标服务器或网站中植入恶意程序,以获取系统权限或窃取敏感信息。为了应对这种威胁,本文将重点介绍防御挂马攻击的最佳实践…

AI项目落地成功因素:数据和机器学习模型的选择

构建机器学习模型时,需要考虑几个关键要素:计算能力、算法和数据。公司往往会将大部分资源集中于开发正确的、无偏见的算法,并加大对计算能力的投入,而在运行模型前,数据通常靠边站或完全被抛诸脑后。 如果数据被遗忘&…

C语言——动态内存管理(经典例题)

题1、 为什么会崩溃呢&#xff1f;&#x1f914;&#x1f914;&#x1f914; #include <stdio.h> #include <stdlib.h> #include <string.h>void GetMemory(char** p) {*p (char*)malloc(100); } void Test(void) {char* str NULL;GetMemory(&str);str…

腾讯云幻兽帕鲁Palworld服务器价格表,2024年2月最新

腾讯云幻兽帕鲁服务器价格32元起&#xff0c;4核16G12M配置32元1个月、96元3个月、156元6个月、312元一年&#xff0c;支持4-8个玩家&#xff1b;8核32G22M幻兽帕鲁服务器115元1个月、345元3个月&#xff0c;支持10到20人在线开黑。腾讯云百科txybk.com分享更多4核8G12M、16核6…

力扣hot100 不同路径 多维DP 滚动数组 数论

Problem: 62. 不同路径 文章目录 思路解题方法复杂度朴素DP 思路 讲述看到这一题的思路 解题方法 &#x1f468;‍&#x1f3eb; 卡尔一题三解 复杂度 时间复杂度: &#xff1a; O ( n m ) O(nm) O(nm) 空间复杂度: O ( n m ) O(nm) O(nm) 朴素DP class Solution {p…

查看 npm的一些命令,以及npm config set registry x x x 不生效 解决方案

在 Mac 上查看自己的 npm 源&#xff0c;可以使用以下命令&#xff1a; 打开终端应用程序&#xff08;Terminal&#xff09;。 运行以下命令来查看当前的 npm 配置&#xff1a; npm config list这会显示 npm 的配置信息&#xff0c;包括当前使用的源&#xff08;registry&am…

操作系统基础:死锁

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;OS从基础到进阶 &#x1f426;1 死锁的概念&#x1f9a2;1.1 总览&#x1f9a2;1.2 什么是死锁&#x1f9a2;1.3 死锁、饥饿、死循环的区别&#x1f427;1.3.1 概念&#x1f427;1.3.2 区别…

快速排序|超详细讲解|入门深入学习排序算法

快速排序介绍 快速排序(Quick Sort)使用分治法策略。 它的基本思想是&#xff1a;选择一个基准数&#xff0c;通过一趟排序将要排序的数据分割成独立的两部分&#xff1b;其中一部分的所有数据都比另外一部分的所有数据都要小。然后&#xff0c;再按此方法对这两部分数据分别进…

vue3-深入组件-插槽

插槽 Slots 组件用来接收模板内容 插槽内容与出口 <slot> 元素是一个插槽出口 (slot outlet),&#xff0c;标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 插槽内容可以是任意合法的模板内容&#xff0c;不局限于文本。例如我们可以传入多个元素&#xff0…

HTML+CSS:导航栏组件

效果演示 实现了一个导航栏的动画效果&#xff0c;当用户点击导航栏中的某个选项时&#xff0c;对应的选项卡会向左平移&#xff0c;同时一个小圆圈会出现在选项卡的中心&#xff0c;表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。 Code <…

关于source批量处理sql命令建立数据库后发现中文乱码问题解决方案(Mysql)

今天在使用souce建表的时候发现自己表结构中的中文出现了乱码问题&#xff0c;那么具体的解决方案如下&#xff1a; 首先我们先使用命令行连接自己的数据库 mysql -u root -p 12345 然后使用show variables like "char%"; 如果说你的这个里面不是utf-8那么就是出现了…