HTML——列表,表格,表单内容的讲解

文章目录

  • 一、列表
    • 1.1无序(unorder)列表
    • 1.2 有序(order)列表
    • 1.3 定义列表
  • 二、表格**
    • 2.1 基本的表格标签
    • 2.2 演示
  • 三、表单
    • 3.1 form元素
    • 3.2 input元素
      • 3.2.1 单选按钮
    • 3.3 selcet元素

基础部分点击: web基础

一、列表

前述:在日常生活里,我们经常用到列表,而在HTML中为列表提供了一种简单有效的途径。主要支持两种类型——无序列表和有序列表

1.1无序(unorder)列表

标签ul是一种块标签,用于创建无序列表。列表中每个项目都是通过标签<li>指定的(li,全称是list item)。
看代码:

<!DOCTYPE html>
<html><head><title>list </title><meta charset="utf-8">  </head><body><p>there are three apples.</p><ul><li>apple1</li><li>apple2</li><li>apple3</li></ul></body>

在这里插入图片描述
上述效果非常明显,用点来分开每一行。

1.2 有序(order)列表

有序列表是通过<ol>来创建的。就是将无序列表的ul变成了ol
在这里插入图片描述

1.3 定义列表

定义列表是通过<dl>的内容指定的。定义列表中定义的每个术语是作为<dt>元素的内容指定的。而定义本身是作为<dd>元素的内容来指定的。有点不好理解这段话,直接来代码:

<!DOCTYPE html>
<html><head><title>list </title><meta charset="utf-8">  </head><body><p>there are three apples.</p><dl><dt>111</dt><dd>one apple</dd><dt>222</dt><dd>two apples</dd><dt>333</dt><dd>three apples</dd></dl></body>
</html>

在这里插入图片描述
这样子是不是比较清楚了,原来<dt>是定义序号,就是代替了原来的1、2、3这些,下载可以自定义了,而<dd></dd>里面包含的内容原来是列表内容。

二、表格**

表格是单元格构成的矩阵。每一个元素就是一个单元格。

2.1 基本的表格标签

  1. 开始结束标签:<table></table>
  2. 表格的总标题是在<caption>标签中;
  3. 注意,表格的单元格是一行一行输入的;
  4. 表格的每一行都是标记<tr>的内容;
  5. 每一行开头元素名称都是包含于<th>;而数值或者说元素内容都是包含于<td>.

2.2 演示

<!DOCTYPE html>
<html><head><title>A simple table</title><meta charset="utf-8">  </head><body><table><caption>THE MARK TABLE</caption><tr><th> </th><th>chinese</th><th>math</th><th>english</th></tr><!--ljf's mark--><tr><th>ljf</th><td> 100 </td><td> 99 </td><td> 100 </td></tr><!--htc's mark--><tr><th>htc</th><td> 0 </td><td> 9 </td><td> 10 </td></tr><!--tyl's mark--><tr><th>tyl</th><td> 100 </td><td> 99 </td><td> 100 </td></tr></table></body>
</html>

在这里插入图片描述

三、表单

用户通过web浏览器与服务器之间进行通信的最常用的手段是使用表单,即为实现人机交互。

3.1 form元素

(1)一个表单中的所有控件都必须在form元素的内容中指定。<from>是一个块标签,它有多个不同的特性,但只有特性 action是必需的。特定action指定了web服务器上一个应用程序的url,当用户单击提交按钮时,将调用这个应用程序。这个地方简单的来说,点击提交后,就可以跳转到action后面的url地址。
(2)<form>标签的method特性的取值为getpost两个方法中的一种,这两种方法用于将表单数据发送给服务器。通常使用post,因为使用post时会更加安全一些,能够隐藏信息。
(3)演示:
get:
在这里插入图片描述

post:
在这里插入图片描述

3.2 input元素

input元素最常用的属性为type,该属性可以指定单选按钮,复选框,文本框,普通按钮,数字范围等等。其中还有较为常用的属性value,该属性时初始化的目的。来看一下演示。
在这里插入图片描述

3.2.1 单选按钮

