表格的标签及属性

最新推荐文章于 2023-03-28 17:22:59 发布
最新推荐文章于 2023-03-28 17:22:59 发布
阅读量1.9k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lemon_Staring/article/details/100581670
版权

一、 表格的标签及属性

  1. table属性
    Width、height 宽高（单位是像素或百分比）
    align 对齐
    border 外边框
    bgcolor 背景色
    background 背景图片
    Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0
    Cellpadding 单元格边距（表格边框与内容的距离） 一般情况写0

  2. tr属性：
    Align 水平对齐
    left/center/ right
    valign 垂直对齐
    Top（上）/middle（中）/bottom（下）
    bgcolor 背景色

  3. td的基本属性
    Width、height 宽高（单位是像素或%）
    align valign 水平对齐、垂直对齐
    bgcolor 背景色
    background 指定背景图片
    Colspan 水平合并 合并多列
    rowspan 垂直合并 合并多行

  4. 表头th标签

是特殊的单元格，文字会自动加粗、居中。它的用法是取代的位置即可
餐饮类型主要菜系价格
中餐厅生猛海鲜1000元
表格主体tbody标签 T head 表格页眉（头部）只能出现一次 T body 表格主体可以出现多次 T foot 表格页脚（结尾）只能出现一次 以上三个标签结合使用，可将表格中的一行或几行合成一组 ….….….
二、 表单属性 1. 表单的概念 表单在网页中主要负责数据采集功能，表单的标记是: 2. 表单的属性 1. action属性：设置表单的提交地址（表单提交的url）指定表单提交后由服务器上的哪个处理程序进行处理 2 method属性：设置表单的提交方法， 属性值为get、post提交方式 3 name属性：设置表单的名称 4 target属性：设置表单的打开方式， 属性值可以是_blank、_self。_self在原窗口中打开，为默认值。_blank 在新窗口打开 3. enctype:默认编码 或者指定二进制流 【附件的提交形式】 4. method的值为get:它是通过URL来传递表单数据的，表单元素的数据在地址栏可见，而且有大小限制，传数据量小一般不大于2KB method的值为post:它是通过请求正文传递表单数据的，URL不可见表单元素数据，比较安全，而且没有大小限制，但往往服务器会控制 3. 输入标记 表单元素中输入标签是,常用属性有type（类型）、name（名称）、value（值）、checked（默认选中） 三、 HTML常用表单控件 1. 文本框 文本框：主要用于输入单行文本内容。代码如下: 代码格式如下： 姓名： 效果如下： 账号：
2. 密码框 密码框：主要用于输入一些保密信息，代码格式如下： 代码格式如下： 密码： 效果如下：



分组：
用户登录
3. 单选框
单选框主要是让网页浏览者在一组选项里选择一个。
Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称【name=“gender”】。
代码格式如下：
性别：男
女
效果如下：

性别：男

  1. 复选框
    复选框主要是让网页浏览者在一组选项里同时选择多个选项。
    选中checked代码格式如下：【disabled="disabled"足球】
    爱好：读书
    听歌
    阅读
    效果如下：
    兴趣爱好：足球
    篮球球
    音乐

    扩展：隐藏域：

    图像域：
  2. 文件域
    文件域主要是让网页浏览者上传文件。
    代码格式如下：
    上传文件：
    效果如下：

  1. 提交按钮
    提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。
    代码格式如下：

    效果如下：
  2. 重置按钮
    重置按钮用来重置表单中输入的信息。代码格式如下：
    <input type="reset"value=“重置”/>
    效果如下：
    input重置按钮：

    input提交按钮：

    input普通按钮：

    提交按钮
    重置按钮
    普通按钮
  1. 图片域
    图像域标记
    代码格式如下:
  2. 下拉列表
    下拉菜单主要用于在有限的空间里设置多个选项。
    下拉菜单选中状态给option添加 selected
    代码格式如下：
… 居住城市(下拉菜单)： 北京 上海 深圳 厦门
注：Select标记的multiple属性和size属性不要求掌握。

列表框（提供多选ctrl+多选）：


苹果
橙子


香蕉
西瓜
柠檬
香梨



10. 文本域标记及属性
文本域主要用于输入较长的文本信息。
代码格式如下：
默认文字
效果：
Cols属性：定义文本域的宽度 （列）
rows属性：定义文本域的高度 （行）
四、 HTML5新增表单控件

  1. HTML5文本框及placeholder属性
    当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
    代码格式如下：

    效果如下：
  2. HTML5文本框类型tel
    提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码
    还包括其他字符（如+ 、-、(、)等），如86-0536-8888888
    代码格式如下： pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 -->

    电话号码：
    电话号码：
    效果如下:
  3. HTML5 文本框类型 url 网址
    url类型的input 元素提供用于输入url地址这类特殊文本的文本框．当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交．

