【网页前端】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


相关文章
|
2月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
146 0
|
8天前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
利用 html_table 函数轻松获取网页中的表格数据
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
63 12
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
1月前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。
|
Web App开发 移动开发 前端开发
8个实用炫酷的HTML5图片动画应用
近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效。本文精选了8个实用而且炫酷的HTML5图片动画应用,希望你会喜欢。
5003 0
|
29天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
56 7

热门文章

最新文章