【HTML】列表标签、表格标签、块级标签、表单标签

2023-11-18

一、列表标签

1、无序列表

type属性:表示的是项目符号的类型

属性值 描述
circle 空心圆圈
disc 实心圆点(默认类型)
square: 实心方块
<ul type="disc">
    <li>列表项</i>
    <li>列表项</i>
    <li>列表项</i>
    <li>列表项</i>
    ......
</ul>

2、无序列表

type属性:表示的是项目符号的类型

属性值 描述
1 项目符号是数字
a或A 项目符号是26个字母
i或I: 项目符号是罗马数字

start属性:表示项目符号的起始值,属性值必须是数字

<ol type="" start="">
   <li>列表项</i>
   <li>列表项</i>
   <li>列表项</i>
   <li>列表项</i>
</ol>    

3、定义列表(项目列表)

对项目的解释说明,列表项前没有项目符号。

<dt>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
    .....
</dt>

二、表格标签

1、表格整体架构

<table>
    <caption>标签的标题</caption>
    <thead>
        <tr> 
            <th></th> 
            <th></th>
        </tr>
    </thead>
    <tbody>
       <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

2、表格的标签介绍

<table></table>:表示一个表格
<caption></caption>:表示表格的标题
<thead></thead>:是一个语义标签,表示表格的头部(表头)
<tbody></tbody>:语义标签,表示表格的主体部分   
<tr></tr>:是表格中的行标签
<th></th>:表示列标题,默认居中、文字加粗
<td></td>:表示单元格(列)

3、table标签的属性

属性值 描述
border 表格的边框线
bgcolor 表示表格的背景色
background 表格的背景图片
cellspacing 表示单元格之间的空白间距
cellpadding 表示单元格内容与单元格边框之间的空白间距
width 表格的宽度
height 表格的高度

4、 tr标签的属性

属性值 描述
align 水平对齐方式(left、center、right)
valign 垂直对齐方式(top、middle、bottom)
bgcolor 表示行的背景色
background 行的背景图片
height 行高

5、th、td标签的属性

属性值 描述
width 列宽
align 水平对齐方式(left、center、right)
valign 垂直对齐方式(top、middle、bottom)
bgcolor 单元格的背景色
background 单元格的背景图片
height 单元格高

6、跨行、跨列的表格

即合并单元格

 跨列属性:colspan="列数"
跨行属性:rowspan="行数"

三、块级标签

1、段落标签

<p> 内容 </p>

2、span标签

<span> 内容 </span>

3、lable标签

<label> 内容 </label>

4、div标签

可以作为容器(可以放其他的块级标签)

<div>内容</div>

四、表单标签

1、作用

用于收集用户信息。实现用户与网页之间的沟通与对话。

2、构成

  • 提示信息:说明性文字,提示用户如何操作
  • 表单控件:具体的功能项
  • 表单域:提示信息和表单控件

3、创建表单

<form action="远程服务器地址(URL地址)" method="提交方式" name="表单名称">
    提示信息、表单控件
</from>

4、提示信息

<lable>提示信息</lable>

5、表单控件

(1)input控件

单行文本输入框

<input type="text" placeholder="提示信息" maxlength="最大输入长度" value="" />

密码框

<input type="password" placeholder="提示信息" maxlength="最大输入长度" value=""/>

单选按钮

<input type="radio" value="" name="名称" checked/>文字   

checked:默认选中

绑定按钮文字与单选按钮点击:

<input type="radio" name="sex" value="1" checked id="s1">
    <label for="s1"></label>

复选按钮

<input type="checkbox" name="名称" value="">文字

数字输入框

<inpu type="number" name="名称" value="" max="最大值" min="最小值">

日期、时间输入框

<input type="date" name="名称">

颜色选择框

<input type="clolor" name="名称">

图像控件

部分浏览器不识别

<input type="image" name="名称" src="图片路径">

文件控件

<input type="file" name="名称">

隐藏控件

在页面上不显示,但可以向服务器传递值

<input type="hidden" name="名称" value="">

按钮

提交按钮

单击按钮后,该表单信息(表单域当中所有控件的值)提交到服务器(action指定的服务器)

<input type="submit" value="按钮上的文字">
重置按钮

单击该按钮,表单信息恢复到初始状态

<input type="reset" value="按钮上的文字"
普通按钮

单击按钮,没有任何操作

<input type="button" value="按钮上的文字">

(3)select控件

<select>
    <option value="">选项</option>
    <option value="">选项</option>
    <option value="">选项</option>
