学习过程之HTML和CSS（3）

最新推荐文章于 2024-11-01 10:52:38 发布
最新推荐文章于 2024-11-01 10:52:38 发布
阅读量294 收藏
点赞数
文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45729131/article/details/115491569
版权
改名字了，就算是记笔记吧

文章目录

前言

这次的多写一点包括了文本处理标签，字符实体，超链接标签，多媒体标签，列表标签，定义列表，表格标签，表格跨行跨列，表格的嵌套。

提示：以下是本篇文章正文内容，下面案例可供参考

一、文本处理标签

用来处理文本的一个标签

1.代码

代码如下（示例）：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--单标签-->
		<hr style="width: 80%;" color="blue" size="7" align="center"/>
		<!--文本处理标签-->
		<font color="aqua">
			哈哈
		</font>
	</body>
</html>

2.运行结果

运行结果如下（示例）：
在这里插入图片描述

二、字符实体

1.代码

代码如下（示例）：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		你好
		<!--
			对于HTML有特殊含义的符号
			想以普通文本形式展示出来
			那么就需要使用字符实体进行转义处理
		-->
		<!--左右尖括号-->
		&lt;br/&gt;
		我爱你
		<!--空格-->
		武汉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加油
		<!--显示&-->
		&amp;lt；
	</body>
</html>

2.运行结果

运行结果如下（示例）：

在这里插入图片描述

三、超链接标签

1.代码

代码如下（示例）：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			超链接标签 a 标签
			可以给文字，图片，音乐 其他标签添加超链接功能
			
		-->
		
		<!--
			a标签会默认改变字体颜色，同时添加下划线
			href设置链接的地址，可以是网络链接，也可以是本地链接
			target  设置链接的打开方式
			_blank新建一页打开
			_self当前页打开
		-->
		<a href="https://www.baidu.com" target="_blank">百度</a>
		<hr />
		<!--超链接完成锚点设置-->
		<!--br*100  +   tab键-->
		<a name="top">顶部</a>  <a href="#middle">顶部跳转至中部</a>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<!--添加一个锚节点-->
		<a name="middle">中部 </a><a href="#bottom">跳转至底部</a>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<a name="bottom">底部</a><a href="#top">跳转至顶部</a>
	</body>
</html>

2.运行结果

运行结果如下（示例）：
在这里插入图片描述在这里插入图片描述在这里插入图片描述

四、多媒体标签

1.代码

代码如下（示例）：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			图片
			img src source图片的资源路径
			src可以是本地资源 也可是网络资源
			title 鼠标悬停图片上时，显示文字
			alt  图片加载失败 提示的文字
		-->
		<img title="显卡图片" alt="显卡图片"  src="img/显卡.jpg" width="200px" height="200px" />
		<img width="200px" height="200px" src="https://th.bing.com/th/id/R6706ad2e7a68edabddbc1b5644707c4f?rik=u8uR%2bWe5bxIosA&riu=http%3a%2f%2fpic.lvmama.com%2fuploads%2fpc%2fplace2%2f2016-09-14%2f9aab9bb7-2593-4ca6-8c5a-31355443aebc.jpg&ehk=HpOwqU6w6%2fssF4CJQMbTOshMh4lIXJONXU%2btYNsAKSI%3d&risl=1&pid=ImgRaw" />
		<a href="https://goobe.io/">
			<img title="显卡图片" alt="显卡图片" src="img/显卡.jpg" width="200px" height="200px" />
		</a>
		<hr />
		<!--
			音频
			audio
			src 音频文件的路径
			controls 在页面上显示功能控件
			loop控制循环播放
			autoplay打开网页自动播放
		-->
		<audio loop="loop" src="audio/我以为 - 小高哥.mp3"controls="controls"autoplay="autoplay"></audio>
		<audio loop controls autoplay>
			<source src="audio/我以为 - 小高哥.mp3"></source>
		</audio>
		
		<!--
			视频
			video
		-->
		
		<video width="30%" height="40%" autoplay="autoplay" loop="loop" controls="controls" src="video/bbb.mp4">该视频不支持播放</video>
		<video loop controls autoplay width="30%" height="40%">
			<source src="video/aaa.mp4"></source>
		</video>
	</body>
</html>

2.运行结果

运行结果如下（示例）：
在这里插入图片描述

五、列表标签

1.代码

