<!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>