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

br标签 ：

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

• 作用 ：换行
• 格式 ：
  

注意点 ：

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

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

使用代码展示 ：

只设置了img标签的src属性



设置你了src属性和weight和height



设置了src，但不成比例设置图片，使图片变形



设置了src，和width属性



设置了src和width属性以及title属性



设置了img标签的src属性和width属性以及alt属性




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

a标签 ：

• 作用 ：用于控制页面和页面之间的跳转。
• 格式 ： 需要展示给用户查看的内容
• target 属性 ：这个属性用于控制页面跳转的方式，时在当前页面进行跳转还是打开新的页面跳转。

1. _self ： 用于当前选项卡中跳转，不会开启新的窗口。
2. _blank : 用于在新的选项卡中跳转，会跳转到新的窗口。

• title 属性 ：用来控制鼠标悬停在上面时会显示的信息。

注意点 ：

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

相关代码展示 ：



郑伊健

img标签 ：

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

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

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

注意点 ：

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

base 标签 ：

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

相关代码展示 ：

注意点 ：

1. base标签必须写在head标签的头标签和尾标签之间。
2. 如果在base标签中指定了target属性，而具体的a标签中也指定了target属性，那么浏览器会根据a标签进行解析。

相关代码展示 ：

锚点问题 ：

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

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

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

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

1. 给目标标签添加一个id属性，给他一个特定独一无二的值。
2. 告诉a标签你需要跳转的目标标签的id号。

• 格式 ：
• 跳转到中部

• 我是中部

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

注意点 ：

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使用绝对路径会导致可移植性不好，当你将写好的代码拷贝给别人，别人可能就不能运行了。