常用标签

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>