一、列表
1、作用：默认显示方式为从上到下的显示数据
2、列表的组成：类表类型和列表项
3、类表分类：
有序列表 语法：<ol>
<li></li>
</ol>
<!--type 属性 里写的是序列前的序号样式-->
<ol type="I">
<li>千与千寻</li>
<li>龙猫</li>
<li>哈儿的移动城堡</li>
</ol>无序列表 语法：<ul>
<li></li>
</ul>
<!--type 属性 里写的是序列前的序号样式-->
<ul type="disc">
<li>千寻</li>
<li>龙猫</li>
<li>哈儿</li>
</ul>
自定义列表 语法：dl类表类型 dt列表的标题 dd列表项
<dl>
<dt>千与千寻</dt>
<dd>千寻</dd>
<dt>悬崖上的金鱼姬</dt>
<dd>波妞</dd>
<dt>海贼王</dt>
<dd>索隆</dd>
</dl> 二、表单
1、表单的作用：用于显示、收集用户信息，并将信息提交给服务器
2、表单组成：（1）表单元素：负责将用户数据提交给服务器
（2）表单控件：负责接收用户的数据（和用户进行交互的）
3、定义
表单元素
form属性
action：定义表单被提交时的动作，主要是服务器上要处理的应用程序URL找谁处理（提交地址）
method：指定数据提交方式
get传输：显示提交，可以显示在地址栏上的，有数据大小限制
post传输：隐式传输，所有提交数据时都是看不到的，相对比较安全，没有数据大小限制
<form action="#" method="post">表单控件：提供多个类型的表单控件，而且有可视化的外观
input组件：type：类型
value:值
name:控件名称
disabled：禁止控件
text：普通文本框
用户：<input type="taxt" placeholder="不得为空"/>password：密码框
密码：<input type="pessword" placeholder="请输入密码" /><br />
确认密码:<input type="pessword"/><br />
email：邮箱框
电子邮件：<input type="email" /><br />submit：提交按钮
radio：单选框 拥有同一个name属性名称
性别：<input type="radio" name="123" /> 男 <input type="radio" name="123"/>女<br />CheckBox：多选框
爱好：<input type="checkbox" /> 唱歌 <input type="checkbox" />跳舞 <input type="checkbox" />篮球 <input type="checkbox" />rap<br />placeholder：文本提示
用户：<input type="taxt" placeholder="不得为空"/> <br />image：图片提交
<input type="image" src="img/btn.jpg" /> select控件（下拉列表）
size：显示数量 如果不为1的话，则变成滚动列表而不是下拉列表
<select>
<option selected="selected">中国</option>
<option>美国</option>
<option>法国</option>
</select>
<select>
<option selected="selected">湖北</option>
<option>湖南</option>
<option>广州</option>
</select>
<select>
<option selected="selected">武汉</option>
<option>长沙</option>
<option>深圳</option>
</select>textarea属性： cols 指定文本的列数（宽度）
rows 指定文本的行数（高度）
签名：<textarea cols="100" rows="5"></textarea>label 关联文本控件：1、首先在要关联的input控件上加上一个id
2、用label标签包含住文本并且加上for属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="margin:10px auto; min-width: 780px; max-width: 1260px;">
<img src="img/bg.jpg" /><br />
<form action="#" method="post">
<table border="0" align="center" cellspacing="50px">
<tr>
<td align="right">邮箱账号</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">昵称</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">密码</td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">性别</td>
<td><input type="radio" name="123" />男 <input type="radio" name="123" />女</td>
</tr>
<tr>
<td align="right">生日</td>
<td>
<select>
<option>公历</option>
<option>农历</option>
</select>
<select>
<option>年</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
</select>
<select>
<option>月</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>月</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td align="right">所在地</td>
<td><select>
<option selected="selected">中国</option>
<option>美国</option>
<option>法国</option>
</select>
<select>
<option selected="selected">湖北</option>
<option>湖南</option>
<option>广州</option>
</select>
<select>
<option selected="selected">武汉</option>
<option>长沙</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td align="right">验证码</td>
<td><input type="text" /><img src="img/getimage.jpg" height="30" width="70" align="middle"/><a href="#">点击换一张</a></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="checkbox" id="同意" /><label for="同意">我阅读并同意服务条款</label><br /><br /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="image" src="img/btn.jpg" />
</td>
</tr>
</table>
</form>
</body>
</html>
结果
三、浮动框架
作用：可以在一个浏览器窗口中同时显示多个页面文档
语法：iframe
属性： src：提取地址
width：宽度
height：高度
framborder：框架边线
第一种用法：
<iframe src="http://www.baidu.com" width="500px" height="500px"></iframe>
第二种用法： 和超链接的结合作用
1、创建超链接标签
2、创建iframe标签
3、在iframe加上一个name属性
4、改变超链接的target属性 改变为name属性的值
<body>
<!--<iframe src="http://www.baidu.com" width="500px" height="500px"></iframe>-->
<a href="http://www.baidu.com" target="123">baidu</a>
<a href="http://4399.com" target="123">4399</a>
<iframe src="#" name="123"></iframe>
</body>单击百度链接时
单击4399小游戏超链接时
四、摘要与细节
作用：允许将页面某部分内容进行展开或收缩
语法：第一 步 写上 摘要标签 datails
第二步 写上标题 summary
第三步 写内容
五、度量标签
度量标签属性 min：最小值
max：最大值
value：当前显示的度量值
语法
<meter min="0" max="50" value="50"></meter>
总结：希望上面的基础知识能够帮助到喜欢前端的小白们，虽然总结的基础知识不是很好，但还是希望帮助到你。在做这些基础 总结的同时也巩固了自己的知识。
7114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
