前端HTML内容详解（上）

前端HTML内容详解（上）

1.常见标签的属性及其描述：

标签	描述
< p> < /p>	段落分隔
< /br>	换行
< strong>< /strong>	加粗
< em>< /em>	倾斜
< del>< /del>	删除线
< ins>< /ins>	下划线
< div>< /div>	盒标签（块级元素）
< span>< /span>	盒标签（行内元素）

2.相对路径与绝对路径：

• 绝对路径：绝对路径是指文件在硬盘上真正存在的路径。

  例如：“close.png”这个图片是存放在硬盘的“D:\html文件\images\close.png”目录下，那么 “close.png”这个图片的绝对路径就是“D:\html文件\images\close.png"。

• 相对路径：相对路径，就是相对于自己的目标文件位置。

  例如：图片相对于HTML页面的位置。

  相对路径分类	符号	说明
  同一级路径		图像文件位于HTML文件同一级
  下一级路径	/	图像文件位于HTML文件下一级
  上一级路径	··/	图像文件位于HTML文件上一级

  3.插入图片标签及其属性：

  • 插入图片标签语法：

    <img src="图像URL"/>
  

• 插入图片标签属性：

  属性	属性值	描述
  alt	文本	替换文本
  title	文本	提示文本
  width	像素	图像宽度
  height	像素	图像高度
  border	像素	图像边框粗细

  4.超链接标签：

  • 超链接的语法格式：

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

  • 超链接标签的属性及其作用：

    属性	作用
    href	用于指定链接目标的url地址
    target	用于指定链接页面打开的方式

    1. target属性值及其作用：

    属性值	作用
    _self	默认值，在本窗口中打开
    _blank	在新窗口中打开方式

    • 锚点链接：

      锚点链接：当我们点击链接，可以快速定位到页面中的某个位置。

      1. 在href属性中，设置属性值为#名字的形式。

         如< a href="#one">第一节< /a>

      2. 找到目标位置标签，里面添加一个id属性=刚才的名字

         如< h2 id=“one”>第一节介绍< /h2>