常用标签

1、各种符号

2、p和br

3、a标签

4、H标签

5、select

6、input:checkbox

7、input:radio

8、input:password

9、input:button

10、input:file

11、textarea

12、label

13、ul or dl

14、table

15、fieldset

16、form

17、div


HTML代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>页面一</title>
    </head>
    <body>
        <!-- div和span演示 -->  
        <div>这是div块级标签，占一行宽度</div>    
        <div>再写一行，再占一行块级标签</div>   
        <span>这是span内联标签，占字符宽度大小</span>   
        <span>再写一行内联标签，从左到右堆叠着一排放</span>
        <!-- 特殊字符演示 -->  
        <div>&lt;div&gt; </div>
        <div>&lt;div&gt;&nbsp;</div>  <!-- &lt小于号 &gt大于号 &nbsp空格 这是特殊符号用来显示特殊内容 -->
        
        <!-- p段落标签和br换行演示-->  
        <p>ddddd</p>
        <p>ddddd</p>  <!-- p段落自已换行，换行会空一行出来，这是他的样式 -->  
        <div>ddddd<br/>ddddd</div>   <!-- <br\>换行 -->
        
        <!-- a标签演示 -->
        <a href="http://wsyht90.blog.51cto.com" target="_blank">wsyht</a>  <!-- href  target为a标签的属性，_blank为跳转到新页面打开,属性可以自定义 -->
        
        <!-- 描述：a标签描演示 -->
        <!--目录-->
        <div>
        <a href='#id1'>第一章</a>  <!-- 和下面id号相关联 -->
        <a href='#id2'>第二章</a>
        <a href='#id3'>第三章</a>
        </div>
         <!--内容-->
        <div id="id1">
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>             
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        </div>
        <div id="id2" style="height:1000px;background-color:red">第二章内容</div>  <!-- style样式,height高，backgroud-colod背影颜色-->
        <div id="id3" style="height:1000px">第三章内容</div>  
        
        <!-- h1标题大小演示-->
        <h1>wsyht</h1>   <!--最大h1最小h6，一共1到6数字大小-->
        <h6>wsyht</h6>
        
        <!--select下拉框演示-->
        <select>
        <option value="1">佛山</option>
        <option value="2">东莞</option>
        <option value="3" selected="selected">惠州</option>    <!--默认是惠州选项-->
        </select>
        <select size="3">             <!--默认有3个选项，但只能单选-->
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        </select>
        <select multiple="multiple" size="4">  <!--默认有4个选项，可以多选-->
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>    
        </select>
            <select>
                <optgroup label="广东省"></optgroup>     <!--有广东省和河北省组，组下还有市可以选-->
                    <option>广州</option>
                    <option>深圳</option>
                <optgroup label="河北省"></optgroup>
                    <option>石家庄</option>
                    <option>邯郸</option>
            </select>
        
         <!--input标签演示-->
         <br/>
         <input />  <!--默认什么都不加,就是type=text-->
         <br/>
         <input type="text"maxlength="5"/>  <!--输入框显示,最多只能输入5个字符-->
         <br/>
         <input type="password"/> <!--密码框-->
         <br/>
         <input type="checkbox"/> <!--复选框-->
         <input type="checkbox"/> <!--复选框-->
         <input type="checkbox"/> <!--复选框-->
         <input type="checkbox"/> <!--复选框-->
         <input type="checkbox"/> <!--复选框-->
         <br/>
         男：<input type="radio" name="gender"/> <!--单选框 name属性设置成一个的，那就只能二选一-->
         女：<input type="radio" name="gender"/> <!--单选框-->
        <br/>
        <input type="button" value="提交"/>  <!--button按钮，背景字为提交，button不会提交数据到后台,而是跟js结合提交触发某一个动作，如验证码刷新-->
        <input type="submit" value="提交"/>  <!--submit提交数据到后台，在非from表单中使用不能提交数据到后台-->
        <input type="file" />   <!--file就是上传文件-->
           
        <!--多行输入框演示-->
        <textarea>多行输入框</textarea>
        
        <!--from表单,使用场景：登陆、注册、修改数据、提交数据到后台-->
        <form action="http://127.0.0.1:8080/getdata" method="post">  <!--通过action提交到后台某个url，通过post方式提交，有get和post两种方式提交，如果前端用post后端也用post，前后要统一-->
        Name:<input name='username' type="text"/>  <!--通过name做key，你输入的值作为value发到后台-->
        <br/><br/>
        pwd:<input name="pwd" type="password"/>        
        <!--<input type="button" value="提交"/> --> <!--button按钮，在from表单中不可以使用-->
        <input type="submit" value="提交"/>         <!--submit可以在from表单用，通过submit提交数据到后台-->
        </form>
        
        <!--lobel标签演示-->
        <label for="name2">姓名：<input id="name2" type="text" > </label> <!--用for点击姓名自动给你加光标-->
        
        <!-- 列表演示 -->
        <ul>                 <!--这种格式去写会在前面加一个黑点-->
            <li>ul.li</li>
            <li>ul.li</li>
            <li>ul.li</li>
        </ul>
        
        <ol><!--这种格式去写会自动帮你加序号-->
            <li>ul.li</li>
            <li>ul.li</li>
            <li>ul.li</li>
        </ol>
        
        <dl>                        <!--dl一个范围 -->
            <dt>广东省</dt>         <!--dt标题-->
                <dd>广州</dd>    <!--内容-->
                <dd>深圳</dd>
            <dt>河北省</dt>
                <dd>石家庄</dd>
                <dd>邯郸</dd>
        </dl>
        
        <table border="1">             <!--broder边框大小-->
        <tr>
            <th>ip</th>            <!--th表格标题，默认样式加粗居中-->
            <th>idc</th> 
            <th>status</th>
        </tr>
        <tr>                       <!--tr行-->
            <td>ip</td>           <!--td列-->
            <td>idc</td>
            <td>status</td>
        </tr>
        <tr>
            <td>192.168.1.1</td>
            <td>广州</td>
            <td>online</td>
            </td>
        </table>
        
        <table border="1">
        <thead><!--tread头部-->
        <tr>  
            <th>ip</th>            <!--th表格标题，默认样式加粗居中-->
            <th>idc</th> 
            <th>status</th>
        <tr>  
           </thead>
        <tbody>                            <!--tbody身体-->
        <tr>                           <!--tr行-->
            <td colspan="2">ip</td>   <!--td列,colspan占2列，左右单元格合并-->
            <td>status</td>
        </tr>    
        <tr>          <!--tr行-->
            <td>ip</td>           <!--td列-->
            <td>idc</td>
            <td>status</td>
        </tr>
        <tr>            <!--tr行-->
            <td rowspan="2">ip</td> <!--rowsapn上下合并--> 
            <td>idc</td>     <!--td列-->
            <td>status</td>
        </tr>  
        <tr>          <!--tr行-->
            <td>idc</td>
            <td>status</td>
        </tr>  
        </tbody>
        </table>
        
        <fieldset>                     
            <legend>登陆</legend>          <!--外边一个黑框，包住登陆字体-->
            <p>用户名：</p>                <!--里面的内容为用户名-->
            <p>密码：</p>
        </fieldset>
        
        
</body>
</html>