1.表格是用来显示数据的,不是用来布局页面的。(列表才是用来布局页面的)
【1】table 表格标签 【2】tr 行标签 【3】td 单元格标签 【4】th 单元格标签 【5】thead 表格头部区域标签 【6】tbody 表格主体区域标签
属性名 | 要填入的属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格整体相对于周围元素的对齐方式 |
border | 像素值或不填 | 规定单元格是否拥有边框和边框的粗细大小(不填表示没有边框) |
cellpadding | 像素值 | 规定单元格与其内容之间的空白大小(默认为1像素) |
cellspacing | 像素值 | 规定单元格与单元格之间的空白大小(默认为2像素) |
width | 像素值或百分比 | 规定表格整体的宽度 |
height | 像素值或百分比 | 规定表格整体的高度 |
1.表格不是用来布局页面的(虽然可以做出布局页面的效果),而是用来展示数据的。
2.table标签的基本格式:
< table>
< tr> < td>< /td> < td>< /td> < td>< /td> < /tr>
< /table>
3.每一行同级别的单元格的内容的开头会自动对齐
4.部分标签的英文全称:td:table data
1.表头单元格里面的文本内容的两个特点:加粗;居中
2.示例:
如下:
< table>
< tr> < th>表格头部单元格一< /th> < th>表格头部单元格二< /th> < th>表格头部单元格三< /th> < /tr>
< /table>
即用< th>替换掉< td>
< thead>< /thead>表示表格的头部区域
< tbody>< /tbody>表示表格的主体区域
1.标签内部必须拥有标签
跨行合并:rowspan=“要合并的单元格的个数”
跨列合并:colspan=“要合并的单元格的个数”
1.写在td中
2.合并单元格的操作步骤
【1】先确定是要跨行合并还是跨列合并
【2】找到目标单元格,在其单元格标签中加上“合并单元格”的属性(跨行合并时最上面的单元格为目标单元格,跨列合并是最左边的单元格为目标单元格)
示例:目标单元格
【3】删除被合并的单元格的标签及里面的内容(合并起来的单元格中除了目标单元格都删掉)
1.列表是用来布局页面的,不是用来显示数据的。(表格才是用来显示数据的)
【1】ul 无序列表标签
【2】li
【3】ol 有序列表标签
【4】dl 自定义列表标签
【5】dt
【6】dd
类型 | 标签 | 定义 | 说明 |
---|---|---|---|
无序列表 |
|
无序列表标签 | 里面只能嵌套li 没有顺序,使用频率较高,li里面可以包含任何标签 |
有序列表 |
|
有序列表标签 | 里面只能嵌套li 有顺序,使用频率较低,li里面可以包含任何标签 |
自定义列表 |
|
自定义列表标签 | 里面只能嵌套dt和dd,dt和dd里面可以包含任何标签 |
1.ul标签的基本格式:
< ul>
< li>第一行< /li>
< li>第二行< /li>
< /ul>
效果如下:
- 第一行
- 第二行
2.无序列表的几个注意点
【1】无序列表的各个列表项之间没有顺序之分,是并列的
【2】ul 里面只能嵌套 li 标签,不能放其他的标签或者文字,但 li 标签里面可以放任意的东西,li 相当于一个容器。
【3】无序列表会带有自己的样式属性(比如每一行前面的那个小黑点),但我们不需要过度关注它们,因为在实际使用中可以用css来随意调整。
1.ol标签的基本格式:
< ol>
< li>第一行< /li>
< li>第二行< /li>
< /ol>
效果如下:
- 第一行
- 第二行
2.无序列表的几个注意点
【1】ol 里面只能嵌套 li 标签,不能放其他的标签或者文字,但 li 标签里面可以放任意的东西,li 相当于一个容器。
【2】有序列表会带有自己的样式属性(比如每一行前面的1,2,3,4,5),但我们不需要过度关注它们,因为在实际使用中可以用css来随意调整。
1.dl标签的基本格式:
< dl>
< dt>我是自定义列表的第一行,也是列表头< /dt>
< dd>我是列表主体第一行,是列表头的第一个解释< /dd>
< dd>我是列表主体第二行,是列表头的第二个解释< /dd>
< dt>< /dt>
< dd>< /dd>
< dt>< /dt>
< dd>< /dd>
< /dl>
效果如下:
我是自定义列表的第一行,也是列表头
- 我是列表主体第一行
- 我是列表主体第二行
2.自定义列表的几个注意点
【1】dl 里面只能嵌套 dt和dd 标签,不能放其他的标签或者文字,但 dt和dd 标签里面可以放任意的东西,dt和dd 相当于容器。
【2】一个 dl 里面 < dt>和< dd> 的个数都没有限制,但经常使用的是一个< dt>和多个< dd>
【3】< dt>和< dd>是平行关系,不是包含关系。
1.表单是用来收集用户信息的。
2.表单的三个组成部分:
【1】表单域
【2】表单控件(也称为表单元素)
【3】提示信息
3.输入表单元素的type属性的各种属性值及其作用
属性值 | 描述 |
---|---|
text | 定义单行的输入字段(用户可在其中输入文本)(默认可输入宽度为20个字符) |
password | 定义密码字段。(在其中输入的字符被掩码) |
file(叫“文件域”) | 定义“浏览”按钮,用于选择文件来上传。 |
radio | 定义单选按钮。 |
checkbox | 定义复选框。 |
submit | 定义提交按钮。 |
reset | 定义重置按钮。(重置按钮会清除其所属表单中的所有数据) |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
button | 定义可点击按钮。(多数情况下,用于通过JavaScript启动脚本) |
1.表单域是一个包含表单元素(表单控件)的区域。
2.语法示例:
< form>
用户名:< input type=“text”/> < !- -会生成一个能输入文本的区域- ->
< /form>
1.表单元素是允许用户在表单中 输入或者选择 的控件。
2.表单元素的种类:
【1】input 输入表单元素
【2】select 下拉表单元素
【3】textarea 文本域元素
【1】< input/>标签为单标签。
【2】type属性是input的必需属性,为type属性赋不同的属性值可以用来表示不同的控件类型。
【3】示例:< input type=“属性值”/>
【4】除type属性外,标签还有很多其他属性,其常用属性如下:
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 规定input元素的名称 |
value | 由用户自定义 | 规定input元素的值(value的值在文本、提交input区域会显示出来) |
checked | checked | 规定此input元素在首次加载时应当被选中(主要用于默认勾选单选按钮或复选框)(单选按钮里面只能checked一个,多选框可以checked多个) |
maxlength | 正整数 | 规定输入字段中的字符的最大长度(较少使用) |
[1]name和value是每个表单都应该要有的属性值,主要给后台人员使用。
[2]单选按钮的每个input里面的name值都应该相等,复选框的也是。
[3]name可以用来区分不同的表单元素。
【5】< lable>< /lable>标签
[1]< lable>标签给input元素定义标注。
[2]< lable>标签用于绑定一个表单元素,当点击< lable>标签的文本时,浏览器就会自动把光标转到对应表单处或者勾选对应的表单元素,用来增加用户体验。
[3]语法示例:
< lable for=“nan”>男< /lable>
< input type=“radio” name=“sex” id=“nan”/> < !- -此时点“男”这个字也会选上“男”所属的单选按钮- ->
此示例说明:< lable>标签的for属性应当与目标元素的id属性相同
【1】< select>的使用场景:有多个选项让用户选择,并且想要节约页面空间时。
【2】语法示例:
< form>
下拉表单:
< select>
< option>选项一< /option>
< option>选项二< /option>
< option>选项三< /option>
…
< /select>
< /form>
【3】< select>中至少要包含一对< option>。
【4】在< option>中加上selected="selected"这个键值对时,该项即为默认选中项。
【1】使用场景:当需要输入的内容较多的情况下,就不能用文本框表单了,而应该使用< textarea>标签。
【2】作用:可以定义多行文本输入。
【3】常见于:留言板;评论区。
【4】语法示例:
< form>
今日反馈:
< textarea>
在这里输入您的反馈
< /textarea>
< /form>
【5】可以在textarea里面加上 cols=“每行能写的字符数”,rows=“能写的行数” 这些元素可以定义相关格式。(但不用记,知道就行,因为在实际开发中不会使用它们,都是用css来做)