我们在这里说一下,单选按钮的用法。

<input type="radio" name="emo" id="solo"> <label for="solo">solo</label> 
<input type="radio" name="emo" id="married"> <label for="married">married</label>

两个按钮的name属性,一定要一样,否则则无法单选,会出现以下情况:
在这里插入图片描述
我们为了地增加用户体验感,加入了label标签,这样子,用户可以点击字或者圆圈都可以选中,这里注意,label中地for属性的定义,要和单选按钮中地id值一样。

3.3 selcet元素

该元素利用select标签来定义,里面的内容用option来说明。

<select><option>--请选择日--</option><option>1</option><option>2</option><option>3</option>
</select>

在这里插入图片描述

点击这个可跳转到css的学习:
样式表的学习
css的选择器的使用

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

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

相关文章

【JavaEE】CAS(Compare And Swap)操作

文章目录 什么是 CASCAS 的应用如何使用 CAS 操作实现自旋锁CAS 的 ABA 问题CAS 相关面试题 什么是 CAS CAS&#xff08;Compare and Swap&#xff09;是一种原子操作&#xff0c;用于在无锁情况下保证数据一致性的问题。它包含三个操作数——内存位置、预期原值及更新值。在执…

轻量自高斯注意力(LSGA)机制

light&#xff08;轻量&#xff09;Self-Gaussian-Attention vision transformer&#xff08;高斯自注意力视觉transformer&#xff09; for hyperspectral image classification&#xff08;高光谱图像分类&#xff09; 论文&#xff1a;Light Self-Gaussian-Attention Vision…

完整指南:如何使用 Node.js 复制文件

文件拷贝指的是将一个文件的数据复制到另一个文件中&#xff0c;使目标文件与源文件内容一致。Node.js 提供了文件系统模块 fs&#xff0c;通过该模块可以访问文件系统&#xff0c;实现文件操作&#xff0c;包括拷贝文件。 Node.js 中文件拷贝方法 在 Node.js 中&#xff0c;有…

基于微信小程序的宠物寄养平台小程序设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

预编译(1)

目录 预定义符号&#xff1a; 使用&#xff1a; 结果&#xff1a; 预编译前后对比&#xff1a; #define定义常量&#xff1a; 基本语法&#xff1a; 举例1&#xff1a; 结果&#xff1a; 预编译前后对比&#xff1a; 举例2&#xff1a; 预编译前后对比&#xff1a; 注…

ELK介绍

一、前言 前面的章节我们介绍通过ES Client将数据同步到ElasticSearch中&#xff0c;但是像日志这种数据没有必要自己写代码同步到ES那样会折腾死&#xff0c;直接采用ELK方案就好&#xff0c;ELK是Elasticsearch、Logstash、Kibana三款开源软件的缩写&#xff0c;ELK主要用于…

【论文阅读】大语言模型中的文化道德规范知识

摘要&#xff1a; 在已有的研究中&#xff0c;我们知道英语语言模型中包含了类人的道德偏见&#xff0c;但从未有研究去检测语言模型对不同国家文化的道德差异。 我们分析了语言模型包含不同国家文化道德规范的程度&#xff0c;主要针对两个方面&#xff0c;其一是看语言模型…

beanstalkd 启动跟停止【经常使用 nohup 和 配合来启动程序,如: nohup ./test 同时免疫SIGINT和SIGHUP信号】

启动命令&#xff1a;  nohup /usr/bin/beanstalkd -l 0.0.0.0 -p 11300 & >> /dev/null 2>&1 正常启动后&#xff0c;利用 【lsof -i:11300】查看 该服务是否正常启动 停止命令&#xff1a; /etc/init.d/beanstalkd stop 正常停止后&#xff0c;利用 【l…

P2PNet-Soy原理梳理

前文总结了P2PNet源码以及P2PNet-Soy源码实现方法&#xff0c;相关链接如下&#xff1a; 人群计数P2PNet论文&#xff1a;[2107.12746] Rethinking Counting and Localization in Crowds:A Purely Point-Based Framework (arxiv.org) p2p人群计数源码&#xff1a;GitHub - Te…

