美文网首页
初试HTML之浅谈CSS

初试HTML之浅谈CSS

作者: 二爷不太冷 | 来源:发表于2016-10-28 12:32 被阅读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进行绑定

      相关文章

        网友评论

            本文标题: 初试HTML之浅谈CSS

            本文链接:https://www.haomeiwen.com/subject/dlnsuttx.html