01-基础班内容
-
学习目标：
基础班主要学习PC端 站布局
最终 站：品优购静态 站
目的：精通 页布局，也是我们前端人员的必备技能。为后面学习JavaScript打下坚实基础。
-
学习路线：
HTML5基础：课时比例为20%；学习HTML5基础，主要学习最常见的没有兼容性的HTML标签。
CSS3基础：课时比例50%；学习CSS3基础，主要学习最常用没有兼容性的CSS样式，利用前面学习的标签完成传统PC端 页布局。—综合案例：传统企业 页制作。
H5C3提高：课时比例：10%；学习HTML5新增的标签、CSS3样式，有一定兼容性，可以与未来更好的接轨。
项目-品优购电商 站：课时比例为20%；综合以前学习知识点，贴近于实际开发，制作品优购电商 站，完成首页、列表页、注册页制作。目的：学习 页制作实际开发制作流程规范。
02-HTML简介
-
目标
能够说出 页的基本组成
能够说出什么是HTML
能够说出常用的浏览器
能够说出Web标准的三大组成部分
-
页
1.什么是 页/p>
站是指因特 上根据一定规则，使用HTML等制作的用于展示特定内容相关的 页集合。
页是 站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
页是构成 站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的 页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。
2.什么是HTML/p>
HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述 页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）。
标记语言是一套标记标签（markup tag）。
例子：在记事本中输入<img src=”1.png”>,把拓展名修改为.html,用浏览器打开后即可看到 页中有一张图片。
所谓超文本，有2层含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
2.它还可以从一个文件跳转到另一个文件,与世界各地主机的文件链接（超文本链接文本）。
3. 页的形成
页是由 页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码—>浏览器显示代码（解析、渲染）—>生成最后的Web页面
-
常用浏览器
浏览器是 页显示、运行的平台。常用的浏览器有IE(IE和Edge都同属微软公司)、火狐(Firefox)、谷歌（Chrome）、Safari和Opera等；
平时称为五大浏览器。
浏览器内核(渲染引擎）：负责读取 页内容，整理讯息，计算 页的显示方式并显示页面。
目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等。
-
Web标准（重点）
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维 联盟）是国际最著名的标准化组织。
1.为什么需要Web标准
（浏览器不同，它们显示页面或者排版就有些许差异。 ）
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
1.让Web的发展前景更广阔。
2.内容能被更广泛的设备访问。
3.更容易被搜索引擎搜索。
4.降低 站流量费用。
5.使 站更易于维护。
6.提高页面浏览速度
Web标准的构成
主要包括结构（structure）、表现（Presentation）和行为（Behavior）三个方面。
Web标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
03-HTML标签导读
-
学习目标
能够说出标签的书写注意规范
能够写出HTML骨架标签
能够写出超链接标签
能够写出图片标签并说出alt和title的区别
能够说出相对路径的三种形式
04-HTML语法规范
1.基本语法概述
1.HTML标签是由尖括 包围的关键词，例如<html>。
2.HTML标签通常是成对出现的，例如<html>和</html>,我们称为双标签 。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例如<br />,我们称为单标签。（直接写<br>也可）
2.标签关系
双标签关系可以分为两类：包含关系和并列关系。
包含关系–(父子关系）：
并列关系–(兄弟关系)：
05-HTML 基本结构标签
每个 页都会有一个基本的结构标签（也称为骨架标签），页面内容是在这些基本标签上书写。
HTML页面也称为HTML文档。
| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 |
注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的页面标题 |
| <body></body> | 文档的主体 |
元素包含文档的所有内容，页面内容基本上都是放到body里面的 |
06-(开发工具)–VSCode工具创建页面
在vscode中保存时文件名后缀要改为.html
输入！，快捷获得html骨架结构。
选择第一个！，获得如下页面
运行代码要在拓展模块安装open in browser插件
运行后的界面
VSCode的使用
vscode使用技巧：ctrl和+ —– 放大代码
ctrl和- —– 缩小代码（ctrl加鼠标滚轮也可）
导航栏 —- 查看 —- ctrl+Z (换行）
一段代码，光标定在其中间，ctrl+c后，换行可无限粘贴同样文本
- 双击打开软件
- 新建文件（ Ctrl + N ）
- 保存（ Ctrl + S），注意移动要保存为.html文件
- 生成页面骨架结构（输入！按下Tab键）
- 利用插件在浏览器中预览页面：单击鼠标右键，在弹出的窗口中点击“Open In Default Browser”。
07-VSCode插件使用
08-DOCTYPE和lang以及字符集的作用
1.文档类型声明标签
<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示 页。
注：
- <DOCDYPE>声明位于文档中最前面的位置，处于<html>标签之前
- <!DOCTYPE>不是一个HTML标签，他就是一个文档类型声明标签
2.lang语言种类
用来定义当前文档显示的语言
- en定义语言为英语
- zh-CN定义语言为中文
3.字符集
字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8″编码，尽量统一写成标准的“UTF-8″,不要写成”utf8“或”UTF8″。
09-标签语义
标签语义简单理解就是标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方放上一个最为合理的标签，可以让页面结构更清晰。
10-HTML常用标签（上）
1.标题标签<h1>-<h6>（重要）
为了使 页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级 的 页标题，即<h1> – <h6>。
<h1>我是一级标题</h1>
单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
特点 ：
- 加了标题的文字会变的加粗，字 也会依次变大。
- 一个标题独占一行
例子：
2.段落标签（重要）
在 页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个页面分为若干个段落。
标签语义：可以把HTML文档分割为若干段落。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保有空隙
例子：
3.换行标签（重要）
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br />
标签语义：强制换行
特点：
- <br />是个单标签
- <br />标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
4.课堂案例：读书摘抄
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！