web前端学习（二）初识HTML与CSS

1.1.什么是HTML？什么是CSS？

HTML是HyperText Markup Language(超文本标记语言)

• 它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）

XML 是指可扩展标记语言,XML 被设计用来传输和存储数据。

XHTML 是什么？

• XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
• XHTML 的目标是取代 HTML。
• XHTML 与 HTML 4.01 几乎是相同的。
• XHTML 是更严格更纯净的 HTML 版本。
• XHTML 是作为一种 XML 应用被重新定义的 HTML。
• XHTML 是一个 W3C 标准。

HTML特点

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网 （WWW）盛行的原因之一，其主要特点如下：

1. 简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
2. 可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类 元素的方式，为系统扩展带来保证。
3. 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用 在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4. 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文 本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

CSS (Cascading Style Sheets) 层叠样式表

是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

1.2.HTML和CSS之间的关系？

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML。

1.3.结构，表现，行为？

结构

HTML用于描述页面的结构

表现

CSS用于控制页面中元素的样式

行为

JavaScript用于响应用户操作

2.初识HTML

2.1.开发环境搭建

可用于编写HTML的编译工具有很多

• 记事本：特点：无代码提示、无代码高亮显示、用户界面不友好；

• Sublime（推荐）：特点：运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件；

• VSCode（推荐）：特点：丰富的插件支持、可进行git管理；

• Idea：特点：集成开发工具、类似DW,node,npm...运行速度较慢；

Html是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产生不同的结果，所以我们需要安装多种主流的浏览器进行兼容性测试；

主流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。

VSCode插件推荐

HTML CSS Support - Html提示Css自动补全

HTML Preview - 提供预览HTML文档的功能

HTML Snippets - 完整的HTML标签，包括HTML5片段

Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能

open in browser - 可以在默认浏览器或应用程序中打开当前文件。