前端入坑第三弹--html的标签(下)

今天主要介绍一些在html里面很常用的标签。

文本格式化标签

文本格式化标签对于文本有很好的标注和强调作用，下面是一些常用的文本格式化标签。

1. 加粗标签

这里是<strong>加粗</strong>的文字

这里是<b>加粗</b>的文字

两种代码均可，但是第一种是更好理解的，语义更清晰，所以接下来的介绍只展示语义相对清晰的代码。

2. 斜体

这里是<em>斜体</em>的文字

3. 删除线

这里是<del>被删除的部分</del>

4. 下划线

这里是<ins>下划线</ins>的部分

图像标签

在网页中， 图片也是非常重要的部分，下面我将介绍一下如何在网页中插入图片。我们通常会使用img标签来定义图像。

img是一种单标签，但是它有很多的属性，如下所示。

1. src属性
   这个是img标签的必须属性，用于指定图像的路径和文件名。

<img src=""/>

2. alt属性和title属性
   这两个属性都是为了显示与图片相关的文字，前者是在图片无法显示的时候会显示文字，而后者我们将光标放在图片上面就有文字显示。

<img src="" alt="图片无法显示可以看这里">

<img src="" title="这个图片的内容">

3. width,height和border属性
   这些属性是对于图片样式的调整，width用于调整宽度，height调整图片的高度,border调整图片的边框宽度，默认参数单位是像素。

<img src="" width="200" border="20" height="300">

上述代码可以得到宽为200像素，高为300像素，边框是20像素的图片。

上述属性的顺序可以随意调换，并且属性之间要有空格。

相对路径与绝对路径

图片与html的位置关系有多种可能，有可能位于同一文件夹，有可能位于同一根目录。图片也可能来自于已存在的网站，这时候src属性中就需要写出这些路径。

相对路径

假设要插入网页的图片是文件名为img格式是png的一张图片

1. 同一级路径

<img src="img.png"/>

2. 下一级路径
   假设图片在images文件夹中，而这个文件夹与我们的html文件在同一个文件夹中。

<img src="images/img.png">

3. 上一级路径
   假设要插入的图片和名为html的文件夹在同一级路径。

<img src="../ima.png">

绝对路径

1. 本地文件
   假如img.png文件在C://users/images文件夹中。

<img src="C:\users\images\img.png">

2. 来自已经存在的网站

<img src="http://www.baidu.com/img.png">

链接标签

在网页中，网页之间以及网页上很多内容之间的跳转是非常有必要的，接下来为大家介绍一下有关链接的标签。

语法格式

<a href="跳转目标" target="目标窗口的弹出方式">设置链接的文本或图像</a>

其中herf表示超链接的跳转目标，是一个必须属性。而target是决定目标窗口弹出方式的属性，_self参数表示跳转到目标网页时原网页消失，_blank参数表示新窗口打开。

链接分类

1. 外部链接

<a href="http://www.baidu.com" target="_blank">百度</a>

2. 内部链接
   假设a.html和b.html两个文件在同一个文件夹中，此时要建立从a到b的跳转关系。

<a href="b.html">b链接</a>

3. 空链接
   假如链接目标还没有确定，可以用如下的代码。

<a href="#">没想好链到什么地方的链接</a>

4. 下载链接
   当跳转目标是文件或者压缩包时，点击链接会下载相关文件或者压缩包。
5. 网页元素链接
   各种元素都可以添加超链接
6. 锚点链接
   锚点链接可以快速定位到网页中的某个位置。

<a href="#contact">第一部分</a>
<h2 id="contact">第一部分</h2>

以上就是今天的分享了，欢迎大家批评指正！