一.浏览器能识别的标签
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>