常用标签
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><div> </div> <div><div> </div> <!-- <小于号 >大于号  空格 这是特殊符号用来显示特殊内容 --> <!-- 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" >第二章内容</div> <!-- style样式,height高,backgroud-colod背影颜色--> <div id="id3" >第三章内容</div> <!-- h2标题大小演示--> <h2>wsyht</h2> <!--最大h2最小h7,一共1到6数字大小--> <h7>wsyht</h7> <!--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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。