豚鼠学习HTML前端第一周

一、第一部分

简介：第一部分主要带领初学者了解html和css的具体功能和一些基本操作，以及初学者对应需下载的软件，调试好软件配置，为后面的学习做铺垫。

1.1HTML,CSS系列导学

HTML,CSS系列导学部分主要说明编写html，css的流程以及一些后面学习的内容，让初学者对html以及css做一个大体的认识。

1. 拨云见日
   往后学习前端的主要内容包含html，css，切图流程，pc企业布局，pc游戏布局等
2. 溯求本源
   在我们学习完基础的前端技能后，我们将学习html，css的拓展以及html5语法，css3语法，兼容与hack等（不同的浏览器对CSS的解析不同，会导致生成的页面效果不同，这时候需要编写额外代码兼容所有游览器，这个编写过程叫做hack。）
3. 风生水起
   我们需要学习弹性布局，网格布局，移动端布局，响应式布局，Bootstrap等来让显示界面更加舒适与规则（Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。）
4. 巧夺天工
   学习内容中我们需要了解预编译css，postcss，css架构，高级功能，css与js交互，让我们能更好的让语言之间相互配合（postcss 是一个通过 js 插件来转换 css 的工具，通过这些插件可以支持变量和混合，可以通过追加浏览器前缀生成兼容性的样式，也可以通过 polyfill 把新的样式特性处理成通用的样式，可以使用 css 模块以及样式的规则校验。）

1.2什么是HTML和CSS?

什么是html和css主要内容是让我们对html与css,如何去写代码，写到哪里做一个简单了解。

1. 什么是HTML？：HTML，即超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
   HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
2. 什么是CSS?: CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
   CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
3. html与css之间的关系：html与css都是我们用来创建网页的语言，Web服务器存储并提供HTML和CSS创建的网页。浏览器获取页面,并根据HTML和CSS显示网页的内容，html（超文本标记语言）用来建立网页的结构，而css（层叠样式表）用来控制html的表现。
4. html与css之间的区别：①html是网页的结构，而css是网页的样式②html由围绕内容的标签组成，而css由一个声名块继承的选择器组成③html和css的注释格式不同④html文件可以包含css代码，而css样式表绝对不能包含html代码.
5. 如何写代码？又写到哪里？：浏览器把代码解析后就是我们所看到的网站，通过鼠标右键悬着查看网页源代码就可以看到对应的代码，一个网站是由许多个网页组成，每一个网页就是一个.html文件，我们可以通过电脑的新建文本文档来编写，利用一个不错的编译器是个更好的选择。
   例如：

             changshu.html

1.3宇宙第一编辑器Vs Code

宇宙第一编辑器Vs Code的主要内容是让我们对编写html，css代码的软件及其部分快捷功能和如何使用进行一个初步的了解。

1. Vs Code简介：Vs Code，全称Visual Studio Code，来着微软，是一个开源的，基于Electron的轻量代码编辑器，支持多种语言和文件和格式的编写。
2. 插件介绍：中文语言包，open in browser，view in borwser ，后两者插件可以让我们在软件中通过鼠标右键快捷的在浏览器中打开。
3. 部分快捷方式：ctrl+s 保存 　ctrl+z撤销　
   　　　　　　　ctrl+a 全选 　ctrl+v 粘贴
   　　　　　　　ctrl+x 剪切 　ctrl+y 前进
   　　　　　　　ctrl+c 复制　 shift+end 从头部选中一行
   shift+home 从尾部选中一行 　 shift+alt+↓快速复制一行　alt+↑或↓ 快速移动一行
   　　　　　　　tab 向后缩进　tab+shift 向前缩进
   　　　　　alt+鼠标左键 多光标 ctrl+d 选择相同元素的下一个

• -通过上图四个按钮可以快捷创建文件或文件夹

通过搜索可以找到我们想要的代码

1.4chrome浏览器

chrome浏览器部分主要介绍市面上流行的浏览器以及好的浏览器选择

1. 推荐浏览器：Google Chrome浏览器，是市面上占比最大的浏览器
2. 浏览器排行：第一 chrome浏览器
   　　　　　　第二 Safair浏览器
   　　　　　　第三 Edge浏览器
   　　　　　　第四 Mozilla Firefox浏览器
   　　　　　　第五 三星网络浏览器

1.5深入了解网站开发

深入了解软件开发部分主要介绍软件开发的一些岗位及其工作内容

• UI设计师：对软件的人机交互、操作逻辑、界面美观的整体设计，又叫界面设计，UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。
• Web前端开发工程师（H5的开发）： 主要进行网站的开发、优化、完善的工作，简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
• web后端开发工程师：. 负责小程序前端修改和优化升级，根据网站业务需要开发和程序修改。，负责网站日常运行的技术维护工作，对出现的问题积极有效的进行处理， 用html5，css3及JavaScript,vue或uniapp完成页面制作，对完成的页面进行维护和对网站前端性能做相应优化，丰富互联网的Web开发，改善用户体验，进行相关数据处理、查询，统计和分析工作。

1.6Web前端三大技术

Web前端三大技术主要内容是介绍前端开发所需要的核心技术，结构，样式，及其交互的行为。
1. HTML：负责结构，单有html结构代码及其效果如下

<div>这是结构练习</div>