CSS基础入门
目录
一、 列表.................................................................................................................................................... 3
1.1 无序列表....................................................................................................................................... 3
1.2有序列表............................................................................................................................................ 4
1.3 定义列表....................................................................................................................................... 5
二、 DIV和SPAN........................................................................................................................................ 7
2.1、 DIV................................................................................................................................................. 7
2.2、span................................................................................................................................................. 7
2.3div+css布局......................................................................................................................................... 8
2.4表单元素............................................................................................................................................ 8
一、 列表
列表是有三种形式
1.1 无序列表
无序列表，用来表示一个列表语义，并且每个项目与项目之间是不分先后顺序的
|
ul 的英文unordered list “无序列表” li 的英文 list item “列表项” |
|
你会发现 ，这个我们学习的“组标签”，就是要么不写，要写就写一组 |
|
<ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ul> |
也就是，当前的这个列表项li不能单独的存在，必须包裹在ul标签里面，反过来说ul的“儿子”就是li
错误演示：没有被ul标签包裹，默认没有ul的语义，所以直接没有排版
|
<li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> |
Ul标签并不是给文字添加小圆点的，而是给无序列表增加“语义”
Ul标签实际应用的场景：导航条，排版文章，标题栏（ul放li，li是个容器级标签，什么都可以放）
ul的层级结构（嵌套结构）
|
1.2有序列表
ordered list 有序列表 ，用ol表示
|
<ol> <li>小苹果</li> <li>最炫名族风</li> <li>隔壁老王</li> </ol> |
浏览器会自动添加阿拉伯序号
总结：
ol与ul的定义是不同的：
- 有序和无序
- 当前都是列表项（li）被包裹
- 一般来说很少使用有序列表，基本都是使用无序列表
1.3 自定义列表
定义列表实际上一个组标签，不过比较复杂，出现三个标签
|
dl 表示 definition list 定义列表 dt 表示 definition title dd表示 definition |
|
<dl> <dt>北京</dt> <dd>国家首都，政治文化中心</dd>
<dt>上海</dt> <dd>魔都，有东方明珠，外滩，黄浦江</dd>
<dt>广州</dt> <dd>东莞，小蛮腰</dd> </dl> |
表示的语义两层：
- 是一个列表，列出北京、上海，广州
- 每个专有名词都有自己的描述项
|
<dl> <dt>购物篮</dt> <dd>小刀</dd> <dd>果汁</dd> <dd>辣条</dd>
<dt>食谱</dt> <dd>鱼香肉丝</dd> <dd>北京烤鸭</dd> <dd>羊肉串</dd>
<dt>活动</dt> <dd>买一送一</dd> <dd>充值100送50</dd> <dd>预存话费</dd> </dl> |
一个dt可以对应多个dd
京东最下方的列表
京东的下拉栏
二、 DIV和SPAN
2.1、 DIV
DIV和span是非常重要的标签，div的语义是division“分割”；span的语义是“范围、跨度”
Css课程中你将会知道，这二个标签都是盒子模型最重要的标签之一
|
<div> <h3>中国主要的城市</h3> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> </ul> </div>
<div> <h3>美国主要的城市</h3> <ul> <li>纽约</li> <li>华盛顿</li> <li>洛杉矶</li> </ul> </div> |
Div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了。
总结：div中的所有元素是一个小区域，div是一个容器级标签，里面什么都可以存放，甚至可以放div自己
2.2、span
span表达“小区域、小跨度”的标签，是一个文本级的标签
|
<span> 这是一个span标签 <a </span> |
Span里面只能存放图片，文字，表单元素。Span不能存放p、h、ul、dl、ol、div。
|
<div> 这是一个div <span> <a </span> </div> span里面放置小元素，div里面放置大东西 |
2.3div+css布局
|
详情参见代码示例 |
2.4表单元素表单就是收集数据的，就是让用户添加当前的数据 |
|
<div> <h1>欢迎来到本网站注册</h1> <form> 所有的表单元素都要写在form标签里面<br> <input <input <input <input <input <input <input <input <input <input <input <input <input <input <input
</form>
<option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> <option>长沙</option>
</div> |
Form标签
|
Form 标签里面action 和method 属性， 在ajax课程： action属性表示的就是“表单提交到那里去” method属性表示是用什么HTTP（get、post）方式提交 |
|
Input表示“输入”，指的是输入一个小部件 Type 表示：“类型” Text 表示“文本”，指的是一个文本框的小部件 Password表示的是一个密码框的小部件 Radio表示的是一个单选按钮 Checkbox表示的是一个复选框 Button表示的一个按钮 Submit表示一个提交按钮，默认没有value属性 Reset表示是一个重置按钮 Selected表示是一个下拉框 Label表示的是绑定input里面的id，使input和label进行绑定 |