HTML的基础框架（二）

62 阅读 0 评论 41 点赞

我是靠谱客的博主年轻长颈鹿，最近开发中收集的这篇文章主要介绍HTML的基础框架（二），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML的基础框架（一）：
https://blog.csdn.net/Veer_c/article/details/103882385
HTML的基础框架（二）：
https://blog.csdn.net/Veer_c/article/details/103882684

图像标签
img 图像标签
常用属性：
src : 表示图片源位置
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图（热点区域）：map
热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片标签</title>
</head>
<!--
图片标签：img
图片标签的属性：
src:连接的图片的位置
width：图片的宽度
height:图片的高度
alt:提示文本，当src属性是小的时候，alt属性才生效
title:当鼠标放到这张图片上的时候，会给与一个文字提示
-->
<body>
<img src="b.jpg" alt="我是宝强" width="100" height="100" border="0" usemap="#Map" title="我是宝强"/>
<map name="Map" id="Map">
<area shape="rect" coords="27,17,64,71" href="2.文本标签.html" target="_blank" />
<area shape="circle" coords="84,22,11" href="3.超链接标签.html" target="_blank" />
</map>
</body>
</html>

转义字符
在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，
那么就需要进行转义。
常见的转义字符：
特殊字符转义字符(以&开头，以;结尾)
需求:在浏览器中显示：标题
< < letter > > greater than
& &
需求：在浏览器中输入华育国际
空格

/*王老吉加上商标和版权：
版权
&copy;
商标
&reg;*/
<body>
<h1>标题1</h1>
<!--
使用转义字符将上述的内容展示在页面上
<
&lt;
>
&gt;
&
&amp;
空格
&nbsp;
需求：西部
开源
商标
&reg;
版权
&copy;
需求：给王老吉分别加上版权和商标
-->
&lt;h1&gt;标题1&lt;/h1&gt;<br/>
&amp;<br />
<hr />
西部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开源
<hr />
王老吉<sup>&reg;</sup>
<hr />
王老吉<sup>&copy;</sup>
</body>

表格标签（画图讲解表格标签中的各个位置代表的标签）
标签：
table 表格
tr 行
td 单元格
th 表头
caption 标题
常用的属性：
border 表格的边框
width 宽度
heigth 高度
align 对齐方式。 left: 左对齐 center:居中 right：右对齐
rowspan 行合并。把多行的单元格合并
colspan 列合并。把多列的单元格合并

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
table:整张表就用一个table来表示
caption:表的标题
tr:代表表中的一行
td:表中的一个单元格
th:表头，一般用于加粗显示字段名称
border:table标签的一个属性，用来调整表框的宽度
width:调整表的宽度
height:调整表格的高度
align:调整表格的位置
行合并和列合并：
行合并：rowspan
列合并：colspan
-->
<body>
<table border="2" align="center" width="400" height="300">
<caption><h1>学科成绩统计表<h1></caption>
<tr align="center">
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>
<tr align="center">
<td rowspan="2">狗娃</td>
<td>音乐</td>
<td>90</td>
</tr>
<tr align="center">
<td>java</td>
<td>60</td>
</tr>
<tr align="center">
<td>狗剩</td>
<td>java</td>
<td>70</td>
</tr>
<tr align="center">
<td>狗蛋</td>
<td>java</td>
<td>80</td>
</tr>
<tr align="center">
<td colspan="2">平均分</td>
<td>70</td>
</tr>
</table>
</body>

表单提交（画图展示整体需求和使用场景）
表单标签（重点）
作用：用于采集用户输入的数据，提交给后台程序处理
场景1：
注册用户：
-> 注册页面（输入用户名、密码、邮箱…）（通过表单标签携带用户数据）-> 系统后台程序 -> 把用户数据保存到数据库
场景2
登录：
-> 登录页面（输入用户名和密码）（通过表单标签携带用户数据） -> 系统后台，搜索数据库，判断是否存在次用户和密码
表单标签：
就是一个表单
单行输入域
密码输入域
单选按钮
多选按钮
下拉选项
隐藏域。特点：不会显示到html页面上，但可以携带数据。
文件选择器
多行输入域
提交按钮
普通按钮
重置按钮

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
<form>
就是一个表单
<input type="text">
单行输入域
<input type="password"/>
密码输入域
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
<select/>
下拉选项
<input type="hidden"/>
隐藏域。特点：不会显示到html页面上，但可以携带数据。
<input type="file"/>
文件选择器
<textarea></textarea>
多行输入域
<input type="submit"/>
提交按钮
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮
注意：
form表单里面有两个属性需要大家注意：
action="表单需要提交到哪个路径"
method=get/post
如果是get方式提交file:///C:/Users/Administrator/Desktop/8.form表单.html?username=jack&password=jack
之前的url路径?username=jack&password=jack,如果是get方式提交的话，我们的提交参数会被绑定在url路径中
如果post方式提交：我们的所有的提交参数会被封装在请求体中
-->
<body>
<form action="5.转义字符.html" method="post">
用户名:<input type="text" value="请输入用户名" name="username"/><br />
密码:<input type="password" name="password"/><br />
性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br />
兴趣爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby"
value="乒乓球"/>乒乓球<br />
学历:
<select name="xueli">
<option value="benke">本科</option>
<option value="shuoshi">硕士</option>
<option value="boshi">博士</option>
</select><br />
<input type="hidden" /><br />
上传一张你的靓照:<input type="file" name="file"/><br />
请简单做一个自我介绍：<textarea rows="5" cols="10"></textarea><br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>

案例：form标签和table标签的整合

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table border="1" width="300" height="200" bgcolor="#FF0000" align="center">
<form action="8.form表单.html" method="get">
<tr>
<td>用户名</td>
<td><input type="text" name="username" value="请输入用户名" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password"
name="password"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" value="男" name="gender" />男<input type="radio" name="gender" value="女" />女</td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓"/>乒乓</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册" /><input type="reset" value="重置" /></td>
</tr>
</form>
</table>
</body>

框架标签
frameset 框架集
属性：
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例
frame 表示一个框架，框架中包含一个html页面
有2个或2个以上的frame就会包含在frameset当中。

注意：框架标签不能放在body标签中，否则无法显示！！！

案例练习：做一个学生管理系统，画图展示需求（必须实现点击不同的超链接跳转不同的页面的效果）

将页面划分
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<frameset rows="20%,80%">
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.html"/>
<frame src="UntitledFrame-1" name="body"/>
</frameset>
</frameset><noframes></noframes>
左边显示的内容
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="选课.html" target="body">1.大一选课</a><br />
<a href="选课.html" target="body">2.大二选课</a><br />
<a href="选课.html" target="body">3.大三选课</a><br />
<a href="选课.html" target="body">4.大四选课</a><br />
</body>
右边显示的内容
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1 align="center">选课系统</h1>
</body>
跳转之后显示的内容
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
欢迎来上我的课
</body>