HTML5 (三) br、a、img和base标签以及锚点问题和路径问题

br标签 :

在任意位置进行换行,使用br标签。

  • 作用 :换行
  • 格式 : <br>

注意点 :

  1. 多个<br>标签可以连续使用,使用多少个br标签就可以还多少次行。
  2. br标签只是单纯的换行,并不意味着段落结束,因此在实际使用中会很少使用。

使用p标签还是br标签?  当整个段落已经讲完时要使用p标签,如果没有讲完强制换行的用br标签。

使用代码展示 :

只设置了img标签的src属性<br>
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  width = "300", height = "478"><br>
设置你了src属性和weight和height<br>
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  width = "100" height = "478"><br>
设置了src,但不成比例设置图片,使图片变形<br>
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  height = "178"><br>
设置了src,和width属性<br>
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  width = "100"><br>
设置了src和width属性以及title属性<br>
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  title = "这是一张壁纸"><br>
设置了img标签的src属性和width属性以及alt属性<br>
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  title = "这是一张壁纸",alt="sorry!"><br>

上面代码的效果,每输出一句话,输出一张图片就换一次行。

a标签 :

  • 作用 :用于控制页面和页面之间的跳转。
  • 格式 :<a href="指定的跳转目标(可以是URL也可以时本地路径文件)"> 需要展示给用户查看的内容 </a>
  • target 属性 :这个属性用于控制页面跳转的方式,时在当前页面进行跳转还是打开新的页面跳转。
  1. _self : 用于当前选项卡中跳转,不会开启新的窗口。
  2. _blank : 用于在新的选项卡中跳转,会跳转到新的窗口。
  • title 属性 :用来控制鼠标悬停在上面时会显示的信息。

注意点 :

  1. a标签不仅可以让文字可以被点击,也可以让图片被点击。
  2. 一个a标签中必须要有href属性,否则不知道跳转到哪里。
  3. 如果在href中加入URL,前面必须写上http:// 。
  4. a标签的href属性不仅可以指定一个网络地址,还可以指定一个本地地址。

相关代码展示 :

<a href="http://tieba.baidu.com/p/5826566326?da_from=ZGFfbGluZT1EVCZkYV9wYWdlPTEmZGFfbG9jYXRlPXAwMDY0JmRhX2xvY19w
YXJhbT0xJmRhX3Rhc2s9dGJkYSZkYV9vYmpfaWQ9MjY5MzEmZGFfb2JqX2dvb2RfaWQ9NDcwNzAmZGFfdGltZT0x
NTM0MDU0MDU0&da_sign=a8dee1b265cbb56e66d70a1b2f75fdd5&tieba_from=tieba_da">
    <img src="pictures/file_1533988230074.jpg" >    </a>

<a href="郑伊健.html">郑伊健</a>

img标签 :

  • 作用 :用于在浏览器页面中插入图片。
  • 格式 : <img src="">
  • src 属性 :时sorce的缩写,用来告诉img标签,需要显示的图片的位置名称。
  • weight 属性 : 宽度
  • hright 属性 :高度

以上这俩个属性用来高数浏览器图片的大小,没有指定的话浏览器默认使用原来图片大小比例。

  • title 属性 :浏览器中当鼠标悬停在图片上时显示的信息。
  • alt 属性 :当在浏览器不能正常显示图片时会显示的提示信息。

注意点 :

  1. img标签不会独占一行。
  2. 如果设置weight和height没有计算好比例,会导致图片变形的情况,解决这种情况的方法,只写weight或者height。

base 标签 :

  • 作用 :用来指定专门统一的指定当前网页中所有超链接的打开方式。(a标签)需要如何打开。

相关代码展示 :

<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  width = "300", height = "478">
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  width = "100" height = "478">
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  height = "178">
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  width = "100">
<img src = "C:\Users\m1552\Pictures\Saved Pictures\MagazinePic-01-2.3.001-bigpicture_01_2.jpg"  alt = "图片无法正常显示">

注意点 :

  1. base标签必须写在head标签的头标签和尾标签之间。
  2. 如果在base标签中指定了target属性,而具体的a标签中也指定了target属性,那么浏览器会根据a标签进行解析。
相关代码展示 :
<head>
    <meta charset="UTF-8">
    <title>11-base标签</title>
    <base target="_blank">
</head>

锚点问题 :

如何通过a标签跳转到特定的位置?

必须给a标签指明要跳转的具体位置,或者告诉a标签要跳转的位置有什么编号。

在HTML中每个标签都会有一个id号作为标记。

实现a标签的指定跳转需要俩步操作

  1. 给目标标签添加一个id属性,给他一个特定独一无二的值。
  2. 告诉a标签你需要跳转的目标标签的id号。
  • 格式 :
  • <a href="#center"> 跳转到中部 </a>
  • <h2 id="center">我是中部 </h2>

以点击“跳转到中部”就跳转到“我是中部”为例。

注意点 :

  1. 通过标签a直接跳转,是没有过度动画的。
  2. a标签除了可以跳转到当前界面的指定位置,还可以跳转到其他页面的指定位置。

路径问题 :

给src赋值有俩种形式 :
1.相对路径
同级:图片和html文件存在同一个文件中。(在html所在文件中查找目标图片)
下级:图片所在文件夹和html文件在同一个文件夹里面。格式 :pictures/numfirst.jpg
上级 :存储图片的文件或者存取图片的文件夹和存取html文件的文件夹在同一个文件夹。  格式 : ../QCode.jpg(含义 :在html的上一级文件夹中找到图片文
注意 :上级无法通过webstorm打开。
总结 : 上下同级的说法是以html文件夹为基点的。
2.绝对路径
每次都从指定的盘符开始查找。
绝对路径在目标图片前用/

注意 :
1路径中不要出现中文
2通过相对路径不能跨盘符。
3绝对路径无法直接在Webstorm中使用。
4在企业开发中统一用于反斜杠,不要使用正斜杆。这是因为当开发的程序部署到其他的操作系统上,
因为其他的操作系统都会使用/,所以使用正斜杆可能会引发错误。
5使用绝对路径会导致可移植性不好,当你将写好的代码拷贝给别人,别人可能就不能运行了。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值