JavaWeb

一、HTML标签

HTML标签拥有自己的属性

• 基本属性：bgcolor=“red” 可修改简单的样式效果
• 事件属性：οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码

表示支持英文，lang="zh_CN"表示支持中文 表示页面使用UTF_8字符集

1、font字体标签

要求：在网页上显示“我还是蛮帅的”，并修改字体、颜色、大小。

1、使用font标签（现在还可以使用，但一般推荐使用span标签）

<font color="#ffc0cb" face="楷体" size="7">我还是蛮帅的</font>

​ face：字体名称；size：字体大小（范围：1~7）

2、使用span标签

<span style="color: pink; font-family: 楷体; font-size: xx-large">我还是蛮帅的</span>

​ 在span标签里通过style属性设置

2、特殊字符

要求：把<br>换行标签变成文本转换成字符显示在页面上

我还是<br>蛮帅的

显示结果	描述	实体名称（后面需英文加分号：“；”）
	空格	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
"	引号	&quot；
’	撇号	&apos；

其他特殊字符表：

显示结果	描述	实体名称
¢	分	&cent；
£	镑	&pound；
¥	日圆	&yen；
§	节	&sect；
©	版权	&copy；
®	注册商标	&reg；
×	乘号	&times；
÷	除号	&divide；

3、超链接标签

a标签中的属性：

• href：设置连接地址

• target：设置页面的跳转方式

  ​ -self：在当前页面跳转（默认值）

​ -blank：打开新页面跳转

<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

4、img标签

需求：使用img标签显示一张图片，并修改宽高，和边框属性

<img src="../img/1.png" width="200" height="260" alt="图片找不到了"/>

alt属性：当指定路径找不到图片时，用来代替显示内容的本文内容

web页面中的相对路径和绝对路径：

• 相对路径：…/。。。。
• 绝对路径：http://ip:port/工程名/资源路径

5、表格标签

要求 1：做一个代表头的，三行三列的表格，并显示边框

要求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距

<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</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>

table标签：表格标签

• border：设置表格边框粗细标签
• width、height：设置表格宽高
• align：设置表格相对于页面的对齐方式
• cellspacing：设置单元格间距

tr：行标签

td：单元格标签

th：表头标签（相对于普通单元格标签有加粗、居中的效果）

• align：设置单元格文本对齐方式

b：加粗标签

5.1跨行跨列表格

需求：新建一个四行四列的表格，第一行，第一列的单元格要跨两列，第三行第一列的单元格要跨两行，第三行第三列的单元格跨两行两列。

<table style="width: 100px; height: 100px; " cellpadding="2" border="1px">
		<tr>
			<td colspan="2">1.1</td>
			<td>1.3</td>
			<td>1.4</td>
		</tr>
		<tr>
			<td>2.1</td>
			<td>2.2</td>
			<td>2.3</td>
			<td>2.4</td>
		</tr>
		<tr>
			<td rowspan="2">3.1</td>
			<td>3.2</td>
			<td colspan="2" rowspan="2">3.3</td>
		</tr>
		<tr>
			<td>4.2</td>
		</tr>
	</table>

单元格标签中的两个属性：

• colspan：所占的列数
• rowspan：所占的行数

这两个属性会顶替原有单元格所在的空间，所以要删去原有的单元格。

6、iframe框架标签

iframe标签可以在HTML页面上，打开一个小窗口，去加载一个单独的页面。

iframe标签和a标签的组合使用步骤：

• 在iframe标签中使用name属性定义一个名称
• 在a标签的target属性上设置iframe的name属性

<iframe src="3.标题标签.html" width="400px" height="300px" name="abc"></iframe>

	<ul>
		<li><a href="1.font标签.html" target="abc">font标签</a></li>
		<li><a href="2.特殊字符.html" target="abc">特殊字符</a></li>
		<li><a href="3.标题标签.html" target="abc">标题标签</a></li>
	</ul>

7、form表单标签

要求：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。隐藏域，自我评价（多行文本域）。重置，提交。

• input type=text 是文本输入框 value设置默认显示内容

• input type=password 是密码输入框 value设置默认显示内容

• input type=radio 是单选框 name属性可以对其进行分组 check=“checked”表示默认选中

• input type=checkbox 是复选框 check=“checked”表示默认选中

• input type=reset 时重置按钮 value属性修改按钮上的文本

• input type=submit 是提交按钮 value属性修改按钮上的文本

• input type=button 是按钮 value属性修改按钮上的文本

• input type=file 是文件上传域

• input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的同时发送给服务器）

• select标签是下拉列表框

• option标签是下拉列表框中的选项 select=“selected”设置默认选中

• textarea表示多行文本输入框（起始标签和结束标签中的内容是默认值）

  • rows属性设置可以显示几行的高度
  • cols属性设置每行可以显示几个字符宽度

• form标签中

  • actoin属性设置提交的服务器地址
  • method属性设置提交的方式GET(默认值)或POST

提交表单时，数据没有发送给服务器的三种情况：

1. 表单项没有name属性值
2. 单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3. 表单项不在提交的form标签中

GET请求的特点是:

1. 浏览器地址栏中的地址：action属性【+？+请求参数】，请求参数的格式：name=value&name=value
2. 不安全
3. 它有数据长度的限制（超过限制则必须使用method=“post”）

POST请求的特点是：

1. 浏览器地址栏中只有action属性值
2. 相对于GET请求要安全
3. 理论上没有数据长度的限制

<form action="http://www.baidu.com" method="get">
    	<input type="hidden" name="action" value="login">
        <h1 align="center">用户注册</h1>
        <table align="center" border="1" cellpadding="2">
            <tr>
                <td>用户名称：</td>
                <td><input type="text" value="默认值"></td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td><input type="password" value="123"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" value="123"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="gender" >男<input type="radio" name="gender" checked="checked">女</td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox" checked="checked">Java
                    <input type="checkbox">Python
                    <input type="checkbox" checked="checked">C++
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select>
                        <option>--请选择国籍--</option>
                        <option selected="selected">中国</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 align="center"><input type="submit"></td>
            </tr>
        </table>
    </form>

8、其他标签

需求：div、span、p标签的演示

div标签：默认独占一行显示

span标签：它的长度是封装数据的长度

p段落标签：默认会在段落的上方或下方各空出一行（如果已有就不再空）

	<div>div标签1</div>
	<div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2