前端入门第二天

目录

一、列表、表格、表单

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

 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.字符实体

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

五、综合案例

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

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

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

相关文章

基于Raspberry Pi的自动巡航与避障系统(二)

在上一篇中,我们讨论了智能小车的避障逻辑实现,在本篇中,我们将进一步扩展智能小车的功能,包括更高级的避障策略、路径规划和导航功能,同时,我们还将提供相应的代码示例,以帮助读者更好地理解和…

Typora导出html文件图片自动转换成base64

Typora导出html文件图片自动转换成base64 一、出现问题二、解决方案三、编码实现3.1.创建Java项目3.2.代码3.3.打包成Jar包 四、如何使用endl 一、出现问题 typora 导出 html 的时候必须带有原图片,不方便交流学习,文件太多显得冗余,只有将图…

GNSS技术助力航海业迈向新时代:海洋测绘与航行的创新应用

全球导航卫星系统(GNSS)技术在海洋测绘与航行领域的广泛应用,正推动航海业迎来新一轮的科技变革。MinewSemi的GNSS模块为船舶导航、海洋资源勘探和航行安全提供了更为精确和高效的解决方案。本文将深入研究GNSS技术在海洋测绘与航行中的创新应…

开源:基于Vue3.3 + TS + Vant4 + Vite5 + Pinia + ViewPort适配..搭建的H5移动端开发模板

vue3.3-Mobile-template 基于Vue3.3 TS Vant4 Vite5 Pinia ViewPort适配 Sass Axios封装 vconsole调试工具,搭建的H5移动端开发模板,开箱即用的。 环境要求: Node:16.20.1 pnpm:8.14.0 必须装上安装pnpm,没装的看这篇…

基于PSO-BP神经网络的风电功率MATLAB预测程序

微❤关注“电气仔推送”获得资料(专享优惠) 参考文献 基于风电场运行特性的风电功率预测及应用分析——倪巡天 资源简介 由于自然风具有一定的随机性、不确定性与波动性,这将会使风电场的功率预测受到一定程度的影响,它们之间…

GPT-4级别模型惨遭泄露!引爆AI社区,“欧洲版OpenAI”下场认领

大家好,我是二狗。 这两天,一款性能接近GPT-4的模型惨遭泄露,引发了AI社区的热议。 这背后究竟是怎么回事呢? 起因是1月28日,一位名为“Miqu Dev”的用户在 HuggingFace 上发布了一组文件,这些文件共同组…

iOS pod sdk开发到发布,记录

本文章记录从开发sdk到发布cocopod的问题和流程,省的每次都忘还得重新查 1:pod lib create (sdk名称) 命令创建 工程结构,然后根据命令行提示进行选择. What platform do you want to use?? [ iOS / macOS ]。~》 iOS What language do you want to use?? [ Swift / Obj…

“/“应用程序中的服务器错误.

<div id"m_category" class" round2"><h3>管理中心</h3><div class"con"> <p><a href"categorymanager.aspx">类别管理</a></p> /*我是这段代码出现问题*/ <p><a …

异步编程,到底有什么用?

关键词&#xff1a;高性能、架构设计、异步思想、场景落地 文章导读 场景切入 先来看一个日常生活快递寄件场景&#xff0c;从寄件人&#xff08;寄件&#xff09;到收件人&#xff08;收件&#xff09;&#xff0c;全流程如下 当你准备寄送一个包裹时&#xff0c;通常你可以…

Android配置GitLab CI/CD持续集成,Shell版本的gitlab-runner,FastLane执行,上传蒲公英

mac环境下, 首选需要安装gitlab-runner和fastlane brew install gitlab-runner brew install fastlane 安装完成,来到我们在gitlab下新建的Android项目,我们开始创建gitlab-runner 1、创建runner 点开runner,点击新建runner 选择macos,自定义一个标签,把运行未打标签…

合约短线高胜率策略-扭转乾坤指标使用说明

扭转乾坤指标使用说明 行情判断 双绿线 多趋势双红线 空趋势大绿线 小红线 多震荡大红线 小绿线 空震荡 进场条件 趋势行情进场 多趋势 多信号 底金叉 做多空趋势 空信号 顶死叉 做空 震荡行情进场 多震荡 多信号 底金叉 做多多震荡 空信号 顶死叉 做空空…

Elasticsearch:将文档级安全性 (DLS) 添加到你的内部知识搜索

作者&#xff1a;来自 Elastic Sean Story 你的企业很可能淹没在内部数据中。 你拥有问题跟踪、笔记记录、会议记录、维基页面、视频录制、聊天以及即时消息和私信。 并且不要忘记电子邮件&#xff01; 难怪如此多的企业都在尝试创造工作场所搜索体验 - 为员工提供集中、一站…

RPC教程 7.服务发现与注册中心

0.前言 这一节的内容只能解决只有一个服务的情况。要是有多个服务(即是多个结构体&#xff09;这种就解决不了&#xff0c;也即是没有服务ip地址和服务实例的映射关系。 1.为什么需要注册中心 在上一节中&#xff0c;客户端想要找到服务实例的ip,需要硬编码把ip写到代码中。…

python+selenium的web自动化】- 元素的常用操作详解(一)

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

PySimpleGUI 综合应用|英语文本朗读以及转换为语音Mp3

PySimpleGUI 综合应用 目录 PySimpleGUI 综合应用 应用界面 完整代码 所需模块 PySimpleGUI pyttsx3 pyaudio rapidfuzz 字典格式 应用界面 完整代码 英语朗读器.pyw import PySimpleGUI as sg import pyttsx3,pyaudio,pyperclip import os,re,datetime,wave,threa…

EasyExcel使用,实体导入导出

简介 Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存&#xff0c;poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题&#xff0c;但POI还是有一些缺陷&#xff0c;比如07版Excel解压缩以及解压后存储都是在内存中…

@JsonProperty(“xx“)的使用

JsonProperty(“xx”) 指定JSON字段的名称 常见的场景 1、第三方调用本系统&#xff0c;参数接收不到 &#xff0c;没有使用驼峰命名&#xff0c;或者传参格式不一致问题 2、前后端调试&#xff0c;接收不到个别参数 遇到的场景描述&#xff1a; 1&#xff0c;项目提供ope…

Vue中的指令修饰符计算属性和方法的区别

一、指令修饰符 1.什么是指令修饰符&#xff1f; 所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码 2.按键修饰符 keyup.enter —>当点击enter键的时候才触发 代码演示&#xff1a; <!DOCTYPE html> <html lang…

【ChatGPT】文本向量化与余弦相似度:揭开文本处理的神秘面纱(5)

1、引言 在这个数字化的时代&#xff0c;我们每天都会面对大量的文本信息&#xff0c;从社交媒体到新闻报道&#xff0c;文本无处不在。但是&#xff0c;计算机要如何理解和处理这些文字呢&#xff1f;本文将为大家揭开其中的一些奥秘&#xff0c;详细解释文本向量化的概念&am…

C++ hash—unordered_mapset

目录 一. unordered系列关联式容器 1、文档说明 2、接口说明 1. 构造 2. 容量 3. 迭代器 4. 元素访问 5. 查询 6. 修改 7. 桶操作 8. 测试 二、unordered_set 1、​​​​​​​文档说明 2、接口说明 1. 构造 2. 容量 3. 迭代器 4. 元素访问 5. 插入和删除…