C1-03基础任务和知识拓展

C1-03基础任务和知识拓展

• 挑战
• 说明
• 任务一
• 任务二
• 扩展任务
• 资源（仅供参考）
• 自测

挑战

你做过站⻓吗？你知道建设和维护⼀个属于⾃⼰的站点是⼀种什么样的体验吗？你开过⽹店吗？你知道玲琅满⽬的商品和那
些惊艳⼜⾼⼤上的产品详情是怎样呈现在我们眼前的吗？你在上⽹时是否发现有些⽹站禁⽌⽤户拷⻉内容（或其他的烦⼈的
限制）呢？以上所有这些，对于学过Web前端技术的⼯程师来说，都不叫事⼉～。

说明

⼤⼚每年都要招聘⼤量的前端软件⼯程师，有些开发基于浏览器应⽤，有些开发基于H5的应⽤，⽽有些可能会开发⼩程序和桌⾯
应⽤。不管是做哪种开发⼯作的前端⼯程师，都离不开HTML、CSS、JavaScript这三类Web浏览器核⼼技术。HTML定义了浏览
器中各种元素的分类和⽤途，CSS定义了浏览器⻚⾯的整体布局和外观，⽽JavaScript可以动态创建⻚⾯，使⽹⻚能够响应⽤户的
点击、拖拽等各种事件，给⽤户更好的体验。

任务一

⾸先，在开源富⽂本编辑器（ https://summernote.org/ ）中随便输⼊⼀段⽂本

然后，在源码模式下，查看内容是如何被转变为带标签的⽂本的，都带了哪些HTML标签

最后，实现编辑器没有的功能，例如让表格隔⾏换⾊，加⼊JavaScript按钮，试着完成它吧：

任务二

在code.org上以「所⻅即所得（WYSIWYG）」的⽅式完成HTML和CSS系列⽹⻚开发任务（ https://studio.code.org/s/csd2-2019 ）
如果已注册账号则⽆需再注册
加深对HTML和CSS技术的理解

扩展任务

深⼊理解CSS盒⼦模型多层次含义
边框边距
标准⽂档流（浮动与定位）
布局模式
完成下图的CSS盒⼦模型布局

任务成果如下：

资源（仅供参考）

《深⼊浅出HTML》
《CSS图鉴》
《CSS那些事⼉》
《JavaScript DOM编程艺术(第2版)》
《代码整洁之道》
开源富⽂本编辑器：https://summernote.org/
帮助⼿册软件
Dash：https://kapeli.com/dash
Zeal：https://zealdocs.org/
HTML
W3C：https://www.w3.org/TR/
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/HTML
CSS
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/CSS
JavaScript
ECMAScript标准：https://www.ecma-international.org/technical-committees/tc39/?tab=published-standards
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

自测

HTML5为了使img元素可拖放，需要增加什么属性？
draggable=“true”
拖动属性：https://www.runoob.com/tags/att-global-draggable.html
HTML5哪⼀个input类型可以选择⼀个⽆时区的⽇期选择器？
Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).

定义一个日期和时间 (无时区):

生日 (日期和时间):

<input type="datetime-local" name="bdaytime">

CSS盒⼦模型中的Margin、Border、Padding都是什么意思？
外边距，边框线和内边距

说出⾄少五种常⻅HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouSEOver	用户在一个HTML元素上移动鼠标
onmouSEOut	用户在一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键

HTML的onblur和onfocus是哪种类型的属性？
HTML DOM 鼠标事件
DOM： 指明使用的 DOM 属性级别。

怎么设置display属性的值使容器成为弹性容器？
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

JavaScript中有多少种不同类型的循环？
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

⽤户搜索某个单词后，JavaScript⾼亮显示搜索到的单词，使⽤哪个语义化标签最合适？
高亮显示使用mark标签