代码如下（示例）：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			有序列表
			order List >>> ol
			List item  >>> li
			type>>>
			1阿拉伯数字
			a小写字母
			A大写字母
			i小写罗马数字
			I大写罗马数字
		-->
		<ol type="1" >
			<li>JAVA</li>
			<li>python</li>
			<li>AI</li>
			<li>大数据</li>
			<li>前端</li>
		</ol>
		<hr />
		<!--
			无序列表
			unorder List >>>ul
			List item >>>li
			type
			circle 小圆圈
			disc 实心圆
			square 小方块
		-->
		<ul type="circle" >
			<li>JAVA</li>
			<li>python</li>
			<li>AI</li>
			<li>大数据</li>
			<li>前端</li>
		</ul>
		<hr />
		<!--列表嵌套-->
		<ul type="circle" >
			<li>JAVA
				<ol type="1">
					<li>q</li>
					<li>w</li>
					<li>e</li>
					<li>r</li>
				</ol>
			</li>
			<li>python</li>
			<li>AI</li>
			<li>大数据</li>
			<li>前端</li>
		</ul>
	</body>
</html>

2.运行结果

运行结果如下（示例）：
在这里插入图片描述

六、定义列表

1.代码

代码如下（示例）：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			定义列表
			difination List dl
			dt 一般用于存放图片
			dd 一般用于存放文字
		-->
		<dl>
			<dt>
				<a href="https://goobe.io/">
					<img width="300px" height="300px" src="img/显卡.jpg" />
				</a> 
			</dt>
			
			<dd>
				<font color="red"><sub>电</sub><big>脑</big></font>
				<p style="font-size: 12px;color: darkgrey;" align="left">
					<font color="blue">
						显
					</font>
					卡天梯图
				</p>
			</dd>
		</dl>
	</body>
</html>

2.运行结果

运行结果如下（示例）：

在这里插入图片描述

七、表格标签

1.代码

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			table 代表整张biaoge
			        border 加线格
			        cellspacing 线之间的举例
			        cellpadding 元素和单元格之间的距离
			tr  代表一行
			td 代表每一个单元格
			thead 表头
			tbody 表体 如果不写 浏览器会自动添加
			tfoot 表尾
			th 相当于自带加粗和居中效果的td
		-->
		<table align="center" width="50%" border="1px" cellpadding="0px" cellspacing="0px">
			<thead bgcolor="darkblue"> 
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>班级</th>
					<th>分数</th>
			    </tr>
			</thead>
			<tbody bgcolor="darkslateblue">
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
				</tr>
				<tr>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
				</tr>
				<tr>
					<td>a</td>
					<td>b</td>
					<td>c</td>
					<td>d</td>
				</tr>
			</tbody>
			<tfoot bgcolor="darkgreen">
				<tr>
					<td>合计</td>
					<td>w</td>
					<td>e</td>
					<td>r</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

2.运行结果

运行结果如下（示例）：
在这里插入图片描述

八、表格的跨行跨列

1.代码

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table align="center" width="400px" height="200px" border="1px" cellspacing="0px">
			<thead>
				<tr>
					<!--column span 表格跨列 横向跨列-->
					<th colspan="3">成绩单</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<!-- row span 表格跨行 纵向跨行-->
					<td rowspan="2">1</td>
					<td>q</td>
					<td>w</td>
				</tr>
				<tr>
					<td>e</td>
					<td>r</td>
				</tr>
				<tr>
					<td rowspan="2">2</td>
					<td>t</td>
					<td>y</td>
				</tr>
				<tr>
					<td>u</td>
					<td>i</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

2.运行结果

运行结果如下（示例）：

在这里插入图片描述

九、表格嵌套

1.代码

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table align="center" width="400px" height="200px" border="1px" cellspacing="0px">
			<thead>
				<tr>
					<!--column span 表格跨列 横向跨列-->
					<th colspan="3">成绩单</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<!-- row span 表格跨行 纵向跨行-->
					<td rowspan="2">1</td>
					<td  colspan="2" rowspan="4">
								<table width="100%" height="100%" border="1px" cellspacing="0px">
									<tr>
										<td>q</td>
										<td>w</td>
									</tr>
									<tr>
										<td>e</td>
										<td>r</td>
									</tr>
									<tr>
										<td>t</td>
										<td>y</td>
									</tr>
									<tr>
										<td>u</td>
										<td>i</td>
									</tr>
								</table>
					</td>
				</tr>
				<tr></tr>
				<tr>
					<td rowspan="2">2</td>
				</tr>
				<tr></tr>
			</tbody>
		</table>
		
		<table border="1px" cellspacing="0px">
			<tr>
				<td>q</td>
				<td>w</td>
			</tr>
			<tr>
				<td>e</td>
				<td>r</td>
			</tr>
			<tr>
				<td>t</td>
				<td>y</td>
			</tr>
			<tr>
				<td>u</td>
				<td>i</td>
			</tr>
		</table>
	</body>
