一、超链接：
1.概述
1.超链接可以链接任何内容，本质上是页面或本页内容的一个链接。
2.标签
a 属性 href:表示链接到的页面或位置。
3.功能
1.页面与页面之间的跳转 2.本页内跳转(锚点)
4.详细
1.页面之间的跳转：
① 与外部网站页面之间的跳转：href中的路径必须是一个完整的url路径。必须以协议开头。例如：http
② 链接本网站中的其它网页：
2.常用属性：
① href ：表示链接到的页面
② target:
(***)_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
③ 超链接的颜色：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--超链接
1.页面之间的跳转：
① 与外部网站页面之间的跳转：href中的路径必须是一个完整的url路径。必须以协议开头。例如：http
② 链接本网站中的其它网页：
2.常用属性：
① href ：表示链接到的页面
② target:
(***)_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
③ 超链接的颜色：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
-->
<!--如果href属性为""，表示在当前页面-->
<a href="www.baidu.com">点我打开百度</a>
<br />
<!--链接本网站中的其它网页-->
<a href="index.html">点我链接到index.html</a>
<a href="homework/Topic1.html" target="_blank">点我链接到Topic1</a>
<br />
<a href="http://www.sina.com.cn">点我跳转到新浪</a>
</body>
</html>5.超链接锚点形式：
1.定位的位置： name属性进行定位。
2.要跳转到该定位的位置：href属性指明要跳转到的name的位置，此时，name的名称前面要加#
二、字符实体
1.字符实体
当需要正确显示预留字符时，必须要使用字符实体。 格式： &字符实体标识;
2.常见字符实体
1.空格：
2.大于和小于： > > < >
3.&：&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--字符实体
-->
<!--a<b<c
<hr /> -->
a<b<c
张
三©®
</body>
</html>三、表格
1.概述
html页面布局时，就是表格进行布局。 div + css
2.表格的构成
<table>
<tr>
<td></td>
</tr>
</table>
注意：
1.构成
table
tr 行
td单元格
th相当于单元格的标题
emmet语法 :
> 表示层级关系
()表示分组
*表示重复
{}文本内容
$表示从1开始的增量
2.table属性：
① border 表格的边框
② cellspacing 单元格之间的空白
③ cellpadding 单元格与内容之间的空白
④ width 宽度
⑤ align 表示水平对齐。left center right
3.tr属性
① align：表示水平对齐，行中的数据的水平对齐。
② valign：表示垂直对齐方式
4.td属性
① colspan 合并列
② rowspan 合并行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表格
table
tr 行
td单元格
th相当于单元格的标题
emmet语法 :
> 表示层级关系
()表示分组
*表示重复
{}文本内容
$表示从1开始的增量
2.属性：
① border 表格的边框
（***）② cellspacing 单元格之间的空白
（***）③ cellpadding 单元格与内容之间的空白
④ width 宽度
⑤ align 表示水平对齐。left center right
-->
<!--<table border="10px" cellspacing="10px" cellpadding="10px" bgcolor="pink" width="100%">-->
<!--cellspacing值为0表示单元格边框为一条实线-->
<table border="2px" cellspacing="0px" align="center">
<tr>
<td>这是一个单元格1</td>
<td>这是一个单元格2</td>
</tr>
<tr>
<td>这是一个单元格1</td>
<td>这是一个单元格2</td>
</tr>
<tr>
<td>这是一个单元格1</td>
<td>这是一个单元格2</td>
</tr>
</table>
<hr />
<!--tr 表示行
① align：表示水平对齐，行中的数据的水平对齐。
② valign：表示垂直对齐方式
-->
<table border="1px" width="700px" height="300px" align="center">
<tr align="center" valign="top">
<td>这是一个单元格1</td>
<td>这是一个单元格2</td>
</tr>
<tr>
<td>这是一个单元格3</td>
<td>这是一个单元格4</td>
</tr>
</table>
<!--td单元格(***)
① colspan 合并列
② rowspan 合并行
-->
<hr />
<table border="1px" cellspacing="0px" width="500px">
<tr>
<td colspan="2"> 1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
<!--th 相当于单元格的标题-->
<hr />
<br />
<h1 align="center">用户表</h1>
<table border="1px" width="700px" align="center">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>zs</td>
<td>123</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>ls</td>
<td>123</td>
</tr>
</table>
</body>
</html>四、表单1
1.交互 用户与服务器端进行数据交互的功能。
2.概述
1.form 表单
2.属性
① action 表示向何处提交表单数据。
② method ：表示表单提交的请求方式：
get：默认方式,在地址栏进行数据的传递。格式： ?参数=参数值&参数1=参数值1
用途：超链接、搜索
post： 传递表单数据在请求体中，安全性高，数据无限制
用途：居多，注册 登录
3.input元素：type
① text :文本框
② password ：密码框
③ submit：提交按钮
4.属性：
name ：用来在服务器端标识用户提交的数据的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表单概述
1.form 表单
2.属性
① action 表示向何处提交表单数据。
② method ：表示表单提交的请求方式：
get：默认方式,在地址栏进行数据的传递。格式： ?参数=参数值&参数1=参数值1
用途：
超链接、搜索
post： 传递表单数据在请求体中，安全性高，数据无限制
用途：
居多，注册 登录
3.input元素：type
1》 text :文本框
2》 password ：密码框
3》submit：提交按钮
4.属性：
name ：用来在服务器端标识用户提交的数据的。
-->
<form action="index.html" method="post">
用户名:<input type="text" name="username"/>
<br />
密码: <input type="password" name="psw"/>
<br />
手机号：<input type="text" />
<br />
<input type="submit" />
</form>
</body>
</html>
五、表单2
1.表单input type
1>.button 按钮:与submit的区别在于，该按钮点击不会自动提交表单。
2>.checkbox 复选框 如果需要向服务器传值，必须提供name和value值。
属性： checked="checked" 表示默认选中。
3>. file:表示文件上传
4>. hidden 表示隐藏域
通途： 当不希望在页面显示，但是有必须传递给服务器的数据。
属性：name value
2.属性
value ：对于输入型的，value就是输入在表单中的内容。
对于非输入型的，value值需要给定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表单input type
1>.button 按钮:与submit的区别在于，该按钮点击不会自动提交表单。
2>.checkbox 复选框 如果需要向服务器传值，必须提供name和value值。
属性：
checked="checked" 表示默认选中。
3>. file:表示文件上传
4>. hidden 表示隐藏域
通途： 当不希望在页面显示，但是有必须传递给服务器的数据。
属性：
name value
2.属性
value ：对于输入型的，value就是输入在表单中的内容。
对于非输入型的，value值需要给定。
-->
<form action="">
用户名 ：<input type="text" name="username" />
<br />
<input type="button" value="点我打开百度"/>
<br />
爱好：
打篮球 <input type="checkbox" name="hobby" value="playbasketball" checked="checked"/>
<!--如果属性与属性值相同，在h5以后，支持只写一个-->
踢足球 <input type="checkbox" name="hobby" value="football" checked/>
打排球 <input type="checkbox" name="hobby" value="volleyball"/>
<br />
请上传照片：
<input type="file" name="filename" />
<br />
这是一个隐藏域
<input type="hidden" name="idname" value="kk"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
六、表单3
表单项:input
1.image 图片域:具有提交表单的功能
注意：必须有src的属性。
2.radio 单选框
注意：
①单选框必须作为同一个按钮组，才可以互斥操作。
加入同一个按钮组，name属性必须相同。
② 默认被选中，属性 checked
3.reset 重置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表单项:input
1.image 图片域:具有提交表单的功能
注意：
必须有src的属性。
2.radio 单选框
注意：
1>单选框必须作为同一个按钮组，才可以互斥操作。
加入同一个按钮组，name属性必须相同。
2> 默认被选中，属性 checked
3.reset 重置
-->
<form action="">
用户名 : <input type="text" />
<br />
<br />
性别：
男 <input type="radio" name="sex" checked="checked"/>
女 <input type="radio" name="sex" />
<br />
<br />
<input type="image" src="img/7.jpg" width="300px"/>
<input type="submit" />
<input type="reset" />
</form>
</body>
</html>
其它表单项
1.下拉列表框：
select > option
注意：
① multiple 可以显示多个列表项
② size 表示可以显示的个数。
2.文本域：
textarea
注意：
① cols 表示列
② rows 表示行
③ 只读 ： readonly="readonly"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--其它表单项
1.下拉列表框：
select > option
注意：
① multiple 可以显示多个列表项
② size 表示可以显示的个数。
2.文本域：
textarea
注意：
① cols 表示列
② rows 表示行
③ 只读 ： readonly="readonly"
-->
<form action="">
请选择国籍：
<select name="country" multiple="multiple" size="2">
<option value="0">------请选择-------</option>
<option value="1">中国</option>
<option value="2">日本</option>
<option value="3">美国</option>
</select>
请选择省份
<select name="city" id="">
<option value="0">-------请选择--------</option>
<option value="1">北京</option>
<option value="2">四川</option>
<option value="3">上海</option>
</select>
<br />
<!--文本域-->
自我介绍：
<br />
<textarea name="" id="" cols="100" rows="100" readonly="readonly">
xxxx须知
请同意
</textarea>
<br />
<input type="submit" value="提交"/>
</form>
</body>
</html>七、框架集
框架集
1.作用：可以让一个窗体被切割成多个窗口，显示多个页面。
2.frameset 框架集的外层标签，拆分窗体
3.注意： frameset在使用时，不能放置在body中，一般放置在head和body之间。
4.frameset的属性：
① cols：垂直拆分。
② rows：水平拆分
取值： % 、 px、* 表示除了上面的 ，剩下的部分
5.frame表示链接的窗体页面。其中src表示链接的页面。
6.如果想在某个窗体中打开的页面，需要给定name属性，通过target属性指名在哪个frame中打开。
总结：
① 要想拆分窗体：
frameset cols rows
每一个窗体
frame src
② 对于页面存在链接的，如果需要在某一个框架集的窗体中打开，需要指名该窗体的名称，通过超链接的 target属性进行设置。
框架集首页代码：
<frameset rows="150px,*">
<frame src="left.html" />
<frame src="right.html" name="bottom" />
</frameset>框架集上半部分代码 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 align="center">欢迎光临某某网站</h1>
<h6 align="right"><a href="登录.html" target="bottom">登录</a></h6>
<h6 align="right"><a href="注册.html" target="bottom">注册</a></h6>
</body>
</html>2.框架集补充细节：
①.noresize：无法重置框架
②.border：0 表示去除边框
<frameset rows="20%,*" border="0px" >
<frame src="" noresize="noresize"/>
<frameset cols="20%,*" >
<frame />
<frame />
</frameset>
</frameset>浮动框架：iframe ：画中画
<iframe src="index.html" frameborder="1px"></iframe>
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
