【课程笔记】前端核心技术--HTML排版

已于 2023-05-31 20:34:19 修改
阅读量292 收藏 2
点赞数
分类专栏： html和css 文章标签： 笔记
于 2023-05-24 20:31:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48968230/article/details/130853717
版权

一、HTML表格

1. HTML表格标签

标签描述
<table>定义表格
<tr>定义表格的行
<th>定义表格的表头
<td>定义表格单元
<caption>定义表格标题
<thead>定义表格的头部区域
<tbody>定义表格的中间主体部分
<tfoot>定义表格的底部区域

表格结构如下：

 2. table表格属性

属性描述
alignleft，center，right。相对周围元素的对其方式
bgcolor规定表格的背景颜色
border规定表格是否拥有边框，以及边框宽度
cellpadding内边距（单元格与文字之间）
cellspacing外边距（单元格与单元格之间）
width表格宽度
height表格高度

demo1 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="2" bgcolor="green" cellpadding="20" cellspacing="20" width="100%">
        <caption>表格标题</caption>
        <thead bgcolor="blue" height="40px">
            <th>1行1列</th>
            <th>1行2列</th>
            <th>1行3列</th>
        </thead>
        <tbody bgcolor="orange">
            <tr>
                <td>2行1列</td>
                <td>2行2列</td>
                <td>2行3列</td>
            </tr>
            <tr>
                <td>3行1列</td>
                <td>3行2列</td>
                <td>3行3列</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>4行1列</td>
                <td>4行2列</td>
                <td>4行3列</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

运行结果：

 3. th、td单元格属性

属性描述
align

left，right，center，justify，char。

规定单元格内容的水平对齐方式

bgcolor背景颜色
colspan单元格可横跨的列数
rowspan单元格可纵跨的行数
height

单位：px  or   %

高度

width

单位：px  or   %

宽度

valign

top，middle   

单元格内容的垂直排列方式

demo2 计算器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>计算器</title></head>
	<body>
        <!-- cellspacing（单元格和单元格之间的距离）；cellpadding（单元格和文字之间的距离） -->
		<table border="5" cellspacing="10" cellpadding="20" align="center" bgcolor="beige">
			<caption>计算器</caption>
			<tr>
                <!-- colspan（该单元格横跨X个单元格） -->
				<td colspan="4" align="center" height="18" bgcolor="bisque"></td>
			</tr>
			<tr>
				<td>C</td>
				<td>%</td>
				<td>/</td>
				<td>*</td>
			</tr>
			<tr>
				<td align="center">7</td>
				<td align="center">8</td>
				<td align="center">9</td>
				<td align="center">+</td>
			</tr>
			<tr>
				<td align="center">4</td>
				<td align="center">5</td>
				<td align="center">6</td>
				<td align="center">-</td>
			</tr>
			<tr>
				<td align="center">1</td>
				<td align="center">2</td>
				<td align="center">3</td>
                <!-- rowspan（该单元格纵跨X个单元格） -->
				<td align="center" rowspan="2" bgcolor="aquamarine">=</td>
			</tr>
			<tr>
				<td align="center">C</td>
				<td align="center">0</td>
				<td align="center">.</td>
			</tr>
		</table>

	</body>

</html>

