<!DOCTYPE html>
<html lang="en"> <!--表示整个html页面的开始-->
<head> <!--头信息-->
<meta charset="UTF-8">
<title>Title</title> <!--标题-->
</head>
<body><!--body是页面的主体内容-->
<!--页面主体内容-->
<p>你好</p>
<br/> <!--换行-->
<hr/> <!--水平线-->
<font color="blue">你好</font> <!--font字体---->
<div>你好</div>
<font color="#dc143c" face="黑体" size="7">我是字体标签</font>
<hr/>
你好<>我好
       <br/> <!-- 空格-->
大家好
<!--标签标题-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<!--超链接!!!!!-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.xiaomi.com">小米</a>
<a href="http://www.taobao.com">淘宝</a> <!--超链接 a href-->
<!--列表标签-->
<ul type="none"> <!--ul是无序列表 type属性可以修改列表项前面的符号-->
<li>张三</li> <!--li是列表项-->
<li>李四</li>
<li>王二</li>
</ul>
<!--img标签(可以在html页面上显示图片)-->
<!--1-->
<img src="01.jpg"/>
<img src="./01.jpg"/>
<img src="../PICTURE/02.jpg"/>
<!-- 注意:一个.为当前目录(也可不写直接写文件名)两个.即为上级目录需写文件夹名文件名-->
<!--改变大小-->
<img src="01.jpg" width="200" heigth="150" border="1"/> <!--border为边框粗细 -->
<img src="02.jpg" width="200" heigth="150" border="1" alt="找不到图片"/> <!--alt是未找到图片时提供文本提示-->
<!--表格标签!!!-->
<!--做一个三行三列的表格 并显示边框-->
<!--修改表格的宽高 表格的对齐方式 单元格间距-->
<!-- table
border边框粗细
width表格宽度
height表格宽度
align相对于页面的对齐方式 可为左left 中center 或右right
cellspacing单元格间距
align单元格文本对齐方式
b加粗
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr> <!--tr行标签-->
<th>1.1</th> <!--th表头标签-->
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td> <!--td单元格标签-->
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<hr/>
<!--!!!!!跨行跨列表格-->
<!-- 新建一个五行五列的表格
第一行第一列的单元格要跨两列
第二行第一列的单元格要跨两行
第四行第四列的单元格跨两行两列
-->
<table width="300" height="300" border="1" align="center" cellspacing="0">
<tr>
<td colspan="2">1.1</td> <!--colspan属性跨列-->
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
<!--iframe框架标签(在html加载一个单独的页面)-->
这是一个单独的完整界面<br/><br/>
<iframe src="01-title.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
<li><a href="01-title.html"target="abc">01标签</a></li>
</ul>
<hr/>
<!--表单标签!!!!-->
<!--创建一个个人信息注册表单界面 包含用户名 密码 确认密码 性别(单选) 兴趣爱好(多选) 国籍(下拉列表)
隐藏域 自我评价(多行文本域) 重置按钮 提交按钮-->
<form> <!--form就是表单-->
用户名:<input type="text" value="默认值"/><br/> <!--input type=text 是文本输入框 value设置默认显示内容-->
密码:<input type="password" /><br/> <!--input type=password 是密码输入框-->
确认密码:<input type="password"/><br/>
性别:<input type="radio" name="sex"/>男 <input type="radio" name = "sex"/>女<br/>
<!--input type=radio 是单选框-->
兴趣爱好:<input type="checkbox"/>JAVA <input type="checkbox"/>C++ <input type="checkbox"/><br/>
<!--input type=radio 是复选框-->
国籍:<select>
<option>请选择国籍</option>
<option>中国</option>
<option>美国</option>
<option>加拿大</option>
</select>
自我评价:<textarea rows="10" cols="20" >请输入自我评价...</textarea><br/> <!--textarea表示多行文本输入框 rows高 cols宽-->
<input type="reset" /> <!-- input type=reset 是重置按钮-->
<input type="submit"/> <!-- input type=submit 是提交按钮-->
</form>
<!--对上面表单进行格式化-->
<form action="http://www.baidu.com" method="post">
<!--<input type="hidden" name="action" value="login"..../>-->
<!--action属性设置提交服务器地址
method属性设置提交方式
get(需要格式 不安全 有长度限制)或post(只有action属性值 更安全 理论没有长度限制)
-->
<h1 align="center">用户注册页面</h1>
<table align="center">
<tr>
<td>用户名称:</td>
<td><input type="text" value="默认值"</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password"</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password"</td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女</td>
</tr>
<tr>
<td>国籍:</td>
<td>
<select>
<option>请选择国籍</option>
<option>中国</option>
<option>美国</option>
<option>加拿大</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea rows="10" cols="20">请输入自我评价</textarea></td>
</tr>
<tr>
<td><input type="reset"/></td>
<td><input type="submit"/></td>
<td><input type="file"/></td>
<!--input type=button 是按钮
input type=file 是文件上传域
input type=hidden 是隐藏域
select 是下拉列表框
option是下拉列表框中的选项
-->
</tr>
</table>
</form>
<hr/>
<!--其他标签-->
<div>div标签1</div> <!--div标签默认独占一行-->
<div>div标签1</div>
<span>span标签1</span> <!--封装数据的长度-->
<span>span标签2</span>
<p>p段落标签1</p> <!--p默认上下方隔空一行-->
<p>p段落标签2</p>
<p>p段落标签3</p>
</body>
</html><!--表示整个html页面的结束-->
初学JaveWeb记录历程
最新推荐文章于 2024-10-10 09:56:47 发布