【前端】HTML（学习笔记）

一、网页

1、什么是网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。

2、什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言 (markup language)。

标记语言是一套标记标签 (markup tag)

所谓超文本，有 2 层含义：

1. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）。
2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

二、常用浏览器

浏览器内核（渲染引擎）： 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident
firefox	Gecko	火狐浏览器内核
Safari	WebKit	苹果浏览器内核
Chrome/Opera	Blink	Chrome、Opera（Blink是WebKit分支）

三、Web标准

1、Web标准概述

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

2、 Web 标准的构成

结构（Structure） 、表现（Presentation）和行为（Behavior）

标准	说明
结构	结构用于网页元素进行整理和分类（HTML）
表现	表现用于设置网页元素的板式、颜色、大小等外观样式（CSS）
行为	行为是指网页模型的定义及交互的编写（JS）

Web 标准提出的最佳体验方案：结构、样式、行为相分离。

结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中

一、Emmet 语法概述

快速生成HTML结构语法

快速生成CSS样式语法

二、快速生成HTML结构

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $
7. 如果想要在生成的标签内部写内容可以用 { } 表示

三、快速生成CSS样式

w200 按tab 可以 生成 width: 200px;

\lh26px 按tab 可以生成 line-height: 26px;