运行结果：

 demo3 课程表

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>课程表</title>
	</head>

	<body>

		<table border="1" cellspacing="1" cellpadding="5" align="center" width="80%">
			<caption>课程表</caption>
			<tr bgcolor="#009688">
				<th></th>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
				<th>星期六</th>
				<th>星期日</th>
			</tr>
			<tr>
				<td rowspan="3" bgcolor="beige">上午</td>
				<td>HTML</td>
				<td>HTML</td>
				<td>HTML</td>
				<td>HTML</td>
				<td>HTML</td>
				<td rowspan="2">自习</td>
                <td rowspan="2">自习</td>
			</tr>
			<tr>
				<td>CSS</td>
				<td>CSS</td>
				<td>CSS</td>
				<td>CSS</td>
				<td>CSS</td>
			</tr>
			<tr>
				<td>JavaScript</td>
				<td>JavaScript</td>
				<td>JavaScript</td>
				<td>JavaScript</td>
				<td>JavaScript</td>
				<td rowspan="2">自习</td>
                <td rowspan="2">自习</td>
			</tr>
			<tr>
				<td rowspan="4" bgcolor="beige">下午</td>
				<td>PHP</td>
				<td>PHP</td>
				<td>PHP</td>
				<td>PHP</td>
                <td>PHP</td>
			</tr>
			<tr>
				<td>JAVA</td>
				<td>JAVA</td>
				<td>JAVA</td>
				<td>JAVA</td>
				<td>JAVA</td>
				<td rowspan="2">自习</td>
                <td rowspan="2">自习</td>
			</tr>
			<tr>
				<td>UI</td>
				<td>UI</td>
				<td>UI</td>
				<td>UI</td>
				<td>UI</td>
			</tr>
			<tr>
				<td>Android</td>
				<td>Android</td>
				<td>Android</td>
				<td>Android</td>
				<td>Android</td>
				<td colspan="2">自习</td>
			</tr>
		</table>
	</body>

</html>

运行结果：

demo 4 导航

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>导航栏</title>
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="20">
			<tr align="center" height="50px" bgcolor="burlywood">
				<td width="10%"></td>
				<td width="10%">
					<img src="img/搞笑趣味.png" height="30px" />
					<br/>
					<i>电脑版本</i>
				</td>
				<td></td>
				<td width="5%">
					<a href="">Index</a>
				</td>
				<td width="5%">
					<a href="">HTML</a>
				</td>
				<td width="5%">
					<a href="">CSS</a>
				</td>
				<td width="5%">
					<a href="">JavaScript</a>
				</td>
				<td width="5%">
					<a href="">JAVA</a>
				</td>
				<td width="5%">
					<a href="">PHP</a>
				</td>
				<td width="5%">
					<a href="">More</a>
				</td>
				<td></td>
				<td width="5%">
					<a href=""><img src="img/搜索.png" width="25px;"> </a>
				</td>
				<td width="5%">
					<a href=""><img src="img/人物-人.png" width="25px;"> </a>
				</td>
				<td width="10%"></td>
			</tr>

	</body>

</html>

运行结果：

 

