1、解决HTML中的编码问题
<html> <head> <title>HelloHtml</title> <!--告知浏览器用UTF-8编码打开--> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <marquee>hello java</marquee> </body></html>
2、列表的使用
<html> <head> <title>列表标记</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <!--有序列表：ol； 属性： type：默认值是1，可选值：AaIi start:开始的序号 --> <ol type="1" start="10"> <li>星期日</li> <li>星期一</li> <li>星期二</li> </ol> <hr/> <!--无序列表：ul 属性： type：默认值是disc，可选值：circle square --> <ul type="square"> <li>张三</li> <li>李四</li> <li>王五</li> </ul> <!--自定义列表 dt:定义标题 dd：定义内容 --> <dl> <dt>title</dt> <dd>content</dd> </dl> <hr/> <dl> <dt>title</dt> <dd>content</dd> </dl> <hr/> <dl> <dt>title</dt> <dd>content</dd> </dl> </body></html>
3、HTML中的表格标记
<html> <head> <title>表格标记</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <!-- tr:表示表中的行 td:表示行中的列。内容要在td中 colspan:当前列占用的几列的宽度 rowspan：当前列占用的行数 th:表示行中的列。内容会被自动居中和加粗。作为表头使用 cellspacing:单元格之间的距离。取值是像素值. 外补丁 cellpadding：单元格中的内容和边线的距离。取值是像素值 内补丁 --> <table border="1" width="60%" align="center"> <tr> <th>姓名</th> <th>性别</th> <th>籍贯</th> </tr> <tr> <td>张三</td> <td>男</td> <td>山东</td> </tr> <tr> <td> 李四</td> <td>女</td> <td>山东</td> </tr> </table> <hr/> <table border="1" width="60%" align="center" cellspacing="0" cellpadding="5"> <tr> <th>姓名</th> <th>性别</th> <th>籍贯</th> </tr> <tr> <td>张三</td> <td>男</td> <td>山东</td> </tr> <tr> <td>李四</td> <td>女</td> <td>山东</td> </tr> </table> <hr/> <table border="1" width="60%" align="center" cellspacing="0" cellpadding="5"> <tr> <td align="center" colspan="3"> 学员信息列表 </td> </tr> <tr> <th>姓名</th> <th>性别</th> <th>籍贯</th> </tr> <tr> <td>张三</td> <td>男</td> <td>山东</td> </tr> <tr> <td>李四</td> <td>女</td> <td>山东</td> </tr> </table> <hr/> <table align="center" border="1" width="60%" cellspacing="0" cellpadding="5"> <caption>表格的标题</caption> <tr> <th>年度</th> <th>班级</th> </tr> <tr> <td rowspan="3">2014</td> <td>JavaEE12</td> </tr> <tr> <td>JavaEE13</td> </tr> <tr> <td>JavaEE14</td> </tr> <tr> <td rowspan="3">2015</td> <td>JavaEE15</td> </tr> <tr> <td>JavaEE16</td> </tr> <tr> <td>JavaEE17</td> </tr> </table> </body></html>
4、表单标记
<html> <head> <title>表单标记</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <!--表单有关的标记放在form中 form：代表一个表单 属性： action:是一个地址，接收数据的地址 method:默认值是get。建议使用post 重点：get和post的区别（暂时记住） get：(默认值)01html.html?username=abc&password=123 保密性查，容易被旁边的人看到，不安全。 长度有限制：<1kb post：建议使用的 保密性好。长度没有限制 username=abc&password=123 input:输入标记 属性： type:输入域的类型。text(默认值)|password(暗文) |radio(单选)|checkbox(复选)|file(上传) |reset（重置）|submit（提交）|button（按钮，结合js使用） |image(指定src用图片代替按钮) |hidden隐藏域，向服务器传递信息 name：给该输入域取一个名字。 maxlength:限制输入的内容的最大长度 select:下拉选择 textarea:文本区域 --> <form action="01html.html" method="get"> <input type="hidden" name="id" value="123"/> 用户名：<input type="text" name="username" value="" maxlength="5"/><br/> 密码：<input type="password" name="password"/><br/> 性别：<input id="g1" type="radio" name="gender" value="1" checked="checked"/> <label for="g1">男</label> <input id="g2" type="radio" name="gender" value="0"/> <label for="g2">女</label> <br/> 爱好：<input type="checkbox" name="hobby" value="吃饭"/>吃饭 <input type="checkbox" name="hobby" value="睡觉"/>睡觉 <input type="checkbox" name="hobby" value="学java"/>学java<br/> 籍贯：<select name="province"> <option value="BJ">北京</option> <option value="SD" selected="selected">山东</option> <option value="HB">湖北</option> </select><br/> 靓照：<input type="file" name="photo"/><br/> 简介：<textarea name="discription" rows="3" cols="38"></textarea><br/> <input type="submit" value="提交"/> <input type="reset" value="重置"/> <input type="button" value="按钮"/> <input type="image" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/reg.jpg"/> </form> </body></html>
作者：海之浪子
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