Java Spring Boot 开发框架

Spring Boot是一种基于Java编程语言的开发框架&#xff0c;它的目标是简化Java应用程序的开发过程。Spring Boot提供了一种快速、易于使用的方式来创建独立的、生产级别的Java应用程序。本文将介绍Spring Boot的特性、优势以及如何使用它来开发高效、可靠的应用程序。 一、简介…

云服务器租用价格表概览_阿里云腾讯云华为云

云服务器租用价格多少钱一年&#xff1f;阿腾云分享阿里云、腾讯云和华为云的云服务器租用价格表&#xff1a;阿里云2核2G服务器108元一年起、腾讯云2核2G3M带宽轻量服务器95元一年、华为云2核2G3M云耀L实例89元一年起&#xff0c;阿腾云分享更多关于云服务器租用价格明细&…

Kubernetes基础(五)-Service

1 引言 Service 主要用于提供网络服务&#xff0c;通过Servicel的定义&#xff0c;能够 为客户端应用提供稳定的访问地址&#xff08;域名或IP地址&#xff09;和负载均衡功能&#xff0c;以及屏蔽后端Endpoint的变化&#xff0c;是Kubernetes实现微服务的核心资源。 本文详细…

博弈论中静态博弈经典场景案例

博弈论中静态博弈经典场景案例 1、齐威王田忌赛马 田忌赛马是中国家喻户晓的故事&#xff0c;故事讲述的是齐国大将田忌的谋士孙膑如何运用计谋帮助田忌在与齐威王赛马时以弱胜强的故事&#xff0c;这个故事其实本质也是一个博弈的过程。     齐威王要和田忌赛马&#xff…

二叉树MFC实现

设有一颗二叉树如下&#xff1b; 这似乎是一颗经常用作示例的二叉树&#xff1b; 对树进行遍历的结果是&#xff0c; 先序为&#xff1a;3、2、2、3、8、6、5、4&#xff0c; 中序为&#xff1a;2、2、3、3、4、5、6、8&#xff0c; 后序为2、3、2、4、5、6、8、3&#xff1b…

MySQL学习笔记25

逻辑备份 物理备份 在线热备&#xff1a; 真实案例&#xff1a; 数据库架构是一主两从&#xff0c;但是两台从数据库和主数据不同步。但是每天会全库备份主服务器上的数据到从服务器上。需要解决主从不同步的问题。 案例背后的核心技术&#xff1a; 1、熟悉MySQL数据库常见…

【Java】面向过程和面向对象思想||对象和类

1.面向过程和面向对象思想 两者都贯穿于软件分析、设计和开发的各个阶段&#xff0c;对应面向对象就分别称为面向对象的分析&#xff08;OOA&#xff09;、面向对象的设计&#xff08;OOD&#xff09;和面向对象的编程&#xff08;OOP&#xff09;。C语言是一种典型的面向过程语…

【计算机视觉|人脸建模】PanoHead:360度几何感知的3D全头合成

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;PanoHead: Geometry-Aware 3D Full-Head Synthesis in 360 ∘ ^{\circ} ∘ 链接&#xff1a;[2303.13071] PanoHead: Geometry-Aware 3D Full-Head Synthesis in 360 ∘ ^{\circ} ∘ (arx…

python reportlab生成pdf

这里自定义了pagetemplate&#xff0c;使用BaseDocTemplate&#xff0c;但我感觉一般使用SimpleDocTemplate就可以。 from reportlab.platypus import Frame from reportlab.lib.pagesizes import A4, landscapepadding dict(leftPadding72,rightPadding72,topPadding72,bott…

Java面经整理(2)

一)为什么要使用克隆? 实现原型设计模式&#xff0c;实现备份和恢复 假设此时这个系统是支持用户进行配置的&#xff0c;是支持用户设置皮肤的颜色&#xff0c;设置系统的快捷键&#xff0c;此时就需要使用原型设计模式&#xff0c;不能自己设置把别人的设置都给改了&#xff…