</html>

2.运行结果

运行结果如下（示例）：
在这里插入图片描述

总结

今天发的有点多，可能会的人不用看，不会的人看不会，但是一步一步来，如果想要具体教程私信我，这些都是我看别人的视频自己敲出来的，主要是为了做个笔记才会写到CSDN，当然如果你不想看视频，有什么疑问可以问我，仅限这里的，毕竟我也是初学者。

麻烦叫我靓仔
关注
前端学习之CSS
weixin_44362089的博客
10-20 2805
前段端学习之CSS,层叠样式表，HTML，三种方式
记录我的学习html和CSS的过程.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
CSS和HTML学习心得体会
w_pig的博客
07-10 2555
学习心得
html5+css3学习笔记（持续更新
flyffffly的博客
03-17 1148
其实我早在之前就学过，只不过当时并没有记录下来，也没有理解其底层原理，所以现在再次学习一遍，本文将记录我二次学习的过程。
HTML+CSS学习总结
weixin_53351919的博客
06-26 2953
html+css学习总结
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 59万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
学习CSS3，实现红色心形loading特效
xingyu_qie的专栏
04-30 1684
试想一下，如果你的网站在加载过程中，loading图由一个老旧的菊花转动图片，变为一个红色的特效，那该有多炫酷啊。
前端HTML5+CSS3学习笔记
Baucd的小博客
11-17 1万+
前端HTML5+CSS3学习笔记
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7573
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
学习HTML+CSS有感
a65167252的博客
07-10 1169
学习总结html+css
一文读懂HTML和CSS的关系
博文视点（北京）官方博客
01-08 4691
Web开发是一个很依赖经验的领域，然而这对初学者很不友好。 知识一旦脱离了应用场景就会变得晦涩、空洞，且知识本身也满足“二八定律”，“抓大放小”是提高学习效率的关键。 下文向大家介绍了HTML和CSS之间的关系。内容选自《HTML 5与CSS 3核心技法（全彩）》一书。本书主线清晰，讲解简洁，并提供在线效果演示效果，非常适合小白上手！ 1 HTML是骨架 很难想象一个人在桌前对着一块砧板坐一夜，隔一会儿就噼里啪啦敲几下，一会儿哭一会儿笑，是一种什么景象。事实上，在猫眼中我们就是这...
Web前端学习项目，HTML+CSS+JS，学习过程中的一些小案例和综合项目.zip
01-02
Web前端学习项目，HTML+CSS+JS，学习过程中的一些小案例和综合项目 Web前端学习项目，HTML+CSS+JS，学习过程中的一些小案例和综合项目 Web前端学习项目，HTML+CSS+JS，学习过程中的一些小案例和综合项目 Web前端学习...
html和css学习心得.doc
12-21
HTML和CSS学习心得 HTML和CSS基础知识 在学习Web前端开发时，HTML和CSS是两个基础知识点。HTML（HyperText Markup Language）是一种标准通用标记语言，用来创建网页；CSS（Cascading Style Sheets）是一种样式表...
html-css-js学习过程中的知识点.zip
01-01
html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的...
黑马基础学习html+css课程笔记和案例
06-29
学习过程中，案例分析是非常重要的部分。通过实例，你可以更好地理解和运用所学知识。比如创建一个简单的个人简历网页，你需要使用HTML定义各个部分（如个人信息、教育背景、工作经验等），然后用CSS进行美化，调整...
CSS常用标签笔记
qq_14822691的博客
10-28 730
cursor:url(图片地址), 属性值;
名词（术语）了解--CSSOM (CSS Object Model)
weixin_40539956的博客
10-29 571
/ 1. 定义全局 CSS 变量// 2. 读取 CSS 变量// 3. 动态主题实现light: {},dark: {});
【前端基础】CSS进阶
最新发布
qq_41413652的博客
11-01 655
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 837
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
重构Google首页的HTML和CSS学习之旅
实践是学习Web开发的最佳方式之一，通过尝试和调整，开发者可以不断优化自己的代码，提高页面的用户体验。 从文件的描述中可以看出，Odin项目是一个旨在通过实际项目来提升IT技能的教程或课程。通过完成项目任务，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值