HTML5前端第二章节

发布于:2025-03-17 ⋅ 阅读:(18) ⋅ 点赞:(0)

一.列表

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).&nbsp:空格( )

(2).&lt:小于符号(<)

(3).&gt:大于符号(>)