2.8.3 定义列表

dl(defination list):定义列表

dt(defination title):定义标题

dd(defination description) :定义描述

定义标题

定义描述

定义标题

定义描述

2.9 超链接标签

超链接可以是文本也可以是图片,可以点击链接标签,进入新的文档,或者是当前文档中的某个部分;a标签

属性:

href="跳转的地址"跳转外网需要添加协议

target:

* \_self:在当前窗口直接打开

* \_blank:新建一个窗口打开这个资源地址

* \_search:之前打开的页面存在,则不打开新的页面,直接复用

超链接的两个作用:

连接到的url资源地址,进行页面的跳转;

可以作为锚点来使用;

2.9.1 连接到的url

跳转到百度

连接标签

打开百度

2.9.2 作为锚点

在同一个html页面中使用:

创建一个锚点(在指定的位置指定标记):< a name=“锚点名称” >< /a >

创建跳转链接:< a href=“#锚点名称” >跳转< /a >

在不同的html页面中使用:

在指定的另一个页面中的某个位置指定标记:< a name=“锚点名称” >< /a >

在当前页面中创建跳转连接:< a href=“连接到的另一个页面的url#锚点名称” >跳转< /a >

超链接标签

点我试试

[跳转底部]

网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容

底部内容-底部导航部分

[跳转顶部]

2.10 图片标签

< img /> 独立标签

属性:

src:图片地址

width:图片的宽度(单位像素或者百分比)

height:图片的高度(单位像素或者百分比)

border:边框

alt:图片的文字说明 当图片未能正确加载时,才显示

title:鼠标悬停时,显示的文字

图片标签

2.11 表格标签

表格由< table />标签来定义,每个表格均有若干行(由tr标签定义行),每行由若干个单元格组成(由td标签来定义);

table属性:

默认没有边框体现

border:边框的宽度

bordercolor:边框的颜色

cellspacing:单元格的间距

cellpadding:单元格与内容的间距

width:宽度

height:高度

align:控制表格的对齐方式 left center right

带有标题的表格:

caption:给表格添加标题;

2.11.1 普通表格

table tr td

td的属性:

align:控制的单元格内容的对齐方式 left center right

valign:控制单元格内容的垂直对齐方式 top middle bottom

表格的标签

学号 姓名 性别 1001 卡卡 男

2.11.2 表格的表头

th:默认居中字体加粗;

表格的标签

学号 姓名 分数 1002 糖糖 100

2.11.3 表格的列合并

colspan

表格的合并

学生信息表 学号 姓名 各科成绩 1 卡卡 80 90

2.11.4 表格的行合并

rowspan

表格的合并

学生表

学号 姓名 java HTML 1

卡卡 80 90 100 99

2.11.5 表格的拆分

表格的拆分:三个部分 thead,tbody,tfoot

thead:头部分(导航栏部分)

tbody:主体部分(中间的相关内容)

tfoot:脚部分(底部相关的内容)

早期使用table做网页布局,网络的带宽比较慢;

使用table标签布局,只有等所有的table标签加载完毕后,才可以访问中间的内容,用户体验差;

表格的拆分

学校的平均成绩 学号 姓名 平均成绩 1001 张三 70 1002 李四 95 1003 王五 80

2.12 表单标签

表单标签应用场景:登录、注册

嵌套这个标签,浏览器上的内容才能够提交到服务器上

注册:给后台发送注册的请求,后台存储起来,判断用户名是否在,如果存在反馈"注册失败…"

登录:给后台发送登录请求,后台判断用户是否已经登录了,给"用户提示"

2.12.1 标签属性

form标签:

action:提交的地址url(服务器后台地址)

method:提交方式分为get、post两种方式

onsubmit:表单提交是否能提交

* οnsubmit=“return checkAll()”

返回值是true(表单中所有的内容都满足条件,才能能提交)

返回false,提交不成功

name属性:给系统后台标记书写的内容

value属性:给输入框一个默认值

placeholder属性:在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏;

disable:是否禁用输入框

2.12.2 表单的两种提交方式

表单提交方式

get方式:

将用户的相关所有信息都提交到地址栏上

get方式提交的不适合提交私密数据(不安全)

get方式提交的用户的数据大小有限制

post方式(常用):

不会将用户的数据提交到地址栏

Post方式适合提交私密数据

Post方式提交数据大小没有限制

2.12.3 标签案例

表单标签

用户名

密码

出生年月

2.13 利用表单标签完成登录

账户:< input > type=“text” value:默认值 placeholder:提示

密码:< input > type=“password” value:默认值 placeholder:提示

性别:< input > type=“radio” checked:默认选中 value:默认值

地址:

* < select >下拉菜单 selected=“selected”:默认选中

* < option > 下拉选项

爱好:< input > checkbox

介绍: < textarea > < /textarea >文本

* rows:写多少行内容

* cols:一行指定多个字符

上传文件 input type=“file”

日期相关的 input标签 type=“date”

邮箱相关的input标签 type=“email” 符合邮箱格式

提交:< input > type=“submit”

重置 : < input > type=“reset”

表单标签

账户:

密码:

性别:

地址:

北京 上海 四川省 山西省 湖南省 甘肃省

爱好:篮球

音乐

跑步

照片:

介绍:

重置

2.14 框架标签

frame来表示框架标签

一个frame标签包含了一个html页面,当前出现两个或者两个页面的时候,需用框架集 (frameset)来表示该结构;

frameset属性:

rows:按照横向划分(从上往下看)每一部分所占的权重百分比

* 假设有三部分:上、中、下

* rows = “20%,70%,\*”(上20%、中70%、下10%)

cols:按照竖向划分(从左往右看)每一部分所占的权重百分比

* 假设有两部分:左、右

* cols = “15%,\*”(左边15%、右边85%)

frameset框架不能body共存

转义字符:© 代表©

2.14.1 Framset

框架标签

2.14.2 左边菜单页

左边菜单页面

2025-11-12 08:44:08