一、HTML中的快捷键
！+ Tab:网页的基本骨架。
Ctrl + Z:如果出现误操作，用Ctrl+Z进行撤销。
title + Tab：会出现一对标签，其他标签也可以用此方法。
二、如何添加图片
1、在插入图片 2、src属性在网页中引入一张英雄联盟中的图片 (1)在图片上，单击鼠标右键，选择复制图片地址，<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8652300af49d4650ae3c27932301bb3d~tplv-k3u1fbpfcp-zoom-1.jpg" alt="对不起图片显示不成功"> 如果单击鼠标右键没有复制图片地址这一项，就点击属性，复制属性里面的地址就可以了。 3、title属性 title属性:当鼠标放入图片时，提示的文字 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8652300af49d4650ae3c27932301bb3d~tplv-k3u1fbpfcp-zoom-1.jpg" alt="对不起图片显示不成功" title="英雄联盟">
4、width和height属性
width属性：图片的宽度属性,单位是像素px
height属性：图片的高度属性,单位是像素px
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8652300af49d4650ae3c27932301bb3d~tplv-k3u1fbpfcp-zoom-1.jpg" alt="对不起图片显示不成功" width="300" height="300">
三、超链接a标签
1、a+Tab会出现<a href=""></a>
href属性是对应跳转的网址 a标签的必备属性
跳转到百度网站
<a href="https://www.baidu.com">百度</a>
2、target属性 target="_blank" <表示保留当前页面，打开新的网页跳转>
<a href="https://www.baidu.com" target="_blank">百度</a>
四、实现点击图片，跳转到百度网页 <--标签的嵌套--> <a href="https://www.baidu.com" target="_blank"> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8652300af49d4650ae3c27932301bb3d~tplv-k3u1fbpfcp-zoom-1.jpg" alt="对不起图片显示不成功" width="300" height="300"> </a>
五、标题标题
一级标题h1 二级标题h2 三级标题h3 四级标题h4 五级标题h5 六级标题h6
<h1>我是一级标题</h1> <--一级标题字体非常大，并且有加粗效果-->

我是一级标题

我是二级标题

我是三级标题

我是四级标题

我是五级标题

我是六级标题

<--六级标题字体非常小，并且有加粗效果-->

六、网址大全的案例
门户类 3个网站点击图片，跳转到官网
游戏类 3个网站点击图片，跳转到官网
电商类 3个网站点击图片，跳转到官网

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>照片和超链接</title>
</head>
<body>
	<h1>门户类</h1>
	<a href="http://www.baidu.com" target="_blank">
		<img src="https://www.baidu.com/img/PCpad_012830ebaa7e4379ce9a9ed1b71f7507.png" alt=""width="300" height="150">
	</a>
	<a href="http://www.qq.com" target="_blank">
		<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa628ce5c604406680c4f7a77eb0e9bb~tplv-k3u1fbpfcp-zoom-1.image" alt=""width="300" height="150">
	</a>
	<a href="http://sohu.com" target="_blank">
		<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2850fffb0c764b149544356d34d1cfc4~tplv-k3u1fbpfcp-zoom-1.image" alt=""width="300" height="150">
	</a>
	<h1>游戏类</h1>
	<a href="http://lol.qq.com" target="_blank">
		<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9636b0afb9a14e0b8e0726df3b76d2c4~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="300" height="300">
	</a>
	<a href="http://pubg.qq.com" target="_blank">
		<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43302cdccd024d4681f5e72df1ab574f~tplv-k3u1fbpfcp-zoom-1.image" alt=""  width="300" height="300">
	</a>
	<a href="http://pvp.qq.com" target="_blank">
		<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd4a109d5d174945b58aefca6840b3b1~tplv-k3u1fbpfcp-zoom-1.image" alt=""  width="300" height="300">
	</a>
	<h1>电商类</h1>
	<a href="http://jd.com" target="_blank">
		<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9c4d3f8ebad43449cad9ada92977512~tplv-k3u1fbpfcp-zoom-1.image" alt=""width="300" height="150">
	</a>
	<a href="http://jx.tmall.com" target="_blank">
		<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0d8748ddb384e86920d4af4091cc8b1~tplv-k3u1fbpfcp-zoom-1.image" alt=""width="300" height="150">
	</a>
	<a href="http://ai.taobao.com" target="_blank">
		<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/791571c94f8646d9aa7b754bfe1df7e4~tplv-k3u1fbpfcp-zoom-1.image" alt=""width="300" height="150">
	</a>
</body>
</html>

HTML中的图片和超链接