Web前端基础-HTML&CSS

• HTML
  • HTML简介
  • HTML5
  • Markdown
• CSS
  • CSS简介
  • CSS盒子模型
  • CSS选择器
  • CSS Next
  • CSS 预/后处理器
• BootStrap
  • 栅格系统 & 响应式布局
• 作业

HTML简介

什么是HTML

• 全称 Hyper Text Markup Language（超文本标记语言）
• 描述网页的标记语言
• HTML Wiki

HTML中的几个概念

• 元素
• 标签
• 属性
• <a href="https://newegg.com/">新蛋网</a>

HTML5

所谓HTML5

• HTML5是HTML的最新修订版本
• 广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合
• HTML5 Wiki

HTML5语义化标签

• <section>
• <article>
• <header>
• <footer>
• <nav>
• <video>
• <audio>
• <canvas>
• 等等...

HTML5新的API

• 地理位置API
• 本地数据库（WebSql、IndexedDB）
• 文件处理
• 等等...

Markdown

一种轻量级的标记语言，使用易读易写的纯文本格式编写文档。

语法

# 一级标题

## 二级标题

###### 六级标题

- 无序列表
- 无序列表

1. 有序列表
2. 有序列表

> 我是引用文字

[我是一个链接](http://xxx.com)

![我是一个图片](http://img.com)
            

CSS简介

什么是CSS

• 全称 Cascading Style Sheets（层叠样式表）
• 用来为 结构化文档 添加样式的计算机语言
• CSS Wiki

CSS盒子模型

盒子模型

CSS选择器

基本选择器

• 类型选择器（如 div, p）
• 类选择器（如 .xxx）
• ID选择器（如 #xx）
• 属性选择器（如 [xxx]）
• 万能选择器（如 *）

伪类选择器

• :link
• :visited
• :hover
• :active
• :focus
• :target（元素被URL标记）
• :lang（向带有指定lang属性的元素添加样式）

伪元素选择器

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection（鼠标选择）

组合选择器

• A > B
• A ~ B
• A + B（紧挨着）
• A B

属性选择器玩法

选择器优先级

• Inline > ID > Class > 属性 > 标签 > 浏览器默认
• 如果使用 !important，则优先级最高
• 优先级一致，靠加载顺序来确定，后加载的覆盖之前的

CSS Next

CSS3/4

• 在CSS2.1标准之后，CSS又增加了较多特性
• 至今，CSS3也还没成为标准，但已被大多数浏览器实现
• 因此，我们用CSS Next来包含CSS3 / CSS4 等的一些特性

CSS Next新特性

• 新增了伪元素选择器（如 :nth-child，:not）
• Animation（动画，keyframes）
• Transition（过渡）
• Transform（2D/3D变换）
• 等等...

CSS 预/后处理器

栅格系统 & 响应式布局