HTML标签属性
1、标签
标签由标签名、标签属性和文本内容三部分组成(单标签没有文本内容)
2、标签属性是对标签的一种描述
3、标签属性
标签属性分为通用属性、自有属性和自定义属性
4、通用标签
所有标签都具有的属性: id:唯一标识名(id名称,在一个网页中必须是唯一的 ) class:给标签取一个类名 style:设置标签的行内样式 title:当鼠标移到该标签,所显示的提示内容
5、自定义标签属性
通常用于传值或图片懒加载等方面 格式:data-自定义单词
6、table表格
主要用于呈现格式化数据
表格是由行和列组成
格式:
<table> <tr> 行 th--表头,主要对下面内容起说明作用,th的内容会自动加粗和居中 <th></th> 表头 <td></td> 列 <td></td> .... </tr> ... </table>
table表格属性:
border:设置表格的边框;width:设置表格宽度;align:设置表格对齐方式;
align:横行对齐方式 left/center/right
valign:纵向对齐方式 top/middle/bottom
cellspacing:设置像素间隔; cellpadding:设置单元格间隙
7、跨行/跨列属性
主要用来绘制复杂的表格
-
rowspan:跨行
-
colspan:跨列
8、完整表格组成:
caption(标题)、thead(表头)、tbody(表体)和tfoot(表尾)四部分组成
9、form表单标签
是所有标签最核心标签之一,它是用来实现前后端交互的一个重要标签
常用属性:
-
name:表单名称
-
action:表单数据提交的位置(通常是一个后台文件名,或网站) 如果是# 则表示提交到当前文件
-
method:前端提交到后端的方法,主要有GET/POST 默认是GET
表单元素分类
1)input类
input输入类,主要用来输入、选择或者发出指令
主要通过type属性 来区分多种状态
type:text/password/radio/checkbox/file/button/image/submit/reset
-
text:单行文本输入框 type=“text” 可以不用写,type默认为text属性 属性:placeholder(提示)/name(命名)/minlength(至少输入的字符个数) /maxlength(最多输入的字符个数)/disabled(失效)/readonly(只读) value(设置默认值)/pattern(正则匹配)
-
password:密码框 属性与text相同
-
radio:单选按钮,只能选择一项,选项通常在两项以上, 常用属性:name(必须有)/value/checked(只能使用在一个地方)/disabled(失效的)/readonly(只读)
-
checkbox:复选框,可以选择一项或多项 常用属性:name(必须有)/value/checked(默认选中,可以使用在多个地方)/disabled(失效的)/readonly(只读)
-
file:文件上传按钮
-
button:普通按钮,通常用于发出指令,调用脚本代码 常用属性:value(按钮的标题)/disabled(失效)
-
image:图片按钮,用法与button一样 有一个特殊属性:src(用来加载图片,用ta替换了value)
-
submit:提交按钮,用来将表单的数据提交到后台 常用属性:value(按钮的标题)/disabled(失效)
-
reset:重置按钮,将表单所有组件输入的内容全部清空,还原为初始状态 常用属性:value(按钮的标题)/disabled(失效)
2)textarea类
文本域(也称为多行文本框),主要用于输入大批量的内容
常用属性:name/id/value/cols(列数)/rows(行数)/placeholder/minlength/maxlength/required(必须输入)
3)select类***
下拉列表框,默认用于单项选择,用option呈现每个选项
-
multiple属性:表示可以实现多项
-
size:最多显示的行数
4)button类
-
普通按钮,具有提交功能,可以单独使用,可不写在form元素中;
-
如果写在form中有提交功能
10、iframe:框架集
是用来将多个网页文件组合成一个文件。
常用属性:
-
name:框架名
-
src:引入外部的HTML文件
-
scrolling:添加滚动条(YES/NO/AUTO)
-
height:高度(%/px)
-
width:宽度(%/px)
-
frameborder:是否有边框(0/1)
-
marginheight:框架离顶部或底部的距离(%/px)
-
marginwidth:框架离左右的距离(%/px)