Skip to content

Latest commit

 

History

History
109 lines (84 loc) · 5.06 KB

1.md

File metadata and controls

109 lines (84 loc) · 5.06 KB

网页编写基础

千里之行，始于足下。学习前端也是如此，我们从最基础的 HTML 和 CSS 开始学习。

学习目标

  • 能够记住 HTML 的基本结构
  • 能够知道并简单运用 HTML 的常用标签及其属性
  • 知道 CSS 类选择器、ID 选择器、标签选择器的区别
  • 能够知道并简单运用 CSS 的常用属性
  • 能够依据简单的设计稿编写网页

概念扫盲

以下概念了解即可，无需死记硬背。

  • HTML 是超文本标记语言（HyperText Markup Language）的缩写，是用来描述网页的一种语言。
  • CSS 是层叠样式表（Cascading Style Sheets）的缩写，是用来描述网页样式的一种语言。
  • HTML 负责网页的结构，CSS 负责网页的样式。
  • 在 CSS 中，多个指向同一个目标的样式规则会按照一定的优先级进行组合，这种机制称为「层叠」。

学习资料

当遇到不懂的地方时，首先要尝试自己解决，可以去使用百度、谷歌等搜索引擎寻求帮助。具备利用搜索引擎解决自己问题的能力非常非常重要！如果还是不会，可以直接在群里提问。

HTML

  • HTML 文档的基本结构
    • 请重点关注「实例解析」「什么是 HTML？」「HTML 标签」「HTML 元素」「HTML 网页结构」几个小节。
    • 在菜鸟教程的页面底部，会有「学习笔记」板块，可以从他人的笔记中学习到一些正文中没有的知识。
  • HTML 元素
    • 请重点关注「HTML 元素语法」「嵌套的 HTML 元素」「HTML 实例解析」「HTML 空元素」几个小节。
    • 不要忘记结束标签哦！
  • HTML 标题
    • 主要内容：HTML 标题、HTML 水平分隔线、HTML 注释。
  • HTML 段落
    • 主要内容：HTML 段落、HTML 换行。
  • HTML 文本格式化
    • 主要内容：加粗（<b>）、斜体（<i>）、小号字（<small>）、删除线（<del>）、行内代码（<code>）、引用（<blockquote>）。
  • HTML 超链接
    • 关注如何指定目标链接，以及如何在新标签页打开链接。
    • 页内跳转（锚点）：<a href="#id">。
  • HTML 图像
    • 关注如何插入图片，以及如何指定图片的宽、高。
  • HTML 列表
    • 主要内容：有序列表（<ol>）、无序列表（<ul>）。
  • HTML 区块
  • （选读）HTML 表格
    • 表格相关的标签是一类比较复杂的标签，可以先了解，不要求掌握。
  • HTML 头部
    • 此部分的内容简单了解即可。

CSS

  • 浏览器会给一些 HTML 元素默认的样式，我们可以使用 CSS 来覆盖这些默认样式。
  • CSS 语法
    • 请重点关注「CSS 实例」「CSS 注释」两个小节。
  • CSS 选择器
    • 除了在「CSS 语法」中用到的标签选择器，还有类选择器（.class）、ID 选择器（#id）。
  • CSS 常用基础属性
    • 小贴士：可以使用诸如「CSS color」的关键词来在网络上搜索某个属性的用法。
    • color
    • background / background-color
    • text-align
    • font-size
    • font-weight
    • border
    • margin
    • padding
    • height
    • width
    • display
  • CSS 常用伪类
    • :hover
  • CSS !important 规则
  • CSS 对齐

作业

将 设计图.png 文件还原成 HTML/CSS 文件（包括导航条、文字）。

要求

  1. 通过自己的理解，将设计稿分解成合理的部分
  2. 使用外联 CSS（即 CSS 单独放在一个文件里，不直接写进 HTML）
  3. 在导航栏点击能跳转至相应位置。
  4. HTML、CSS 编写规范，代码整洁，缩进正确，注释充分。
  5. 不允许使用图形化工具制作界面。也就是说你必须手写 HTML 和 CSS。

设计稿

素材

提示

不必拘泥于设计图，可以根据自己的理解进行调整。

主要考察基础布局（页面主体居中对齐）和 CSS 的基本使用。

提交方式

请将代码提交至 west2-online-reserve/collection-frontends，提交方法可以参考该仓库中的说明。