一.列表
1.作用:
布局内容排列整齐的区域
2.列表分类:
无序列表,有序列表,定义列表
其中无序列表主要用于布局排列整齐的不需要规定区域的区域
标签为:
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
...
</ul>
其中ul嵌套li,ul是无序列表,li是列表条目
有序列表的作用为布局排列整齐的需要规定顺序的区域
标签为:
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
...
</ol>
定义列表的标签为:
<dl>
<dt>列表标题</dt>
<dd>列表描述/详情</dd>
...
</dl>
二.表格
1.作用:
与Excel表格类似,用来展示数据
2.标签的使用方式:
table(表格)标签嵌套tr(行)标签,tr标签嵌套td(内容单元格)/th(表头单元格)标签
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
注意:在网页中表格默认没有边缘线,使用border属性才可以为表格添加边缘线
三.合并单元格
1.作用:
将多个单元格合并成一个单元格,以合并同类信息
2.合并单元格的步骤:
(1).明确合并目标
(2).保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
跨行合并:保留最上单元格,添加属性rowspan
跨列合并:保留最左单元格,添加属性colspan
3.删除其他单元格
合并单元格前:
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>总结</td>
<td>全班第一</td>
<td>全班第一</td>
<td>全班第一</td>
</tr>
</table>
</body>
跨行合并后:
跨列合并后:
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<!-- <td>100</td> -->
<td>100</td>
</tr>
<tr>
<td>总结</td>
<td colspan="3">全班第一</td>
<!-- <td>全班第一</td>
<td>全班第一</td> -->
</tr>
</table>
</body>
三.表单
1.作用:
收集用户信息
2.使用场景:
(1).登陆页面,(2).注册页面,(3).搜索页面
3.input标签基本使用:
input标签基于type属性值不同,则功能不同
<input type="...">
type属性值包括但不限于:
(1).text:
文本框,用于输入单行文本
(2).password:
密码框
(3).radio:
单选框
(4).checkbox:
多选框
(5).file:
上传文件
input标签中的占位文本:
占位文本的作用:提示信息
使用占位文本之前是这样的:
使用占位文本之后则是这样的:
而要添加占位文本也很简单,只需要使用到placeholder属性即可:
由:
<input type="text">
变为:
<input type="text" placeholder="文本框中的提示信息">
4.单选框radio
(1).常用属性:
name:控件名称
checked:默认选中
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
5.上传文件file
默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能
6.多选框checkbox
其中最常使用的属性就是checked默认选中了
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">排球
<input type="checkbox" checked>台球
四.下拉菜单
1.标签:
select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项
其中的常用属性为selected,表现为默认的属性值
<select>
<option>篮球</option>
<option>足球</option>
<option>排球</option>
<option>网球</option>
<option selected>台球</option>
</select>
五.文本域
1.作用:
多行输入文本的表单控件
2.标签:
textarea(双标签)
<textarea>提示文字</textarea>
注意:在文本域的右下角有拖拽功能,本来都会禁用的,直到后面使用CSS设置尺寸
六.label标签
1.作用:
在网页中作为某个标签的说明文本存在,我们也可以用label标签绑定文字和表单控件的关系,增大表单控件的点击范围
2.label标签的两种写法:
(1).label标签只包裹内容,不包裹表单控件,同时设置label标签的for属性值和表单控件的id属性值相同
(2).使用label标签包裹文字和表单控件,不需要属性
<input type="radio" id="man">
<label for="man">男</label>
<label><input type="radio">女</label>
七.按钮button标签
1.button标签的写法
<button type="">提示文字</button>
2.type标签的属性值
submit:提交按钮,点击后将数据提交到后台
reset:重置按钮,点击后将表单控件恢复默认值
button:普通按钮,默认没有功能,会配合JavaScript使用
八.布局标签
1.作用:
对网页进行布局,便于划分网页区域,摆放内容
2.div:
独占一行
3.span:
不换行
注意:div和span都为双标签,内容只需要放到两个标签之间即可
4.字符实体
作用:在网页中显示预留字符(因为直接输入这些字符是不会显示的)
(1). :空格( )
(2).<:小于符号(<)
(3).>:大于符号(>)