<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 1.标题 --> <h1>苍老师</h1> <h2>小泽老师</h2> <h3>吉泽老师</h3> <!-- 2.段落 --> <p>小刚暗恋小红</p> <!-- 2)将超链接链到锚点上 --> <p><a href="#cang">苍老师</a>吃醋了</p> <!-- 3.列表 --> <!-- 3.1有序列表 --> <ol> <li>北京</li> <li>上海</li> <li>广州</li> </ol> <!-- 3.2无序列表 --> <ul> <li>北京</li> <li>上海</li> <li>广州</li> </ul> <!-- 3.3列表嵌套 --> <ol> <li>河北省 <ul> <li>石家庄</li> <li>保定</li> </ul> </li> <li>山东省 <ul> <li>青岛</li> <li>济南</li> </ul> </li> </ol> <p> 北京市<b>海淀区</b>北<u>三环</u>西路甲18号<span style="color:red">中鼎大厦</span>B座8层 </p> <!-- 4.分区 在demo4.html--> <!-- 5.空格折叠 --> <p> 那是一个 秋天，<br> </p> <!-- 6.图片 --> <!-- 6.1绝对路径 从盘符开始写出图片完整的路径，如:D:/day01/images/01.jpg 或/home/soft01/day01/images/01.jpg 在实际工作中，一般不使用这种方式。 因为在软件上线给客户安装时，客户可能改变代码存放的盘符，也可能根本就没有我们所写的盘符所以会导致找不到图片。--> <img src="E:\Workspace\webbasic\src\main\webapp\day01\01.jpg" width="1000"> <!-- 6.2相对路径 根据HTML和图片的相对关系来写路径。 1)图片和网页平级 01.jpg 2)图片在网页下级 x/02.jpg 3)图片在网页上级 ../03.jpg --> <p> <img src="01.jpg"/> <img src="x/02.jpg"/> <img src="../03.jpg"/> <!-- 一般这样用 --> <img src="../images/04.jpg"/> </p> <!-- 7.超链接 --> <!-- 7.1链接到其他网页上 --> <p> <a href="http://www.baidu.com" target="_blank">百度</a> </p> <!-- 7.2链接到锚点(本网页的某个位置) --> <!-- 1)将此位置做成锚点 --> <p> <a name="cang">苍老师</a>是个好老师 </p> <p> <!-- 网页的顶部默认是锚点，没有名字 --> <a href="#">回到顶部</a> </p> <!-- 8.表格 --> <!-- 8.1表格基本的语法 --> <table border="1" cellspacing="0" width="30%"> <tr> <td>苍老师</td> <td>小泽老师</td> </tr> <tr> <td>吉泽老师/td> <td>松岛老师</td> </tr> </table> <!-- 8.2跨行和跨列 --> <table border="1" cellspacing="0" width="30%"> <tr> <td colspan="2">苍老师</td> <!-- <td>小泽老师</td> --> </tr> <tr> <td>吉泽老师</td> <td>松岛老师</td> </tr> </table> <table border="1" cellspacing="0" width="30%"> <tr> <td rowspan="2">苍老师</td> <td>小泽老师</td> </tr> <tr> <!-- <td>吉泽老师</td>--> <td>松岛老师</td> </tr> </table> <!-- 8.3行分组 --> <br> <table border="1" cellspacing="0" width="40%"> <thead> <tr> <td>编号</td> <td>名称</td> <td>金额</td> </tr> </thead> <tbody style="color:red;"> <tr> <td>001</td> <td>鼠标</td> <td>50</td> </tr> <tr> <td>002</td> <td>键盘</td> <td>1500</td> </tr> <tr> <td colspan="2">合计</td> <td>1550</td> </tr> </tbody> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 4.分区 --> <div> <p>此处应该放一张logo图片</p> </div> <div style="color:red;"> <h1>宫保鸡丁的开发步骤</h1> <p>首先要放油</p> <p>然后放葱花炒炒</p> <p>然后放鸡丁在炒炒</p> <p>最后放盐</p> </div> <div> <p>版权所有，违者必究。</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 1.表单元素 用来划分一个范围在此范围内的控件中的数据才能够提交给服务器。 action 用来声明表单数据提交的目标。 method/enctype:将来再讲--> <form action="http://www.tmooc.cn"> <!-- 2.表单控件:用来给用户输入数据的。 --> <!-- 2.1 input元素(9) --> <!-- 1) 文本框 value:设置默认值 maxlength:限制输入长度 readonly:设置只读--> <p> 账号:<input type="text" value="admin" maxlength="10" /> </p> <!-- 2) 密码框--> <p> 密码:<input type="password"/> </p> <!-- 3)单选框 name:组名，同一组radio彼此互斥。 checked:设置默认选中。 value:将来再讲。--> <p> 性别:<input type="radio" name="sex" checked/>男 <input type="radio" name="sex"/>女 </p> <!-- 4)多选框 checked:设置默认选中。 value:将来再讲。--> <p> 兴趣: <input type="checkbox" checked>音乐 <input type="checkbox">运动 <input type="checkbox">摄影 </p> <!-- 5)文件框 --> <p> 头像:<input type="file"/> </p> <!-- 隐藏框 可以用来向服务器传递没必要被用户看到的数据。 通过value给它设置一个默认值。 --> <p> <input type="hidden" value="123"/> </p> <!-- 7)按钮 submit:用来提交表单 reset:用来充值表单内的数据 button:没用功能，需要js为它定制功能 通过value属性为按钮命名。 --> <p> <input type="submit" value="注册"/> <input type="reset" value="重置"/> <input type="button" value="按钮测试"/> </p> <!-- 2.2 其他元素(3) --> <!-- 1)label 用来管理表单中的文本，可以将文本与某个控件绑定在一起，使得点击此文本就相当于点击 这个控件，从而增加了控件的可点击面积，提高了易用性。 绑定的步骤: a:在控件上加id b:在文本外写label,并加for="id" 注:id是一个元素的唯一标识，相当于这个元素的身份证号，任何元素都可以有id属性。 --> <p> <input type="checkbox" id="c1"/> <label for="c1">我已阅读并自愿遵守此协议!</label> </p> <!-- 2)下拉选 当选项少时候用单选，选项多时候用下拉选。 selected:设置默认选中。 value:将来再讲。 --> <p> 家乡: <select> <option>请选择</option> <option selected>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>杭州</option> <option>成都</option> <option>昆明</option> </select> </p> <!-- 3)文本域 是一个可以输入多行文字的大框。 rows:设置高度 cols:设置宽度 readonly:设置只读 双标签中间的内容就是它的默认值。 --> <p> 简介: <textarea rows="5" cols="20">我的老家就住在这个屯</textarea> </p> </form> </body> </html>