day02
列表系列
-
无序列表
[外链图片转存失败(img-DGsLnIHg-1565270467261)(E:\老师整理\day02\笔记\media\wxlb.png)]
[外链图片转存失败(img-JS4qrDJe-1565270467262)(E:\老师整理\day02\笔记\media\ul.png)]
<!-- 无序列表 复合 有盒子 ul(unorder list) 列表项 li list--> <!-- <ul> <li>第一条数据</li> ul>li*n div>div*n 一口气写下所有的数据 按着鼠标滚轮选中可以同时写数据 </ul> 属性: type=“” 指的是前面标识的属性 type=“desc” 实心圆 / “circle” 空心圆 /square 正方形 默认是实心圆--> <ul type="circle"> <li>第一条数据/li> <li>第二条数据/li> <li>第三条数据/li> </ul>
-
有序列表
[外链图片转存失败(img-gK1ggPtf-1565270467263)(E:\老师整理\day02\笔记\media\yxlb.jpg)]
<!-- 有序列表 ol(order list) > li type=“a/A/I(罗马数字)/1” start 控制标识初始的序号 只用写数字即可--> <ol type="I" start="6"> <li>第n条数据</li> <li>第n条数据</li> <li>第n条数据</li> </ol>
-
自定义列表
[外链图片转存失败(img-DFymv6rM-1565270467263)(E:\老师整理\day02\笔记\media\zdylb.png)]
<!-- 自定义列表 dl(最外面的大盒子 define list) > dt(标题 define title)+dd( 数据 define data)--> <dl> <dt>菜单</dt> <dd>西红柿炒鸡蛋</dd> <dd>土豆丝</dd> <dd>肉</dd> </dl>
超链接标签
<a> 文字 / 图片 /大盒子 </a> anchor 锚点
链接使用
href: 链接地址
target: 控制链接的打开方式
- _self 默认打开方式 在本页打开
- _blank 在新建页面打开
<base target="_blank"> 一次性设置超链接打开方式
必须放在head头部
锚点
[外链图片转存失败(img-nCl4SlWh-1565270467264)(E:\老师整理\day02\笔记\media\锚点功能.png)]
点击锚点链接,跳转相同界面的不同部分
表格
[外链图片转存失败(img-C6SuNtrh-1565270467264)(E:\老师整理\day02\笔记\media\表格.jpg)]
table
thead 整个头部
th table head 头部里面的块
tbody 身体
tr table row 行
td table data 列
<table>
<!-- 表格头部 thead -->
<thead>
<!-- 字段 tr行 > th 字段 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- 表格身体部分 tbody -->
<tbody>
<!-- tr >td 列 单元格 -->
<tr>
<td>李峥</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>石丛林</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>任思锦</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>王甜甜</td>
<td>16</td>
<td>女</td>
</tr>
</tbody>
</table>
默认属性:
- border:边框 border=“1” 边宽
- cellpadding: 10px; 调整单元的内容与边框的距离
- cellspacing:10px; 单元格与单元格之间的距离
- 一般设cellpadding=“0px”,cellspacing=“0px” 双线合并成单线—>粗的 因为是两条线合并 想要变成细线边框,用CSS里面的一个属性
- 宽度属性 width 等宽,表格里面一列里面有一个宽了,一列的其余几个也会变
- 高度属性 height 等高,表格里一行里只要有以一个变了,其余也会改变
- 文字所在位置, 引入CSS属性
- bgcolor:背景色
- align:水平对齐方式
- background:图片背景 background=“地址”
CSS语言 CSS属性
CSS细线边框属性:border-collapse:collapse 合并 折叠
CSS文本对齐属性:text-align:center(居中)/left(左对齐)/right(右对齐)
合并单元格
[外链图片转存失败(img-Koq85hC4-1565270467265)(E:\老师整理\day02\笔记\media\表格课堂练习02.jpg)]
- 跨行合并 从上往下合并 rowspan=“合并的行数” 写到最初始的行上 然后删除被合并的哪几行
- 跨列合并 从左往右合并 column 列 colspan=“合并的列数” 写到最初的列上 然后删除被合并的那几列
- 不同标签不能合并,只有相同标签词可以合并
caption 表中标题
表单
[外链图片转存失败(img-gikB9CqI-1565270467265)(E:\老师整理\day02\笔记\media\biaodan.jpg)]
[外链图片转存失败(img-SnFDq9FF-1565270467266)(E:\老师整理\day02\笔记\media\input.png)]
功能:用于收集用户数据
form 表单
表单控件 input
<body>
<!-- 大盒子 表单 -->
<form>
<caption>
<b>
招亲!!!
</b>
</caption>
<br>
<!-- 表单控件 input type=“类型”
type:
text 文本框
password 密码框 文字隐藏
radio 单选框
checkbox 多选框
file 文件上传域
文本域 <textarea></textarea>
普通按钮 button 不能提交
提交按钮 submit 功能就是作为表单提交的按钮 form里面必须包含一个提交按钮
重置按钮 reset
图片按钮 image
name 属性名 属性作用 指明当前用户输入的是什么数据
value 属性值 提交给后台的属性值
-->
姓名:<input type="text" name="username"><br>
密码:<input type="password" name="userpassword"><br>
<!-- 要想实现选择框成为一道单选题,必须保证这几个表单元素身上的name属性值相同 -->
性别:男:<input type="radio" name="sex" value="0">
女:<input type="radio" name="sex" value="1">
保密:<input type="radio" name="sex" value="2">
<br>
爱好:
游泳 <input type="checkbox" name="hobby" value="0">
唱歌 <input type="checkbox" name="hobby" value="1">
运动 <input type="checkbox" name="hobby" value="2">
打游戏 <input type="checkbox" name="hobby" value="3">
<br>
<!-- 下拉列表 select > option 选项-->
工作地:
<select name="city" id="">
<option value="0">北京</option>
<option value="1">河北</option>
<option value="2">天津</option>
<option value="3">山西</option>
</select><br>
上传自拍(不要美颜):
<input type="file" name="photo"><br>
评价你自己:
<textarea name="desc" id="" style="widows: 30px;height: 30px"></textarea>
<br>
<!-- <input type="button" value="普通按钮"> -->
<input type="submit">
<input type="reset">
<br>
<!-- 图片按钮是为了弥补默认提交按钮样式上的缺陷 CSS是不是万能的 -->
<input type="image" src="./image/long.jpg">
</form>
</body>
鼠标放进去叫聚焦过程
鼠标拿开叫离交过程
表单的提交
作业代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>世纪佳缘</title>
</head>
<body style="background-color:bisque; background: url(./image/婚庆.jpg) no-repeat; background-size: 100%" >
<table style="background-color:rgba(228, 228, 228, 0.8); margin-top: 100px" align="center"
width="25%" height="40%">
<!-- no-repeat 不允许拉伸 -->
<!-- rgba(red,green,blue,透明度) -->
<tr style="height: 40px">
<td colspan="2" style="text-align: center; font-size: 23px; color:slategrey">
1分钟注册,享一辈子幸福!
<hr color="grey" width="98%">
</td>
</tr>
<tr style="height: 40px">
<td style="text-align: right; width: 80px">性别</td>
<td align="left">
<input type="radio" name="sex" value="1" checked>
<img src="./image/nan.PNG" style="width: 18px;height: 18px">
男
<input type="radio" name="sex" value="0">
<img src="./image/nv.PNG" style="widows: 18px;height: 18px">
女
</td>
</tr>
<tr style="height: 40px">
<td style="text-align: right">生日</td>
<td align="left">
<select name="year" id="" style="width: 73px">
<option value="a" selected>请选择</option>
<option value="0">1997</option>
<option value="1" >1998</option>
<option value="2">1990</option>
<option value="3">1996</option>
</select>
<select name="month" id="" style="width: 73px">
<option value="a" selected>请选择</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="3">5</option>
<option value="3">6</option>
<option value="3">7</option>
<option value="3">8</option>
<option value="3">9</option>
<option value="3">10</option>
<option value="3">11</option>
<option value="3">12</option>
</select>
<select name="day" id="" style="width: 73px">
<option value="a" selected>请选择</option>
<option value="0">1</option>
<option value="1">10</option>
<option value="2">20</option>
<option value="3">30</option>
</select>
</td>
</tr>
<tr style="height: 40px">
<td style="text-align: right">所在地区</td>
<td align="left">
<select name="place" id="" style="width: 230px">
<option value="0" selected>河北</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">广州</option>
<option value="4">山西</option>
<option value="5">山东</option>
</select>
</td>
</tr>
<tr style="height: 40px">
<td style="text-align: right">婚姻状况</td>
<td align="left">
<input type="radio" name="hunyin" value="0" checked>未婚
<input type="radio" name="hunyin" value="1">离婚
<input type="radio" name="hunyin" value="2">丧偶
</td>
</tr>
<tr style="height: 40px">
<td></td>
<td style="text-align: left">
<a href="https://baike.baidu.com/item/朱一龙" target="_blank">
<input type="image" src="./image/提交按钮.png">
</a>
</td>
</tr>
<tr>
<td></td>
<td style="text-align: center">
<a href="http://baidu.com" target="_blank" style="color:gray">
我是会员,立即登录
</a>
</td>
</tr>
</table>
</body>
</html>