前端基础学习的第四天

173 阅读3分钟

由于长达半个月的考试周,这么长的时间没有看前端相关的东西有点陌生,今天主要是回顾一下前几天的学习笔记,再考虑学习新的东西。

文本格式化标签

在网页中,有时为突出文字的重要性需要设置粗体斜体或者下划线的效果,需要利用HTML中的文本格式化标签。


和标签

<div>和<span>标签没有语义,它们就是一个盒子,用来装内容。可以在网页中分模块布局网页。

<div>标签:用于布局,但是一行只能放一个<div>标签。

<span>标签:用于布局,一行上可以放多个<span>标签。

目前还没有学到页面布局的内容,关于这两个标签先了解,后面再学习应用。


图像标签和路径

图像标签

在HTML标签中,<img>标签用于定义HTML页面中的图像。

<img src="图像URL"/>

在以上示例的写法中,不需要加结束标记,是因为这个元素用了简写记法,目前先记住,在后面再专门提到有关简写记法的内容。

src是<img>标签的必须属性,用于指定图像文件的路径和文件名。

<img src="图像URL" alt="图片描述"/>

alt属性是用来替换文本,在图像显示不出来的时候用文字替换。

<img>属性还有其它的属性:

  • title
提示文本,当鼠标放在图像上,显示的文字。
  • width
设置图像的宽度。(一般来讲,在设置时,只设置宽度或只设置高度,会自动等比压缩。比如设置了宽度后,会自动等比压缩高度,这样图片不容易失真。)
  • height
设置图像的高度。
  • border
设置图像的边框粗细。在后面学习了css之后还可以修改边框的样式和颜色。


  • 图像标签相关的注意点:
  1. 图像标签可以拥有多个属性,必须写在标签名的后面;
  2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开;
  3. 属性采取键值对的格式,即属性="属性值"。


路径

在了解什么是路径之前,需要先了解一下,什么是目录文件夹,什么是根目录?在实际的开发工作里我们的文件需要文件夹进行管理

  • 目录文件夹
目录文件夹是我们创建的一个普通的文件夹,用于存放我们做网页时用到的素材,比如图片、音频和html文件等等。
  • 根目录

根目录即目录文件夹的第一层。

  • 相对路径
以引用文件所在位置为参考基础,建立出的目录文件夹。简单来说就是所用素材相对于HTML页面的位置。
  1. 同一级路径:图像文件位于HTML文件同一级,比如<img src="baidu.gif"/>
  2. 下一级路径:图像文件位于HTML文件下一级,比如<img src="images/baidu.gif"/>,即<img src="文件夹名/图像文件"/>
  3. 上一级路径:图像文件位于HTML文件上一级,比如<img src="../baidu.gif"/>
PS.如果图像文件位于HTML文件的上两级,只需要在前面多添加一个“../”即可,比如<img src="../../baidu.gif"/>。其余同理可得。
  • 绝对路径

是指目录下的绝对位置,直接到达目标位置,从盘符就开始的路径,或者是完整的网络地址。

在开发工作中,一般不会使用到绝对路径,因为移植性低,兼容性也不高。相对路径就比较方便一点,常用且稳定。