HTML & CSS

HTML & CSS 到底是什么，有什么用？

它们是两门语言，HTML + CSS + Javascript = 网页

• HTML：Hyper Text Markup Language 超文本标记语言：定义网页中有什么
• CSS：Cascading Style Sheets 层叠样式表：定义网页中的东西长什么样子

术语

1. web：互联网

2. w3c：万维网联盟，非盈利性的组织

    w3.org：为互联网提供各种标准。

3. XML：可扩展的标记语言：extension markup language，用于定义文档结构的

什么是HTML？

HTML是W3C组织定义的语言标准：HTML是用于描述页面结构的语言

结构：有什么东西，该东西表示什么含义

• HTML：Hyper Text Markup Language，超文本标记语言

元素（标签、标记）：

• 整体：element （元素）
• 元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性
• 属性 = 属性名 + 属性值

属性的分类：

• 局部属性：某些元素特有的属性
• 全局属性：所有元素通用

```html

<meta charset="UTF-8">

```

有些元素没有结束标记，这样的元素叫做：**空元素**

空元素的两种写法：

1. ```<meta charset="UTF-8">```

2. ```<meta charset="UTF-8" />```

什么是CSS？

CSS是W3C定义的语言标准：CSS是用于描述页面展示的语言

CSS决定了页面长什么样子

• CSS规则 = 选择器 + 声明块

```css
h1{
    color:red;
    background-color:lightblue;
    text-align: center;
}
```

选择器：选中元素

1. ID选择器：选中的是对应id值的元素

2. 元素选择器

3. 类选择器

CSS代码书写位置

1. 内部样式表

• 书写在style元素中

2. 内联样式表，元素样式表

• 直接书写在元素的style属性中

3. 外部样式表[推荐]

• 将样式书写到独立的css文件中

1). 外部样式可以解决多页面样式重复的问题

2). 有利于浏览器缓存，从而提高页面响应速度

3). 有利于代码分离（HTML和CSS），更容易阅读和维护

执行HTML CSS

HTML、CSS -> 浏览器内核 -> 页面

浏览器：

1. shell：外壳

2. core：内核（JS执行引擎、渲染引擎）

• IE: Trident
• Firfox: Gecko
• Chrome: Webkit / Blink
• Safari: Webkit
• Opera: Presto / Blink