浏览器能识别的标签
编码
<meta charset="UTF-8">
title
<title>helloshh</title>
标题
<h1>1级标签</h1> <h2>2级标签</h2> <h3>3级标签</h3> <h4>4级标签</h4> <h5>5级标签</h5> <h6>6级标签</h6>
div和span
div,一个占一整行
<div>山东</div> <div>安徽</div>span,自己有多大占多少。【行内标签,内联标签】
<span>山东</span> <span>安徽</span>(中间会有一个小空格)<span>山东</span><span>安徽</span>(这样就没有小空格)
超链接
跳转到其他网站 <a href="https://www.baidu.com/">点击跳转</a>跳转到自己网站
<a href="http://127.0.0.1:5000/show/info">自己网站</a>或者:
<a href="/show/info">自己网站</a>
图片
<img style="height: 200px;width: 300px" src="/static/QQ图片.jpg" alt="">将图片放到static目录下
宽度和高度的设置: style="height: 200px;width: 300px"
小结:
划分:
块内标签:
<h1></h1>
<div></div>
行内标签:
<span></span>
<a></a>
<img />
嵌套:
<body> <h1>商品列表</h1> <a href="https://www.baidu.com/" target="_blank"> <img src="/static/QQ图片.jpg" style="width: 150px"> </a> <a href="https://finance.sina.com.cn/stock/relnews/2024-06-08/doc-inaxyrte3372187.shtml"> <img src="/static/R-C.jpg" style="width: 150px"> </a> <a href="https://www.jd.com/"> <img src="/static/R-C2.jpg" style="width: 150px"> </a> </body>target="_blank"会新增加一个页面跳转,而不是在当前页面跳转:
如果不加这个:【在当前页面跳转】
列表标签
【ul 是无序的列表】 <ul> <li>移动</li> <li>联通</li> <li>电信</li> </ul>【ol 是有序的列表】
<ol> <li>移动</li> <li>联通</li> <li>电信</li> </ol>
表格标签
<table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>10</td> <td>shh</td> <td>18</td> </tr> <tr> <td>11</td> <td>ww</td> <td>20</td> </tr> <tr> <td>12</td> <td>ll</td> <td>17</td> </tr> <tr> <td>13</td> <td>xx</td> <td>119</td> </tr> </tbody> </table>如果加上边框:
<table border="1">
表单标签
<body> <h1>商品列表</h1> <table> <thead> <tr> <th>ID</th> <th>头像</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <img src="/static/R-C.jpg" height="100px"> </td> <td>shh</td> <td>18</td> </tr> <tr> <td>2</td> <td> <img src="/static/R-C2.jpg" height="100px"> </td> <td>xx</td> <td>20</td> </tr> </tbody> </table> </body>
inout系列
输入文本
<h1>输入框</h1> <input type="text">
输入密码
<h1>输入框</h1> <input type="text"> <input type="password">
选择文件
<h1>输入框</h1> <input type="text"> <input type="password"> <input type="file">
单选框
<h1>输入框</h1> <input type="text"> <input type="password"> <input type="file"> <input type="radio" name="n1"> 男 <input type="radio" name="n1"> 女【注意:】'name'可以随便取,但是这两个‘name’要相等,要么都等于‘n1’,要么都等于‘n2'
复选框
【可以选择多个,不用设置互斥】
<input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox">
按钮
<input type="checkbox">足球 <input type="checkbox">排球 <input type="checkbox">羽毛球 <input type="checkbox">乒乓球 <input type="button" value="提交"><input type="button" value="提交"> ---->普通按钮 <input type="submit" value="提交"> ---->提交表单
下拉框
单选
<select> <option>北京</option> <option>上海</option> <option>深圳</option> </select>
多选【multiple】
<select multiple> <option>北京</option> <option>上海</option> <option>深圳</option> </select>
多行文本
<h1>多行文本</h1> <textarea rows="3"></textarea>