HTML5前端第二章节

王國慶 · 前天 16:43

一.列表

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>
</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）.&nbsp：空格( )
（2）.&lt：小于符号(<)
（3）.&gt：大于符号(>)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

HTML5前端第二章节

0 个回复

快速回复

楼主热帖

标签云