br标签 :
在任意位置进行换行,使用br标签。
- 作用 :换行
- 格式 : <br>
注意点 :
- 多个<br>标签可以连续使用,使用多少个br标签就可以还多少次行。
- 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 属性 :这个属性用于控制页面跳转的方式,时在当前页面进行跳转还是打开新的页面跳转。
- _self : 用于当前选项卡中跳转,不会开启新的窗口。
- _blank : 用于在新的选项卡中跳转,会跳转到新的窗口。
- title 属性 :用来控制鼠标悬停在上面时会显示的信息。
注意点 :
- a标签不仅可以让文字可以被点击,也可以让图片被点击。
- 一个a标签中必须要有href属性,否则不知道跳转到哪里。
- 如果在href中加入URL,前面必须写上http:// 。
- 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 属性 :当在浏览器不能正常显示图片时会显示的提示信息。
注意点 :
- img标签不会独占一行。
- 如果设置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 = "图片无法正常显示">
注意点 :
- base标签必须写在head标签的头标签和尾标签之间。
- 如果在base标签中指定了target属性,而具体的a标签中也指定了target属性,那么浏览器会根据a标签进行解析。
相关代码展示 :
<head>
<meta charset="UTF-8">
<title>11-base标签</title>
<base target="_blank">
</head>
锚点问题 :
如何通过a标签跳转到特定的位置?
必须给a标签指明要跳转的具体位置,或者告诉a标签要跳转的位置有什么编号。
在HTML中每个标签都会有一个id号作为标记。
实现a标签的指定跳转需要俩步操作:
- 给目标标签添加一个id属性,给他一个特定独一无二的值。
- 告诉a标签你需要跳转的目标标签的id号。
- 格式 :
- <a href="#center"> 跳转到中部 </a>
- <h2 id="center">我是中部 </h2>
以点击“跳转到中部”就跳转到“我是中部”为例。
注意点 :
- 通过标签a直接跳转,是没有过度动画的。
- a标签除了可以跳转到当前界面的指定位置,还可以跳转到其他页面的指定位置。
路径问题 :
给src赋值有俩种形式 :
1.相对路径
同级:图片和html文件存在同一个文件中。(在html所在文件中查找目标图片)
下级:图片所在文件夹和html文件在同一个文件夹里面。格式 :pictures/numfirst.jpg
上级 :存储图片的文件或者存取图片的文件夹和存取html文件的文件夹在同一个文件夹。 格式 : ../QCode.jpg(含义 :在html的上一级文件夹中找到图片文
注意 :上级无法通过webstorm打开。
总结 : 上下同级的说法是以html文件夹为基点的。
2.绝对路径
每次都从指定的盘符开始查找。
绝对路径在目标图片前用/
注意 :
1路径中不要出现中文
2通过相对路径不能跨盘符。
3绝对路径无法直接在Webstorm中使用。
4在企业开发中统一用于反斜杠,不要使用正斜杆。这是因为当开发的程序部署到其他的操作系统上,
因为其他的操作系统都会使用/,所以使用正斜杆可能会引发错误。
5使用绝对路径会导致可移植性不好,当你将写好的代码拷贝给别人,别人可能就不能运行了。