为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
初识HTML(5)+CSS(3)_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

    流动布局模型具有2个比较典型的特征:

    第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。


    查看全部
  • 清楚了CSS3 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS3 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS3 布局样式或 CSS3 布局模板。如果说布局模型是本,那么 CSS3 布局模板就是末了,是外在的表现形式。 
    CSS3包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
    在网页中,元素有三种布局模型:
    1、流动模型(Flow)
    2、浮动模型 (Float)
    3、层模型(Layer)

    查看全部
  • 如果上右下左的边界都为10px;可以这么写:

    div{ margin:10px;}

    如果上下边界一样为10px,左右一样为20px,可以这么写:

    div{ margin:10px 20px;}

    总结一下:padding和margin的区别,padding在边框里,margin在边框外。


    查看全部
  • 如果上、右、下、左的填充都为10px;可以这么写

    div{padding:10px;}

    如果上下填充一样为10px,左右一样为20px,可以这么写:

    div{padding:10px 20px;}


    查看全部
  • 如果四个圆角都为10px;可以这么写:

    div{ border-radius:10px;}

    如果左上角和右下角圆角效果一样为10px,右上角和左下角圆角一样为20px,可以这么写:

    div{ border-radius:10px 20px;}


    查看全部
  • css内定义的宽(width)和高(height),指的是填充以里的内容范围。

    因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。


    查看全部
  • none设置此元素不会被显示,当想要元素隐藏的时候可以使用此值。



    查看全部
  • 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。

    inline-block 元素特点:

    1、和其他元素都在一行上;

    2、元素的高度、宽度、行高以及顶和底边距都可设置。


    查看全部
  • 内联元素特点:

    1、和其他元素都在一行上;

    2、元素的高度、宽度及顶部和底部边距不可设置;

    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。


    查看全部
  • 常用的块状元素有:

    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

    常用的内联元素有:

    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

    常用的内联块状元素有:

    <img>、<input>


    查看全部
  • 浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

    !important优先级样式是个例外,权值高于用户自己设置的样式。

    查看全部
  • 1. <!DOCTYPE html>:文档类型声明,表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前

    2. <html></html>标签对:<html>标签位于HTML文档的最前面,用来标识HTML文档的开始;</html>标签位于HTML文档的最后面,用来标识HTML 文档的结束;这两个标签对成对存在,中间的部分是文档的头部和主题。

    3.<head></head>标签对:标签包含有关HTML文档的信息,可以包含一些辅助性标签。如<title></title>,<link /><meta />,<style></style>,<script></script>等,但是浏览器除了会在标题栏显示<title>元素的内容外,不会向用户显示head元素内的其他任何内容。

    4.<body></body>标签对:它是HTML文档的主体部分,在此标签中可以包含<p><h1><br>等众多标签,<body>标签出现在</head>标签之后,且必须在闭标签</html>之前闭合。


    查看全部
  • 列表<ul><li></li></ul>,无前后顺序


    查看全部
  • html中的表单(form)可以把浏览者输入的数据传送到服务器端

    查看全部
  • type内有text:文本输入框

                  password:密码输入框

             value,在文本框中自动输入默认值

             placeholder,显示一些信息,不会占用文本框

    查看全部

举报

0/150
提交
取消
课程须知
没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。
老师告诉你能学到什么?
本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识,可以利用HTML(5)、CSS(3)样式技术制作出简单页面。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!