常用标签

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代码演示

<!DOCTYPEhtml><html><head><metacharset="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标签演示--><ahref="http://wsyht90.blog.51cto.com"target="_blank">wsyht</a><!--hreftarget为a标签的属性，_blank为跳转到新页面打开,属性可以自定义--><!--描述：a标签描演示--><!--目录--><div><ahref='#id1'>第一章</a><!--和下面id号相关联--><ahref='#id2'>第二章</a><ahref='#id3'>第三章</a></div><!--内容--><divid="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><divid="id2">第二章内容</div><!--style样式,height高，backgroud-colod背影颜色--><divid="id3">第三章内容</div><!--h2标题大小演示--><h2>wsyht</h2><!--最大h2最小h7，一共1到6数字大小--><h7>wsyht</h7><!--select下拉框演示--><select><optionvalue="1">佛山</option><optionvalue="2">东莞</option><optionvalue="3"selected="selected">惠州</option><!--默认是惠州选项--></select><selectsize="3"><!--默认有3个选项，但只能单选--><option>北京</option><option>上海</option><option>广州</option></select><selectmultiple="multiple"size="4"><!--默认有4个选项，可以多选--><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select><select><optgrouplabel="广东省"></optgroup><!--有广东省和河北省组，组下还有市可以选--><option>广州</option><option>深圳</option><optgrouplabel="河北省"></optgroup><option>石家庄</option><option>邯郸</option></select><!--input标签演示--><br/><input/><!--默认什么都不加,就是type=text--><br/><inputtype="text"maxlength="5"/><!--输入框显示,最多只能输入5个字符--><br/><inputtype="password"/><!--密码框--><br/><inputtype="checkbox"/><!--复选框--><inputtype="checkbox"/><!--复选框--><inputtype="checkbox"/><!--复选框--><inputtype="checkbox"/><!--复选框--><inputtype="checkbox"/><!--复选框--><br/>男：<inputtype="radio"name="gender"/><!--单选框name属性设置成一个的，那就只能二选一-->女：<inputtype="radio"name="gender"/><!--单选框--><br/><inputtype="button"value="提交"/><!--button按钮，背景字为提交，button不会提交数据到后台,而是跟js结合提交触发某一个动作，如验证码刷新--><inputtype="submit"value="提交"/><!--submit提交数据到后台，在非from表单中使用不能提交数据到后台--><inputtype="file"/><!--file就是上传文件--><!--多行输入框演示--><textarea>多行输入框</textarea><!--from表单,使用场景：登陆、注册、修改数据、提交数据到后台--><formaction="http://127.0.0.1:8080/getdata"method="post"><!--通过action提交到后台某个url，通过post方式提交，有get和post两种方式提交，如果前端用post后端也用post，前后要统一-->Name:<inputname='username'type="text"/><!--通过name做key，你输入的值作为value发到后台--><br/><br/>pwd:<inputname="pwd"type="password"/><!--<inputtype="button"value="提交"/>--><!--button按钮，在from表单中不可以使用--><inputtype="submit"value="提交"/><!--submit可以在from表单用，通过submit提交数据到后台--></form><!--lobel标签演示--><labelfor="name2">姓名：<inputid="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><tableborder="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><tableborder="1"><thead><!--tread头部--><tr><th>ip</th><!--th表格标题，默认样式加粗居中--><th>idc</th><th>status</th><tr></thead><tbody><!--tbody身体--><tr><!--tr行--><tdcolspan="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行--><tdrowspan="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>