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

    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 216,258评论 6 498
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 92,335评论 3 392
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 162,225评论 0 353
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 58,126评论 1 292
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 67,140评论 6 388
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 51,098评论 1 295
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 40,018评论 3 417
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 38,857评论 0 273
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 45,298评论 1 310
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 37,518评论 2 332
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 39,678评论 1 348
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 35,400评论 5 343
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 40,993评论 3 325
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 31,638评论 0 22
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 32,801评论 1 268
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 47,661评论 2 368
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 44,558评论 2 352

    推荐阅读更多精彩内容

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