Loading

soarli

Web前端攻城狮学习笔记
前言:前段时间过度青睐于web应用与云计算产品实例的体验,期间遇到过很多问题也解决过很多问题(当然还有暂未解决的问...
扫描右侧二维码阅读全文
15
2020/05

Web前端攻城狮学习笔记

前言:

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

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

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

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

一直到了大二上学期,一个超级偶然的机会,在学校的实验室里,认识了一个很厉害又有耐心的学长。从他那里先后了解到了TomcatNginx,经过局域网内文件的成功传输,顿时明白了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 HTMLdivspan

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

方法一:将效果添加到每个元素上(会导致维护超级困难)

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

概念的引入:

块级元素:独占行

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

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~e2e1e2是兄弟元素且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指定重要性,按照特指度判断。

继承:

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

小结:

最后修改:2020 年 05 月 15 日 07 : 30 PM

发表评论