代码如下：


效果如下：
4. HTML Email邮件
Email类型的input元素是一种专门用于输入e-mail地址在文本输入框，在提交表单时，会自动验证输入框的值．如果不是一个有效的e-mail地址,则该输入框不允许提交该表单．
代码如下：

		<input type="email"/>
效果如下： 5. HTML5文本框类型number 数字 max最大值 min最小值 step步长 Number类型的input 元素提供用于输入数值的文本框．我们还可以设定对所接受数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。 代码如下： step（步长）属性值倍数 max最大值 min最小值 效果如下： 6. HTML5文本框类型date Date类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如2016年３月４日，选择后会以2016-03-04的形式显示 代码如下： 效果如下： 7. 视频和音频 您的浏览器不支持Video标签。 8. Your browser does not support this audio format.

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

  1. 全新的界面设计 ，将会带来全新的写作体验；
  2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
  3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
  4. 全新的 KaTeX数学公式 语法；
  5. 增加了支持甘特图的mermaid语法1 功能；
  6. 增加了 多屏幕编辑 Markdown文章功能；
  7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
  8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片: Alt

居中的图片: Alt

居中并且带尺寸的图片: Alt

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

  • 项目
    • 项目
      • 项目
  1. 项目1
  2. 项目2
  3. 项目3
  • 计划任务
  • 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目Value
电脑$1600
手机$12
导管$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列第二列第三列
第一列文本居中第二列文本居右第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPEASCIIHTML
Single backticks'Isn't this fun?'‘Isn’t this fun?’
Quotes"Isn't this fun?"“Isn’t this fun?”
Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

创建一个自定义列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t &ThinSpace; . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
  • 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接
长方形
圆
圆角长方形
菱形
  • 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no
  • 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

  1. mermaid语法说明 ↩︎

  2. 注脚的解释 ↩︎

