Skip to main content

HTML和CSS

Mentor

@zkc

什么是 MDN?

我们是一个开放包容的开发者社区,目标是为更好的互联网提供资源,无关品牌、浏览器或平台。任何人都可以参与到其中,你的每一份贡献都会让我们更强大。与我们一起,持续推动互联网技术向更伟大的方向革新——就在这里,与你一起。

—— MDN

MDN Web Docs 旧称为 Mozilla Developer Network,是一个 web 工程师的开发者社区,有一个免费且全面的文档资料库和新手指南。可以把它当作是一本词典或是百科,是每个前端开发者必读/必查/必用的网站。

MDN:https://developer.mozilla.org/

什么是 HTML?

HTML(HyperText Markup Language,超文本标记语言)是一种用于创建网页的标准标记语言。常与 CSS, JavaScript 一起被用于设计网页、网页应用程序等。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。

HTML 中结构化地定义了很多的元素,它们有着树型结构关系,是构建网页的基石。

什么是 CSS?

如果说 HTML 定义了网页骨架和躯干,那么 CSS 就定义了身体胖瘦和衣着。(x)

CSS(Cascading Style Sheets,层叠样式表)是用来给结构化文档(如 HTML)添加样式(如字体、间距、颜色等)的。

一些需要关注的地方:

  • CSS 属性在 HTML 元素中是怎么继承的?
  • Flexbox
  • CSS 选择器、伪类和伪元素
  • Accessibility(有些 HTML 元素或者 CSS 属性可能在某些浏览器不可用)
  • Responsive(如何适应不同屏幕尺寸?)
  • 元素重叠时的遮盖关系

css动画

可以参考:使用 CSS 动画 - CSS(层叠样式表) | MDN

动动手

试着自己用 HTML 和 CSS 写一个简单的静态网页吧!

  • 试着修改网页标题和 favicon;
  • 试着使用不同的 flexbox 布局、嵌套 flexbox;
  • 试一试各种你喜欢的样式(边框、圆角、阴影、间距、渐变等等);
  • 试一试不同的字体、字体大小、字体样式、字体颜色;
  • 试着给某个元素添加交互,如 hover 时变色;
  • 试试插入图片;
  • 试试使用 icon;
  • ……

思考题

【1】

看看2005年的网易新闻吧

https://web.archive.org/web/20050101092916/https://news.163.com/

  • 那个年代前端常用技术栈是什么?
  • F12看看,如何模拟<div>的布局的?

【2】

假如你现在正在编写一个页面上的组件,为了实现设计稿上的效果,一般有两种编写思路:

  1. 使用各色HTML标签,并结合各标签的属性实现
  2. 使用单一的<div><span>等 Division 标签,并主要使用CSS进行样式调节

两种方式各有什么优劣?你更倾向于使用哪一种?为什么?(你可以在有一定开发经验后再来看看自己的答案)