2021年3月第4周

最新推荐文章于 2023-10-23 08:24:31 发布

原创最新推荐文章于 2023-10-23 08:24:31 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

每周计划专栏收录该内容

18 篇文章

订阅专栏

本周落地

提早完成，快乐：

wk4

学习笔记

HTML

H5这本书的第四章讲的是CSS，大多数内容都在之前的CSS阅读、视频中覆盖到了，除了CSS单位。对此写了个总结：css单位

视频内容

笔记

上一次好像没单独总结，基本上剩下的内容就是完成了表格、列表和表单。这个还蛮熟悉的，就不做思维导图了。

表格
- 最外层为table
- table下可以直接用tr，但是为了更好的结构化语义，可以用thead,tbody对内容进行分割
- 单列为tr，应该是table row的缩写
- 单个单元格为td，应该是table data的缩写
- 合并单元格可以用colSpan和rowSpan
列表
- ul
  - li
- ol
  - li
- dl
  - dt，作为dd的头部使用
  - dd
表单
- 表单域 - 包含整个表单的区域
- 表单控件
  - input
    - type
      - text
      - password
      - radio
      - checkbox
      - …
    - 属性
      - name
      - value
      - checked
      - maxlength
      - …
  - select
  - textarea

特殊标签：label。label不属于form，但是利用label可以提升用户体验感，具体可看作业的应用部分。

作业

综合案例

CSS

选择器的实例

伪元素

以「血字的研究」为例：

a-study-in-scarlet
HTML代码为：

  <body>
    <h1>A Study In Scarlet</h1>
    <section class="chapter">
      <p>
        In the year 1878 I took my degree of Doctor of Medicine of the
        University of London, and proceeded to Netley to go through the course
        prescribed for surgeons in the army. Having completed my studies there,
        I was duly attached to the Fifth Northumberland Fusiliers as Assistant
        Surgeon.
      </p>
    </section>
  </body>

CSS代码为：

body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
    Verdana, sans-serif;
}

h1 {
  max-width: 15em;
  margin: 1em auto 0.5em;
  text-align: center;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-weight: 300;
  font-size: 3em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #999;
}

.chapter {
  margin: 0 auto;
  max-width: 36em;
  padding-left: 10em;
  position: relative;
}

.chapter p {
  font-size: 1em;
  line-height: 1.5;
  margin: 0 0 1.5em;
}

.chapter::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  content: "”";
  font-size: 20em;
  line-height: 1;
  margin-top: -0.1em;
  color: #ccc;
}
/**
  * Create a "drop-cap" by floating the first letter.
  */
.chapter p::first-letter {
  float: left;
  font-size: 3em;
  line-height: 0.8;
  margin-top: 0.15em;
  margin-right: 0.1em;
  font-family: Georgia, Times, "Times New Roman", serif;
}

.chapter p::first-line {
  font-family: Georgia, Times, "Times New Roman", serif;
  text-transform: uppercase;
}

特殊性

特殊性计算

原书之中就特殊性给出了四个级别，分别对应

a，十进制中的千，对应行内样式
b，十进制中的百，对应id选择符
c，十进制中的十，对应类选择符，伪类选择符，属性选择符
d，十进制中的个，对应选择符，伪元素选择符

这个表格来源于原书：

选择器	特殊性	以10为基数的特殊性
style = “”	1,0,0,0	1000
#wrapper #content {}	0,2,0,0	200
#content .dataPoseted {}	0,1,1,0	110
div#content	0,1,0,1	101
#content {}	0,1,0,0	100
p.comment .dateposted {}	0,0,2,1	21
p.comment {}	0,0,1,1	11
div p {}	0,0,0,2	2
p {}	0,0,0,1	1

以style = “”为例，这是一个行内样式，所以权重就是1000。
以#wrapper #content {}为例，这里面有两个id选择符，所以权重是0200。
以#content .dataPoseted {}为例，这里有一个id选择符，一个类选择器，所以权重是0110。
以div#content为例，这里有一个id选择符，一个选择器，所以权重是0101。

剩下的基本上比较直接了当了，可以依照权重表计算。

简化特殊性

如果按照上面的那张表计算的话，各种id套用id套用类等会造成非常复杂的权重计算，在实现代码的时候会遇上很大的阻碍——根据层叠原理，权重相同的情况下，后声明的CSS样式将会覆盖先声明的CSS样式。因此一开始的时候将样式分割成小块、可复用的类选择器，一方面可以减少CSS量，另外一方面计算也会方便很多。

视频内容

元素的显示模式

块(block)

特点如下：

独占一行
高、宽、内外边距可设置
宽度默认父类的100%

行内(inline)

不独占一行
高、宽、内外边距不可设置
宽度默认内容的宽度

行内块(inline-block)

不独占一行
高、宽、内外边距可设置
宽度默认内容的宽度

改变显示方式

display: block;
display: inline;
display: inline-block;

JavaScript

动态加载脚本

// 在头部声明，告知预加载器
<link rel="preload" href="something.js" />

// 加载脚本
<script>
const script = document.createElement('script');
script.src = 'something.js';
// 设置同步加载
script.async = false;
document.head.appendChild(script);
</script>

noscript

代码如下：

<body>
	<noscript>
		<p>除非浏览器不支持JS，否则这段话永远也不会显示出来</p>
	</noscript>
</body>

效果如下：

noscript-demo

小结

要包含外部文件，必须将src设置为对应的路径
所有<script>元素会依照在网页中出现的顺序被解释
对不推迟的脚本，浏览器会解释完<script>中的代码，再继续渲染。所以现在推荐将脚本放到尾部，介于主内容和</body>标签之前。
defer会将脚本推迟到文档渲染完毕再执行，原则上脚本将按序执行，~~实际上经常不是~~。
async表示不需要等待其他脚本，同时也不阻塞文档渲染，但是脚本执行顺序不定。
通过使用noscript可以指定浏览器不支持脚本时显示的内容，~~现在真的还有用吗？~~。

视频相关

冒泡排序

MongoDB

安装、下载好了，过了一遍最基础的CRUD:

MongoDB的安装和基础CRUD

下周计划

HTML的视频居然已经完成了，现在就剩下CSS3和JavaScript了。这样的话，本来放在HTML视频上的时间就放到CSS上了。

比起视频的话，书籍阅读的进度就慢很多了……嘛……这也没办法，对比起来花在读书和记录读书笔记的时间比用在看视频还多……