表格table标签的属性及使用方式
表格 table
创建表格
在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:
<table><tr><td>单元格内的文字</td>...</tr>...
</table>
在上面的语法中包含三对HTML标签,分别为 <table></table>、<tr></tr>、<td></td>,他们是创建表格的基本标签,缺一不可
表格属性
border:边框 默认值为0 像素值(px)
属性名 | 作用 | 常用单位 |
---|---|---|
border | 边框 默认值为0 | 像素值(px) |
cellspacing | 设置单元格和单元格之间的间距 | 像素 |
cellpadding | 设置单元格内容和单元格的间距 | 像素 |
width | 表格的宽度 | 像素值 |
height | 表格的高度 | 像素 |
align | 设置表格的水平对齐方式 | left,center,right |
表格标题
表格的标题: caption
定义和用法
caption 元素定义表格标题。
<table><caption>我是表格标题</caption>
</table>
## 合并单元格(难点) 跨行合并:rowspan 跨列合并:colspan合并单元格的思想: 将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。 公式: 删除的个数 = 合并的个数 - 1 合并的顺序 先上 先左 ## input 控件(重点)
单标签 br,hr,input
| 属性 | 属性值 | 描述 |
| --------- | ------------ | ---------------------------- |
| type | text | 单行文本输入框 |
| | password | 密码输入框 |
| | radio | 单选按钮 |
| | checkbox | 多选按钮 |
| | button | 普通按钮 |
| | submit | 提交按钮 |
| | reset | 重置按钮 |
| | image | 图像形式的提交按钮 |
| | file | 文件域 |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认值 |
| size | 正整数 | 控件在页面中显示的宽度 |
| checked | checked | 定义选择控件中默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最大字符数 |在上面的语法中,<input />标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,<input />标签还可以定义很多其他的属性,其常用属性如下表所示。## label标签(理解)label 标签为 input 元素定义标注(标签)。作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点如何绑定元素呢?for 属性规定 label 与哪个表单元素绑定。## textarea控件(文本域)如果需要输入大量的信息,就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:```html
<textarea cols="每行的字符数" rows="显示的行数"></textarea>
下拉菜单
使用select控件定义下拉菜单的基本语法格式如下
注意:
- <select></select>中至少应包含一对<option></option>。
- 在option 中定义selected =" selected "时,当前项即为默认选中项。
表单域
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:
action: url地址
method: 提交方式
name : 表单的名称,区分同一界面的多个表单
每个表单都要由自己表单域
HTML5新标签与特性
1993标记语言第一版
1995 2.0
1996 3.2 w3c推荐标准
1999 4.0
2000 XHTML1.0 相比与html,更严格,扩展了html
2001 xhtml1.1
2008 HTML5
文档类型设定
- document
- HTML: sublime 输入 html:4s
- XHTML: sublime 输入 html:xt
- HTML5 sublime 输入 html:5
字符设定
- :HTML与XHTML中建议这样去写
- :HTML5的标签中建议这样去写
常用新标签
w3c 手册中文官网 : http://w3school.com.cn/
header:定义文档的页眉 头部
nav:定义导航链接的部分
footer:定义文档或节的页脚 底部
article:定义文章。
section:定义文档中的节(section、区段)
aside:定义其所处内容之外的内容 侧边
datalist 标签定义选项列表。请与 input 元素配合使用该元素
fieldset 元素可将表单内的相关元素分组,打包 legend 搭配使用
legend:标题
新增的input type属性值:
类型**** | 使用示例**** | 含义**** |
---|---|---|
email**** | 输入邮箱格式 | |
tel**** | 输入手机号码格式 | |
url**** | 输入url格式 | |
number**** | 输入数字格式 | |
search**** | 搜索框(体现语义化) | |
range**** | 自由拖动滑块 | |
time**** | 小时分钟 | |
date**** | 年月日 | |
datetime**** | 时间 | |
month**** | 月年 | |
week**** | 星期 年 |
常用新属性
属性**** | 用法**** | 含义**** |
---|---|---|
placeholder**** | 占位符 当用户输入的时候 里面的文字消失 删除所有文字,自动返回 | |
autofocus**** | 规定当页面加载时 input 元素应该自动获得焦点 | |
multiple**** | 多文件上传 | |
autocomplete**** |
规定表单是否应该启用自动完成功能 有2个值,一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 |
|
required**** | 必填项 内容不能为空 | |
accesskey**** | 规定激活(使元素获得焦点)元素的快捷键 采用 alt + s的形式 |
多媒体标签
audio:播放音频
video:播放视频
多媒体 audio
HTML5通过标签来解决音频播放的问题。
使用相当简单,如下图所示
并且可以通过附加属性可以更友好控制音频的播放,如:
autoplay 动播放
controls 是否显不默认播放控件
loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环
多媒体 video
HTML5通过标签来解决音频播放的问题。
同音频播放一样,使用也相当简单,如下图
同样,通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
表格table标签的属性及使用方式相关推荐
- html cellpadding属性,HTML table标签 cellpadding 属性
HTML 定义和用法 HTML5 不支持 cellpadding 属性规定单元边沿与单元内容之间的空间,以像素计. 注意:请勿将该属性与 cellspacing 属性相混淆,cellspacing 属 ...
- 简单解析表格table标签的用法
简单解析表格table标签的用法 1.表格加上边框并且效果如下图所示: cellspacing(单元格间距): 表格边框与单元格的边框之间的缝隙 cellpadding(单元格边距): 单元格内容与单 ...
- HTML中Table标签的属性及应用
我们如何使用table表格: 定义表格:<table></table> 创建表头:<th></th> 创建表行:<tr></tr> ...
- Web前端,HTML表格相关标签和属性,在网页中表格结构的显示
一.表格的基本标签 场景: 在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表 代码 <!-- table 包含 tr, tr包含td --><table border=& ...
- html中table标签及属性
table表格 HTML表格由table标签以及多个tr.th和td标签组成 table表示表格,整个表格要包含在<table></table>标签中 tr表示表格中的行,是单 ...
- HTML Table标签 Div属性 a标签
<!DOCTYPE HTML> 声明:表示这是一个html文件,满足html5规范,这句话必须写到第一行 1.注释:在代码旁进行说明 语法:<!-- --> 2.网页:浏览网络 ...
- 表格table以及其属性
table标签定义表格,tr元素定义表格行,td元素定义表单元格,th元素定义表格头. table属性:border 表格边框 border-collapse 默认是不合并边框,取值为collap ...
- 表格 table使用(属性)
1.table定义表格. 2.tr 表格中的行,嵌套在 table标签中,table中有几对 tr,就有几行表格. 3.td:表格中的单元格,嵌套在tr标签中,tr 中有几对td,就表示该有多少个单元 ...
- html当中的属性cellspacing,table标签cellspacing属性的作用及使用方法
在html中制作表格,需要用到table标签,而该标签中的cellspacing属性可设置单元格间距,下面我们就一起学习一下cellspacing属性的作用及使用方法. cellspacing属性指定 ...
最新文章
- 最常用的13条mysql语句
- php+mysql案例含源码_【专注】Zabbix源码安装教程—步骤详解(1)安装前准备
- C++学习之路 | PTA(天梯赛)—— L3-003 社交集群 (30分) (带注释) (并查集) (精简)
- 微信:情人节女性收520红包的数量是男性的3.9倍,有用户收到200多个
- SQL Server 数据库操作类
- signature=4c9125bac76ec40553ba356eaca47964,2008 SEM Honorary Members Conversations
- 区块链开发(四)Nodejs下载安装
- Exchange 混合部署—Office 365 注册及预览
- html大作业【NBA篮球介绍 22个页面】学生网页设计源码
- 【笔记】Telink BDT EVK烧录时错误
- CR 与 LF 换行符
- iPhone 可以DIY了?苹果推出自助维修计划
- win7计算机右边预览,如何在win7计算机上打开任务栏缩略图预览功能
- 计算机辅助设计成绩查询中级,2017年计算机辅助设计中级CAD绘图员考试试题
- java爬虫教程 百度云_java视频教程java爬虫实战项目httpclient hbase springmvc solr
- linux设备和驱动匹配的方法,Linux使用设备树的i2c驱动与设备匹配方式
- 七天编写指标_操盘线指标公式源码(七天线 工作线 生命线)[通达信公式
- 关于canvas.toDataURL的那些坑
- 【上电即上华为云】华为云openCPU智联模组_Cat.1_MC615-CN-L610-CN_云喇叭TTS语音
- android 闹钟声音大小,使用闹钟音量设置的Android闹钟声音?
热门文章
- 第一次使用Arduino MKR WIFI 1010
- 为PDF扫描文件添加书签
- 【100%通过率】华为OD机试真题 C++ 实现【最接近最大输出功率的设备 /查找充电设备组合】
- App Inventor 2 连接调试器的各种方式比较
- 扩展easyUI样式,全新的easyUI体验样式
- [重装系统系列]fcitx 小企鹅输入法 安装 in ubuntu 15.04
- c/c++ 趣味程序百例
- 丰县中等专业学校计算机专业,江苏省丰县中等专业学校2020
- 第69天-内网安全-域横向 CobaltStrikeSPNRDP
- Tableau函数:实现数值累计值