HTML5(下)

创始人

2024-05-15 07:39:37

0次

表格标签

表格的主要作用

表头单元格标签

表格结构标签

合并单元格

列表标签

无序列表

有序列表

自定义列表

表单

表单域

表单控件（表单元素）

表单元素

label标签

select下拉列表

textarea文本域元素

案例-注册页面

表格标签

表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要

是用于定义表格的标签

标签用于定义表格中的行，必须嵌套在

标签中

用于定义表格中的单元格，必须嵌套在标签中

td指表格数据，即数据单元格的内容

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

标签表示HTML表格的表头部分

姓名    性别    年龄
刘德华    男    58
张学友    男    58
黎明    男    58
郭富城    男    58

姓名	性别	年龄
刘德华	男	58
张学友	男	58
黎明	男	58
郭富城	男	58

表格结构标签

因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

在表格标签中，分别用：标签表格的头部区域、标签表格的主体区域这样可以更好的分清表格结构

用于定义表格的头部。内部必须拥有标签，一般是位于第一行

用于定义表格的主体，主要用于存放数据本体

合并单元格

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan="合并单元格的个数"

目标单元格：跨行合并则最上侧单元格为目标单元格；跨列合并则最左侧单元格为目标单元格

谨记需要删除多余的单元格

列表标签

表格是用来显示数据的，列表是用来布局的

无序列表

标签定义
中只能嵌套

无序列表会带有自己的样式属性

您喜欢的食物?
榴莲
臭豆腐
鲱鱼罐头

有序列表

标签来定义列表项
中只能嵌套

有序列表会带有自己的样式属性

粉丝排行榜
刘德华
马德华
刘德划

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

(定义项目/名字)和

(描述每一个项目/名字)一起使用

关注我们
新浪微博
官方微信
联系我们

里面只能包含
和
和
个数没有限制，经常是一个
对应多个

表单

使用表单目的是为了收集用户信息

一个完整的表单通常由表单域、表单控件和提示信息三个部分组成

表单域

一个包含表单元素的区域

在HTML标签中，

标签用于定义表单域，以实现用户信息的收集和传递

会把它范围内的表单元素信息提交给服务器

各种表单元素控件

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件（表单元素）

表单元素

属性	属性值	描述
name	用户自定义	定义input元素的名称
value	用户自定义	input元素的值
checked	checked	此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用
name是表单元素的名字，要求单选按钮和复选框要有相同的name值
checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素
maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

用户名： 
密码：   
性别:男  女  
爱好：吃饭  睡觉  刷抖音 
 

上传头像：

label标签

标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验

用户名：   
    男
    女

select下拉列表

textarea文本域元素

当用户输入内容较多时，我们就不能使用文本框表单了，此时我们可以使用标签</p> <p>在表单元素中，<textarea>标签是用于定义多行文本输入的控件的</p> <pre><code class="language-html"><body><form>今日反馈：<textarea rows="3" cols="20">今天学的也不怎么样

案例-注册页面



综合案例-注册页面

青春不常在，抓紧谈恋爱
性别:   男   女
生日: 
所在地区： 
婚姻状况： 未婚   已婚   离婚
学历： 
喜欢的类型  妩媚的 可爱的 鲜肉的 全都要
个人介绍 个人简介
我同意注册条款和会员加入标准
我是会员，立即登录
我承诺
年满18岁,单身
抱着严肃的态度
真诚寻找另一半

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：使用Seq2Seq实现中英文翻译

下一篇：二叉树知识概括锦囊（一）

HTML5(下)

表格标签

表格的主要作用

表头单元格标签

表格结构标签

合并单元格

列表标签

无序列表

您喜欢的食物?

有序列表

粉丝排行榜

自定义列表

表单

表单域

表单控件（表单元素）

表单元素

label标签

select下拉列表

textarea文本域元素

案例-注册页面

青春不常在，抓紧谈恋爱

我承诺

相关内容

热门资讯

性别:	男女
生日:
所在地区：
婚姻状况：	未婚已婚离婚
学历：
喜欢的类型	妩媚的可爱的鲜肉的全都要
个人介绍	个人简介

	我同意注册条款和会员加入标准
	我是会员，立即登录
	我承诺年满18岁,单身抱着严肃的态度真诚寻找另一半