1、表格:
table border="" width="" height=""
tr
td rowspan="跨行" colspan="跨列"
th 表头
caption 标题
thead 表页眉部分 、tbody 表主体部分、tfoot 表页脚部分 这几个部分不这么用
2、表单: 能够接受用户输入的网页控件
<form action="服务器地址" method="提交方法:get/post">
</form>
get提交： 数据随地址栏一起提交，不安全，不能上传文件，不能提交大量数据，一般多用post
例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单的练习</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
用户名：<input type="text" name="username" maxlength="10" size="50" placeholder="请输入用户名"/><br/>
//maxlength表示允许输入的最大长度，size表示空格的最大长度，即虽然size定义50个字符位置，但是maxlength只允许输入10个字符
//placeholder="请输入用户名"/>表空格内提示，下图可见代码实现样式
密码：<input type="password" name="password"/><br/>
//不显示输入的字符，以圆点表示
<input type="submit" value="登录"/><br/>
<input type="submit" value="ZHUXIAO"/><br/>
协议 :<textarea rows="6" cols="100" readonly="readonly">iue+wfsgiusef+iushduhfsdhufshdkuhfkjshdkfjbsdifygiusdbkjvbdskhfkdjfshdiufhsdkjfhskdfhsjkdhfius</textarea>
<hr/>表示分隔符，将上面与下面内容之间画一条线
性别：<input type="radio" name="radio"/>男
<input type="radio" name="radio"/>女<br/>
课程：<select>
<option>java</option>
<option>html</option>
<option>css</option>
<option>c</option>
</select>
<input type="reset" value="重置"/><br/>
<input type="button" value="点我一下子"/>
<input type="image" src="image/1.jpg">
</form>
</body>
</html>
//需要注意的是，所有的输入需要在<form>中定义，比如文本和密码输入消息后，有一个重置按钮，如果重置按钮在form外，那么将对文本和密码的重置不起作用
可输入型
单行文本框 <input type="text" name="控件名"/>
密码框 <input type="password" name="控件名"/>
多行文本框 <textarea>xxxxxxxxxx</textarea>
h5新增的输入控件
<input type="" name=""/>
type="email" 输入邮箱
type="color" 选择颜色
type="tel" 输入电话
type="url" 输入url地址
type="rang" 水平滑块
type="date" 选择日期
type="time" 选择时间
type="week" 选择周
type="month" 选择月份
可选择可点击
单选按钮
<input type="radio" name=""/> name必须要一样，如果不一样就不能实现单选，即可同时选择男和女
复选框
<input type="checkbox" name=""/>
下拉列表
<select>
<option>选项</option>
<option>选项</option>
<option>选项</option>
</select>
提交按钮 将表单中填写的数据提交给服务器
<input type="submit" value="按钮上的文字"/>
重置按钮 清空表单中填写的数据
<input type="reset" value="按钮上的文字"/>
图片按钮 可以提交表单
<input type="image" src="图片的地址"/>
普通按钮
<input type="button" value="按钮上的文字"/>
<button>按钮上的文字</button> 提交表单
隐藏域
<input type="hidden" value=""/>
表单常用的属性
checked="checked" 单选 复选
selected="selected" 下拉列表
readonly="readonly" 只读
disabled="disabled" 禁用按钮
<div> 区域 块
</div>
行级标签
img
<img src="path"/>
a 导航
页面间链接
<a href="目标地址">链接文本</a>
页面内链接 锚链接
定义锚标记 <a name="xxxx"></a>
定义锚链接 <a href="#xxxx"></a>
功能性链接
<a href="mailto:[email protected]">站长邮箱</a>
span 行级div
框架集
<frameset>
<frame src="地址"/>
</frameset>
内联框架
6、下面是一个框架集的例子，涉及超链接等内容
思想：将3个不同的界面集中到一个界面中，
1、top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: brown;">
<h1 style="text-align: center;">许昌学院</h1>
<p style="text-align: center;">
<a href="course.html"target="_blank">课程介绍</a>
<a href="news.html"target="_top">校内新闻</a>
</p>
</body>
</html>
2、
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: pink;">
<ul>
<li><a href="html.html" target="rightframe">html</a></li>
<li><a href="java.html" target="rightframe">java</a></li>
<li>c++</li>
<li>数据库</li>
</ul>
</body>
</html>
3、html.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>什么是 HTML？</dt>
<dd> •HTML 指的是超文本标记语言 (Hyper Text Markup Language)</dd>
<dd> •HTML 不是一种编程语言，而是一种标记语言 (markup language)</dd>
<dd> •标记语言是一套标记标签 (markup tag)</dd>
<dd> •HTML 使用标记标签来描述网页</dd>
</dl>
</body>
</html>
4、frameset.html(将上面3个界面集中分配到这一个中来)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="180,*"frameborder="0">
<frame src="top.html" scrolling="no" />
<frameset cols="200,* " frameborder="0">
<frame src="left.html" scrolling="no" >
<frame src="java.html" scrolling="no" name="rightframe" />
</frameset>
</frameset>
</html>
5、news.html(实现上述页面内超链接跳转的页面 许愿新闻)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
xcu新闻
</body>
</html>
6、java.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: blue;">
<dl>
<dt>什么是java？</dt>
<dd>java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。</dd>
</dl>
</body>
</html>
（重要）心得总结：src="path"在frameset中，即为3大块分位置，即这3个不叫超链接，只是分配时的3个地址，<a href="path">文本</a> <a href>是超链接.在实现页面的跳转时，有以下几种情况，点击超链接，跳转到另外一个界面或者覆盖本界面都是，在超链接中定义来实现的，如
<a href="course.html"target="_blank">课程介绍</a>
target="_blank即打开新页面
<a href="news.html"target="_top">校内新闻</a>
target="_top覆盖本界面
还有一种情况是在一个位置定义一个名字rightname，然后由target="raghtname(事先在某一块定义的名字)"，即可跳转到在某一块定义名字的地方 如：
在上表4、frameset.html 中<frame src="java.html" scrolling="no" name="rightframe" />定义的这个名字name="rightframe"，然后由2、left.html中的
<li><a href="java.html" target="rightframe">java</a></li>target="rightframe"去跳转到那个地方，即name在某个位置定义一个名字，然后由target去跳转到那个位置。
（重要）心得总结：src="path"在frameset中，即为3大块分位置，即这3个不叫超链接，只是分配时的3个地址，<a href="path">文本</a> <a href>是超链接.在实现页面的跳转时，有以下几种情况，点击超链接，跳转到另外一个界面或者覆盖本界面都是，在超链接中定义来实现的，如
<a href="course.html"target="_blank">课程介绍</a>
target="_blank即打开新页面
<a href="news.html"target="_top">校内新闻</a>
target="_top覆盖本界面
还有一种情况是在一个位置定义一个名字rightname，然后由target="raghtname(事先在某一块定义的名字)"，即可跳转到在某一块定义名字的地方 如：
在上表4、frameset.html 中<frame src="java.html" scrolling="no" name="rightframe" />定义的这个名字name="rightframe"，然后由2、left.html中的
<li><a href="java.html" target="rightframe">java</a></li>target="rightframe"去跳转到那个地方，即name在某个位置定义一个名字，然后由target去跳转到那个位置。