IFE前端 - Task0001

发表于 | 分类于

HTML、CSS基础教程

任务目的

掌握HTML、CSS基础知识、能够熟练运用HTML、CSS编写页面

Start

1. 建立你的第一个网页

1.1 期望达成

  • 了解什么是Web: Web 2.0是一种新的互联网方式，通过网络应用（Web Applications）促进网络上人与人间的信息交换和协同合作，其模式更加以用户为中心。典型的Web 2.0站点有：网络社区、网络应用程序、社交网站、博客、Wiki等等。
  • 了解什么事HTML: HTML 是一种标记语言（markup language）。它告诉浏览器如何显示内容。HTML把内容（文字，图片，语言，影片等等）和表现（这个内容是如何显示，比如文字用什么颜色显示等等）分开。HTML使用预先定义的元素集合来识别内容形态。 元素包含一个以上的标记来包含或者表达内容。标记利用尖括号表示，而结束标记（用来指示内容尾端）则在前面加上斜线。
  • 了解一些基本的HTML语句及标签: 、、

    …
  • 能够写出自己的第一个HTML

1.2 任务描述

创建一个HTML文件，比如task0001.html文件，在里面实现一些代码，实现你的第一个网页。

  • 一个一级标题
  • 一个无序列表
  • 一个二级标题
  • 一个段落
  • 一个图片

1.3 任务代码

1
2
3
4
5
6
7
8
9
10
11
12
<h1>Louismelo</h1>
<ul>
    <li><a href="task0001.html">Homepage</a></li>
    <li><a href="https://github.com/LouisMelo">Blog</a></li>
</ul>
<h2>Louis love snow 4-ever~</h2>
<p>昔日我如此苍老，现在却风华正茂！————Bob Dylan</p>
<img src="https://avatars3.githubusercontent.com/u/18358511?s=460&v=4" alt="">

2. 给你的网页加点样式

2.1 期望达成

  • 了解什么是CSS: Cascading Style Sheets是一种用来为结构化文档添加样式的计算机语言
  • 了解HTML与CSS是如何一起工作的: 首先浏览器会将标记语言和CSS转换成DOM，融合相应的文档内容和样式表，然后浏览器把DOM展示出来成为网页
    How TO Work
  • 了解基本的CSS语法: 每一条rule由一个selector作为开头，后面跟着花括号，花括号内的每一条语句称为一个declaration，每个declaration由一个property-value pairs构成
  • 尝试使用几个简单的CSS属性

2.2 任务描述

学习以下CSS是如何运作的，然后创建一个task0001.css文件，并在task0001.html中引入它。

  • 让一级标题的颜色变成蓝色
  • 二级标题的文字大小变成14px
  • 段落的文字大小变成12px，文字颜色是黄色，带一个黑色的背景色
  • 图片有一个红色的，2px粗的边框

2.3 任务代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
h1 {
    color: dodgerblue;
}
h2 {
    font-size: 14px;
}
p {
    font-size: 12px;
    color: yellow;
    background-color: black;
    width: 465px;
}
img {
    border-style: solid;
    border-width: 2px;
    border-color: red;
}

3. 稍微放松一下

3.1 期望达成

  • 对于HTML及CSS的发展史有一个大概的了解
  • 明白HTML5和之前的版本大概有什么区别

4. CSS基础

4.1 期望达成

  • 掌握CSS各种选择器: simple selectors, attribute selectors, pseudo-classes and pseudo-elements, combinators and multiple selectors
  • 掌握CSS的继承、层叠、样式优先级机制

5. 让页面样式丰富起来

5.1 期望达成

  • 掌握文本、文字、链接相关的样式属性
  • 掌握背景属性
  • 掌握列表相关的样式属性
  • 深入了解行高属性

5.2 任务描述

快速实践以下文本相关的所有属性内容:

  • text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.
  • text-transform: 对于英文生效，对于中文不生效，主要是大小，小写，首字母大写以及等宽字体几个option.
  • text-decoration: Sets/unsets text decorations on fonts (you’ll mainly use this to unset the default underline on links when styling them.)
  • text-align: The text-align property is used to control how text is aligned within its containing content box.
  • word-spacing: The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text.对于中文而言，每个字之间的间距是由letter-spacing决定的
  • color: The color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property).
  • white-space: Define how whitespace and associated line breaks inside the element are handled.
  • font:
  • font-family:
  • font-size:
  • font-weight:
  • font-face: 可以使用自己定义的字体

6. 盒模型及定位

6.1 期望达成

  • 掌握块状元素、内联元素、和内联块元素的概念与区别
    • 块状（block）元素: <div>、<p>、<h1>、<form>、<ul>、<li>
      1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
      2. 元素的高度、宽度、行高以及顶和底边距都可以设置。
      3. 元素宽度在不设定的情况下，是它父容器的100%（和父级元素的宽度一致），除非设定一个宽度。
    • 内联（inline）元素: <span>、<a>、<label>、<strong>、<em>
      1. 和其他元素都在一行上。
      2. 元素的高度、宽度及顶部和底部边距不可设置。
      3. 元素的宽度就是它包含的文字或图片的宽度，不可改变.
    • 内联块元素: <img>、<input>
      1. 和其他元素都在一行上
      2. 元素的高度、宽度、行高以及顶和底边距都可以设置。
  • 掌握盒模型的所有概念，学会如何计算各种盒模型相关的数值: content、padding、margin
  • 掌握position的相关知识
    • 流动模型(flow): 默认的网页布局模式
      1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
      2. 内联元素都会在所处的包含元素内从左到右水平分布显示
    • 浮动模型(float): 让块状元素并排显示
    • 层模型(layer): 像是图像软件PhotoShop中非常流行的图层编辑功能一样
      1. 绝对定位: position: absolute 这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
      2. 相对定位: position: relative 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动（其他元素依照偏移前的元素位置往后进行排列）。
      3. 固定定位: position: fixed 表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
  • 掌握float的相关知识: 浮动模型，让块状元素并排显示
  • 掌握基本的布局方式
    • 块级元素居中显示: margin: 0 auto 如果想要设置距离顶端的边距的话，可以设置为margin: 80px auto auto，这里必须要写成top|(left and right)|bottom的形式才可以。这里还有一个问题，就是当浏览器宽度缩小时，会形式左右的滚动条，而文字本身不会自适应。**解决方法: 将width: 600px替换为max-width: 600px，尤其是移动设备上的显示尤其重要。
    • 盒子模型的宽度: box-sizing: border-box会使得边框和内边距不再增加整个盒子的宽度，这能让我们更好的控制盒子的大小。
    • position: 太多了，详见这里！
    • inline-block与float: 它们都可以用来创建多个网格铺满浏览器，不过float的方式更加困难一点，需要在后面清楚浮动才可以。
  • 了解Grid、Flexbox等布局方式: 新的flexbox布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。