十. 水平线
< hr width=“” align=“left/center/right” color=“”>
属性说明：
1.width 宽度 设置水平线的宽度
2.align 水平对齐方式
1）center默认居中对齐
2）left 左对齐
3）right 右对齐
3.color 水平线颜色
十一.无自带样式的元素
<div ></div> 块元素
<span></span> 行内元素
十二.特殊字符
空格：
     
十三.超链接
<a href="" target="_blank">内容</a>
属性：
1.href 连接跳转的地址
值：1）相对路径/网址
2）锚点 #id值 id的值是唯一的
3）mailto:邮箱地址
2.target 目标 链接打开的方式
值： _blank 在新窗口中打开链接
十四.热点区域
html <img src="" alt="" usemap="#name值">
<map name="name值">
<area shape="rect" coords="x1,y1,x2,y2" href="" target="">
<area shape="circle" coords="x,y,R" href="" target="">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...." href="" target="">
</map>
属性：
1.shape 形状
值：1）rect 矩形
2）circle 圆形
3）poly 多边形
2.coords 坐标
值： 1）如果shape=“rect”，coords的值是四个数值，前两个数值是矩形左上角的坐标，后两个数值是矩形的右下角的坐标
2）如果shape=“circle”，coords的值是三个数值，前两个数值是圆心的坐标，第三个值是圆的半径值
3）如果shape=“poly”，coords的值是若干对数值，每两个数值决定多边形一个顶点的坐标
十五.内联框架
<iframe src="" frameborder="" scrolling="" width="" height=""></iframe>
属性：
1. src 引入的页面路径
2.frameborder 框架边框 默认有边框 1有边框 0无边框
3.scrolling 滚动条设置 默认值auto yes有滚动条 no无滚动条
十六.表格
1.表格基本结构
<table border="" cellspacing="" cellpadding="">
<tr>
<th>表格标题</th>
<td>单元格</td>
....
</tr>
...
</table>
创建一个简单的表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<td>姓名</td>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<td>成绩</td>
<td>66</td>
<td>88</td>
</tr>
</table>
</body>
</html>
效果：
属性：
1）border 表格边框
2）cellspacing 单元格与单元格之间的距离
3）cellpadding 内容与单元格四周的距离
4) rules
rows:只显示单元格的上下边
cols:只显示单元格的左右边
all：只显示单元格的边
none：只显示外边框的边
bgcolor:表格背景颜色
bordercolor：表格边框颜色
width/height：宽高
2.合并单元格
colspan 水平合并单元格
rowspan 垂直合并单元格
结合以上知识可以完成此效果：
代码实现：
<!DOCTYPE>
<html>
<head>
<title>表格</title>
<meta charset="UTF-8">
</head>
<body>
<div class="table">
<p><h2 align="center">四年级3班 课程表</h2></p>
<table border="" cellspacing="0px" cellpadding="5px" align="center">
<tr>
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td>上午</td>
<td>7:50-8:20</td>
<td>单老师</td>
<td>单老师</td>
<td>唐老师</td>
<td>凌老师</td>
<td>单老师<br>凌老师</td>
</tr>
<tr>
<td></td>
<td>8:20-8:35</td>
<td colspan="5" align="center">晨会课</td>
</tr>
<tr>
<td></td>
<td>8:40-9:20</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td></td>
<td>9:30-10:10</td>
<td>语文</td>
<td>音乐</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td></td>
<td>10:35-11:20</td>
<td>英语</td>
<td>数学</td>
<td>体育</td>
<td>音乐</td>
<td>综合1</td>
</tr>
<tr>
<td></td>
<td>中自习</td>
<td>单老师</td>
<td>单老师</td>
<td>卞老师</td>
<td>凌老师</td>
<td>凌老师</td>
</tr>
<tr>
<td>下午</td>
<td>1:00-1:40</td>
<td>综合2</td>
<td>英语</td>
<td>科学</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td></td>
<td>1:50-2:35</td>
<td>综合3</td>
<td>语文</td>
<td>美术</td>
<td>体育</td>
<td>美术</td>
</tr>
<tr>
<td></td>
<td>2:45-3:25</td>
<td>品德与社会</td>
<td>体育</td>
<td>品德与社会</td>
<td>班队</td>
<td>科学</td>
</tr>
<tr>
<td></td>
<td>3:30-3:25</td>
<td colspan="5" align="center">兴趣课</td>
</tr>
<tr>
<td></td>
<td></td>
<td>唐老师</td>
<td>单老师</td>
<td></td>
<td>单老师</td>
<td>卞老师</td>
</tr>
</table>
</div>
</body>
</html>
十七.表单
1. <form action="" method=""></form>
form标签是用来表示采集数据的范围
属性：1.action 采集的数据提交的路径
2.method 采集的数据提交的方式
值：
1）get
2）post
size:文本框的宽度
maxlength：能输入的最大字符数
2. <input type="" name="" value="" placeholder="">
input 输入
属性：
1.type 类型
type=“text” 文本框
type=“password” 密码框
type=“radio” 单选框 name值必须保持一致
type=“checkbox” 复选框
type=“submit” 提交按钮
type=“reset” 重置按钮
type=“button” 普通按钮
type=“file” 文件上传按钮
2.name 名字 给标签起的名字
3.value 值 输入的值
4.placeholder 输入域的提醒文本
3.单选框 与 复选框 默认被选中 checked 或 checked=“checked”
例如：苹果
点击文字能把单选框或复选框选中：
1）用label双标记标签把单选框/复选框与文字一起包起来
例如: <label> <input type="checkbox" name="apple">苹果 </label>
2）用label标签只包裹文字，label上的for的值与单选框/复选框上的id的值保持一致
例如: <input type="radio" name="gender" id="male"> <label for="male">男性</label>
4.文本域
<textarea placeholder="提醒文本"></textarea>
5.下拉选择框
<select>
<option>选项1</option>
<option selected>选项2</option>
....
</select>
选项默认被选中，给option增加selected或selected=“selected”
6.按钮
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
综合以上表单知识可以做出：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单练习</title>
<style>
div {
margin: 0 auto;
width: 300px;
height: 500px;
border: 1px solid #ccc;
box-shadow: lightgray 10px 10px 10px 10px;
}
h1 {
text-align: center;
}
form {
margin-left: 20px;
}
</style>
</head>
<body>
<div>
<h1>表单注册</h1>
<form action="" method="get">
<!-- 文本框 -->
用户名：<input type="text" name="userName" id="" value="" />
<br>
<!-- 密码框
输入默认不可见-->
密 码：<input type="password" name="psd" id="" value="" />
<br>
<!-- 提交按钮 -->
<input type="submit" name="sub" value="提交">
<!-- 重置按钮重置到最初的页面 -->
<input type="reset" name="">
<br>
<!-- 复选框
name值保持一致 后端根据name值获取数据
默认选中checked-->
<label>读书<input type="checkbox" name="复选框" id="read" value="读书"></label>
<label for="look">看电视</label><input type="checkbox" name="复选框" id="look" value="看电视" checked>
<label for="look">打游戏</label><input type="checkbox" name="复选框" id="look" value="打游戏">
<br>
<!--
单选框
name值保持一致
默认选中checked
-->
<label>男<input type="radio" name="单选框" id="male" value="男" checked></label>
<label for="female">女</label><input type="radio" name="单选框" id="female" value="女">
<!-- value不一致
根据name值获取选中的value值
选中:selected-->
<select name="下拉列表 ">
<option value="a">USA</option>
<option value="b" selected>china</option>
<option value="c">UK</option>
</select>
<!-- 单文件选择 -->
<input type="file" name="file"><br>
<!-- 多文件选择 -->
<input type="file" name="filex" multiple id=""><br>
<!-- 文本域 -->
备注：<textarea name="text" id="" cols="30" rows="10"></textarea>
<button>普通按钮</button>
</form>
</div>
</body>
</html>
1175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
