一、HTML标签
HTML标签拥有自己的属性
- 基本属性:bgcolor=“red” 可修改简单的样式效果
- 事件属性:οnclick=“alert(‘你好!’);” 可以直接设置事件响应后的代码
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>蛮帅的
显示结果 | 描述 | 实体名称(后面需英文加分号:“;”) |
---|---|---|
空格 |  ; | |
< | 小于号 | <; |
> | 大于号 | >; |
& | 和号 | &; |
" | 引号 | "; |
’ | 撇号 | &apos; |
其他特殊字符表:
显示结果 | 描述 | 实体名称 |
---|---|---|
¢ | 分 | ¢; |
£ | 镑 | £; |
¥ | 日圆 | ¥; |
§ | 节 | §; |
© | 版权 | ©; |
® | 注册商标 | ®; |
× | 乘号 | ×; |
÷ | 除号 | ÷; |
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
提交表单时,数据没有发送给服务器的三种情况:
- 表单项没有name属性值
- 单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
- 表单项不在提交的form标签中
GET请求的特点是:
- 浏览器地址栏中的地址:action属性【+?+请求参数】,请求参数的格式:name=value&name=value
- 不安全
- 它有数据长度的限制(超过限制则必须使用method=“post”)
POST请求的特点是:
- 浏览器地址栏中只有action属性值
- 相对于GET请求要安全
- 理论上没有数据长度的限制
<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>