1. classes 和 IDs 的不同

    • class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
  2. HTML 元素 elements
    • 从开始标签（start tag）到结束标签（end tag）的所有代码。

    • 例子

      <title>peculiarly</title>
  3. What are tags?
    • The basic structure of an HTML document includes tags, which surround content and apply meaning to it.
    • demo: opening tag <head> and closing tag </head>
  4. What are forms?
    • <form> 标签用于创建供用户输入的 HTML 表单。
  5. What is a div?
    • <div> 可定义文档中的分区或节（division/section）。
  6. What is the difference between "pixels" and "ems"?
    • px像素（Pixel），相对长度单位。px 是相对于显示器屏幕分辨率而言的。

      • IE无法调整那些使用 px 作为单位的字体大小；
    • em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
      • em 的值并不是固定的；
      • em 会继承父级元素的字体大小。
  7. CSS 继承
    • inherit

    • 例子

      div{color: red;} .extra div{color: inderit;}
  8. 移动页面元素的两种 CSS 属性
    • float
    • position
  9. CSS 插入样式表的三种方法
    • 外部样式表(External style sheet)

      • 例子

        <head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
    • 内部样式表(Internal style sheet)

      • 例子

        <head>
<style>
    p {
        color: blue;
        margin-right: 20px;
        }
</style>
</head>

    • 内联样式(Inline style)

      • 例子

        <p style="color: blue; margin-right: 20px;">A paragraph.</p>

HTML and CSS basis的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS 弹性盒子 flex的三个属性：grow、shrink、basis

    flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...

  3. CSS 继承深度解析

    FROM ME: 之前在研究前端性能优化的时候,就有学习关于CSS中“善用CSS中的继承”. 原文:CSS Inheritance, The Cascade And Global Scope: You ...

  4. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  5. CSS弹性盒子的基本用法

    .container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...

  6. CSS（六）- 内容布局 - Flexbox

    Flexbox是CSS3提供的用于布局的一套新属性,是为了应对行内块.浮动和表格格式产生的问题而生的.其包含针对容器(弹性容器,flex container)和针对其直接子元素(弹性项,flex it ...

  7. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

随机推荐

  1. Android中实现日期时间选择器(DatePicker和TimePicker)

    利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...

  2. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_22-页面静态化-静态化测试-静态化程序测试

    测试service内些的静态化的方法 先新建一个测试类 模板的id 放到下拉的静态数据里面 这样这条数据 就是用用的轮播图005这个模板 把这条数据静态化 进入到断点里面.先获取数据模型 获取模板时 ...

  3. 福昕PDF电子文档处理套装软件中文企业版9.01

    下载地址:http://zbh.ustc.edu.cn/msiso/FoxitPDFEditor901_ZH_Setup.msi 激活码:A7000-010S0-RC900-XVF4R-9J5OM-W ...

  4. Cannon 60D 电池卡在电池槽了，拔不出来怎么办？

    事情是这样的,本来好好的电池在电池槽里的,后来拿去充电了,充满后就准备装回去,然后一个不小心,电池掉地上了,就看了一下没摔爆,所以也没特别留意有没有什么地方摔坏摔瘸角,然后就往相机里塞,突然就发现塞不 ...

  5. C#使用MPI进行高性能计算

    MPI.NET是用于Microsoft.NET环境的高性能.易于使用的消息传递接口(MPI)实现.mpi是编写在分布式内存系统(如计算集群)上运行的并行程序的事实上的标准,并且得到了广泛的实现.大多数 ...

  6. Java面试（一）

    2 什么是java虚拟机: 可以执行java字节码的虚拟机进程,而不需要为每一个平台单独重写或重新编译.虚拟机知道底层指令长度. 3 JDK,JRE区别: JRE是Java虚拟机,可以解释JAVA字节 ...

  7. Ubuntu14.04LTS下 JAVA+HADOOP

    首先在虚拟机中安装了Ubuntu14.04LTS 前期工作: 更新源.更新安装vim.安装vmtools工具.安装中文输入法 sudo apt-get update sudo apt-get inst ...

  8. 带你手写基于 Spring 的可插拔式 RPC 框架（四）代理类的注入与服务启动

    上一章节我们已经实现了从客户端往服务端发送数据并且通过反射方法调用服务端的实现类最后返回给客户端的底层协议. 这一章节我们来实现客户端代理类的注入. 承接上一章,我们实现了多个底层协议,procoto ...

  9. [LuoguP2151][SDOI2009]HH去散步_递推_矩阵乘法_图论

    HH去散步 题目链接:https://www.luogu.org/problem/P2151 数据范围:略. 题解: 数据范围好小,让人不禁想用一些毒瘤算法,但是失败了. 这种类似时间啊这种有点重复味 ...

  10. [OpenBenchMarking] AMD CPU 的性能简单对比

    来源: https://openbenchmarking.org/result/1710193-AL-EPYC7351P64 1. 2. 3. 4.