HTML基础指令

导航

<h1></h1>
<div></div>
<span></span>
<a></a>
<img />
<ul><li></li></ul>
<table></table>
<input type="">
<select><option></option></select>
<textarea></textarea>

标题
```
<h1></h1>
<h2></h2>
<h3></h3>
...
```
div
```
<div>
内容  # 占一整行
</div>
```

span

<span>内容有多少就占多少</span>

超链接

# 自己的本地网站可以简写（不用http://127.0.0.1:5000）
<a href="xxx.html">点击跳转</a>
# 在新标签打开
<a href="xxx.html" target="_blank">点击跳转</a>

图片

<img src="图片地址" />
# 本地图片要放在项目下static文件夹中
<img src="/static/图片.png" />
# 设置宽高(可以填百分比等)
<img style="height: 100px; width:100px" src="/static/图片.jpg" />

列表

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

表格

<table>
  <thead>
      <tr> <th>表头第一行</th> <th>表头第二行</th> </tr>
  </thead>
  <tbody>
      <tr> <td>表单第一行</td> <td>表单第二行</td> </tr>
  </tbody>
</table>

input

<input type="text">  # 文本框
<input type="password">  # 密码框
<input type="file">  # 上传文件
<input type="radio" name="n1">  # 选择框（互斥）
<input type="radio" name="n1">  # 同上（演示互斥）
<input type="checkbox" value="传到给后端的名称">  # 复选框
<input type="button" value="提交">  # 普通按钮
<input type="submit" value="提交">  # 提交表单按钮

下拉框

# 加上multiple可以多选
<select multiple>
<option>下拉内容</option>
</select>

多行文本

# rows="3"为默认可以写3行，可以拉伸
<textarea rows="3"></textarea>

网络请求

GET请求
可以用 URL方法或表单提交
请求后向后台传入数据会拼接在URL上

# action为发送路径，method为提交方式
<form action="/login" method="get">
用户名:<input type="text" name="username">
密码:<input type="text" name="password">
<input type="submit" value="登录">
</form>

POST请求
仅能使用表单提交
提交数据不在URL上，而是在请求体中

CSS

写在标签上的css

<img src="..." style="height:100px" />
<div style="color:red;">内容</div>
</div>

写在head标签中的css

<head>
  <style>
  .cl{
      color:red
  }
  </style>
</head>

写到文件中的css

# html:
<link rel="stylesheet" href="common.css" />
# common.css:
.cl{
  color:red
}

css选择器

# 在<head>中的<style>对应<body>需要用的样式
# class
.cl{color:red}
<div class="c1"></div>
# id(一般不用)
#c2{color:red}
<div id="c2"></div>
# 属性选择器
input[type='text']{color:red}
<input type="text">
.c3[xx="123"]{color:red}
<div class="c3" xx="123"></div>

其他

# 在style中加!important可以防止后面css标签替换该样式
.cl{
  color:red !important
}

css样式

宽度、高度

# 默认对行内标签生效，对块级标签无效
height: 300px
width: 50%

块级和行内标签

# 及具有块级标签又具有行内标签的属性
.cl{
  display: inline-block;  # 为行内标签添加块级属性
  height: 300px;
  width: 50%;
}

字体和颜色

.cl{
  color: red;  # 颜色
  font-size: 32px;  # 字体大小
  font-weight: 400  # 字体加粗大小
  font-family: Microsoft Yahei;  # 字体(微软雅黑)
}

文字对齐方式

.cl{
  text-align: center;  # 水平方式居中
  line-height: 59px;  # 垂直方向居中(59px范围内)
}

浮动

.item{
  float: right;  # 浮动，默认是左边
  height: 300px;
  width: 200px;
  border: 1px solid red;
}
# 浮动会脱离文档流，外面的div不会另起一行，而且背景色被覆盖看不见
# 最后加style="clear: both;"可以避免这种情况
<div>
  <div class="item">右边1</div>
  <div class="item">右边1</div>
  <div style="clear: both;"></div>
</div>
<div>111</div>

内边距（padding）

.item{
  height: 300px;
  width: 200px;
  border: 1px solid red;
# 离边框内部的距离
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
# 可以这样写
  padding: 20px;
}

外边距（margin）

# margin-top、margin-left、margin-right、margin-bottom
<div margin-top: 20px;>111</div>

编写实用案例

<style>
  # 消除页面的默认边距
  body{margin: 0;}
  .c1{
      # 居中(需要已设置width)
      margin:0 auto;  # 0是上下居中，auto是左右
  }
</style>