说明
- 掌握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/>