初试HTML之浅谈CSS

一、列表

列表是有三种形式

1.1无序列表

无序列表，用来表示一个列表语义，并且每个项目与项目之间是不分先后顺序的

ul的英文unordered list “无序列表”

li的英文list item“列表项”

你会发现，我们学习的“组标签”，就是要么不写，要写就写一组

北京

上海

深圳

广州

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

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

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

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

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

1.2有序列表

ordered list有序列表，用ol表示

浏览器会自动添加阿拉伯序号：

总结：

ol与ul的定义是不同的：

1.有序和无序

2.当前都是列表项（li）被包裹

3.一般来说很少使用有序列表，基本都是使用无序列表

1.3定义列表

定义列表实际上一个组标签，不过比较复杂，出现三个标签

dl表示definition  list定义列表

dt表示definition title定义标题

dd表示definition  description定义表述次

表示的语义两层：

1.是一个列表，列出北京、上海，广州

2.每个专有名词都有自己的描述项

一个dt可以对应多个dd

京东最下方的列表

京东的下拉栏

二、DIV和SPAN

2.1、DIV

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

Css课程中你将会知道，这二个标签都是盒子模型最重要的标签之一

中国主要的城市

Div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了。

总结：div中的所有元素是一个小区域，div是一个容器级标签，里面什么都可以存放，甚至可以放div自己

2.2、SPAN

span表达“小区域、小跨度”的标签，是一个文本级的标签

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

2.3div+css布局

详情参见代码示例

2.4表单元素

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

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