HTML基础

空格 
大于号>
小于号<

<p>标签：段落,段落之间存在一个空行

<br/>标签：换行,仍在同一个段落

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

<span>22</span>

<form action="http://localhost:8080/index" method="POST">
    <input type=‘test‘ name=‘user‘ value=‘zhaofan‘/> value 默认值
    <input type=‘test‘ name=‘email value=‘122@126.com‘‘/>
    <input type=‘password‘ name=‘pwd‘/>
    <input type=‘button‘ value=‘登录‘/>
    <input type=‘submit‘ value=‘提交‘/> 
</form>

name相同则互斥,checked="checked"默认被选中
<p>请选择性别：</p>
男：<input type="radio"　name="gender　value=‘1‘　checked="checked"/>
女：<input type="radio" name="gender value=‘2‘/>

name属性，批量获取数据，checked="checked"默认被选中
<p>爱好</p>
篮球：<input type="checkbox" name="favor"  value="3"　checked="checked" />
足球：<input type="checkbox" name="favor"  value="4" />

<p>技能</p>
撩妹：<input type="checkbox" name="skill"  value="5" checked="checked" />
写代码：<input type="checkbox" name="skill"  value="6" />

依赖表单的一个属性enctype="multipart/form-data"
<form enctype="multipart/form-data">
    <p>上传文件：<input type=‘file‘ name="fname"></p>
</form>

<input type=‘reset‘ value="重置">

<textarea name="meno">默认值</textarea>

单选
selected="selected"默认选中.
默认size="1"显示1个.
<select name="city" size="1">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
    <option value="4">南京</option>
</select>

多选
<select multiple="multiple" name="city" size="5">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
    <option value="4">南京</option>
</select>

分组
<select name="city" size="1">
    <optgroup label="中国">
        <option value="3">广州</option>
        <option value="1">北京</option>
        <option value="2" selected="selected">上海</option>
        <option value="4">南京</option>
    </optgroup>
    <optgroup label="美国">
        <option value="1">纽约</option>
        <option value="2">华盛顿</option>
    </optgroup>
</select>

target属性决定如何跳转网页
<a href="http://www.baidu.com" target="_blank">baidu</a>

href="#某个标签的id" 
<a href="#i1">第1张</a>
<a href="#i2">第2张</a>
<a href="#i3">第3张</a>
<a href="#i4">第4张</a>
<div style="height:600px" id="i1">第一张的内容</div>
<div style="height:600px" id="i2">第2张的内容</div>
<div style="height:600px" id="i3">第3张的内容</div>
<div style="height:600px" id="i4">第4张的内容</div>

<img src="1.jpg" style="height:200px;width:200px" title="大美女" alt="加载失败..."  />

<ol>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>

<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>

<dl>
    <dt>aaa</dt>
        <dd>111</dd>
        <dd>222</dd>
        <dd>333</dd>
    <dt>bbb</dt>
        <dd>111</dd>
        <dd>222</dd>
        <dd>333</dd>
</dl>

<table border="1">
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
</table>

<table border="1">
    <thead>
        <th>11</th>
        <th>12</th>
        <th>13</th>
    </thead>
    <tbody>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

横向合并  同一行
colspan

<table border="1">
    <thead>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
    </thead>
    <tbody>
        <tr>
            <td>21</td>
            <td colspan="4">22</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

纵向合并 同一列
rowspan
<table border="1">
    <thead>
        <th>11</th>
        <th>12</th>
        <th>13</th>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
             <td>22</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

用于点击文件,使得关联的标签获取光标
通过for和input的id关联    
<label for="username" >用户名:</label>
<input id="username" type="text" name="user" />

<fieldset>
    <legend>登录</legend>
    <label for="username" >用户名:</label>
    <input id="username" type="text" name="user" />
    <br/>
    <label for="password" >密码:</label>
    <input id="password" type="text" name="pwd" />
</fieldset>