HTML学习一

一、基础学习路线

主要学习PC端网站布局

最终网站: 购物静态网站

目的: 精通网页布局，也是我们前端人员的必备技能，为后面学习前端主流框架(Vue、React等等)打下坚实基础

1、HTML5基础

内容: 学习HTML5基础，主要学习最常见的没有兼容性的HTML标签。

2、CSS3基础

内容:学习CSS3基础，主要学习最常用的没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局。

3、H5C3提高

内容:学习HTML5新增的标签、CSS3样式。有一定兼容性，可以与未来更好的接轨、

4、项目——电商网站制作

内容: 综合以前学习知识点，贴近于实际开发，制作电商网站，完成首页、列表页、注册页制作。

目的: 学习网页制作实际开发制作流程规范。

二、HTML简介

1、html简介导读

目标:

1)能够说出网页的基本组成

2)能够说出什么是HTML

3)能够说出常用的浏览器

4)能够说出Web标准的三大组成部分

2、网页相关概念

1) 网页

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

网页: 网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页。常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件

2) HTML

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

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

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

所谓超文本,有两层含义:

1、它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)

2、它还可以从一个文件跳转到另外一个文件，与世界各地主机的文件连接(超级链接文本)

3) 网页的形成

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户。

流程: 前端人员开发代码 -> 浏览器显示代码(解析、渲染) -> 生成最后的web界面

4) 总结

网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件(后缀名为.html或.htm)

网页生成制作: 由前端人员书写html文件，然后浏览器打开，就能看到网页

HTML: 超文本标记语言，用来制作网页的一门语言，由标签组成的，比如图片标签、链接标签、视频标签等...

3、常用浏览器

1) 常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐(Firefox)、谷歌(Chorme)、Safari和Opera等，称为五大浏览器。

2) 浏览器内核

定义：负责读取网页内容，整理信息，计算网页的显示方式并显示页面(当作渲染引擎)

浏览器：IE 内核:Trident 备注:IE、猎豹浏览器、360极速浏览器、百度浏览器

浏览器：firefox 内核:Gecko 备注:火狐浏览器内核

浏览器：safari 内核:Webkit 备注:苹果浏览器内核

浏览器：chrome/Opera 内核:Blink 备注:Chrome/opera浏览器内核(Blink其实是Webkit的分支)

目前国内的一般浏览器都会采用Webkit/Blink内核，例如360、UC、QQ、搜狗等等

4、web标准

web标准是由W3C组织和其它标准化组织制定的一系列标准的集合。

W3C(万维网联盟)是国际最著名的标准化组织。

1) 为什么需要Web标准

原因: 浏览器不同，它们显示页面或者排版就有些许差异；遵循web标准可以让不同的开发人员写出的页面更标准、更统一

优点:

a、让web的发展前景更广阔

b、内容能被更广泛的设备访问

c、更容易被搜索引擎搜索

d、降低网站流量费用

e、使网站更易于维护

f、提高页面浏览速度

2) web标准的构成

定义: 主要包括结构(Structre)、表现(Presentation)和行为(Behavior)三个方面

结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML

表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS

行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

web标准提出的最佳体验方案: 结构、样式、行为相分离(简单理解: 结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中)