初试HTML之浅谈CSS

2016-10-28  本文已影响0人  二爷不太冷

一、列表

列表是有三种形式

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

上一篇下一篇

猜你喜欢

热点阅读