菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 梁洁-20221011-HTML第二天 [打印本页]

作者: 梁杰，你好 时间: 2022-10-12 00:14
标题: 梁洁-20221011-HTML第二天

一、学习内容：
1、表单标签
1）、声明：必须声明在table标签中，tr代表行，td代表具体单元格，th代表表头单元格。
2）、基本标签的含义
table标签来定义表格
tr标签用来定义表单的行，必须放在table标签中。
td用来定义表单的列，必须放在td标签中
th用来定义表头内容的单元格，单元格数据会加粗并且居中对齐。
3）、表格标签的属性
border边框，属性值是像素值，用来控制边框的粗细，默认是0
align对齐方式，属性值有left、right、center。默认值是left
cellpadding 单元格元素与段元个边框直接的距离，属性值是像素值。默认是1
cellspeac单元格与段元个之间的距离，属性值是像素值，默认值是2
width  宽度，属性值是像素值
height  高度，属性值是像素值
4）、thead和tbody
是为了更容易的区分表格的表头以及表内容的两个标签。其中thead代表表头，tbody代表标的你内容。
thead和tbody标签中也必须写tr。
5）、合并单元格
首先要确定跨行或者跨列合并单元格的一个单元格。
再就是在第一个单元格的td标签里面加上rowspan =“n”跨行或者 colspan=“n”跨列  ，能代表合并单元格的个数，最小是2
删除被合并的单元格的代码
2、列表标签
1）、有序列表：列表中的列表项有自己的排列顺序，也按照一定的顺序排列。
声明用ol标签嵌套li标签
ol注意标签里面只能有li标签，不允许其他标签的出现。
li标签就是一个容器，可以容纳其他所有元素。
2）、无需排列：列表中的列表项没有排列顺序。
声明使用ul标签嵌套li标签
注意：ul标签里面只能嵌套li标签，不允许出现别的标签。
无需排列里面的列表项是并列关系，没有顺序之分
无序排列有自己的样式前面有一个小圆点，后期可通过css来调整。
3）、自定义排序使用场景实在页面的底部
声明用dl标签嵌套dt标签和dd标签。dt标签是列表项的名词，dd标签对名词进行解释
注意：dl标签里面只能有dt和dd标签。
一个dt标签可以有多个dd标签
3、表单标签
意义：用来收集用户信息。
表单域：是一个包含表单元素的区域。
用form来声明
作用：收集用户信息
提交给服务器处理
属性值有：
name表单的名称，每个表单都应该有，因为一个页面可能有多个表单。
action=“URL地址” 表单提交后台服务器的地址
method=“提交方法”有get和post
1）、表单控件
<input tyepe=“”>type属性值：
text 文本输入框  用来输入文本默认最大输入字符值为20
button  按钮输入框
file  上传文件  显示文字并且选择文件
password  密码输入框  会对文本进行加密
radio  单选框
checkbox  复选框
reset  重置按钮
submit 提交按钮
2）、input其他属性值
name  表单元素的名称
value  表单元素的值
checked  默认选中
maxlength 最大输入长度
注意：
name和value是每个元素的必须只，主要是给后台人员使用。
name一般还用在单选和复选框中，是为了让单选框或复选框保持一致性。
checked在单选和复选框中加上 checked=“checked”，浏览器重新加载时会被默认选中。
maxlength 可输入文本的最大长度，一般不使用。
3）、lable标签
为了是单选框或者复选框周围的文字作为点击范围，增加用户的体验性
声明lable标签嵌套选择框  lable中的for属性要和选择框的id值相等
4）、select标签
页面中需要提供一些选项工用户选择的时候使用select标签
声明：由select标签嵌套option标签来使用，
注意：一个select标签最起码需要一个option标签
option标签如果有属性值selected=“selected” 则表示会被默认选中项
5）、文本域textarea
当用户需要输入很多的文本内容的是偶，这时input标签已经不适用  需要用到textarea
主要用在网站的留言板  评论区等
声明：<textarea  rows="" cols=""></textarea>
注意：cols标签的值为最大输入字符值，该字符值说的是英文字符值，不是中文字符，中文字符占两个英文字符。rows代表可以写多少行。
cols规定的字符值只有在书写内容超过默认区域时才能看到。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)