要求

挑战

很多刚接触互联网的人其实都是从浏览器开始的。作为网络时代的标识性软件和主要载体，浏览器似乎无所不能，从文本、图片、视频，到博客、微博、代码托管，从电商、社交、LBS再到团购，它全都可以呈现在用户面前。这些都是怎么办到的呢？现在很多移动端应用，甚至智能电视上压根就没有使用浏览器，但好像也有和浏览器同样的界界面，同样的体验，这些又是怎么实现的呢？

说明

浏览器其实是⼀类互联网编程技术的载体，其中又以HTML、CSS、JavaScript这三项为主。HTML定义了浏览器中各种元素的分类和用途，CSS定义了Web页面的布局和外观，而JavaScript可以动态创建页面，使网页能够响应用户的点击、拖拽等各种事件，可以处理表单，给用户更好的体验。

内容

在富文本编辑器中输入文字，然后在源码模式下，查看输入内容是如何被转变为带标签的文本的，带了哪些标签实现富文本编辑器没有的功能，例如插入表格文字对齐，或者加入简单的样式、JavaScript代码，再试试看

实现

下载

进入给定的网址，下载富文本编辑器所需文件在这里插入图片描述

进入Getting Started，查看说明，找到需要用的代码在这里插入图片描述

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>without bootstrap</title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello stand alone ui',
        tabsize: 2,
        height: 120,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });
    </script>
  </body>
</html>

新建article.html，写入代码，做一些基础更改，点击用浏览器打开，查看效果在这里插入图片描述

可以看到，富文本编辑器正常运行，只不过提示文字默认为英文

更改提示文字继续往下翻文档，找到language，可以看到，更改提示文字有两步，①引入对应的js文件，②在article.html文件中更改默认的lang 在这里插入图片描述

打开刚刚下载的文件，进入lang文件夹，找到zh-CN的文件，打开一看，果然是对应的中文在这里插入图片描述

随即在html中引入该js文件并使用在这里插入图片描述可以看到，更改生效了，提示文字变成了中文

输入内容查看源代码

在这里插入图片描述

可以看到，每一行的内容被加到了p标签里面，所以实现了换行，图片则是通过img标签，以base64编码的形式显示出来

刚开始我传的图片太大了，点击源代码，编辑器直接卡死，后来传了稍小一点的图片，才显示出来代码，不过这个反应过程也挺长的

随心所欲更改

接下来就可以用我们之前学过的知识对内容进行各种更改在源代码模式下，给第一行内容居中，给第二行内容换颜色，给第三行改变字体大小，设置图片显示大小在这里插入图片描述点击按钮，实现页面跳转

在这里插入图片描述

自测

HTML5为了使img元素可拖放，需要增加什么属性？
HTML5哪一个Input类型可以选择一个无时区的日期选择器？
CSS盒子模型中的Margin、Border、Padding都是什么意思？
说出至少五种常见HTML事件

答：

需要增加draggable 属性，并将其设置为 true

type="datetime-local"即可选择一个无时区的日期和时间

margin是外边距，border是边框，padding是内边距

最常见的应该就是关于鼠标的事件了，onclick（鼠标点击事件），onmouseover（鼠标划过事件），onmouseout（与上一个对应，鼠标划出事件），onmousedown（鼠标按下还未松开），onmouseup（与上一个对应，鼠标松开），还有onkeydown（键盘按下事件），onload（浏览器页面加载完成的事件）

最后

如果把用到的在线的文件都下载下来并正确引入，就可以得到一个离线的富文本编辑器了，nice