文章目录
挑战
说明
任务
总结
1、挑战
你做过站长吗？你知道建设和维护一个属于自己的站点是一种什么样的体验吗？你开过网店吗？你知道琳琅满目的商品和那些惊艳又高大上的产品详情是怎样呈现在我们眼前的吗？你在上网时是否发现有些网站禁止用户拷贝内容（或其他的烦人的限制）呢？以上所以这些，对于学过Web前端技术的工程师来说，都不叫事～
2、说明
大厂每年都要招聘大量的前端软件工程师，有些开发基于浏览器应用，有些开发基于H5的应用，而有些可能会开发小程序和桌面应用。不管是做哪种开发工作的前端工程师，都离不开HTML、CSS、JavaScript这三类Web浏览器核心技术。HTML定义了浏览器中各种元素的分类和用途，CSS定义了浏览器页面的整体布局和外观，而JavaScript可以动态创建页面，使页面能够响应用户的点击、拖拽等各种事件，给用户更好的体验。
任务详解：（https://mp.weixin.qq.com/s/HMu1RFthBFMhbphw-dBTHw)
3、任务
任务一：使用富文本编辑器
1、打开富文本编辑器（https://summernote.org/)，输入CSDN能力认证中心。
2、然后在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些HTML标签
3、最后，实现编辑器没有的功能，让表格隔行换色，加入JavaScript按钮。
代码示例如下：
<p>CSDN能力认证中心</p>
<table width="170" border="1" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="40" bgcolor="#CCFFFF">C1</td>
<td width="130" bgcolor="#CCFFFF">见习工程师认证</td>
</tr>
<tr>
<td>C4</td>
<td>专项工程师认证</td>
</tr>
<tr>
<td bgcolor="#CCFFFF">C5</td>
<td bgcolor="#CCFFFF">全栈工程师认证</td>
</tr>
</tbody></table>
<p> </p>
<button onclick="alert('CSDN能力认证中心')">欢迎来到CSDN能力认证中心</button>点击按钮CSDN能力认证中心按钮，可实现点击按钮弹出信息的功能。如下：
按钮代码如下：
<button onclick="alert('CSDN能力认证中心')">欢迎来到CSDN能力认证中心</button>本任务就到此完成了。
拓展：
1、在HTML中，表格的标签是<table></table>
2、在HTML中，单元格的标签是<td></td>
3、在HTML中，表格的行标签是<tr></tr>
4、在HTML中，表单控件的标记符是<form></form>
5、在HTML中，表单中多行文本域的标记符是<textarea></textarea>
6、在HTML中，超文本文件的扩展名是.html
7、在HTML中，插入图片的标记符是<imgsrc=”图片地址”>
8、在HTML文件中，表示文件主体部分的标签是<body></body>
9、在HTML文件中，标题的标记符是<title></title>
10、在HTML中，用来定义超文本文档的标记符是<a>
11、在HTML中，用来介绍与文件内容有关的信息.的标记符是<head></head>
12、在HTML中，换行标记符是<br>
13、在HTML中，用来定义段落的标记符是 <p></p >
14、在HTML中，用来显示文字加下划线.的标记符是<u></u>
15、在HTML中，用来定义无序列表的标记符是<ul></ul>
16、在HTML中，用来定义有序列表.的标记符是<ol></ol>
17、在HTML中，超链接中用来指明超链接目标的属性的标记是< a href= ></ a>
18、HTML的主体内容放在文件中的什么标记之间<body></body>
任务二：「所见即所得」式开发
任务诠释：
1、在code.org上以「所见即所得（WYSIWYG）」的方式完成HTML和CSS系列网页开发任务。（https://studio.code.org/s/csd2-2019)。
2、如果已经注册账号则无需再注册。
3、加深对HTML和CSS技术的理解。
1、打开网址，得到信息
2、收到信息，按照步骤完成任务。
…………
按照步骤完成任务即可
4、总结
为了更好的成为一名前端工程师，我们要好好的掌握HTML和CSS，掌握核心技术。同时在任务过程中，我们要好好的认真完成每一步 。以上就是这篇博客的全部内容。
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
