HTML常见标签总结

1.标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.div和span

<div>内容<\div>

<span>内容<\span>

• div，一人占一整行【块级标签】
• span，自己多大占多少【行内标签、内联标签】

3.超链接

跳转到其他网站
<a href="https://blog.youkuaiyun.com/">点击跳转<\a>

跳转到自己网站
<a href="https://127.0.0.1:5000/get/news">点击跳转<\a>
or
<a href="/get/news">点击跳转<\a>

当前页面打开
<a href="/get/news">点击跳转<\a>

新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转<\a>

4.图片

<img src="图片地址" />

直接显示别人的图片
<img src="https://i-blog.csdnimg.cn/direct/97e37326e32541b2a1603041626a7f46.png" />

显示自己的图片：将自己的图片存放在当前目录的`static`文件夹中
<img src="/static/pic.png" />

设置图片的大小
<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

5.列表

无序列表
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

有序列表
<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>

6.表格

<table>
	<thead>
		<tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
	</thead>
	
	<tbody>
		<tr> <td>2702</td> <td>djy</td> <td>19</td> </tr>
		<tr> <td>2703</td> <td>wda</td> <td>20</td> </tr>
	</tbody>
</table>

7.input系列

输入内容
<input type="text">
<input type="password">
<input type="file">
<input type="radio" name="n1">男
<input type="radio" name="n1">女

<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">羽毛球

<input type="button" value="提交"> -->普通按钮
<input type="submit" value="提交"> -->提交表单

8.下拉框

<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

9.多行文本

<textarea></textarea>

<textarea rows="5"></textarea>

10.form

页面上的数据要想提交到后台，必须要在外嵌套一个form标签

<form method="post" action="/post/reg">
    <div>
    用户名:<input type="text" name="user">
    </div>
    <div>
    密码:<input type="password" name="pwd">
    </div>

    <input type="submit" value="submit">
</form>