【H5/CSS】基本介绍与了解

1.网页

1.1 什么是网页

网站是网页的集合，网页是构成网站的基本元素，常用html格式文件

1.2 什么是HTML

HTML 是 超文本标记语言（Hyper Text Markup Language），一种标记语言 （markup language），即一套标记标签（markup tag）

超文本的意思：

1. 不限于文本内容，可以加入图片、声音、动画等内容
2. 使用超链接，从一个页面跳到另一个页面

1.3 网页的形成

---

2.常用浏览器

Firefox、IE/Edge、Chrome、Safari、Opera

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

浏览器	渲染内核	备注
IE/Edge	Trident	百度浏览器、360极速浏览器
Safari	Webkit/Webkit2	苹果浏览器、QQ
Chrome	Chromium(Webkit); Blink	谷歌浏览器
Firefox	Gecko	火狐浏览器
Opera	Presto;Blink	Blink是Webkit的一个分支

---

3.Web标准

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

3.1 为什么需要Web标准

主要因为不同浏览器显示同一个页面或排布有差异。

3.2 Web标准的构成

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层设置样式，而最终我们能看到的知识网页的最上层，而下层对于我们来说是被屏蔽了。
SPB

标准	说明
结构（Structure）	结构用于对网页元素进行整理和分类，比如html
表现（Presentation）	设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为（Behavior）	指网页模型的定义及交互的编写，比如JS

最好把这个三个构成分开写到对应的文件

3.3 为什么要使用语义化标签？

实际上单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等。之所以看到样式，也即页面的渲染效果，是因为每个浏览器都有默认的样式。

3.3.1 举例

<h1>~<h6>标题与<hgroup>标题组都是属于同一个标题块

实际上就算不用HTML也可以达到它的显示效果，但是语言不好区分的话，就不容易理解。

3.3.2 优点

• 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。
• 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
• 有利于构建清晰的机构，有利于团队的开发、维护

行内与块内标签

布局栏标签

参考

视频P4~P6：
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动

前端面试题宝典