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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 加入一行代码的标签为<code> <pre>标签为你的网页加入大段代码.. <pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。 语法: <pre>语言代码段</pre> 如下代码: <pre> var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); } </pre> 在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入<br>签,空格需要输入  注意:<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。 ★ 1、可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。 2、pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。 3、<pre> 标签中的特殊符号被转换为符号实体,比如 "<" 代表 "<",">" 代表 ">"。另外,请注意当我们在 <pre> 标签中使用了链接,也就是 <a> 标签。见代码快照。 ◆ 提示和注释 提示:制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。 提示:如果您希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,请使用符号实体来表示特殊字符,比如 "&lt;" 代表 "<","&gt;" 代表 ">","&amp;" 代表 "&"。 提示:我们甚至可以把 <pre> 标签与 <code> 标签结合起来使用,以获得更加精确的语义。
    查看全部
    0 采集 收起

    2018-03-22

  • padding和margin的区别,padding在边框里,margin在边框外。
    查看全部
  • 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有: <img>、<input>
    查看全部
  • inline-block元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶和底边距都可设置。
    查看全部
  • 介绍语言技术的网站中,必免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子: <code>var i=i+300;</code> 注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。 语法: <code>代码语言</code> 注:如果是多行代码,可以使用<pre>标签。 code标签: 1、code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式,那么这个<code>标签就是为软件代码编写者设计的, code标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来。 2、code标签的应用,应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。<code> 标签的功能有:将文本变成等宽字体;还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能,将来浏览器可能会根据自己的实际情况添加效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某 些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。 pre标签: 1、pre标签的定义,<pre>标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。同样,pre标签的一个常见的应用便是用来保存计算机中的源代码文本。 2、pre标签的功能,pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是,需要注意的是, 可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。 当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。
    查看全部
    0 采集 收起

    2018-03-22

  • 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有: <img>、<input>
    查看全部
  • 字母间隔letter-spacing:50px; 单词间距word-spacing
    查看全部
    0 采集 收起

    2015-01-20

  • text-decoration:line-through 删除线
    查看全部
    0 采集 收起

    2015-01-20

  • Microsoft Yahei
    查看全部
  • 在html中,<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从页使用div元素具有内联元素特点。 内联元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
    查看全部
  • 、selected="selected": 设置selected="selected"属性,则该选项就被默认选中。
    查看全部
  • h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1>
    查看全部
    0 采集 收起

    2018-03-22

  • 元素分类--内联元素 在html中,<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从页使用div元素具有内联元素特点。 内联元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。 小伙伴们你们观查一下右侧代码段,有没有发现一个问题,内联元素之间有一个间距问题,这个问题在本小节的wiki中有介绍,感兴趣的小伙伴可以去查看。
    查看全部
  • 块级元素特点: 1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行) 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
    查看全部
  • <address>标签 为网页加入地址信息 一般网页中会有一些地址信息需要在网页中展示出来,这些地址信息如公司的地址就可以<address>标签。 语法: <address>地址信息</address> 如: <address>北京市西城区德外大街10号</address> 在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用css样式来修改它<address>标签的默认样式。 ※ 定义和用法 <address> 标签定义文档或文章的作者/拥有者的联系信息。 如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。 如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。 <address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。 ※ 提示和注释 提示:<address> 标签不应该用于描述通讯地址,除非它是联系信息的一部分。 提示:<address> 元素通常连同其他信息被包含在 <footer> 元素中。 ※ 实例 Example.com 的联系信息: <address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br /> Visit us at:<br /> Example.com<br /> Box 564, Disneyland<br /> USA </address> ★该标签会自动另起一行显示地址信息。
    查看全部
    0 采集 收起

    2018-03-22

举报

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

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