基础标签详解
目录：
H系列标签，Head
- 作用：
- 用于给文本添加标题语义
- 格式
<h1>**************</h1>
- 注意点
- H标签是用来给文本添加标题语义的，不是用来改变文本的样式的
- H标签从
<h1>到<h6>共6个 - 被H系列标签包裹的内容会独占一行
- H1字号最大，H6最小
- 企业开发中一定要慎用H系列标签，特别是
<h1>标签，一般情况下一个界面中只出现一个<h1>标签（与SEO有关）
P系列标签，Paragraph
- 作用：
- 用于给文本添加段落语义
- 格式
<p>**************</p>
- 注意点
- p标签在浏览器中会单独占据一行
Hr标签，Horizontal Rule
- 作用：
- 在浏览器上实现一条分割线
- 格式
<hr />
- 注意点
- Hr标签在浏览器中会单独占据一行
- hr标签可以是
<hr />也可以是<hr>，这是HTML和XHTML的历史遗留问题
img标签，Image
- 作用：
- 告诉浏览器显示一张图片
- 格式
<img src="图片名称/图片路径+名称" alt="">src属性：source，指定图片的文件路径和名称width属性：宽度height属性：高度- 不指定width和height系统按照图片的默认宽高显示，手动指定宽高可能会导致图片变形，只指定宽或高则可以等比例缩放
title属性：鼠标悬停时显示的描述信息alt属性：alternate，图片不存在或者加载失败的时候显示的信息
- 注意点
<img>标签在浏览器中不会单独占据一行<img>标签中的路径统一使用反斜杠/，因为程序可能会部署到不同的操作系统中去，反斜杠路径在不同的操作系统中不会出现问题- 因为移植性问题，一般开发中使用相对路径，不使用绝对路径
- 路径问题
- 相对路径赋值：从.html文件所在的文件夹开始查找，.html文件和图片文件在同一个文件夹中（同级），则只需要输入图片名称即可；在子文件夹则需要输入子文件夹名称和图片名称（下级），使用最多;在父文件夹则需要输入”../”来查找父级文件夹再加上图片名称（上级），上级路径使用webStorm查看网页可能会显示错误
<img src="demo.jpg"><img src="images/demo.jpg"><img src="../demo.jpg">
- 绝对路径赋值：每次从指定的盘符开始查找
<img src="C:/users/images/demo.jpg">
- 路径中最好不要出现中文字符，否则可能会发生未知错误
- 相对路径查找不可以跨盘符
- 相对路径赋值：从.html文件所在的文件夹开始查找，.html文件和图片文件在同一个文件夹中（同级），则只需要输入图片名称即可；在子文件夹则需要输入子文件夹名称和图片名称（下级），使用最多;在父文件夹则需要输入”../”来查找父级文件夹再加上图片名称（上级），上级路径使用webStorm查看网页可能会显示错误
- 实例练习
- 目录结构
- Test
- path
- next
- next2
- 3.png
- 2.png
- next2
- demo.html
- 1.png
- next
- 4.png
- path
- Test2
- 6.png
- 5.png
- Test
<img>语句相对路径书写
<img src="1.png"><img src="next/2.png"><img src="next/next2/3.png"><img src="../4.png"><img src="../../5.png"><img src="../../Text2/6.png">
- 目录结构
br标签，break
- 作用：
- 在浏览器上实现换行
- 格式
<br>
- 注意点
- 多个
<br>标签可以连续使用，使用几次换几次行 <br>标签的语义是不另起一个段落换行，一般开发中都是需要另起段落换行，所以正常开发中很少使用<br>标签
- 多个
a标签
- 作用：
- 在浏览器上实现超链接，用于控制界面与界面之间的跳转
- 格式
<a href="http://www.baidu.com" target="_blank" title="点击跳转到百度">点击我将会跳转到百度首页</a>href属性：指定需要跳转的界面- 标签内容：用户看到链接，文字或者图片等
target属性：取值_blank,新建空的选项卡打开链接，取值_self，在当前选项卡打开链接，默认为_self属性，此外还有_top，_parent两个属性取值title属性：鼠标悬停时显示的描述信息
- 注意点
<a>标签除了让文字变成超链接，也可以让图片变成超链接- 一个
<a>标签必须要有href属性，否则不知道跳转到何方 - 通过
href属性指定url地址时首部必须要加上http://或者https:// <a>标签除了可以链接到外部地址，还可以通过相对路径来链接到本地地址比如：<a href="demo1.html">这个链接会跳转到同级文件夹下名为demo1.html的界面</a><a>标签还可以跳转到当前界面的指定位置：锚点- 锚点：通过给
<a>标签定义一个独一无二的身份证号码来确定跳转位置，即id选择器
- 首先在需要跳转到的位置编写语句：
<a id="顶部"/>，创建锚点</li>在需要放置链接的位置编写语句：
<li>然后<a href="#顶部">返回顶部</a> <a>标签跳转到当前界面的指定位置的时候是没有过渡动画的
- 首先在需要跳转到的位置编写语句：
<a>标签还可以跳转到其他界面的指定位置，同样通过锚点实现：<a href="other.html#bottom">点击跳转到其他界面的底部</a>，要实现跳转首先要在other.html里面定义id=bottom的锚点
假链接
- 作用：
-用于项目前期链接网页未开发完成时使用的超链接，具有超链接的外观，但是点击之后不会跳转，在项目开发的后期假链接替换为真链接 - 格式
<a href="#">click me</a><a href="javascript:">click me</a>
- 注意点
- 两种格式的区别：
#假链接点击之后会返回到页面顶部，而javascript:不会 <base>标签中的属性会被<a>标签中本身的属性覆盖
- 两种格式的区别：
base标签
- 作用：
-用于指定当前界面的所有超链接的属性 - 格式
<base targrt="_blank">
- 注意点
<base>标签必须写在<head>和</head>之间<base>标签中的属性会被<a>标签中本身的属性覆盖
注释
- 作用：
- 提高代码的可阅读性
- 格式
<!-- 在这里输入你的注释信息 -->
- 注意点
- Hr标签在浏览器中会单独占据一行
- hr标签可以是
<hr />也可以是<hr>，这是HTML和XHTML的历史遗留问题
标签综合练习
为了能够看最最后假链接返回顶部的效果可以在<br>处多添加一些换行，在这里为了代码简洁美观，只写了两行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>张卫健</h1>
<hr/>
<p>张卫健，1965年2月8日出生于香港，中国香港男演员、歌手，香港电视专业人员协会荣誉副主。</p>
<p>1984年，张卫健以香港新秀歌唱大赛冠军身份出道迈入娱乐圈，在张国荣的帮助下进军歌坛后，又带着对演戏的热爱踏入影视圈。1985年，出演个人首部电影《疯狂游戏》。1991年，凭借担纲演出电视剧《老友鬼鬼》，推出个人粤语专辑《真真假假》。1996年，出演TVB《西游记》，凭“孙悟空”获TVB“我最难忘的男主角”，后因无线电视之经验而转战台湾与内地。</p>
<p id="top"></p>
<img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=6ab335cd39adcbef01347900949449e0/aec379310a55b31951d58e7c4ba98226cffc178e.jpg" title="a picture" alt="如果看到这段话说明图片加载失败">
<br>
<br>
<a href="https://tieba.baidu.com/index.html">百度贴吧</a>
<a href="#top">返回顶部</a>
</body>
</html>