【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

【图片链接有点小问题，这几天更新，敬请期待！】
目 录

第一章HTML基础

1.1 HTML简介和发展史

1.1.1 什么是HTML

1.1.2 HTML的发展历程

1.1.3 web标准

1.2 开发中常见概念解释

1.2.1前端

1.2.2后台

1.2.3 浏览器

1.3 纯文本和超文本的使用

1.4 开发工具的使用

1.4.1常见开发工具简介

1.4.2 Visual Studio Code

1.4.3 编写第一个HTML文件

1.5 HTML骨架

1.5.1 DTD

1.5.2 html标签

1.5.3 字符集

1.5.4 视口标签

1.5.5浏览器的私有设置

1.5.6 title

1.5.7 keywords关键字

1.6 练习题

第二章 HTML基础标签

2.1 HTML基本语法

2.1.1 HTML元素和标签

2.1.2 标签使用注意事项

2.2 HTML常见标签

2.2.1 HTML标题

2.2.2 HTML段落

2.3 超链接和图像

2.3.1 图像

2.3.2 相对路径和绝对路径

2.3.3 超链接

2.4 HTML语义化

2.4.1语义化的好处

2.5 其它常见标签

2.5.1 br

2.5.2 hr标签

2.5.3 其它标签

2.6 练习题

第三章 列表和表格

3.1 HTML列表

3.1.1 无序列表

3.1.2 有序列表

3.1.3 自定义列表

3.2 表格

3.2.1 表格基础

3.2.2 表格的常见属性

3.2.3 单元格合并

3.2.4 表格分区

3.3 练习题

第四章 表单、字符和常用标签

4.1 HTML表单

4.1.1 表单区域

4.1.2 常见的表单元素

4.2 字符实体

4.3 div和span

4.4 练习题

第五章 CSS基本介绍

5.1 CSS的基本介绍

5.1.1 css概述

5.1.2 css语法

5.1.3 css注释

5.1.4 css的三种引入方式

5.2 CSS常用属性

5.2.1 color 文本颜色

5.2.2 font-size 字 大小

5.2.3 font-family 属性

5.2.4 盒子常用三属性

5.3 CSS样式表

5.3.1 内联样式

5.3.2 内部样式表

5.3.3 外部样式表

5.3.4 导入式样式表（了解）

5.3.5 样式表的优先级和使用总结

5.4 基础选择器

5.4.1 标签选择器

5.4.2 class选择器

5.4.3 id选择器

5.4.4 通配符选择器

5.4.5 基础选择器优先级

5.5 练习题

第六章 选择器进阶

6.1 CSS高级选择器

6.1.1 后代选择器

6.1.2 子代选择器

6.1.3 并集选择器

6.1.4 交集选择器

6.1.5 伪类选择器

选择器

示例

示例说明

6.1.6 相邻兄弟选择器

6.1.7 后续兄弟选择器

6.2 CSS三大特性

6.2.1层叠性

6.2.2 继承性

6.2.3 CSS优先级

6.3 练习题

第七章 CSS属性

7.1 切图工具

7.1.1 Fireworks基本使用

7.1.2 缩放工具

7.1.3 抓手工具

7.1.4 滴管工具

7.1.5 文字工具

7.1.6 标尺和辅助线

7.1.7 切片工具

7.1.8 注意事项

7.2 css字体样式属性

7.2.1 font-size 字 大小

7.2.2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XME5RoDz-1639323437085)(media/12528c0b17cbc62287ee70f32f5cdef1.png)]

图1-7

1.2.3 浏览器

浏览器即 页浏览器，是 页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Edge、Safari和Opera等。我们平时称为六大浏览器，如下图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9DAGQTC-1639323437091)(media/f7efcb7dc077b89d68fcc3a24401cee0.png)]

图1-8

1.Chrome 浏览器

Chrome 浏览器是 google 旗下的浏览器。Chrome
浏览器至发布以来一直讲究简洁、快速、安全，所以 Chrome
浏览器到现在一直受人追捧。最开始 Chrome 采用 webkit 作为浏览器内核，直到 2013
年，google 宣布不再使用 webkit 内核，开始使用 webkit 的分支内核 Blink。

2. Firefox 浏览器

Firefox 浏览器是 Mozilla
公司旗下浏览器，也是 景公司后来的浏览器。 景被收购后， 景人员创办了 Mozilla
基金会，这是一个非盈利组织，他们在 2004 年推出自己的浏览器 Firefox。Firefox 采用
Gecko 作为内核。Gecko 是一个开源的项目，代码完全公开，因此受到很多人的青睐。

