C1任务03----富文本编辑器

2024-11-11 来源：个人技术集锦

说明

掌握HTML的基础语法与布局、表单、图像等组件的应⽤
掌握CSS的基础语法与分组、嵌套、定位和盒⼦模型等组件的应⽤
掌握JavaScript的基本语法与函数、DOM、BOM和对象等技术的应⽤

内容

在富⽂本编辑器的源码模式下，实现富⽂本编辑器没有实现的功能，例如插⼊表格，并且能够隔⾏换⾊；或者再插⼊⾳视频，
能够在⻚⾯上播放

链接

HTML
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/HTM
CSS
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/CSS
JavaScript
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

基础展示

安装基础软件

文本编辑器，用来编写代码。可以是纯文本编辑器（比如 Visual Studio Code、Sublime Text、Atom、Brackets、GNU Emacs 或 VIM）；也可以是混合编辑器（比如 Dreamweaver 或 WebStorm）。Office 文档编辑器并不适用，因为它们依赖的隐藏元素会干扰浏览器渲染机制。
Web 浏览器，用来测试代码。如今使用最多的浏览器有 Firefox，Chrome，Opera， Safari，Internet Explorer 和 Microsoft Edge。另外，还需测试网站在移动设备和老式浏览器（如 IE 8-10）上的表现。还有 Lynx, 一个基于文本的终端 Web 浏览器，可用于测试视力障碍用户的浏览体验。

HTML

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

如果很简单的想要在网页上展示上面这句话，那么你需要将这行文字封装成一个段落（paragraph）元素来使其在单独一行呈现：

这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

插入表格并实现隔行换色

首先, 将 blank-template.html 和 minimal-table.css 拷贝到你的本地环境上。每一个表格的内容都包含在这两个标签中 : <table></table> 在你的 HTML 的 <body> 中添加这些内容。
在表格中，最小的内容容器是单元格, 是通过 <td> 元素创建的 (‘td’ 代表 ‘table data’。例如把内容“>the first cell”添加到表格标签中:

<td>the first cell</td>

现在已经实现了第一行，可以继续增加至两行、三行。每一行都需要一个额外的 <tr> 元素来包装，每个单元格的内容都应该写在 <td>中。我们用<col> 元素来进行表格各行换色操作，<col> 元素被规定包含在容器中。

<table border=>
  <colgroup>
    <col>
    <col style="background-color: yellow">
    <col style="background-color: red">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
    <th>Data 3</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
     <td>John</td>
  </tr>
</table>

插入视频

在html中使用<video></video>元素插入视频：

<video src="test.mp4" width="320" height="240" controls/>

显示全文

全部栏目