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

    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

    推荐阅读更多精彩内容

    • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
      前端进阶之旅阅读 16,685评论 32 459
    • 一、学习目标 主要是学习web开发中的一些基本性的概念,例如b/s架构,web服务器,dns等等。同时还要学习HT...
      我爱开发阅读 4,066评论 0 7
    • 一,有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
      kingBirds阅读 4,241评论 0 0
    • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
      PYLON阅读 8,573评论 0 5
    • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
      夏沫xx阅读 5,374评论 0 8