知识点30:表格、表单、列表标签目的
表格table:用来显示、展示表格数据,特别是在后台引用的时候,显得非常重要,
表格创建:table>tr>td,table定义一个表格标签,tr定义表格中的行,td定义表格中的单元格,必须完整,比较规则。
列表:用来布局的
表单:用来收集用户信息的
知识点31:表格属性---在开始标签里去写,默认属性值是像素
border:定义表格边框宽度
width:定义表格的宽
height:定义表格的高
align:定义表格在网页中的水平对齐方式 left 、center、right
cellspacing:定义单元格与单元格之间的距离,设置为0,单元格之间就是单实线,
cellpadding: 定义单元格内容与单元格的距离。
HTML中所有的属性不存在单位!所以不写。
知识点32:表头单元格标签---<th></th>
th :表头单元格一般引用于表格的第一行或第一列,并且显示会加粗和居中。
知识点33:表格标题标签---<caption></caption>
caption :定义表格标题,通常会居中显示, 且居于表格之上,
注意写在紧跟table标签后面,只存在表格中有意义,其他位置无效。
知识点34:合并单元格---rowspan、colspan,不支持既跨行又跨列合并
rowspan: 跨行(垂直一排)合并,colspan :跨列(水平一排)合并。
合并顺序 :先上后下,先左后右;
合并步骤 :①确定合并方式(跨行还是跨列);②确定目标单元格(遵循合并顺序原则),确定合并数量;③删除多余的单元格(删除单元格的数量=合并数量-1(合并自身要减去))。
表格提供了HTML中定义表格式数据的方法。
知识点35:表格结构划分---题头、正文、脚注三部分,都用在表格中
<thead></thead>:用于定义表头的头部,注意<thead>内部必须拥有<tr>标签,
<tbody></tbody>:用于定义表头的主体,
<tfoot></tfoot>:用于定义表头的脚注。
知识点36:列表标签---有序列表、无序列表、自定义列表
列表是用来布局的,组合自由度更高;容器里面装着结构,样式一致的文字或图表的一种形式,叫列表,
无序列表各个列表之间是没有顺序的,ul里面只能嵌套li,中间放其他标签是不被允许的,li 相当于一个容器。
语法:ul>li
知识点37:有序列表---有排列顺序的列表
语法:ol>li
知识点38:自定义列表---常用于对术语或名词进行描述和解释
语法:dl>dt+dd
dd围绕dt来解释说明,dt(自定义标题)、dd(自定义解释)是并列关系。
知识点39:表单控件---form、input、textarea、select、lable
表单的目的是为了收集用户信息,
在HTML中,一个完整的表单通常由表单控件(表单元素)、提示信息和表单域3个部分组成,
<input type="" name="" value="默认属性值" /> 为单标签
type类型:text 单行文本输入框
passward 密码输入框
radio 单选框 通过设置相同name值来生效
checkbox 复选框 通过设置相同name值来生效
button 普通按钮 需要写value值
submit 提交按钮
reset 重置按钮
image 图像按钮 语法:<input type="image" src="地址路径" />
file 文件域 语法:<input type="file" />
email 邮箱框 语法:<input type="email">
date 日期按钮 语法:<input type="date">
phone 电话框
知识点40:表单属性
type:表单类型
checked:表示默认选中状态,checke="checked"
name:属性作用就为后台区别哪个表单,因为表单太多了,
单选按钮如何实现单选效果,需要通过设置相同的name属性进行分组
value:默认的属性值文本
size:表示input在页面中显示宽度,正整数
maxlength:表示输入字符长度正整数
required:表示输入不能为空
placeholder: 表示提示输入文字/内容
知识点41:lable标签--为input元素定义标注(标签)
语法1:<lable> <input type="" /> </lable> 直接包含
语法2:<lable for="nc"> 昵称:</lable> <input type="" id="nc"/> 通过for和id来控制
作用:用于绑定一个表单元素,提升用户体验。
知识点42:textarea文本域控件---双标签
可以创建多行文本,cols="每行中的字符数",rows="文本的行数"
文本域中内容会原样显示在页面上,注意字符
知识点43:select下拉列表---用户选择
语法:<select> <option> </option> </select>
select里至少包含一对option
selected="selected"表示默认选中,用在相应的option里。
知识点44:form表单域标签---将用户信息通过表单域传递给服务器
语法:<form action="" > </form>
action: url地址,用于指定接收并处理表单数据的服务器程序的URL地址
method:get/post (post安全性较高,不显示内容) 设置表单数据的提交方式
name: 用来识别区分哪个表单。
元素属性使用双引号语法。
完!