一、今日所学内容
(1)表格标签
表格的基本语法:
必须要在table标签中,tr代表表格的行,td代表每行的具体数据(单元格)
基本标签的含义:
<table></table>定义表格
<tr></tr>定义表格的行(table row)
<td></td>定义表格的单元格嵌套在<tr>标签中
<th></th>定义表格的表头内容
表格的基本属性:
属性名 属性值 描述
align left、right、center 规定表格相对于周边的对齐方式
border 1或者"" 规定表格单元格是否有边框,默认是“”,没有边框
cellpadding 像素值 规定单元格边框和具体内容之间的空白距离,默认是1像素
cellspacing 像素值 规定单元格之间的空白距离,默认是2像素
width 像素值 规定表格的宽度
thead和tbody标签
thead和tbody标签是为了更清楚的区分表头和表内容的两个内容
注意:thead和tbody标签中间依旧要用<tr><td>
合并单元格
合并单元格的步骤:
1.先确定需要跨行还是跨列合并的第一个单元格
跨行合并:rowspan来实现
跨列合并:colspan来实现
2.在合并的第一个单元格td标签内添加上跨行合并还是跨列合并的属性
例如:rowspan="n",n代表合并的单元格数目,最小值是2
3.删除被合并的单元格
(2)列表标签
有序列表
有序列表是有顺序的列表,各个列表之间会按照一定的顺序进行排列
有序列表使用<ol></ol>标签来定义的,内部使用<li></li>标签来定义列表项
注意:
<ol></ol>标签中只能嵌套<li></li>,直接在<ol></ol>标签是不允许的
<li></li>相当于一个容器,可以容纳所有元素
无序列表
用<ul></ul>标签来进行声明,一般会用项目符号来呈现列表项,每个列表项默认前方有圆点,ul标签中也只能嵌套li标签
注意:
无序列表各个列表项直接按没有顺序等级之分,是并列
<ul></ul>标签中只能嵌套<li></li>,直接在直接在<ul></ul>标签是不允许的
无序列表是有自己的样式的(前面的小圆点),后期可以通过CSS来进行样式调整
自定义列表
自定义列表主要的使用场景是在页面的底部
自定义列表是用<dl></dl>标签来声明的,其中<dt></dt>标签代表列表项的名词,<dd></dd>标签代表列表项的名词
注意:
<dl></dl>标签只能包含<dt>,<dd>标签
经常是一个<dt></dt>来对应多个<dd></dd>
(3)表单标签
为什么要用表单?
使用表单的目的就是为了收集用户的信息
表单域
表单域是一个包含表单元素的区域
在html中表单域用<form></form>来进行声明
表单的作用
1.收集用户信息
2.收集信息提交给服务器进行处理
表单域属性
属性 属性值 作用
action url地址 用于指定接受并且处理表单数据的服务url地址
method get/post 用户设置表单数据的提交方式
name 文本 用于指定表单域的名称,因为一个页面会有多个表单
表单控件:
input 输入表单元素
type属性值
属性值 说明
text 定义单行的输入字段,默认宽度20字符
button 定义按钮
radio 定义单选框
checkbox 定义复选框
file 文件上传
password 密码框
reset 重置按钮
submit 提交属性
name属性:定义input元素的名字
value属性:规定input元素的值
checked属性:规定默认选中
maxlength属性:规定输入字段中的支付最大长度
注意:1.name和value是每个表单元素都有的属性,主要是给后台人员去使用
2.name表单元素,一般还使用在单元框和复选框部分,来保证单选按钮和复选框的一致性
3.checked属性主要是针对单选框和复选框的,页面首次加载时,会默认选中指定元素
4.maxlength,用户可以在表达那元素中输入最大字符数,一般使用较少
lable标签
增加单选按钮或者复选按的可点击范围来增加用户体验
select标签
在页面中,如果像设置多个选项供用户进行选择,可以使用<select><select>来实现
注意:
<select>标签中至少得包含一对<option>
在<option>标签中中来定义selected="selected",可以把当前选项设置为默认选项
<textarea>文本域
用户输入比较多的内容的时候,既不能使用文本框来进行输入,要采用<textarea>标签来进行输入
常见的使用场景一般在留言板,评论区等等。
注意:
cols="每一行中的字符数",注意这里是针对于英文字母来说的,汉字的宽度比英文字母大,一个汉字长度等于2格英文字母的长度
rows="显示的行数"
这里设置的容纳字符必须使文本域里面的内容要超出文本域才能看到效果
(4)查阅文档的网站
1.百度、W3C、菜鸟教程、MDN(重要)
|