搬砖老金牛
关注
专栏目录
HTML 排版与标签（五）
danfengw的博客
08-21 2350
框架标签框架标签适用情形有时候我们需要在一个页面上面显示两个或者多个界面时可以使用框架标签。框架标签使用框架标签使用<frameset>和<frame> 使用例子： 分为上下两部分时使用rows属性，上半部分占200像素，下班部分占剩下的部分<frameset rows="200,*" > <frame src="top.html" ></frame> <frame src="bottom
零基础学前端之SEO 基础知识学习--SEO优化学习教程【学习笔记】
li520_fei的博客
01-11 966
【前端总路线学习笔记】 本笔记的参考视频–SEO 基础知识学习视频 SEO优化学习教程学习笔记 SEO用到的网站 1.百度指数 2.站长之家 1.什么是SEO – 搜索引擎优化 Search Engine Optimization 可以理解为网站排名 SEO工作内容 网站更新 数据分析 网站后台数据 竞争对手分析 网站页面价值 后期规划 前期 后期 网站推广 链接推广 全搜索覆盖 2.SEO赚钱姿势解锁 网站排名 ： 流量==变现 赚钱方式 工作 8k平均 极端化 兼职 a.
HTML排版
dreamship
03-03 408
方法一、让整个网站的行距变化，将下面的代码添加到head的中间： <style type="text/css"> <!-- body{ line-height:200% } --> </style> 这样是整个页面行距增加了原来的2倍。你也可以设置line-height：150%、line-height：40px 等等方法。 方法二、只是让部分网站页面的内容行距增加: <td style="line-height:200%"> 用table布局
【HTML+CSS】HTML表格：从基础到进阶的全面指南
最新发布
Xiaoxin的博客
07-26 1392
在Web开发中，HTML表格（）是一个不可或缺的元素，它不仅能够以结构化的方式展示数据，还能通过CSS进行丰富的样式设计，提升用户体验。本文将带你从HTML表格的基础语法开始，逐步深入到表格的高级用法，包括布局技巧、响应式设计以及无障碍访问性优化。
HTML 排版与标签（二）
danfengw的博客
12-20 1131
<:用 < >：用 > &:用& 粗体：<b>或者<strong> 斜体：<i>或者<em> 下划线：<u> 中划线：<s> 上标：<sup> 下标：<sub> 一些特殊的符号可以通过下面的工具栏进行选择 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na
HTML学习（三）：排版
qq_37831759的博客
08-18 1163
排版标签 <h1> <p> <hr /> <br /> <div> <span> <center> <pre> 标题标签 <h1>至<h6>为标题标签，对应从大到小，align属性决定它的位置，如 <h1 align="center">hihi</h1> 代表居中 注释 <!-- hihi --> 段落标签 <p>为段落标
html排版标签
Banxia_314的博客
03-10 413
html
网易云课堂-微专业-《前端开发工程师》-笔记目录
后乐的博客
07-19 4387
《前端开发工程师》-笔记目录
值得html初学者收藏的响应式前端开发框架(1)，web开发敏捷之道
2401_84092169的博客
04-05 1228
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端BootStrap框架笔记总结
weixin_43145539的博客
05-27 596
Boot Strap 笔记整理自b站up主：编程不良人 1.Boot Strap 的引言 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷 Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目 Bootstrap 是最受欢迎的 HTM
web前端学习笔记2
hanq2016的博客
04-24 1209
web前端笔记，持续更新，非常完整
html——排版
mardax的专栏
12-02 458
<h1>~<h6> 标题1~标题6 <h1>this is h1</h1> <h2>this is h2</h2> <h3>this is h3</h3> <h4>this is h4</h4> <h5>this is h5</h5> <h6>this is h6</h6> <hr> 水平线 <hr> <br> 换行 line 1<br> line 2<br> line 3<br> <p> 段落 <p>paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3
项目实训(七) —— HTML排版
B258202的博客
07-12 532
先前的工作已经实现了基本的功能：读取数据库table展示食谱，上传图片及文字描述并插入数据库table内。但HTML排版问题一直没探究过，于是本篇旨在记录CSS和HTML配合的简单排版的过程。 中体来说就是要在HTML的字段写明class或id，再在CSS内定义某个class或id的各种样式属性，当然也包括定义<input.../>、<h3>...</h3>、<p>等官方统一的字段。 先前的HTML很简陋，只用到了极少的标签类型。为了更方便地实现排版，引入
HTML样式排版
sgr0216的博客
03-22 873
记录一些在开发过程中，让界面排版稍微美观的样式风格 input和img标签元素同行水平对齐 在输入验证码时，左边的文本框和右边的img标签控件，如果不设置好对齐的话，就会很难看，如下图(丑爆了撒~) 解决方法：只需要分别对input和img中添加同一属性样式style(vertical-align: middle)，效果很明显好很多了 验证码:<input type="text" name="randomCode" size="5" maxlength="5" style="vertical-a.
【HTML】HTML 标签 ② ( 排版标签 | 标题标签 | 段落标签 | 水平线标签 | 换行标签 | div 标签 | span 标签 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-05 3312
一、排版标签、 1、标题标签、 2、段落标签、 3、水平线标签、 4、换行标签、 5、div 标签 和 span 标签
Web网页设计·HTML篇（2）·排版标签
s1316339343的博客
04-03 706
这章我们学习排版标签，顾名思义，就是对网页格式、内容进行排版，让文字看起来更加整齐。
HTML学习（四）：CSS格式化排版
Cherry
08-06 555
1.文字排版 字体 我们可以使用CSS样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。 body{font-family:"宋体";} 这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。） ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值