初试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.一般来说很少使用有序列表,基本都是使用无序列表
定义列表实际上一个组标签,不过比较复杂,出现三个标签
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.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进行绑定