美文网首页
初试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

      一、列表 列表是有三种形式 1.1无序列表 无序列表,用来表示一个列表语义,并且每个项目与项目之间是不分先后顺序的...

    • Electron初试

      Electron初试 简介 electron使用html,css和JavaScript来构建块跨平台桌面应用程序(...

    • 前端学习资料

      前端 Html+CSS+JS Web前端开发之HTML+CSS精英课堂【渡一教育】 Web前端开发之JavaScr...

    • JQuery 干货篇之选择元素

      JQuery 干货篇之选择元素 实验的HTML+CSS的代码 html css 选择器 :animated :选择...

    • 前端知识之CSS内容

      前端基础之CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML...

    • 初试HTML

      w3school html简介 什么是 HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本...

    • 浅谈网页基础Html + CSS

      1.一个合格的前段,第一步就是页面画的好,在实现项目时,大家都喜欢用插件,列element+ ui (实现后台管理...

    • 2020-01-15-易锦大学04-网页前端三兄弟html,cs

      01,html,css,js html--内容层。里面添加内容的。css--样式层。能控制网页呈现出的样式,布局之...

    • 【CSS】按钮特效 - 3

      HTML代码 CSS代码 HTML代码 CSS代码 HTML代码 CSS代码 HTML代码 CSS代码 最后两个效...

    • VSC常用插件推荐--前端篇

      HTML/CSS HTML Snippets HTML Class Suggestions CSS Peek - ...

    网友评论

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

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