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


相关文章
N..
|
1月前
|
前端开发 开发者
HTML表格
HTML表格
N..
11 1
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
57 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
前端开发 JavaScript 微服务
jeecg-boot前端实现表格插槽、定制化修改
jeecg-boot前端实现表格插槽、定制化修改
44 0
|
1月前
如何在HTML文件中添加超链接
如何在HTML文件中添加超链接
21 0
|
24天前
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
38 1
|
14天前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度:7个实用技巧
在当今互联网时代,网页加载速度对用户体验至关重要。本文将介绍7个实用的技巧,帮助前端开发者优化网页加载速度,提升用户体验。从压缩资源到异步加载,从图片优化到缓存策略,这些技巧将帮助你在前端开发中取得更好的效果。
|
22天前
|
前端开发 JavaScript UED
如何优化前端网页性能提升用户体验
本文将探讨如何通过一系列前端优化技术,提高网页加载速度、减少资源请求次数,从而优化用户体验。我们将介绍一些常用的性能优化技巧,包括资源压缩、懒加载、CDN 加速等方法,帮助开发者更好地构建高效、流畅的前端网页。
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
1月前
|
移动开发 HTML5
HTML5表格简单应用案例之[招聘需求表]
HTML5表格简单应用案例之[招聘需求表]
11 0
|
1月前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
11 0