html-初级标签

发布于:2025-07-14 ⋅ 阅读:(30) ⋅ 点赞:(0)

一.浏览器能识别的标签

1.1 head标签里的编码和title

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

1.2 标题

<body>
   <h1>Welcome to my website</h1>
    <h2>Welcome to my website</h2>
    <h3>Welcome to my website</h3>
     <h4>Welcome to my website</h4>
    <h5>Welcome to my website</h5>
    <h6>Welcome to my website</h6>
</body>

1.3 div 和span

<div>content</div>
<span>content</span>

区别:

  • div: 一个div直接占一行 [块级标签]
  • span:自己多大就占多少 [行内标签. 内联标签]
<body>
    <div>山东蓝翔</div>
    <div>哪家强</div>
    <span>蓝翔山东</span>
    <span>强哪家</span>
</body>

效果:
在这里插入图片描述

1.4 超链接

1.4.1 跳转到其他网站,需要填写完整url地址

<div><a href="https://www.baidu.com/">百度网址</a></div>

1.4.2 跳转到自己网站,填写完整url和端口后面的url地址均可

<div><a href="https://www.baidu.com/">百度网址</a></div>
<div><a href="/show/news">news</a></div>

1.4.3 图片标签

  • flask框架会默认去找当前项目目录下的static文件夹下的图片
<div>
        <img src="/static/images/icon.png" alt="logo">
</div>

1.4.4 a 标签中包含img标签

<div>
        <a href="https://www.bilibili.com/">
            <img style="width: 100px; height: 100px;" src="/static/images/icon.png" alt="logo">
        </a>
</div>

如果想要在跳转链接的时候,重新打开一个新的窗口。可以添加 target=“_blank”

    <div>
        <a href="https://www.bilibili.com/" target="_blank">
            <img style="width: 100px; height: 100px;" src="/static/images/icon.png" alt="logo">
        </a>
    </div>

网站公告

今日签到

点亮在社区的每一天
去签到