总结：列表、div、表单
学习任务
1.列表
- 有序列表
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
- 无序列表
<ul class="">
<li class="product-list">无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
- 自定义列表
<dl>
<dt>列表头</dt>
<dd>列表内容</dd>
<dt>列表头</dt>
<dd>列表内容</dd>
</dl>
简单示例
无序列表应用场景
自定义列表应用场景
2.div
- 用于页面结构划分，页面分区
- 示例一个典型的网页分为头部、内容、尾部；内容可分为侧边栏和主体内容，如：
<body>
<div id="header"></div>
<div id="content">
<div class="siderbar"></div>
<div class="main"></div>
</div>
<div id="footer"></div>
</body>
- div样式
<style type="text/css">
div {
width: 100px;
height: 100px;
border: 1px solid red;
padding: 10px;
margin: 10px;
text-align: center;
background-color: blue;
color: white;
border-radius: 4px;
}
</style>
3.块级元素、行内元素
- 块级元素占用空间是一整行，行内元素占用空间是他自身的内容宽度。行内元素可以并排显示，块级元素不能
- 行内元素设置width、height无效（即不改变显示效果），设置垂直的margin、padding无效（即有显示效果但不占据空间，需应用ling-height改变垂直空间）
- 块级元素包括：div、p、h、table、tr、ul、li、dl、dt、form
- 行内元素包括：a、span、img、input、button、em、textarea
4.表单
- 表单的目的是把数据提交给后台
- type="text" 单行文本框
type：选定表单类型
name：提交给后台，告知后台数据类型（提交的是什么）
value：表单框内的默认输入的内容（可不写）
placeholder：删除键删掉value默认值后，表单框内重新显示的内容
maxlength：表单框内最多输入的字符数量
- type=''radio'' 单选按钮
name：提交给后台，告知后台数据类型（提交的是什么）
value：提交给后台的具体值（内容）
name相同为单选，name可以复选（不能取消）；name分组
- type="checkbox" 多选按钮
name分组
check：默认选中
value：（不写value时默认为on，默认选中）value对应分组中，提交的值
-
type="textarea" 文本域
用于输入多行文本 -
type="hidden" 隐藏域
用户看不到。用于暂存数据，或安全性校验
5.iframe嵌入页面
- 在当前页面嵌入其他页面
网友评论