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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签

    查看全部
  • <div></div>

    <div>标签自定义块

    不可使用在标题

    查看全部
  • 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

    语法:

    <div>…</div>

    确定逻辑部分:

    什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。

    就可以使用<div>标签作为容器。

    查看全部
  • 文章的段落用<p>标签,那么文章的标题用什么标签呢?在本节我们将使用<hx>标签来制作文章的标题。
    标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
    语法:
    <hx>标题文本</hx> (x为1-6)

    查看全部
  • 这一小节讲解<span>标签,这个标签是没有语义的,它的作用就是为了设置单独的样式用的。

    如果现在我们想把下面的第一段话“美国梦”三个字设置成blue(蓝色),所以这样情况下就可以用到<span>标签了。

    如下面例子:

    <p>1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>

    语法:

    <span>文本</span>


    查看全部
  • 语法:

    <p>段落文本</p>

     注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中


    查看全部
  • transform: translate(-50%, -50%);

    坐标轴x轴是从右往左为正,y轴是从上往下为正

    查看全部
  • 第一个是:-height/2   最后一个是-width/2

    查看全部
  • 当设置绝对定位的方向为top和left时,margin中的bottom和right的值就毫无作用,只是习惯上设为0,其实设置margin:-100px也是同样的效果,甚至margin: -100px -200px 300px -100px效果也是一样的,只要关心margin中的top和left。

    当绝对定位方向为bottom和right时,同上。


    查看全部
  • 关于text-align:center设置块状元素的问题。

    若<p>慕课网</p>

    设置p{text-align;center;} 的作用是使得“慕课网”这三个字居中,而不是使得<p>元素居中(因为p元素除了包括“慕课网”这三个字外还包括这一整行的空白)。这样理解对吗?


    查看全部
  • 学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签的用途、标签在浏览器中的默认样式。

    标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等

    讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢?

    1. 更容易被搜索引擎收录。

    2. 更容易让屏幕阅读器读出网页内容。

    在后面的章节会带领大家学习了解html中每个标签的语义(用途)


    查看全部
  • 什么是代码注释?代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。

    语法:

    <!--注释文字 -->


    查看全部

  • a标签有的target属性,代表打开网页的方式。可选值为”_self和_blank”,默认值为_self,代表在当前页面打开链接,_blank代表在新窗口打开链接。

    查看全部
  • 下面这些标签可用在 head 部分:

    1、head标签为双标签,有尾标签,<head></head>

    2、head标签表示头部标签,通常用来嵌套metatitlestyle等标签。

    3、<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

    4、<meta charset="UTF-8">设置当前文件字符编码

    5、style标签:双标签中设置当前文件样式

    例如title标签:

    <head>
        <title>hello world</title>
    </head>

    <title>标签的内容“hello world”会在浏览器中的标题栏上显示出来


    查看全部
  •  <!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>之前闭合。


    查看全部

举报

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

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