基础标签--h、p、a、hr、br、img、base
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基础标签--h、p、a、hr、br、img、base相关的知识，希望对你有一定的参考价值。
参考技术A 作用：用于给文本添加标题语义注意：
1、一个网页中，只有一个h1标签
2、h标签独占一行
3、end键------光标放到最后
home键----光标放到最前面
alt键+左键---选中多行，同时编辑
作用：告诉浏览器，哪些是一个段落
注意：在浏览器中，p标签单独占一行
<hr>
<hr />
作用：告诉浏览器这是一条分割线
注意：
1、在浏览器中，hr标签单独占一行
2、可以加“/”，也可以不写"/"
<img src="">
src=source
作用：告诉浏览器这里显示图片
注意：
1、img不会独占一行
2、可以指定宽高
3、title当鼠标悬停到图像上时，显示的文字
4、alt：alternate，用于告诉浏览器placehold
作用：换行
注意：
1、可以连续使用br，几个br就是换几行
img中的src的值是路径
相对路径：每次都从html当前所在的文件夹开始查找
图片和html文件在同一个文件夹中，
格式：src="图片名"
含义：在html所在文件夹中的图片
图片所在的文件夹images和html是同一级
格式scr="images/图片名"
含义：在html所在的文件夹中，找到images文件夹，再找到图片
图片所在的位置=和=html所在文件夹同级
格式：scr="../图片名"
格式：src="C://User/desk/images/图片名"
注意：
1、路径中不要带中文、
2、如果通过相对路径指定文件，但是不能跨盘。不能在C盘通过../找到D盘
3、使用反斜杠“/”、不要正斜杠“\”
作用：用于控制页面与页面之间的跳转
格式：<a href="目标地址">用户看到的文字提示</a>
<a href="https://www.baidu.com">百度一下</a>
<a href="https://www.baidu.com"><img src="图片"></a>
注意点：
1、a标签可以让图片和文字都可以点击
2、href必填项，才能跳转到目的地
3、href的目标地址中一定要有http或者https等网络协议，否则报如404的错误
4、target控制是在当前选项卡跳转 target="_self" 还是新的选项卡中跳转 "target="_blank"
5、title属性，鼠标悬停时显示的文字
<head>
<base target="_blank">
</head>
作用：用来统一指定当前网页中所有的超链接如何打开，是blank还是self
注意：
1、写在head中。
2、如果在base中指定了self，但是a标签中指定了blank，就近。
点击后不会跳转，相当于是真链接的placehold
<a href="#">这是个假链接1，点击该链接后跳转到顶部</a>
<a href="javascript">这是个假链接2，点击后无任何反应</a>
要想通过a标签跳转到指定的位置，必须告诉a标签一个独一无二的id
<h1>顶部</h1>
<a href="#center">跳转到中部</a>
<h1 id="center">中部</h1>
<h1>尾部</h1>
通过a标签跳转到指定位置的时候，没有过渡动画
<h1>顶部</h1>
<a href="新页面.html#center">跳转到中部</a>
<h1 id="center">中部</h1>
<h1>尾部</h1>
H系列标签P标签Hr标签
一、H系列标签（Header 1 ~ Header 6 ）
1、作用：用来给文本添加标题语义
2、格式：<h1>xxxxx </h1>
3、注意点：
-- 被H系列标签包裹的内容会独占一行
-- 在H系列的标签中，H1最大，H6最小
-- 在企业开发中，一定要慎用H系列的标签，特别是H1标签，在企业开发中一般情况下，一个界面只能出现一个H1标签（跟SEO有关）
二、P标签
1、作用：用来告诉浏览器哪些文字是一个段落
2、格式：<p>xxxx </p>
3、注意点：
-- P标签在浏览器会单独占一行
三、Hr标签
1、作用：在浏览器中实现一条分隔实线
2、格式：<hr/>
3、注意点：
-- hr标签会单独占一行
-- hr 标签可以写“ / ” 也可以不写 “/ ”，如果写 “ / ” 是按照XHTML的规范来编写,如果不写 “ / ” 是按照HTML的规范来编写；
但是在HTML5中，由于兼容了HTML和XHTML ，所以写不写 “ / ”都可以。
-- 做前端开发时，要不要写“/ ”，看高级开发工具的提示操作即可，如果提示要写就写。
举例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>百度一下，你就知道了</title> 6 </head> 7 <body> 8 <h2>我是标题</h2> 9 <h3>我是标题</h3> 10 <h1>我是标题</h1> 11 <h4>我是标题</h4> 12 <hr/> 13 <p>我是一个P标签</p> 14 <p>我是一个P标签</p><hr/> 15 </body> 16 </html>
浏览器显示结果：
以上是关于基础标签--h、p、a、hr、br、img、base的主要内容，如果未能解决你的问题，请参考以下文章
HTML——b i del a p img h1 h2 h3 h4 h5 h6 hr ol ul 标签的使用方法详解
怎么制做包含HTML5新元素及marquee 、a 、img、p、h1、h2和hr等标签的网页？