HTML书写表单div,03-HTML 列表、div、 span、表单

一、列表：

列表分为三种： 无序列表  有序列表 定义列表

1.1 无序列表

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

ul:(unordered list) 无序列表

li:(list item) 列表项

所有的li不能单独存在，必须包裹在ul里面，反过来说ul的儿子不能是别的东西，必须只能有li,例如：

中国的主要城市

• 上海
• 北京
• 郑州
• 杭州

ul标签的实际应用：可以做导航条(导航条通常是无序列表)

li里面可以放置的内容很多：

ul的儿子只能是li,但是li是一个容器级标签，li里面什么都可以放,甚至里面可以再放一个ul

1.2 有序列表

有序列表(ordered list) 用ol 表示

歌曲榜

1. 月亮之上
2. 2016年第一场雪
3. 最炫名族风
4. 北京欢迎你

ol浏览器会自动加上序号，和ul 语义不一样但是使用时一样的，ol里面只能有li，li 必须被ol 包裹，li 是容器级，一般ol 很少用，一般是用ul

歌曲榜

• 1.月亮之上
• 2.2016年第一场雪
• 3.最炫名族风
• 4.北京欢迎你

效果是一样的

1.3 定义列表

定义列表比较复杂，有三个标签：

dl: definition list   定义列表

dt: definition title  定义标题

dd: definition description 定义描述词

dt、dd 只能在dl 里面，dl里面只能有dt 、dd。

北京

中国首都，政治文化中心

上海

中国经济中心

深圳

中国经济特区

表达的语义是两层：

1.是一个列表，列出了北京、上海 、深圳三个项

2.每个词都有一个描述项

dd 是描述 dt 的

定义列表是比较灵活的，可以一个dt 配很多的dd

北京

中国首都，政治文化中心

北京雾霾比较严重

上海

中国经济中心

深圳

中国经济特区

深圳城市非常美

还可以拆开，每一个dl 中只有一个dt 和 dd

常见案例：

二、div 和 span

div 和 span 是非常重要的标签(盒子标签)

div 的语义是 division    分割的意思。(是非常重要的布局标签)

span 的语义就是 span  范围 跨度的意思

div 在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div 中的所有元素是一个小区域。

div 标签是一个容器级标签，里面什么都可以放，甚至可以是div 自己。

中国的主要城市

• 上海
• 北京
• 郑州
• 杭州

歌曲榜

1. 月亮之上
2. 2016年第一场雪
3. 最炫名族风
4. 北京欢迎你

span 也是表达小区域 小跨度 的标签，但是是一个文本级标签。

就是说span 里面只能放置文字、图片、表单元素。span 里面不能放p 、h 、dl 、 ol、div 。

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

简介

详细信息

价格

开发中常用 div + css 模式，div 负责布局，负责结构，css 负责样式

三、表单

表单就是收集用户信息的，让用户填写、选择的。

所有的表单内容，都要写在from 标签里面

from 标签里面有 action 属性和 method 属性，action 属性表示表单提交到哪里去，method 属性是表示用什么HTTP方法提交，有 get 和 post 两种。

3.1 文本框

input 表示 “输入”，指的是一个“输入小部件”。

type 表示“类型”。

text 表示“文本”，指的是类型是一个文本框的小部件。

value 表示“值”，就是设置默认值

注册

账号

密码

input 标签是一个自封闭标签，一般常用的自封闭标签有：

3.2 密码框

input 标签即是文本框有是密码框，是有 type值 来决定的。

type = “text” 就是文本框

type = “password” 就是密码框(效果如上图)

3.3 单选按钮

请选择性别：

男

女

input 的 type = “radio” 就表示单选按钮

3.4 复选框

3.5 下拉列表

3.6  多行文本框(文本域)

3.7 三种按钮

3.8  label 标签

四、HTML 其他