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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框: div{ border:2px solid red; } 上面是border代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1、border-style(边框样式)常见样式有: dashed(虚线)| dotted(点线)| solid(实线)。 2、
    查看全部
  • 元素分类--内联块状元素 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。 inline-block元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶和底边距都可设置。
    查看全部
  • 元素分类--行内元素 在html中,<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。如下代码就是将块状元素div转换为行内元素,从页使用div元素具有行内元素特点。 行内元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。 小伙伴们你们观查一下右侧代码段,有没有发现一个问题,行内元素之间有一个间距问题,这个问题在本小节的wiki中有介绍
    查看全部
  • 元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素和内联块状元素。 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有: <img>、<input>
    查看全部
  • GPL
    想加入一行代码吗?使用code标签 在介绍语言技术的网站中,必免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子: <code>var i=i+300;</code> 注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。 语法: <code>代码语言</code> 注:如果是多行代码,可以使用<pre>标签。
    查看全部
    0 采集 收起

    2018-03-22

  • 段落排版--字间距 如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现,如下面代码: h1{ letter-spacing:50px; } <h1>了不起的盖茨比</h1>
    查看全部
    0 采集 收起

    2018-03-22

  • GPL
    address标签,为网页加入地址信息 一般网页中会有一些地址信息需要在网页中展示出来,这些地址信息如公司的地址就可以<address>标签。 语法: <address>地址信息</address> 在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用css样式来修改它<address>标签的默认样式。
    查看全部
    0 采集 收起

    2018-03-22

  • 段落排版--行间距 这一小节我们来学习一下另一个在段落排版中起重要作用的行间距属性(line-height),如下代码实现设置段落行间距为1.5倍。 p{line-height:1.5em;} <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
    查看全部
    0 采集 收起

    2018-03-22

  • 使用单选框、复选框,让用户选择 两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1、type: 当type="radio"时,控件为单选框 当type="checkbox"时,控件为复选框 2、value:提交数据到服务器的值(后台程序PHP使用) 3、name:为控件命名,以备后台程序ASP、PHP使用 4、checked:当设置checked="checked"时,该选项被默认选中
    查看全部
  • 文本域,支持多行文本输入 当用户需要在表单中输入大段文字时,需要用到文本输入域。 语法: <textarea rows="行数" cols="列数">文本</textarea> 1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。 2、cols :多行输入域的列数。 3、rows :多行输入域的行数。 4、在<textarea></textarea>标签之间可以输入默认值。 注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替。
    查看全部
  • 文本输入框、密码输入框 语法: <form> <input type="text/password" name="名称" value="文本" /> </form> 1、type: 当type="text"时,输入框为文本输入框; 当type="password"时, 输入框为密码输入框。 2、name:为文本框命名,以备后台程序ASP 、PHP使用。 3、value:为文本输入框设置默认值。(一般起到提示作用)
    查看全部
  • GPL
    你输入的再多回车和空格也是显示不出来的。 总结:在html代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />。
    查看全部
  • GPL
    怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。 语法: xhtml1.0写法: <br /> html4.01写法: <br>       与以前我们学过的标签不一样,<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />。       讲到这里,你是不是有个疑问,想折行还不好说嘛,就像在word文件档或记事本中,在想要折行的前面输入回车不就行了吗?很遗憾,在html中是忽略回车和空格的,
    查看全部
  • 中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现: p{text-indent:2em;} 注意:2em的意思就是文字的2倍大小。
    查看全部
    0 采集 收起

    2014-10-02

  • GPL
    浏览器对<blockquote>标签的解析是缩进样式
    查看全部
    0 采集 收起

    2018-03-22

举报

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

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