【网页前端】HTML表格、图片、列表、超链接以及综合案例练习

简介: 【网页前端】HTML表格、图片、列表、超链接以及综合案例练习

1.HTML基本语法(一)

       1.1表格标签

               1.1.1 表格标签

1.1.1.1、简述

HTML 表格由<table>标签以及一个或多个<tr><th><td>标签组成。

<table> 是表格标签,相当于整个表格的框架。

<tr>标签用于定义表格中的一行

<td>标签用于定义表格一行的某一个单元格

colspan 单元格可横跨的列数。

rowspan 单元格可横跨的行数。

align 单元格内容的水平对齐方式 , 取值: left 左 、 right 右、 center 居中。

<th> 标签用于定义表格一行的某一个表头单元格。 单元格内的内容默认居中、加粗。

<caption> 标签用于在 table 下定义表格标题(了解即可)

image.png

练习 1:编写一个如下所示的表格

image.png

1.1.1.2table 属性

table 属性

image.png

1.1.1.3、单元格合并及对齐方式

td 属性

1.png

image.png

练习 2:将 12 两个单元格合并为一个,内容体改为 A

image.png

练习 3:将 47 两个单元格合并为一个,内容体改为 B 

image.png

1.1.1.4、表格边框样式 cellspacing cellpadding

 cellspacing:设置单元格边框之间的距离(一般设置为 0

image.png

image.png

cellpadding:设置单元格内容与单元格边框之间的空白间距

以下案例在 cellspacing=0 的设置下显示:

image.png

image.png

 1.1.2 案例

招生计划

image.png

提示:table 的属性设置一个 cellspacing="0" 可以变为图中所示线体

       1.2图片标签

               1.2.1 图片标签:<img>

图片标签:<img />

一张图片就是一个图片标签。

示例:

image.png

<img src="../img/logo.png" />

属性:

image.png

扩展:

相对路径和绝对路径

绝对路径:明确且具体的路径。

相对路径:以参照物为参照的路径。

2.png

image.png

其中/\\效果上无差别,甚至可以混合使用。但为了开发格式统一,我们仅选其中一个即可

               1.2.2 表格&图片 综合练习

练习:

image.png

1.3列表标签&超链接标签

               1.3.1 超链接标签 a

用于展示可以点击并打开的信息

超链接标签:<a></a>

image.png

image.png

1.3.2 列表标签:ul ol

用于展示列表信息

<ol> 定义有序列表。

type 列表类型,取值:Aa I i 1

<ul> 定义无序列表。

type 符号的类型,取值:disc 实心圆、square 方块 、circle 空心圆

<li>列表项标签。 是<ul> <ol> 的子标签

image.png

ul 或者 ol 属性(了解)

image.png

1.3.3 案例:导航菜单

按如下效果编写代码:

image.png

提示:传智播客:www.itcast.cn

黑马程序员:www.itheima.com

传智专修学院:www.czxy.com

2.综合案例

       2.1表单练习

注册页面

image.png


相关文章
|
6月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
11月前
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
281 19
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
190 1
利用html2canvas插件自定义生成名片信息并保存图片
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
645 1
HTML图片
【10月更文挑战第4天】HTML图片。
124 2
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
240 2
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
145 5
|
前端开发 JavaScript API
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
1212 0
|
6月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
6月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。

热门文章

最新文章