【前端学习之HTML&CSS】-- 第二篇 -- HTML&CSS概述及开发环境准备

HTML&CSS概述及开发环境准备

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章主要简单的介绍了HTML和CSS的概念和相关开发环境的准备。
lc own

HTML&CSS概述

1. 术语

1) Web–互联网；

2) w3c–万维网联盟：

www.w3.org；非营利性的组织，为互联网提供各种标准，

这种标准是前端技术方面最为标准、统一的规定，在遇到解释性问题时，可以通过查询该网站实现；

3) XML–可扩展的标记语言：

extension markup language，用于定于文档结构；
例如：

请在每周周一下午两点，从人人网下载最新美剧《权利的游戏;

<任务>
    <执行日期> 每周一 </执行日期>
    <执行时间> 下午两点 </执行时间>
    <下载地址> 人人网 </下载地址>
    <下载目标> 最新版《权力的游戏》 </下载目标>
</任务>

2. 概念

1) HTML

1* w3c官方定义

HTML是w3c组织定义的语言标准,用于定义网络页面结构；
官方定义：HTML is the language for describing the structure of Web pages.

2* Hyper Text Markup Language

超文本（通过文档中某一部分内容可以跳到另一部分）标记语言；
例如：书写一个一级标题–在MD中是#实现，而在html中是通过<h1> 一级标题 </h1>实现

一个推荐用来查阅文档的网站：MDN–Mozilla Development Network，Mozilla开发者社区；在百度上查询可以先输入查询内容，空格后加上MDN进行查询即可；

2) CSS

CSS是w3c组织定义的语言标准,用于描述网络页面展示，决定了页面长什么样子；
官方定义：CSS is the language for describing the presentation of Web pages，including colors，layout，and fonts.

lc own

3. 执行（浏览器）

1) 浏览器

1* shell–外壳

2* core–内核（JS执行引擎、渲染引擎）

市面上常见的浏览器内核：
IE--Trident、Firefox--Gecko、Chorme--Webkit/Blink、
Safari(Apple)--Webkit、Opera--Presto/Blink

2) 版本和兼容性

当前版本：HTML5、CSS3–语言标准
HTML5与2014年发行,CSS目前还没有完全制定完成，存在一定兼容性问题；
XHTML(历史)：可以认为是HTML的一种版本，完全符合XML的规范。

开发环境准备

1. 显示文件扩展名

扩展名（后缀名）决定了文件被什么应用程序打开；
设置：此电脑–任何一个硬盘–上方的查看–文件扩展名；

2. 安装浏览器

IE、Opera、Firefox、Chorme、Safari；
Chrome【推荐】，设置为默认浏览器：
window10步骤：开始–设置–应用–默认应用–Web浏览器；

3. 安装编辑器

windows记事本、Sublime、ATom、Dreamweaver、VSCode；

在这里插入图片描述

4. VSCode基本设置

1) 显示语言

F1–Configure Display Language–zh-cn（简体中文）

2) 打开文件夹

1* 从菜单栏文件打开选中；
2* 左键从资源管理器中直接拖动文件夹到VSCode中即可；

3) 资源管理器

新建文件夹、文件【注：新建文件时需要自行设置扩展名】

4) 插件安装

1* vscode-icon–文件类型图标

2* Live Server：

不用此插件：编辑HTML代码–右键资源管理器中文件–在资源管理器中显示–双击在浏览器打开–代码修改并保存后–刷新浏览器加载新页面；
使用该插件：编辑HTML代码–直接在页面中右键–Open with Live Server–自动打开浏览器–且会跟随代码自动刷新（需要标准格式）；

在这里插入图片描述

3* Markdown Preview Ehnhanced

增强markdown预览，例如目录生成–[toc]即可实现；
在标题后加上{ignore}–在目录中忽略此标题；
上传图片–图片–复制–alt + ctrl + v–在资源管理器中出现assets文件夹中有图片；
右键可在浏览器中打开，或者生成为其他格式文件；

总结

本篇文章主要介绍了HTML&CSS的相关概念，从官方定义出发，解释了二者的作用；后半部分主要聚焦于开发环境的准备，在编辑器阶段主要推荐选择VSCode，并简单介绍了一些插件，下一篇文章将会从代码出发，正式步入前端开发阶段。