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>

</ul>

也就是，当前的这个列表项li不能单独的存在，必须包裹在ul标签里面，反过来说ul的“儿子”就是li

错误演示：没有被ul标签包裹，默认没有ul的语义，所以直接没有排版

Ul标签并不是给文字添加小圆点的，而是给无序列表增加“语义”

Ul标签实际应用的场景：导航条，排版文章，标题栏（ul放li，li是个容器级标签，什么都可以放）

ul的层级结构（嵌套结构）

1.
ul>
2.
<li>吃的
3.
<ul>
4.
<li>饼干</li>
5.
<li>水果
6.
<ul>
7.
<li>榴莲</li>
8.
<li>香蕉
9.
<ul>
10. <li>拔丝香蕉
11. <ul>
12. <li>冷的</li>
13. <li>热的</li>
14. </ul>
15. </li>
16. <li>越南香蕉</li>
17. </ul>
18. </li>
19. </ul>
20. </li>
21. </ul>
22. </li>
23.
24. <li>喝的</li>
25. <li>用的</li>
26. <li>玩的</li>
27. </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
description 定义表述次

<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
href="#">详细信息</a>

</span>

Span里面只能存放图片，文字，表单元素。Span不能存放p、h、ul、dl、ol、div。

<div>

这是一个div

<span>

<a
href="https://www.baidu.com/">百度</a>

</span>

</div>

span里面放置小元素，div里面放置大东西

2.3div+css布局

详情参见代码示例

2.4表单元素

表单就是收集数据的，就是让用户添加当前的数据

<div>

<h1>欢迎来到本网站注册</h1>

<form>

所有的表单元素都要写在form标签里面<br>

<input
type="text" name="这是文本框"/>这是文本框<br>

<input
type="password" name="这是密码框"/>这是密码框<br>

<input
type="radio" name="单选框">单选框1<br>

<input
type="radio" name="单选框">单选框2<br>

<input
type="radio" name="单选框">单选框3<br>

<input
type="checkbox" name="复选框1">复选框1<br>

<input
type="checkbox" name="复选框2">复选框2<br>

<input
type="checkbox" name="复选框3">复选框3<br>

<input
type="button" value="我是一个普通的Button"/><br>

<input
type="radio" name="sex"/>男<br>

<input
type="radio" name="sex"/>女<br>

<input
type="radio" name="sex"/><label
for="nan">男</label><br>

<input
type="radio" name="sex"/><label
for="nv">女</label><br>

</form>

<br>

<select>

<option>北京</option>

<option>上海</option>

<option>广州</option>

<option>深圳</option>

<option>武汉</option>

<option>长沙</option>

</select>

</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进行绑定

巴特西

CSS的应用

一、列表

1.1 无序列表

1.2有序列表

1.3 自定义列表

二、 DIV和SPAN

2.1、 DIV

DIV和span是非常重要的标签，div的语义是division“分割”；span的语义是“范围、跨度”

2.2、span

2.3div+css布局

2.4表单元素

最新文章

热门文章

巴特西

CSS的应用

一、 列表

1.1 无序列表

1.2有序列表

1.3 自定义列表

二、 DIV和SPAN

2.1、 DIV

DIV和span是非常重要的标签，div的语义是division“分割”；span的语义是“范围、跨度”

2.2、span

2.3div+css布局

2.4表单元素

最新文章

热门文章

一、列表