前言：

前段时间过度青睐于web应用与云计算产品实例的体验，期间遇到过很多问题也解决过很多问题（当然还有暂未解决的问题），但是一直没有系统学习过其基础知识。今天无意间在学习强国网站学习一个CSS样式时在其上发现了一个资源宝库，如下图：

在这个专栏，数学、物理、化学甚至是计算机的开放课程被搜罗的样样俱全，同时刚好看到了一门关于web的课程。

借此机会，打算用一周左右的时间系统地学习下这一块儿，再系统地学完PHP+MYSQL（实在“没时间”的话就算了少睡会儿）真的得专注学习数学和机器学习了（这都5月中旬了，留给我的时间真的不多了）。

回顾一下，大概是在初中一二年级的时候（应该是初一）首次对网站搭建产生了浓厚的兴趣（当时主要是受hao123的影响）。那时候接触到了HTML，听说了网页“三剑客”。但是当时由于资源实在有限（懒得找），了解最深的地方应该也就是超链接标签的写法了，至于web服务器－也就只是知道建网站需要有个“空间”，空间需要花很多钱去买，需要会使用一个名字叫做FTP的东西。。然后就拿新浪博客（现已关闭）的自定义栏目里面可以自定义源代码的功能练手。然后就没有然后了。。。

一直到了大二上学期，一个超级偶然的机会，在学校的实验室里，认识了一个很厉害又有耐心的学长。从他那里先后了解到了Tomcat和Nginx，经过局域网内文件的成功传输，顿时明白了WEB服务器的作用，借助当时已经了解到的关于HEXO的知识和电脑120的一个计科大佬一起完成了电脑120网站后台发布与管理系统的配置。电脑120的网站有了雏形。

考试之前只顾捣鼓电脑120的网站，自己搭建的博客闲置到一边了，为了纪念，已将其静态骨架保存在cdn站点首页，有缘的朋友们可以去看看。

寒假期间，在Anoyer学长的启发下，接触到了Typecho，并利用寒假搭建了完全属于自己的第一个动态博客。当然，阿里云的学生机资格给了电脑120，在这儿只能用腾讯云1M的小水管了。

好在各大免费CDN（首页底部挂有链接）和阿里云OSS，使得博客访问体验不算太差。

博客只是基础设施，最重要的是内容的记载、知识的学习、能力的提升。

写了这么多，也该看会儿视频，奔入主题啦。

第一章：HTML详解与CSS选择器

1.0内容介绍

HTML+CSS部分

主要参考资料

开发工具和调试工具

前端学习方法建议

• 先完成再完美
• 先理解问题
• 练习、练习、再练习

1.1Web是如何工作的：基本架构和原理

• Web无处不在：看新闻、刷微博、刷朋友圈、购物、学习…
• 从输入URL，到页面呈现完成，究竟发生了什么？

HTTP响应：

HTTP：1.0、1.1、2.0

HTML：4、5

1.2HTML基本要素（标记、元素、内容、属性）

在HTML中，实际上一般不必区分“标记”和“元素”的概念。但是在严格定义中，我们通常把标记理解为“具体的某一个”，具有唯一性的概念；元素来理解为“某一类中的一个”-->每一个都可以有自己的属性。从面向对象的角度考虑：标记类比于“类”，元素类比于“对象”。

HTML单标记元素

HTML全局属性

其中：id属性具有唯一性；class属性通常对应CSS中的class选择器；style属性叫做“行列样式属性”；title属性的作用主要是指定光标移上时显示的提示字样。

1.3HTML 文档类型、注释

1.4 HTML head及相关标记

1.5 HTML 标题、段落和文本格式化

1.6 HTML图片Image和超链接Hyperlink

HTML图片

其中，alt属性有利于图片友好显示和搜索引擎优化。

HTML超链接

1.7 HTML列表List和表格Table

1.8 HTML的div和span

作用：实现统一的样式设置/交互效果

方法一：将效果添加到每个元素上（会导致维护超级困难）

更好的方法：将他们放入一个统一的元素中

概念的引入：

块级元素：独占行

行内元素：与其他元素共用行

table元素从理论上讲可以直接用其多行多列的效果容纳其他元素，但最好不要这样做（应该用其直接存放数据）。

1.9 HTML5中各种语义化分段元素

引入这些分段元素的原因：如果用div id来自行分段：

1. 不利于项目交付（命名规则不尽相同）
2. 不利于搜索引擎优化

因此引入了以上统一的分段元素规范。

1.10 HTML表单Form

1.11 文档对象模型DOM

CSS选择器的基础

1.12 HTML5最佳实践与全部标记总览

1.13 HMTL Demo：开发和上线一个简单在线个人简历

1.14 HTML中应用CSS的三种常用的方式

文档内样式代码：

元素的行内样式（代码可复用性低）：

优化：

外部样式文件（代码可复用性最高）：

只需一行

1.15 CSS规则基本语法

选择器：

选择器组：

注意：选择器组里面若有任何一个选择器无效，则该选择器组无效。

属性选择器：

1.16 简单选择器（Type、ID、Class选择器）

类型选择器：

ID选择器：

Class选择器：

一个元素可以有多个class：

这样设置可以使元素同时具有.outline的样式和.outline.abc的样式。

1.17 属性选择器

应用领域如：

加上disabled属性后，会出现下图所示效果，视觉不友好。

改进方法：

改进后的效果：

特定的属性选择器：

例如：指定锚链接：

1.18 上下文选择器

• e1 e2的选择可以简单理解为三步：

1. 选择能够匹配e1的所有元素
2. 取出所有匹配e1元素的后代元素
3. 在所有后代元素中挑选出能够匹配e2的元素

• e1>e2：选择e1中的子元素e2
• e1~e2：e1和e2是兄弟元素且e1在前e2在后
• e1+e2：选择e1的紧邻兄弟元素e2
• *：通配符

例如：

通配符星号的作用例如：

1.19 伪类选择器

第一种：结构化的伪类选择器

目标：将选中的内容突出显示

只需要：

若要选择第二个子元素：

只需要：

若要选中奇数/偶数行：

即实现效果：

只需：

第二种：UI伪类选择器

例如：

可以用来表示访问过的超链接特效。

可以表示当鼠标悬停时触发的效果，如下。

再例如：

可以实现的效果是：

仅当通过锚点访问时，添加黄色背景，如下图：

小结：

1.20 伪元素选择器

若要给某一段话的每个首字符添加指定效果，可以通过<span>标签（使用上下文选择器）：

注意到此方法需要逐个添加span标签，因此我们可以尝试更好的方法：

使用该方法时，首字符亦不会被添加到一个新的子元素中（所以叫做“伪元素”）：

若要给首行添加效果：

若要给元素添加固定首字符，如：

除了直接修改HTML代码，还可以借助css：

甚至可以对指定字符添加样式：

类似的，还有::after。

小结：

1.21 CSS的级联Cascading和继承

级联：

当多个css作用于同一个HTML元素时：

结果有一个规则无效。

• 特指度（优先级）问题——ID>Class>Type
• 若特指度相同，则后配置的规则生效。
• 使用!important指定重要性——确保不会被覆盖
• 
• 如果都使用!important指定重要性或者没有都使用!important指定重要性，按照特指度判断。

继承：

如果元素没有设置属性值，则会默认继承父元素的属性值。

小结：

版权属于：soarli

本文链接：https://blog.soarli.top/archives/429.html

转载时须注明出处及本声明。