关于Html页面基础知识点3

目录

1.标签注释

2.插入图片

3.插入音频和视频

 4.插入超链接

 5.小总结

---

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列b标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

那么本篇文章将继续为大家介绍一下HTML的基础知识点。

1.标签注释

 1. <p>：段落标签。
 2. <hr>：单行横线。
 3. <h1>到<h6>：六种不同的标题字体。
 4. <br>：换行。
 5. <b>：粗字体。
 6. <i>：斜字体。
 1. <p>：段落标签。
 2. <hr>：单行横线。
 3. <h1>到<h6>：六种不同的标题字体。
 4. <br>：换行。
 5. <b>：粗字体。
 6. <i>：斜字体。
 7. <del>：删除线字体。
 8. <small>：小字体。
 9. <em>：重点文字。
 10. <strong>：加重字体。
 11. <sub>：下标。
 12. <sup>：上标。
 13. <ins>：插入。
 14. <abbr>：缩写。<abbr title="">文本</abbr>，鼠标移到文本上不离开，会显示出来提示符，内容是title里的内容。
 15. <bdo>：可以定义方向的字。<bdo dir="ltr">文本</bdo>，表示文本是从左向右显示，ltr表示从左向右，rtl表示从右向左。
 16. <blockquote>:长的引用。表示标签内的这部分文本是一个引用，在某些浏览器内会自动改变字体、样式等。
 17. <q>：短的引用。表示标签内的这部分文本是一个引用，在某些浏览器内会自动改变字体、样式等。
 18. <cite>：引用、引证。表示标签内的这部分文本是一个引用，在某些浏览器内会自动改变字体、样式等。
 19. <dfn>：一个自定义的项目。<dfn title="">文本</dfn>，表示文本是一个自定义的项目，在某些浏览器内会改变字体、样式等，并且鼠标移到文本上不离开，会显示出来提示符，内容是title里的内容。
 20. <var>：变量。表示标签内的这部分文本是一个变量，在某些浏览器内会自动改变字体、样式等。
 21. <a>：超链接。<a href="" target="">文本</a>，表示点击文本会进行跳转，跳转的地址为href属性内的地址，跳转的方式由target属性决定，target可以为以下几种情况：_self：表示在当前页面打开（默认），_blank表示在新页签打开，_parent表示在父窗口打开，_top表示在包含这个超链接的窗口打开。
 22. <img>：图片拆连接。<img src="" alt=""/>，src表示显示的图片地址，alt表示图片加载失败时替换的文本。
 23. <table>：表格声明。
 24. <tr>：表格的行。
 25. <td>：表格的单元格。常用的属性为border：设置边框的宽度，colspan：跨列单元格，rowspan：跨行单元格。
 26. <th>：表格的表头。
 27. <ul>：无序列表。
 28. <ol>：有序列表。
 29. <dl>：定义列表。<dt>表示定义的词，<dd>表示定义的描述。

2.插入图片

如果想要在一个空白网页中插入图片，我们需要用到<img>这个标签。具体使用方法为<img src="图片地址">其中图片地址可以为本地地址也可以为网站地址，如果为本地地址则需要分为绝对路径和相对路径，相对路径即必须要保证该文件与Html文件在同一文件夹内，绝对路径就要把文件地址写全，也可以通过width和height控制高度和宽度，例如：

<img src="Html封面.jpg" width="50%" height="50%">

效果是这样的：

3.插入音频和视频

在了解了插入图片的基础上，还可以在网页中插入音频和视频。首先，插入音频我们需要用到<audio>这个标签，具体用法为<audio src="音频地址" controls></audio>，其中地址同理可以使用网络地址和本地地址。例如：

<audio src="18-20-12.mp4" controls></audio>

然后在网页上会出现一个播放器的效果，如果想要进一步美化，需要用到CSS。

然后来说一说插入视频，插入视频需要用到<video>这个标签，具体用法为<video src="视频地址" controls>，视频地址同上原理，然后也可以使用heght和width来控制视频播放器的长度和高度。

<video src="18-20-12.mp4" controls width="30%" height="30%">

网页上会出现一个简单的播放器样式，然后可以控制播放器的播放速度。

 4.插入超链接

大家在进入网页时一定有大量的超链接，比如说百度搜索之后出现的各个词条就是一个个超链接，超链接即点击会跳转至目标页面。而在网页中插入超链接，我们需要使用<a>这个标签，具体使用方法为<a href="链接" target="跳转方式">媒介</a>，其中链接顾名思义就是跳转之后的网站，我们着重说一下跳转方式，大家在使用网页时也会发现有些时候点击超链接会直接跳转至目标页面然后保留初始界面，也有的时在原网页就直接跳转至目标页面，而跳转方式则是控制他们的工具，具体为"_blank"和"_self"，其中前者为保留原始页面，后者则直接跳转。即：
 

<a href="https://www.bilibili.com/" target="_blank">B站</a>
<a href="https://www.bilibili.com/" target="_self">B站</a>

而跳转时目标页面我们需要一个可供点击的“媒介”，它可以是一段文本也可以是一张图片。如果文本就直接输入在标签中间，图片则在<a>标签内部再引用一个<img>，具体效果如下。

 5.小总结

本次内容主要了讲解了Html页面的一些基础知识点，本篇内容都为Html的基本思想，学会了这些基础知识点以及CSS知识之后，就可以自己DIY一个小网页了，最后祝大家学有所成。