head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="shortcut icon" href="/图标.png" />
<!-- 指定每5秒刷新一次： -->
<meta http-equiv="refresh" content="5">
<!-- 指定1秒之后跳转页面至另一个网页： -->
<meta http-equiv="refresh" Content="1;Url=https://www.guofei.site/" />
<meta name="keywords" content="关键词，用于，SEO">
<meta name="description" content="描述，整个页面的描述">
<!-- 引入css -->
<link rel="stylesheet" href="/css/bootstrap.css">
<style>
</style>
<!-- 引入js -->
<script src="test.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>
body
<div>块级标签，占用整行</div>
<div>所以两个块级标签会占两行</div>
<span>内联标签占用实际大小</span>
<span>2个内联标签不换行</span>
块级标签，占用整行
所以两个块级标签会占两行
内联标签占用实际大小 2个内联标签不换行
特殊符号
<div><div>空格 符号</div>
<div>空格 符号
常用标签
<p>段落标签<br>换行标签</p>
<a href="https://www.guofei.site/" target="_blank">a标签</a>
<h1>H1标题</h1>
<h6>H6标题</h6>
目录跳转：
目录：
<div>
<a href='#id1'>第一章</a>
<a href='#id2'>第二章</a>
<a href='#id3'>第三章</a>
</div>
内容：
<div id='id1'>id1对应的第一章内容</div>
<div id='id2' style="height:1000px;background-color:red;">id2</div>
<div id='id3'>id3</div>
上面代码展示了：
- 目录跳转
- style如何设置
select标签
共有4种
<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3" selected="selected">默认成都</option> <!--这里默认是成都因为selected="selected" 这里设置了默认的！-->
</select>
<!-- 显示2个 -->
<select size="2">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">成都</option>
</select>
<!-- 可多选 -->
<select size="2" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">成都</option>
</select>
<!-- 分组 -->
<select>
<optgroup label="山东省">
<option>济南</option>
<option>青岛</option>
</optgroup>
<optgroup label="四川省">
<option>成都</option>
<option>绵阳</option>
</optgroup>
</select>
input
输入框：<input type='text' />
<br>
密码：<input type='password' />
<textarea>多行输入框</textarea>
输入框：
密码：
多选框1<input type='checkbox' />
多选框2<input type='checkbox' />
多选框3<input type='checkbox' />
多选框4<input type='checkbox' />
多选框1 多选框2 多选框3 多选框4
单选框：
男<input type='radio' name='gender' />
女<input type='radio' name='gender' />
中<input type='radio' name='gender' />
初中生<input type='radio' name='std' />
高中生<input type='radio' name='std' />
男 女 中 初中生 高中生
- 通过name控制单选分组
button按钮
<head>
<script language="javascript">
function check(){
alert("111");return;
}
</script>
</head>
<body>
<center>
<form name="form1" method="post" action="">
用户登录<br>
用户：<input name="user" type="text" id="user">
<br>
密码：<input name="pwd" type="password" id="pwd">
<br>
<input name="Button" type="button" value="登录" onClick="check()">
<input name="Submit2" type="reset" value="重置">
</form>
</center>
</body>
实现功能：
- 点击确认后，调用 check()
- 重置按钮的功能
- onclick=”window.close()” 点击按钮关掉本窗口
上传文件
<input type='file' />
form表单
对比上面的 button 按钮，这里的 submit
<form action='http://127.0.0.1:9999/getdata/' method='POST'>
姓名：<input name='username' type='text' /><br>
密码：<input name='pwd' type='password'><br>
<input type='submit' value='提交'>
</form>
？服务端代码待补充
from django.shortcuts import render
from django.http.response import HttpResponse
def GetData(request):
print(request.POST)
return HttpResponse('ok')
for标签
效果是点击文字时，自动激活某个input
<label for="marry2">
姓名:<input type="text" id="name2"/>
婚否:<input type="checkbox" id="marry2"/>
</label>
序号
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>山东省</dt>
<dd>济南市</dd>
<dd>青岛市</dd>
<dt>四川省</dt>
<dd>成都市</dd>
<dd>绵阳市</dd>
</dl>
- 无序列表
- 无序列表
- 无序列表
- 有序列表
- 有序列表
- 有序列表
- 山东省
- 济南市
- 青岛市
- 四川省
- 成都市
- 绵阳市
table表格
<table border="1">
<caption>表格的标题</caption>
<tr>
<!-- th是表头 -->
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="3">1</td>
<!--这里colspan，就告诉html解析的时候横向占3个格-->
</tr>
<tr>
<td rowspan="2">1</td>
<!--这里colspan，就告诉html解析的竖向时候占2个格-->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
| 1 | 2 | 3 |
|---|---|---|
| 1 | ||
| 1 | 2 | 3 |
| 1 | 2 | |
fieldset外框
<fieldset>
<legend>小标题</legend>
<p>用户名:</p>
<p>密码:</p>
</fieldset>
实用代码
很多元素放一起的案例
<html>
<title>标题</title>
<body><b>加粗</b>
<center>
<p>居中</p>
<h1>一级标题</h1>
</section>
</center>
<ol>
<li>有序列表
换行
<li>有序列表
</ol>
<table border="1">
<caption>表格的标题</caption>
<tr>
<th>姓名</th>
<th>学号</th>
<th>语文</th>
<th>化学</th>
<th>英语</th>
</tr>
<tr>
<td>姓名</td>
<td>学号</td>
<td>语文</td>
<td>化学</td>
<td>英语</td>
</tr>
</table>
<form>
<input type="text" checked="checked" size=60>输入框
<input type="file" alt="xianshgu">选择文件
<br>
<input name="sex" type="radio" checked>复选框：男
<input name="sex" type="radio" >复选框：女
</form>
<select name="列表框" size=3>
<option>手机1</option>
<option>手机2</option>
<option>手机3</option>
<option>手机4</option>
</select>
<select name="列表框" multiple="multiple">
<option>手机1</option>
<option>手机2</option>
<option>手机3</option>
<option>手机4</option>
</select>
<textarea wrap="off"></textarea>
<acticle>
<header>111</header>
<footer><>
</acticle>
<br>
<form>
<input type="email">这里就必须输入 email 格式了
<input type="submit">222
</form>
<style>
#boarder {
margin:3px;
width:180px;
padding-left:14px;
border-width:5px;
border-color:black;
border-style:solid;
height:104px;
}
</style>
<p id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</p>
</body>
</html>
下拉框
<details>
<summary>下拉框的按钮</summary>
下拉框的内容
<br>
</details>
下拉框的按钮
下拉框的内容一个页面如何引入其它页面
https://blog.csdn.net/arvin0/article/details/56839242
<body>
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").load("page/Page_1.html");
$("#page2").load("page/Page_2.html");
</script>
</body>
iframe
<div id="page1">
<iframe align="center" width="100%" height="170" src="page/Page_1.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
整页自动跳转
<meta http-equiv="refresh" content="0.1;url=https://scikit-opt.github.io/scikit-opt/#/en/">
