HTML中H标签P标签(Paragraph)img标签(image)a标签(anchor)

<!doctype html>
<html>
  <head>
      <meta charset="UTF-8" />
      <title>永恩的技术博客</title>
  </head>
  <body>

  </body>
</html>

H系列标签(Header 1~Header 6)

    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>

P标签(Paragraph)

作用:

  • 告诉浏览器哪些文字是一个段落
     <p>我是p包裹的</p>
     <p>我是p包裹的</p>
<!-- 这里的hr标签 通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
  • 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做 -->

Hr标签(Horizontal Rule)

  • 作用:

  • 在浏览器上显示一条分割线


相对路径几种查找方式

同级

直接编写, 例如: girl.png
加上./ 编写, 例如./girl.png
./代表当前目录, ./girl.png代表在当前目录下查找

下级

直接编写, 例如abc/girl.png
加上./ 编写, 例如./abc/girl.png
相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png

上级

../代表访问上级目录
假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
注意事项:
相对路径不会出现这种格式aaa/../bbb/girl.png
虽然可以显示, 但是企业开发中千万不要这么写

     ![](/Users/apple/Desktop/YEWeb/image0.jpeg)
     ![](image01.jpeg)
     ![](./image/image01.jpeg)

br标签(Break)

让内容换行

<br>
<br/>

a标签(anchor)

  • 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
    a标签也叫做超级链接或超链接
<a href="https://muyang00.github.io">muyang的博客</a><hr/>
<a href="https://muyang00.github.io" target="_blank">muyang的博客</a>
<a href="https://muyang00.github.io" target="_self">muyang的博客</a>

a标签其它用法

  • 假链接(本质是跳转到当前页面)
    格式<a href="#">江哥博客</a>
    格式<a href="javascript:">江哥博客</a>
  • 跳转到当前页面指定位置(锚点链接)
    2.1.格式<a href="#location">跳转到指定位置</a>
    2.2.在页面的指定位置给任意标签添加一个id属性
    例如 <p id="location">这个是目标</p>
  • 跳转到指定页面的指定位置
    格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
    只需要在01-锚点链接.html页面添加一个id位置即可
<a href="#location">跳转到指定位置</a>

<p id="location">这个是目标</p>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容