Lemon_Staring
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML标签和属性
07-08
表格标签 * `<table></table>`：定义一个表格 * `<tr></tr>`：定义表格的一行 * `<td></td>`：定义表格的一个单元格 对齐和宽度 * `align=left`：左对齐（缺省值） * `align=center`：居中 * `align=right`：右...
Lesson02_01 表格标签
10-31
1. `<table></table>`：表格标签 `<table>`标签是HTML表格的根标签，用于定义一个表格。该标签有多个属性，例如： * bgcolor：设置表格的背景颜色 * border：设置表格的边框宽度 * bordercolor：设置表格的边框...
表格常用标签及属性
weixin_60988128的博客
03-28 2554
网站首页下方的网站导航通常可以使用自定义列表来实现自定义列表的基本语法：
表格标签及相关属性的介绍
weixin_54021642的博客
04-23 3760
表格标签及相关属性的介绍
表格常用标签及属性(表格标签基本使用,表格结构和常用列表,自定义列表和表单,表单输入,表单输入)
qq_45585640的博客
12-16 1万+
1. 表格常用标签及属性 1.1 表格标签基本使用 表格的主要作用是什么？ 以行、列的方式（表格）整齐地展示数据，例如：股票价格 用表格布局页面 表格的基本语法： <table> <tr> <td>单元格内容</td> ... //重复 td → 单元格 </tr> ... //重复 tr → 行 </table> 常用的表格标签有几个？分别代表什么含义？ 三个基本的表格标签： 序号 标签名 说
表格的标签和一些属性,怎样在HTML中插入图片。
weixin_33811961的博客
04-25 6701
表格的标签和一些基本属性。 表格： 表格的标签必须以table开始/tabl结束。 table标签里有两个标签th和td。 th是表格的行。 td是表格的列 border是table标签的属性，border要写在table标签的后面并且属性和标签之间要要隔一个空格。比如：<标签属性="属性值"> 下面是table标签的一些属性： celllpadding表...
对table元素相关的标签和属性一点总结
justforuse的博客
02-19 4567
table元素主要是用来显示数据，之前用来页面布局不过已经过时了。 　　　跟table元素相关的标签有很多，比如：tr, td, th, thead, tbody, tfoot, caption，还有常用的属性:border, cellspacing, cellpadding等。总结一下。　　　不如把他们写在一个table元素里来看看效果： 　　　html: 　　　<table border=
Android|布局及标签属性
01-03
六大布局：线性布局，相对布局，绝对布局，表格布局，帧布局，网格布局。 线性布局（LinearLayout）:   作为根标签。线性布局内控件垂直或者水平排列。通过orientation属性来指定。取值：horizontal（水平）默认值...
XHTML标签在CSS中对应的属性及用法
12-14
在网页设计中，XHTML标签和CSS属性的正确使用至关重要，不仅影响页面的美观和功能，还直接影响到搜索引擎优化（SEO）。以下是对标题和描述中提到的一些关键知识点的详细解释： 1. **DIV标签**：在XHTML和CSS中，`...
HTML部分标签属性
05-24
1. `<body>` 标签属性： - `alink`：定义活动链接的颜色。 - `link`：定义未被访问的链接的默认颜色。 - `vlink`：定义已被访问的链接的默认颜色。 - `text`：设置所有文本的颜色。 - `bgcolor`：设置网页的...
HTML常用标签及属性.pdf
最新发布
10-05
表格标签 * `<table>`：定义了一个表格。 * `<tr>`：定义了一个表格行。 * `<td>`：定义了一个表格单元格。 * `<th>`：定义了一个表格表头。 * `<caption>`：定义了一个表格标题。 * `<thead>`：定义了一个表格头部...
html标签属性.pdf
09-30
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，其中的标签属性是定义元素行为和外观的关键。本文将深入探讨HTML标签属性及其用途。 首先，我们关注的是`<marquee>`标签，它用于实现跑马灯效果。...
html标签属性大全
03-20
这只是HTML标签属性的一小部分，实际HTML还包括更多用于表格、列表、表单、框架、段落格式化等的标签和属性。学习和掌握这些基础知识对于创建动态、美观且功能丰富的网页至关重要。在实际开发中，通常会结合CSS...
HTML基础重点_一般标签、常用标签和表格
09-28
图片的插入使用`<img>`标签，`src`属性指向图片URL，`alt`提供替代文字，`width`和`height`定义图片尺寸，`alt`属性对于搜索引擎优化和在图片无法加载时提供描述非常重要。 表格是HTML中展示结构化数据的工具，使用...
5个酷炫、实用的HTML标签和属性介绍
12-12
这是HTML5新增的标签，可以使一个区域的内容可以试试编辑，比如下面的表格：（在IE中的table似乎不支持这个属性，但是div和body好像是支持的。如果你使用IE，那么请尝试点击$100和$50的部分进行编辑，我在这两个格子...
21-表格标签的属性
majiamin123的博客
09-13 694
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-表格标签的属性</title> </head> <body> <!--编写一个2行2列的表格--> <table borde...
表单、表格常用属性大全
xu_yuxuyu的博客
11-08 4103
html零基础必看——html入门，编程就是如此简单 第十二章：表单、表格标签一、form表单1.1 form表单标签1.2 input 输入表单控件标签1.2.1 text文本框1.2.2 password密码框1.2.3 radio单选框1.2.4 checkbox多选框1.2.5 普通按钮 提交按钮 重置按钮1.2.6 image 图像提交按钮1.2.7 css3新特性2 `：focus`表单获得焦点时被选中二、select下拉菜单三、textarea 多行输入文本框四、 表格总结 一、form表单
表格标签的属性
weixin_44416290的博客
07-23 412
表格的主要作用是用于展示数据，以便于对数据进行整理 它的基本语法是利用 <table> </table>标签来定义表格标签 <tr> </tr>是表格中行的标签，在表格中没有列的概念，只有单元格利用<td></td>来表示单元格 其中<th></th>表示标头单元格，标头单元格中的文字会加粗，并且居中显示，突出其重要性。 表格的属性 一定要写在table标签中才能实现 align 用于改变表格的对齐..
HTML中的table标签属性
热门推荐
My_liuying0901
05-17 7万+
表格 表格是由行和列排列而成的一种结构 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签用来定义表格，整个表格包含在<table>和</table>标签中； tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由<tr>和</tr>标签表示； td标签和th标签用来定义单元...
2022年HTML相关知识点表格标签.pptx
11-02
2022年HTML相关知识点表格标签讲解深入...2022年的HTML相关知识点表格标签讲解强调了HTML表格的结构、样式定制和布局控制，对于Web开发者来说，熟练运用这些标签和属性能够有效地构建出美观且功能丰富的数据展示页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值