<head><meta http-equiv=\"大众Content-Type\"大众 content=\"大众text/html; charset=GB2312\"大众></head>
2.标签
<p> 这是一个开始标签 </p> 这是一个结束标签 <p> Hello World </p> 标签之间的文本叫做内容<h1>大标题</h1><h2>小一点的标题</h2><h3>再小一点的标题</h3><h4>更小一点的标题</h4>
3.元素
<html> 头标签 <body> 身体标签 <h1>标题</h1> <br/> 换行<hr/> 水平线<p>段落表示</p> </body> </html>
4.属性
<h1 align=\"大众center\"大众>居中标题</h1>写在开始标签里的 align=\公众center\"大众 就叫属性 align 是属性名 center 是属性值 属性值该当利用双引号括起来
5.注释
<!--注释内容-->
6.标题
<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题5</h6>
7.段落
<p>段落1 </p><p>段落2 </p><p>段落3 </p>
8.粗体--斜体
<b>b标签粗体效果</b><strong>strong标签粗体效果</strong> <br/> <!--推举利用--><i>利用 i 标签带来的斜体效果</i><em>利用 em 标签带来的斜体效果</em> <!--推举利用-->
9.预格式显示Java代码
<pre>public class HelloWorld { public static void main(String[] args) { System.out.println(\"大众Hello World\公众); }} </pre>
10.删除--下划线
<del>利用del标签实现的删除效果</del><ins>利用ins标签实现的下划线效果</ins>
11.图像
<img src=\"大众图片路径\"大众/><!--图像大小--><img width=\"大众200\"大众 height=\"大众200\公众 src=\公众图片路径\公众/><!--图像位置--><div align=\"大众left\"大众> <img src=\"大众http://how2j.cn/example.gif\"大众/></div> <div align=\公众center\"大众> <img src=\公众http://how2j.cn/example.gif\公众/></div> <div align=\公众right\公众> <img src=\"大众http://how2j.cn/example.gif\"大众/></div><!--更换图片笔墨,加载不出图片时显示笔墨--><img src=\"大众http://how2j.cn/example_not_exist.gif\"大众 alt=\公众这个是一个图片\公众 />
12.超链接
<a href=\"大众http://www.12306.com\公众>12306</a><!--target属性表示在新页面打开超链接--><a href=\"大众http://www.12306.com\"大众 target=\公众_blank\公众>http://www.12306.com</a><!--超链接上显示笔墨--><a href=\"大众http://www.12306.com\"大众 title=\公众跳转到http://www.12306.com\公众>www.12306.com</a><!--图片超链接--><a href=\"大众http://www.12306.com\"大众><img src=\"大众http://how2j.cn/example.gif\"大众/></a>
13.表格
<!-- table:表格 tr:行 td:列 border:带边框的表格 width:表格高度,px及像素的意思 td-width:单元格宽度绝对值,也可用百分比显示(50%) algin:单元格水平对齐(left,right,center) valgin:单元格垂直对齐(top,middle,bottom) colspan:水平合并 rowspan:垂直合并 bgcolor:背景颜色--><table border=\公众1\"大众 width=\公众200px\公众> <tr> <td width=\"大众50px\"大众>1</td> <td algin=\公众center\公众>居中</td> <td algin=\"大众left\公众>靠左</td> <td algin=\"大众right\公众>靠右</td> <td width=\"大众80%\"大众>1</td> <td valign=\公众middle\"大众 >中间</td> <td valign=\公众top\公众 >顶部</td> <td valign=\"大众bottom\"大众 >底部</td> <td colspan=\公众2\公众 >1,2</td> <td rowspan=\"大众2\公众>1,3</td> <td bgcolor=\"大众pink\"大众>b</td> </tr></table>
14.列表
<!--ul无序,ol有序--><ul><li>无序</li><li>列表</li></ul><ol><li>有序</li><li>列表</li></ol>
15.div域span
<!--div是块元素,即自动换行 常见的块元素还有h1,table,p span是内联元素,即不会换行 常见的内联元素还有img,a,b,strong业界常日结合css来掌握页面布局--><div> 第一个div</div> <div> 第二个div <!--换行--></div> <span> 第一个span</span> <span> 第二个span <!--不换行--></span>
16.字体
<!--color表示颜色,size表示字体大小--><font color=\公众blue\"大众 size=\"大众+2\"大众>蓝色大2号字体</font>
17.内联框架
<!--iframe相称于浏览器里面有个小浏览器,在这个小浏览器中,打开另一个网页--><iframe src=\公众http://how2j.cn/\公众 width=\公众600px\"大众 height=\"大众400px\"大众></iframe>
18.文本框
<!--普通文本框--><input type=\"大众text\"大众><!--设置文本框长度--><input type=\"大众text\"大众 size=\"大众10\"大众><!--初始值文本框--><input type=\公众text\"大众 value=\公众有初始值的文本框\公众><!--有背景笔墨的文本框,利用属性placeholder--><input type=\"大众text\"大众 placeholder=\"大众请输入账号\"大众>
19.密码框
<!--输入的数据会自动显示为星号--><input type=\公众password\"大众>
20.表单
<!--action获取数据提交后的页面,初学者体验效果就好get和post的差异 get 是form默认的提交办法 如果通过一个超链访问某个地址,是get办法 如果在地址栏直接输入某个地址,是get办法 提交数据会在浏览器显示出来 不可以用于提交二进制数据,比如上传文件 post 必须在form上通过 method=\"大众post\"大众 显示指定 提交数据不会在浏览器显示出来 可以用于提交二进制数据,比如上传文件--><form action=\公众http://how2j.cn/study/login.jsp\"大众>账号:<input type=\"大众text\"大众 name=\"大众name\公众> <br/>密码:<input type=\公众password\公众 name=\"大众password\公众 > <br/><input type=\公众submit\"大众 value=\"大众上岸\"大众></form>
21.单选框
<!--两个单选,都可以同时选中。但不能取消-->单选1 <input type=\公众radio\公众 >单选2 <input type=\"大众radio\"大众 ><!--checked默认选中-->默认选中 <input type=\"大众radio\公众 checked=\"大众checked\"大众 ><!--多个可单选框,activity参数-->学习java<input type=\"大众radio\公众 name=\公众activity\"大众 value=\"大众学习java\"大众 > <br/>java<input type=\"大众radio\公众 checked=\公众checked\"大众 name=\"大众activity\"大众 value=\"大众tokyohot\"大众 > <br/>dota<input type=\"大众radio\公众 name=\"大众activity\公众 value=\公众dota\公众 > <br/>LOL<input type=\"大众radio\"大众 name=\公众activity\"大众 value=\公众lol\"大众> <br/>
22.复选框
<!--复选框,checkbox-->学习java<input type=\"大众checkbox\公众 value=\"大众学习java\公众 > <br/>学习<input type=\公众checkbox\公众 checked=\"大众checked\公众 name=\"大众activity\"大众 value=\"大众tokyohot\公众 > <br/>dota<input type=\"大众checkbox\公众 value=\"大众dota\"大众 > <br/>LOL<input type=\"大众checkbox\"大众 value=\"大众lol\公众> <br/>
23.下拉列表
<!--<select> 即下拉列表 须要合营<option>利用size:表示显示高度multiple:可以用ctrl多选中selected:默认选中--><select size=\"大众2\公众 multiple=\"大众multiple > <option >1</option> <option >2</option> <option selected=\"大众selected\公众 >3</option></select>
24.文本域
<!--文本域可以有多行,并且可以有滚动条cols:显示宽度rows:显示行数--><textarea cols=\"大众30\"大众 rows=\公众8\"大众>abcdef</textarea>
25.普通按钮
<!--参数button,普通按钮不具备提交from表单的效果--><input type=\"大众button\公众 value=\"大众一个按钮\公众>
26.提交按钮
<!--<input type=\"大众submit\公众> 即为提交按钮 用于提交form,把数据提交到做事端--><form action=\"大众/study/login.jsp\"大众 method=\公众get\公众>账号:<input type=\公众text\"大众 name=\"大众name\"大众> <br/>密码:<input type=\公众password\"大众 name=\公众password\"大众 > <br/><input type=\"大众submit\"大众 value=\"大众上岸\公众></form>
27.重置按钮
<!--<input type=\公众reset\"大众> 重置按钮 可以把输入框的改动复原--><form action=\"大众/study/login.jsp\公众>账号:<input type=\"大众text\"大众 name=\"大众name\"大众> <br/>密码:<input type=\"大众password\"大众 name=\"大众password\公众 > <br/><input type=\"大众submit\"大众 value=\公众提交\"大众><input type=\"大众reset\公众 value=\"大众重置\"大众></form>
28.图像提交
<!--<input type=\"大众image\公众 > 即利用图像作为按钮进行form的提交--><form action=\"大众/study/login.jsp\公众>账号:<input type=\"大众text\公众 name=\"大众name\"大众> <br/>密码:<input type=\公众password\"大众 name=\"大众password\"大众 > <br/><input type=\公众image\"大众 src=\公众http://how2j.cn/example.gif\"大众></form>
29.按钮
<!--<button></button>即按钮标签 与<input type=\公众button\"大众>不同的是,<button>标签功能更为丰富 按钮标签里的内容可以是笔墨也可以是图像 如果button的type=“submit” ,那么它就具备提交form的功能--><form action=\"大众/study/login.jsp\公众>账号:<input type=\"大众text\公众 name=\公众name\"大众> <br/>密码:<input type=\"大众password\"大众 name=\"大众password\公众 > <br/><button type=\公众submit\公众>上岸</button> </form>
30.html综合演示
大略上岸注册模板.html
演示结果: