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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • <header>标签定义头部区域


    查看全部
  • <section>我是一个区域</section>

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

    语法:<div>…</div>

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


    查看全部
  • 标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
    语法:
    <hx>标题文本</hx> (x为1-6)

    h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。

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

    <span>文本</span>

    查看全部
  • 语义化,即明白每个标签的用途(在什么情况下使用此标签合理)

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

    语法:

    <!--注释文字 -->


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

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

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

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

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

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


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


    查看全部
  • 1. 标签由英文尖括号<>括起来,如<html>就是一个标签。

    2. html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/

    如:

    (1) <p></p>

    (2) <div></div>

    (3) <span></span>

    3. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。

    4. HTML标签不区分大小写,<h1><H1>是一样的,但建议小写,因为大部分程序员都以小写为准。

    查看全部
  • 1、css是用来修饰html样式的

    2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css

    3、html+css构成了我们网页的基本页面结构和样式


    查看全部
  • justify-content属性,本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解,属性值分别为:

     justify-content: flex-start | flex-end | center | space-between | space-around;

    flex-start:交叉轴的起点对齐

    flex-end:右对齐

    center: 居中

    space-between:两端对齐,项目之间的间隔都相等。

    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    查看全部
  • align-items属性,本属性定义了项目在交叉轴上的对齐方式。属性值分别为:

    align-items: flex-start | flex-end | center | baseline | stretch;

    flex-start:默认值,左对齐

    flex-end:交叉轴的终点对齐

    center: 交叉轴的中点对齐

    baseline:项目的第一行文字的基线对齐。

    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    查看全部
  • 在代码中,需要空格,不然会显示叉

    查看全部
  • 层模型有三种形式:

    1、绝对定位(position: absolute)

    2、相对定位(position: relative)

    3、固定定位(position: fixed)


    查看全部

举报

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

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