3. Safari 浏览器

2003 年，苹果公司在苹果手机上开发 Safari
浏览器，利用自己得天独厚的手机市场份额使 Safari
浏览器迅速成为世界主流浏览器。Safari 是最早使用 webkit
内核的浏览器也是现在苹果默认的浏览器。

4. Opera 浏览器

Opera 是挪威 Opera Software ASA 公司旗下的浏览器。1995 年，Opera 公司发布第一版
Opera 浏览器，使用自己研发的 Presto 内核。2016 年奇虎 360 和昆仑万维收购了 Opera
浏览器，从此也丢弃了强大的 Presto 内核，改用当时 Google 开源的 webkit 内核。后来
Opera 浏览器跟随 Google 将浏览器内核改为 Blink 内核。自此 Presto
内核也淡出了互联 市场。

5. IE 浏览器

IE 是微软公司旗下浏览器，是目前国内用户量最多的浏览器。

6.Edge 浏览器

Microsoft
Edge（简称ME浏览器）是由微软开发的基于
Chromium
开源项目及其他开源软件的 页浏览器。

1.2.3.1 浏览器内核

浏览器最重要或者说核心的部分是“Rendering
Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对 页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示） 页。

常见的浏览器内核有：Trident（也称 IE 内核）、webkit、Blink、Gecko等。

1. Trident内核

代表产品为Internet
Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape
8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

1. Gecko内核

代表作品为Mozilla
Firefox。Gecko是一套开放源代码的、以C++编写的 页排版引擎，是最流行的排版引擎之一，仅次于Trident。

1. WebKit内核

代表作品有Safari、Chrome。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac
OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对 页代码的兼容性不高，导致一些编写不标准的 页无法正常显示。

1. Presto内核

代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera
7.0及以上使用。但2016 年奇虎 360 和昆仑万维收购了 Opera
浏览器，从此也丢弃了强大的 Presto 内核，改用当时 Google 开源的 webkit 内核。后来
Opera 浏览器跟随 Google 将浏览器内核改为 Blink 内核。

1. Blink内核

Blink是一个由Google和Opera
Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

渲染引擎即浏览器内核决定了浏览器如何显示 页的内容，不同的浏览器内核对 页编
写语法的解释也有不同，因此同一 页在不同的内核的浏览器里的渲染（显示）效果也可能
不同， 页开发者需要实现跨浏览器的兼容，熟悉浏览器内核是非常有必要的。

纯文本和超文本的使用

纯文本：纯文本只包含文字内容，不能包含文字以外的，例如图片、视频等，不能传输文字样式，常见的纯文本格式文件.txt,.html,.css,.js。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RKVFDR2K-1639323437093)(media/0cde825421ae675b45fd131fcb2529bc.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X52lIhat-1639323437096)(media/88442f6cc1d247ab030f1cbbe80b88ae.png)]

图1-9

开发工具的使用

在前端开发过程中，通过记事本即可以进行HTML 页的编写，但是如果开发大型复杂的 页，使用记事本则会显得效率非常低下，因此在开发过程中我们一般会借助于开发工具来进行编程。

1.4.1常见开发工具简介

市面上常见的开发工具有：Dreamweaver、sublime Text、webstorm、HBuilder、Visual
Studio Code等。

HBuilder：HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1rLHTkiT-1639323437099)(media/8148865358b600076e47bda4c1b6a807.png)]

图1-10

1.4.2 Visual Studio Code

1.4.2.1 工具下载

vscode官 https://code.visualstudio.com/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhJBC6d3-1639323437101)(media/926302a1f1ce7a4c2050322306a4d072.png)]

图1-11

1.4.2.2 工具下载安装

点击下载按钮，根据操作系统平台下载对应的安装包，本书以Windows为例，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qP9EvtRb-1639323437102)(media/9fbbd3db5f04b1bb3ff27095738c2f58.png)]

图1-12

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QeueVlEI-1639323437104)(media/113b6403b385ced922dc46a3f67c9428.png)]

图1-13

下载之后的安装包，如图1-14所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TmOFrrgg-1639323437106)(media/3c21fb03f0fe0b1a0344d9a39c0dfd6a.png)]

图1-14

点击安装软件，安装完毕之后打开软件，如图1-15所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rvKrCpoi-1639323437108)(media/9c6cd82608b1216663814d8c974a1085.png)]

图1-15

1.4.2.3 插件安装和工具使用

vscode不仅工具自身强大，而且支持在线安装插件，通过安装各色的插件，可以使开发更加舒适和便捷。

1. 插件

   声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！