Sublime编写html骨架图片标签和超链接

小白成长札记

已于 2023-04-12 13:04:45 修改

阅读量409

点赞数

文章标签： html css 前端

于 2023-04-12 13:03:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45734905/article/details/130101114

版权

本文介绍了HTML中<img>标签的使用，包括设置图片源(src)，alt属性和title属性。同时，也讲解了<a>标签创建超链接的方法，href属性，target属性以及如何使用base标签设定全局链接打开方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>
		图片标签
	</title>
</head>
<body>

	<!-- 
	行内块元素，可以设置宽高，又能同行显示
	图片标签 img 单标签
	src="图片地址"
	title="鼠标指向这个元素的时候，显示的标题内容"
	alt="图片加载失败的时候显示内容，成功就不会显示，起到提示作用"
	 -->

	<!-- 网络地址 -->
   <img src="https://img1.baidu.com/it/u=3412053504,698784004&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">

   <!-- 相对论路径
   			./ ==》当前目录(可以省略)
			../ ==》上级目录，如果是上上级  ../../
   			 -->
   <img src="./image/001.webp">
   
   <img src="image/002.webp" alt="图片加载失败" style="width:300px; height: 300px;">
   <!-- 图片本身带有比例，同时设置图片的宽和高会改变比例导致图片被拉伸。若要既不改变图片形状，又要设置宽和高，因此只设置宽度或高度 ，浏览器会自动设置另一边 -->

   <img src="003.webp">
   <img src="../004.webp">

   <!-- 绝对路径: 带着盘符的路径
   	不建议使用绝对路径：绝对路径是在你的本地电脑的某个盘中，后期打包项目的时候（根目录下所有文件),压缩放在远程服务器中；远程服务器中（远程电脑），把本地图片放在某个盘中，会导致找不到图片。

   	项目里所用到的图片都要放在根目录里面，最好进行分类，专门放在一个image里面
    -->
    <img   title="你好石雕" src="C:/Users/huangjv/Desktop/2304/01-HTML/image/001.webp">
    <br>
    <br>
    <br>
     <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>
    <h2 id="h2">我是h2锚点</h2> 
        <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <h6 id="或">我是h6锚点</h6>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>    <br>
    <br>
    <br>  
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>超链接标签</title>
	<base href="" target="_blank">
</head>
<body>

	<!-- a标签是一个行内元素：同行显示，不可以设置宽高
		块级元素：可以设置宽高，独立成行
		行内块：可以设置宽高，又能同行显示
		a标签，双标签，行内元素
		blank:跳转方式
		1. _self  从当前窗口打开（默认）
		2. _blank 从新窗口打开
		让全局的a标签从新页面打开，在head标签里面使用<base href="" target="_blank">
		href="要跳转的地址"
		title="显示标题内容"  ==》所有的标签都可以加title标题提示
	 -->
	<a href="http://www.4399.com" style="background: red;">4399小游戏</a>
	<a href="http://www.baidu.com" title="百度吧" target="_self">百度一下</a>
	<a href="05_图片标签.html">跳转图签标签页面</a>
	<a href="#aaa">跳转p标签位置</a>
	<!-- 对于网络地址必须要携带http://或者https:// -->
	<a href="05_图片标签.html#h2">跳转图片标签h2锚点</a>
	<p></p>
	<a href="05_图片标签.html#或">跳转图片标签h6锚点</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><br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="aaa" > p标签位置 </p>
<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>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>

<!--   跳转到顶部，若href为空，点击时会有闪动现象，用户体验差-->
<a href="#" target="_self" >点我回到页面顶部</a>
<a href="" target="_self" >点我回到顶部闪动</a>

<!-- 不跳转 -->
<a href="javascript:;">不跳转1</a>
<a href="javascript:void(0);">不跳转2</a>
<a href="javascript:">不跳转3</a>
</body>
</html>