</select>
eg:
<label for="">&nbsp;&nbsp;&nbsp;贯:</label>
<select name="address" >
	<option value="1">北京</option>
	<option value="2">河北</option>
	<option value="3">河南</option>
	<option value="4">陕西</option>
</select>&nbsp;&nbsp;

(4)textarea控件

多行文本框

<textarea name="名称" cols="列数" rows="行数">
</textarea>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【HTML】列表标签、表格标签、块级标签、表单标签 的相关文章

  • 如何在不知道id的情况下从内页获取父iframe元素?

    让我们想象一下我有这样的东西 div div test html 是空页面 自定义hash属性始终具有不同的值 出于安全原因两个页面位于同一域 iframe 元素的数量和顺序是随机的 我的问
  • 避免滚轮被嵌入的 youtube / flash 视频劫持

    我正在对主页中嵌入 YouTube 视频的网站进行一些改进 我自己没有添加此代码 但它看起来像
  • 在 jQuery 中获取最接近元素的形式

    我编写了这个 js jquery 脚本来检查表单中的所有复选框 它工作得很好 但是这会检查页面上的所有复选框 无论它们是什么表单包装器 这是函数 function toggleCheck state var checkboxes jQuer
  • 从选择控件 html 复制所选项目的文本

    我有一个带有预定义值的选择控件 我希望我的用户能够使用 CTRL C 复制所选项目的文本 我不希望他们能够更改项目的文本 只需用鼠标 键盘选择它 这是一个显示问题的小提琴 我无法选择所选项目的文本 http jsfiddle net 5C3
  • 当CSS文件存在时,无法在服务器上找到它们[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 当运行本地服务器时 这一切都运行良好 我有 header html 其中包含以下代码 在 public html 目录 与 header h
  • 居中时仅在文本的最后一行下划线

    我只想在某些文本的最后一行下划线 当文本换行到更多行时 仍然只有最后一行需要加下划线 我找到了这个解决方案 https stackoverflow com questions 15180827 advanced css challenge
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 在打印 CSS 上在每个页面周围绘制边框?

    打印时我需要在每个页面周围绘制边框 我最初是使用带有分页符的 div 来完成此操作 例如 media print contentContainer position inline height 98 width 100 top 0px le
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 有没有办法在 html 图像标签中显示位图数据? [复制]

    这个问题在这里已经有答案了 有没有办法在 HTML 元素中显示位图图像数据 例如 您有一个指向源文件的常规图像 如下所示 img src myImage png width 100 height 100 有没有这样的事情 img width
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 让登录更安全

    我已使用此代码进行管理员登录 仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全 任何人都可以直接访问 mywebsite loginhome php 而无需登录 注销后 可以使用后退按钮打开 l
  • 随机定位的 div,不重叠

    所有 div 都像我需要的那样 随机 放置 但它们偶尔会重叠 这只是一个机会问题 我怎样才能防止这种情况发生 理想情况下我能够设置它们之间的最小距离 我可以通过进一步开发当前的 javascript 来实现这一目标吗 我需要考虑完全不同的方
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr

随机推荐

  • ERROR: transport error 202: gethostbyname: unknown host

    今天碰到了一个很奇怪的问题 当我启动tomcat的时候 报了如下的错误 ERROR transport error 202 gethostbyname unknown host ERROR JDWP Transport dt socket
  • 作为运维你还在想要不要学Python,听听运维老司机怎么说!

    现阶段 掌握一门开发语言已经成为高级运维工程师的必备计能 不会开发 你就不能充分理解你们系统的业务流程 你就不能帮助调试 优化开发人开发的程序 开发人员有的时候很少关注性能的问题 这些问题就得运维人员来做 一个业务上线了 导致CPU使用过高
  • Python数据可视化入门教程(非常详细)

    什么是数据可视化 数据可视化是为了使得数据更高效地反应数据情况 便于让读者更高效阅读 通过数据可视化突出数据背后的规律 以此突出数据中的重要因素 如果使用Python做数据可视化 建议学好如下这四个Python数据分析包 分别是 Panda
  • springboot整合ueditor(jsp)踩过的坑(富文本上传本地视频)(亲身经历)

    有一天老板突然找我让我改富文本 一脸懵逼 不过也不能推啊默默地接下了 大家都知道现在的富文本视频功能都是只有上传链接的没有从本地上传这一说 就连现在的csdn的也是 于是我找了好多个 最终发现百度的ueditor可以 经过几天的日夜 甚至牺
  • vue框架如何将侧边栏完全隐藏

    vue框架如何将侧边栏完全隐藏 如何将vue的左侧边栏在缩进的时候完全隐藏呢 效果图如下 找到目录src style sidebar scss 然后搜索 hideSidebar可以搜出两个 不要慌 下面的时手机端的 我们拉到上面的 hide
  • 【算法日志】哈希表应用:set和map容器,哈希表的使用(day5)

    代码随想录60day 链表 day4 链表 day3 目录 前言 一 三种哈希结构 数组 散列技术 哈希思想 哈希碰撞 set 集合 map 映射 二 哈希表的一些应用 总结 前言 哈希表 也叫散列表 是一种较为常用的数据结构 我们常用的数
  • 1486. XOR Operation in an Array

    class Solution public int xorOperation int n int start int nret start for int m 1 m lt n m nret nret start 2 m return nr
  • 编译原理(4)LR(0)语法分析程序设计(Python实现)

    1 实验要求 1 已知文法G S 0 S E 1 E aA 2 E bB 3 A cA 4 A d 5 B cB 6 B d 手工建立文法G S 的LR 0 的项目集规范族DFA和LR 0 分析表 2 根据清华大学版 编译原理 第3版 教材
  • Jfugue编程概要

    转自 http www sudu cn info html edu java 20060912 304274 html JFugue是个用于音乐作曲的Java API 和其他的音乐API不同 他能够让你用数据字符串来指定音符 乐器 和弦 及
  • java sql 查询中的转义序列不对_在 JDBC 中使用 SQL 转义序列 - SQL Server

    使用 SQL 转义序列Using SQL escape sequences 08 12 2019 本文内容 按照 JDBC API 的定义 Microsoft JDBC Driver for SQL ServerMicrosoft JDBC
  • 20天零基础自学Python

    大家好 我是宁一 Python 数字数据类型是用来存储数值的 是我们从小学就开始接触的老朋友了 也是python中最基础的数据类型 1 Number 数据类型 python3的 Number 数据类型包括 int 整数 float 浮点数
  • B站化播放量为播放时长,是谁的狂欢?

    6月26日晚 B站举办了14周年庆典晚会 在晚会上 除了周深 美依礼芽同框献唱受到关注 B站董事长兼CEO陈睿的演讲内容同样值得深思 一来 陈睿提到 要将目前B站视频前台显示的播放量数据从次数改为分钟数 计划未来几周 将完成产品更新 二来
  • 堆栈内存和闭包

    思维导图 堆栈内存小科普 1 js中的内存分为 堆内存和栈内存 堆内存 只要用来存储引用数据类型的值 对象存的是键值对 函数存的是字符串 栈内存 供js运行的环境 函数执行 存基本数据类型的值 堆栈内存的释放问题 我们每次给变量存值或者执行
  • 程序员秋招最全Java面试题及答案整理(2023最新版)

    前言 大家好 最近一个月 花了不少时间 给大家整理了一套 2023 的技术面试资料 包括各大厂最新面试题以及面经解析涉及JVM Mysql 并发 Spring Mybatis Redis RocketMQ Kafka Zookeeper N
  • 【C刷题】day1

    一 选择题 1 正确的输出结果是 int x 5 y 7 void swap int z z x x y y z int main int x 3 y 8 swap printf d d n x y return 0 答案 3 8 解析 考
  • 怎样将excel文件导入mysql中

    1 整理好excel表中的字段 2 在Navicat中创建表 如果导入的是一个追加的表 则无需创建新表 CREATE TABLE orderinfo orderid VARCHAR 10 NULL 订单 id 主键 userid INT 1
  • 华为OD机试2023年最新题库(JAVA、Python、C++)

    我是一名软件开发培训机构老师 我的学生已经有上百人通过了华为OD机试 学生们每次考完试 会把题目拿出来一起交流分享 重要 5 11月份考的都是OD统一考试 B卷 2023年5月份题库已经更新为OD统一考试 B卷 题库由三部分组成 1 202
  • 【H5】 svg内text、image、path标签的使用

    H5 svg内text image path标签的使用 text标签 div style width 500px height 500px border 2px solid pink margin 50px auto 0 div
  • XML中约束文档的引用和书写

    在XML中定义了一套规则 来对文档内容进行约束 这叫做XML约束 常用的俩种约束语言 DTD约束 Schema约束 XML文档中可以引入多个约束文档 为了防止出现不同含义的同名名称冲突 所以 所以可以XML提供了名称空间 1 DTD语法 D
  • 【HTML】列表标签、表格标签、块级标签、表单标签

    文章目录 一 列表标签 1 无序列表 2 无序列表 3 定义列表 项目列表 二 表格标签 1 表格整体架构 2 表格的标签介绍 3 table标签的属性 4 tr标签的属性 5 th td标签的属性 6 跨行 跨列的表格 三 块级标签 1