【HTML】笔记（2）--- 背景颜色和背景图片；图片img标签；超链接/热链接；列表

来源：cnblogs　　作者：猿头猿脑的王狗蛋　　时间：2022/1/17 10:48:18　　对本文有异议

1、背景颜色和背景图片：

代码：

<!DOCTYPE html>
<html>
	<head>
		<!--
		这行代码的作用是建议浏览器以“utf-8”字符集打开
		注意：并不是设置当前页面的字符编码方式
		-->
		<meta charset="utf-8">
		<title>背景颜色和背景图片</title>
	</head>
	<!--
	bgcolor="green" 将网页的背景颜色设置为绿色
	img/700049.jpg 为相对路径
	由于背景图片将绿色的背景覆盖了，所以当前网页看不到绿色，只能看到背景图片
	-->
	<body bgcolor="green" background="img/700049.jpg">
	</body>
</html>

谷歌浏览器：

2、图片img标签：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片img</title>
	</head>
	<body>
		
		<!--
		1、设置图片宽度和高度的时候，只设置宽度，高度就会相应的等比例放缩；
		   注意：对图片进行放缩的时候，只设置width即可，如果再设置height，图片就会失真
		2、img标签就是图片标签。
		3.src属性是图片的路径。
		4、title设置鼠标在图片上时，显示的提示信息。
		5、alt设置图片加载失败时显示的提示信息
		-->
		<img src="我输入一个不存在的图片路径" width="1000px" alt="图片加载失败!"/>
		
		<br /><br /><br />
		
		<!--
		&laquo; 代表前书名号"《"
		&raquo; 代表后书名号“》”
		-->
		<img src="img/700049.jpg" width="1000px" title="艾恩葛朗特---&laquo;刀剑神域&raquo;"/>
		
	</body>
</html>

谷歌浏览器：

3、超链接/热链接：

笔记：

超链接的作用;
通过超链接可以向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统，每一个请求都会对应一个响应

用户点击超链接和用户直接在浏览器地址栏上直接输入URL有什么区别？
本质上没有区别，都是向服务器发送请求，但从操作上讲，超链接使用起来更方便。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接/热链接</title>
	</head>
	<body>
		<!--
			超链接的特点：
				有下划线；
				鼠标光标停留在超链接上显示小手形状
				点击超链接后会跳转页面
		-->
		<a href="https://www.bilibili.com/">B站	</a>
		
		<br /><br />
		
		<!--
			href: hot references 热引用
			href  属性后面一定是一个资源的地址
					这个资源可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径
		-->
		<a href="001.html">html练习代码001</a>
		
		<br /><br />
		<!--图片超链接-->
		<a href="http://baidu.com">
			<img src="img/baidu.png" width="300px"/>
		</a>
		
		<br /><br />
		
		<!--
			超链接有一个target属性：
				可取值：
					_blank : 新窗口
					_self  : 当前窗口
					_too   : 顶级窗口
					_parent: 父窗口
		-->
		<a href="http://baidu.com/" target="_blank">百度	</a>
		<br /><br />
		<a href="http://baidu.com/" target="_self">百度</a>
		<br /><br />
		<a href="http://baidu.com/" target="_too">百度</a>
		<br /><br />
		<a href="http://baidu.com/" target="_parent">百度</a>
	</body>
</html>

谷歌浏览器：

具体的效果，博主就不展示了哈，有兴趣的可以自己试试(～￣▽￣)～

4、列表：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<!--
			有序列表与无序列表的区别：
				有序列表中的所有元素都是有顺序标记的
		-->
		
		<!--有序列表-->
		<ol>
			<li>性别
				<ol>
					<li>男</li>
					<li>女</li>
				</ol>
			</li>
			
			<li>年龄
				<ol>
					<li>18岁以下</li>
					<li>18~30岁</li>
					<li>30~50岁</li>
					<li>50岁以上</li>
				</ol>
			</li>
		</ol>
		
		<br /><br />
		
		<!--无序列表-->
		<ul>
			<li>小学
				<ul>
					<li>一年级</li>
					<li>四年级</li>
					<li>五年级</li>
				</ul>
			</li>
			
			<li>初中
				<ul>	
					<li>初二</li>
					<li>初四</li>
				</ul>
			</li>
			
			<li>高中
				<ul>
					<li>高一</li>
					<li>高二</li>
					<li>高三</li>
				</ul>
			</li>
			
			<li>大学
				<ul>
					<li>大一</li>
				</ul>
			</li>
			
		</ul>
	</body>
</html>