<!--字符集 两种都可以-->
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<!--页面刷新 content为多少自动秒刷新一次-->
<meta http-equiv="Refresh" content="3">

<!--三秒刷新重定向至url-->
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">

<!--关键字，便于搜索引擎抓取-->
<meta name="Keywords" content="培训,老男孩,python">

<!--描述-->
<meta name="Description" content="培训机构">

<!--IE兼容-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8;IE=IE7">

meta标签

<!--设置标题-->
<title>首页</title>

<!--小图标-->
<link rel="shortcut icon" href="image/favicon.ico">
 
<!--引入css文件-->
<link rel="stylesheet" href="commons.css">

<p>123</p>

<p>123<br />123</p>

<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

<span>123</span>
<span>123</span>
<span>123</span>

<div></div>

<!--form标签用于表单提交，action是要发送到哪里，method为模式，GET请求将表单数据放到头部发送，POST请求将表单数据放到body部发送-->
<form action="http://localhost:8888/index" method="POST">
</form>

<!--上传文件时要设置enctype="multipart/form-data"属性-->
<from action="http://www.baidu.com" method="POST" enctype="multipart/form-data">
</form>

<!--input标签一般包含在form标签内，type表示input标签的类型，name用于后台获取数据，value可以设置默认值，placeholder可以设置输入提示-->

<!--文本类型-->
<input type="text" name="username" placeholder="请输入用户名" value="默认值"/>

<!--密码类型-->
<input type="password" name="password"/>

<!--按钮类型，和js配合，单独使用无任何意义-->
<input type="button"  value="登录1" />

<!--提交表单，提交后页面刷新-->
<input type="submit"  value="登录2" />

<!--单选框，name设置一致只能选一个，checked为默认值-->
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" checked="checked" />
女：<input type="radio" name="gender" value="2" />
<input type="submit" value="提交" />

<!--复选框，checked为默认值-->
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value="1" checked="checked" />
足球：<input type="checkbox" name="favor" value="2" checked="checked" />
台球：<input type="checkbox" name="favor" value="3" />
网球：<input type="checkbox" name="favor" value="4" />
<input type="submit" value="提交" />

<!--重置按钮，清空表单所有内容-->
<input type="reset" value="重置" />

input标签

<!--多行文本输入 默认值在两个标签内-->
<textarea name="meno" >aaaaa</textarea>

<!--下拉框，如果设置multiple="multiple"表示多选，size="10"显示多个，selected="selected"表示默认选中-->
<select name="city" size="10" multiple="multiple">
    <option value="1">北京</option>    
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
</select>

<!--超链接，跳转 href="链接URL"， target="_blank"在新标签页中打开-->
<div>
    <a href="https://www.baidu.com" target="_blank">百度</a>
</div>


<!--锚，href="#标签ID"，ID不能重复-->
<div>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <div id="i1" style="height: 600px">第一章内容</div>
    <div id="i2" style="height: 600px">第二章内容</div>
    <div id="i3" style="height: 600px">第三张内容</div>
    <div id="i4" style="height: 600px">第四章内容</div>
</div>

<!--列表-->

<!--点-->
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<!--序号-->
<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

<!--分层-->
<dl>
    <dt>ttt</dt>
    <dd>ddd</dd>
    <dd>ddd</dd>
    <dd>ddd</dd>
</dl>

<table border="1">
    <thead>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <th>表头4</th>
    </tr>
    </thead>
    <!--表内容 colspan="2"横向占两列 rowspan="2"纵向占两行-->
    <tbody>
    <tr>
        <td>第一行，第1列</td>
        <td colspan="2">第一行，第2、3列</td>
        <td>第一行，第4列</td>
    </tr>
    <tr>
        <td rowspan="2">第二、三行，第1列</td>
        <td>第二行，第2列</td>
        <td>第二行，第3列</td>
        <td>第二行，第4列</td>
    </tr>
    <tr>
        <td>第三行，第2列</td>
        <td>第三行，第3列</td>
        <td>第三行，第4列</td>
    </tr>
    <tr>
        <td>第四行，第1列</td>
        <td>第四行，第2列</td>
        <td>第四行，第3列</td>
        <td>第四行，第4列</td>
    </tr>
    </tbody>
</table>

<!--for和input中的id要对应，点击label标签光标跳到input标签中-->
<label for="username">用户名：</label>
<input id="username" type="text" name="username">

<!--画圈，外围画一个框-->
<fieldset>
</fieldset>