前端学习之常见标签的使用（2）

目录

- h标签

- p标签

- br标签

- 字符实体

- img标签

- a标签

- mailto链接

- base标签

- 锚点

- div

- span

- video(H5新增)

- audio(H5新增)

---

- h标签

h标签 标题标签 在HTML中，一共有六级标题标签 h1~h6 在显示效果上，h1最大，h6最小，但是文字的大小我们并不关心 6级标题中，h1的最总要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于搜索引擎来说， h1的重要性仅仅次于title，搜索引擎检索完title会立即查看h1中的内容 h1标签非常重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签 一般的页面中，我们只使用h1 h2 h3，其他的基本不用

<h1>这是一个h1标签</h1>

- p标签

段落标签，段落标签用于表示内容中的一个自然段 使用p标签来表示一个段落 p标签中的文字，会独占一行，并且段与段之间会有一个间距

<p>
    段落标签，段落&quot;标签&quot;用于表示内容中的一个自然段,<br><hr>
    使用p标签来表示一个段落,
    p标签中的文字，会独占一行，并且段与段之间会有一个间距
</p>

- br标签

br标签 表示换行标签 br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签

-hr标签

hr标签 可以在页面中生成一个分割线

- 字符实体

空格   
  <  &lt;
  >  &gt;
  “  &quot;
  &  &amp;
  ‘  &apos;

- img标签

img标签 告诉浏览器要显示一张图片

img标签的格式 
<img src="" alt="">

src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径） alt:可以用来设置在图片不能显示的时，对图片的描述 img标签的其他属性 width:设置图片的宽度 height:设置图片的高度 title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容。

<img src="图片的url或本地路径地址" alt="" width="100px" height="100px" title="">

注意点：

1.px 单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。像素的使用性特

别广。

2.如果不设置img标签的宽度和高度，那么图片就会按照默认的样式显示，如果设置了宽高，img就

会按照设置的宽高来显示。

3.有时设置img的宽高会使图片失真，这时只需要设置宽度或者高度中的一个，另外一个会等比例调整。

4.一般除了自适应的页面，不建议设置width和height。

5.和h标签以及p标签不同的是，img标签不会独占一行

- a标签

a标签的作用 用于控制页面与页面之间跳转的 a标签的格式

<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>

a标签中还有一个叫做target的属性，这个属性专门用于控制如何跳转 self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self _blank:用于在新的选项卡中进行跳转，也就是新建页面跳转 a标签也有一个title属性，效果和img标签的title类似

注意点: ​ 1.a标签不仅可以让文字点击，也可以让图片被点击 ​ 2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方 ​ 3.如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https:// ​ 除了URL地址，还可以指定一个本地地址

- mailto链接

mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息。

使用方式：

<a href="mailto:name@email.com">Email</a>

- base标签

base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开 注意点

        1.base标签必须要写在head标签之间

        2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行。

- 锚点

        1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

        2.如何和HTML中的标签绑定一个独一无二的身份证号码呢? 在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的

        3.所以要想实现通过a标签跳转到指定的位置分为两步 ：3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值 3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

格式:

<a href="#center">跳转</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="center">我是中部</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

当点击跳转时就会跳到绑定的目标位置。 

- div

div是一个无语义的标签，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来进行页面基本结构的搭建

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

- span

span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式

- video(H5新增)

作用：播放视频 webm 网页中专用的视频格式

格式:<video src=""></video>

video标签的属性 src:告诉video标签需要播放的视频地址 autoplay:用于告诉video标签是否需要自动播放视频 controls:用于告诉video标签是否需要控制条 poster:用于告诉video标签视频没有播放之前显示的占位图片 loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放 muted:静音 width/height: 和img标签中的一模一样 video的第二种格式

1.格式:

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

2.第二种格式存在的意义: 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的 这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式 video标签的第二种格式存在的意义就是为了解决浏览器适配问题 video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

3.注意点:

        3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

        3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

<video autoplay="autoplay" controls="controls">
    <source src="images/sb1.webm" type="video/webm"></source>
    <source src="images/sb1.mp4" type="video/mp4"></source>
    <source src="images/sb1.ogg" type="video/ogg"></source>
</video>

- audio(H5新增)

作用: 播放音频

格式:

<audio src=""></audio>
<audio>
    <source src="" type="">
</audio>

注意点: audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样 只不过有3个属性不能用, height/width/poster。

内容如有错误，欢迎大家在评论区指出，谢谢各位的浏览。