HTML

从 web 标准到注册页面实战：骨架、常用标签、表格合并、表单全家桶，网页的框架全靠标签堆出来。

web 标准

随便打开一个网页 可以发现它由文字、图片、音频、视频、超链接组成

在网页的背后其实就是一串串前端程序员写的代码

这些代码通过浏览器的解析和渲染 变成用户眼中的页面

浏览器有很多 不同厂商名下的浏览器有着不同的内核、渲染引擎

那么渲染也就有些异同

为了避免同一网站在不同浏览器打开效果不同的问题

就需要制定一套标准 以这套标准去编写前端代码

这个 web 标准呢 由三个部分组成：

  • HTML 设计页面元素和内容 也就是框架（结构）
  • CSS 设计网页元素的外观和位置等页面样式（表现）
  • JavaScript 设计网页模型的定义以及一些交互效果（行为）

站点

网站网站 建一个网站往往要先建一个站点

什么是站点 有什么作用？

站点是一种管理自己设计的网站中所有与之相联系的文件的工具，利用站点对网站相关的页面及各类网站所需的素材进行统一的管理。

简单点来说就是新建一个文件夹，站点就是这个文件夹的根目录，在这个新建的文件夹中包含了我们设计的网页中所需要的、所用到的所有文件，我们可以通过创建它来对我们进行的网页进行管理，并且在我们进行网页的编辑和设计时，方便我们浏览，有次序的找到指定文件，点开管理站点，还可以对其素材文件一目了然，大大减少了我们的工作量。站点名字可以用中文，无所谓，但是里面的文件和文件夹不要用中文命名，会存在编码上的问题。

这个也很好验证

可以简单建一个文件夹

在该文件夹里建一个 images 文件夹和一个记事本文件

打开记事本写上 hello web

ctrl s 保存退出 F2 重命名改后缀为 .html

再打开它就能发现 和在 DW 中建站点达到的效果一模一样

so—— 网站其实就是文件夹

先从 HTML 入手 把框架整理好

框架

html 叫做超文本标记语言

通过 html 标签来对网页中的文本图片音频视频等内容进行描述

重点在于——标签

在 vscode 中 输入 ! 回车 就可以生成 html 的骨架：

<!DOCTYPE html>
<html lang="en">
<head>



<title>Document</title>
</head>
<body>

</body>
</html>

开头的 <!DOCTYPE html>

是少数不成对出现的标签之一 它是 HTML 的文档声明 告知浏览器当前文档所用的是哪种 HTML 规范 它本身并不属于文档的结构部分

然后可以发现在 <!DOCTYPE html> 之下的就是 <html> 标签 结束也是以 </html>

其实 网页中的所有代码都包含在 <html> 和 </html> 标签对中 表示该文档是由超文本标记语言 HTML 编写的

再之后就可以看到分为了两个部分 <head> 和 <body>

head

head 标签是 HTML 文档所有头部元素的容器 用来描述 HTML 的相关信息

它里面的东西都是给搜索引擎看的（用于比对）

比如在 `` 标签中的关键字和说明

（杀毒也是用这个比对原理 杀毒软件往往有个病毒库 存储了病毒的文件名 杀毒软件会定期扫描我们的电脑 将电脑里的文件与病毒库的文件的文件名相比对 如果一致则发出警告 但这就意味着并不能百分百确定报警的就是找到了病毒）

web-image1

指定关键字 可以帮助我们匹配到相应的结果

在未打开链接时 我们所看到的文本 就是 `` 里的说明

这就是 `` 标签 也是为数不多的一个单独存在的标签：

  • 用于指定字符编码 ``（一般都是用 utf8）
  • 关键字 ``
  • 说明信息 ``

在 head 里还有：

  • <title></title> 标签 用来设置标题信息
web-image2
  • `` 标签 可以在里面写 css 代码 规定 html 元素在浏览器中呈现的样式

body,td,th {
color: #660033;
}
body {
background-color: #fededf;
}
  • `` 标签 用于链接外部样式表 整合 html 文档与外部资源的关系
  • `` 标签 定义客户端脚本 像 javascript
web-image3

因为暂时不能理解这些东西 但可以随便找个网页扒一扒它的源代码

可以发现都是有这些部分的

tips：直接跳转到浏览器 DW 按 F12 vscode F5 或者 ctrl F5

body

另一部分就是 <body></body> 了

它里面放的是 html 文档的主体部分

功能涵盖很多

所有我们在网页能看见的东西就基本是定义在 body 里面的

标签规则

注意点：

HTML 文件由一系列元素和标签组成

用标签规定元素的属性和它在文档中的位置

HTML 标签就是用尖括号括起来的关键词 绝大多数 HTML 标签都是成对出现的

包含首标签 <标签名> 和尾标签 </标签名>

在首标签和尾标签中间的就是标签内容

层级示意：

<1> → 图 → <2> → <3> → </3> → </2> → </1>

web-image4

要求一层包含一层 不能交叉

大部分为双标签 由两部分组成 <标签名></标签名>

成对出现 一般是用在那种有开始有结束的句段

比如对某段文字进行设计 就在文字前后分别放上开始和结束标签

少数标签只由一部分组成 像换行 <br>、分割线 <hr>

它好像并没有什么要段前段后框住什么东西 所以能够理解 只是加一个换行或者分割线而已 无需包裹内容 单个就能完成功能

然后标签中可以添加多个属性

如果是双标签 这些属性写在开始标签中

标签名和属性 属性与属性之间 用空格隔开

标签与标签间 只存在两种关系：

web-image5

vscode

做前端设计还是得用 vscode

DW 太简单 和 word 一样 没什么意义

关于 vscode 有一些小技巧要先熟悉：

  • ctrl / 快速注释（可以在左下角设置中调）
  • 输入英文 直接 enter 或者 tab 生成相应标签
  • ! enter/tab 生成结构标签

常用标签

标题标签

web-image6

用 h 表示 共有六级标题 分别用 h1~h6 表示

段落标签

web-image7

用 p 表示 每两个 <p></p> 间会自动换行

换行标签

如果想在段中换行 需要加上 <br>

web-image8

在 DW 中可以使用 shift+enter 自动加 <br> 标记

web-image9

打开自动换行功能 可以帮助我们在代码视图看的更明了

不会影响在网页中的展示（代码端的自动换行）

对于空格

html 格式的文档中只允许有一个空格 所以单纯按下多个空格键无法实现显示多个空格的效果 要输入 &nbsp; 来实现

web-image10

水平线标签

web-image11

用 <hr> 表示 常放在标题和正文的中间

文本格式化标签

可以在文本标签中对某些字进行特殊处理

像 word 一样

web-image14

两边虽然单词不同 但效果是一样的 主要是强调作用（告诉可以看这段代码的人如果是用 strong……说明这段东西比较重要）

这东西很少用到 因为样式一般是用 css 去确定

图片标签

<img src="./images/2.jpeg" alt="">

输入 img 回车即可弹出相应标签

src 和 alt 为标签属性（还有很多缺省属性）

src 中放的是要打开的图片地址

可以用相对路径也可以用绝对路径（带盘符的、或者直接一个网站）

为了可移植性 肯定是主要使用相对路径

  • ./ 是打开当前目录
  • ../ 是打开上一级目录

输入之后后面会有提示引用哪个文件

alt 里放的是替换文本

当该图片无法显示时（路径出错 加载失败等） 就会显示 alt 里面的内容

<img src="./images/2.jpeg" alt="萨摩耶">
web-image15

除这两个以外还有很多属性可以加上去 比如 title

<img src="./images/2.jpeg" alt="萨摩耶" title="悬停效果">
web-image16

当把鼠标放在图片上时 就会显示该文本

还有 width、height 属性

一般要调大小只去设置其中一个（另一个会自动等比例缩放）

如果同时设置两个 设置不当时 图片会发生变形

<img src="./images/2.jpeg" alt="萨摩耶" title="悬停效果" width="230">

可见 标签里可以存在多个属性 属性间用空格隔开 属性间其实并没有顺序之分

so—— 图片 用 img 标签 有 src、alt、title、width、height 等属性

音频标签

<audio src="./music/郭燕 - 天空之城 (钢琴版).ogg"></audio>

与 img 相同 输入 audio 回车就会弹出相应标签

在 src 里输入 ./ 就能选择要打开的音频

（体现出之前分好文件夹的重要性）

（目前只支持三种音频格式 MP3、Wav、Ogg）

但是 如果这个时候用网页去打开 会发现没有播放 也没有显示

难道添加失败了？

不 只是看不见而已

加上 controls 属性 就能看到一个播放音频的控件

<audio src="./music/郭燕 - 天空之城 (钢琴版).ogg" controls></audio>
web-image17

此外还可以添加：

  • autoplay 自动播放（有些浏览器不允许自动播放 怕社死 比较人性化）
  • loop 循环播放
<audio src="./music/郭燕 - 天空之城 (钢琴版).ogg" controls autoplay loop></audio>

视频标签

输入 video 回车

<video src="./video/冒泡排序.mp4"></video>

虽然能显示

但是没有播放键 它也不会自动播放 看上去就和一张图片似的

所以要加上 controls 属性 让播放键显示出来（此外也能用 width 和 height 调宽高）

<video src="./video/冒泡排序.mp4" controls width="300"> </video>
web-image18

视频可以实现自动播放 autoplay 但是得加上无声 muted（防社死 浏览器不允许）

<video src="./video/冒泡排序.mp4" controls width="300" autoplay muted> </video>

这样一来就能实现 一打开 视频就会播放 但是没有声音

要加循环播放同样是用 loop

链接标签

又叫 a 标签、超链接、锚链接

点击后跳转到另一个页面

输入 a 回车即可

<a href="./sub1.html">超链接</a>

在 <a></a> 中间 放的是点击的对象（点这个东西就可以弹到某处）

web-image19

在 a 标签里面有个 href 的属性 用于选择对象

可以选择跳到当前站点内的一个文件中去 用 ./ 相对路径就行

也可以选择跳到某个网站 用它的网址（绝对路径）

<a href="https://www.baidu.com/">百度</a>

这种情况下我们点击超链接 确实会弹到相应网页

但是 原来的网页被覆盖了

如果想实现保持该网页不变 点击后再开一个网页的效果该如何

——加上 target 属性

web-image20
  • _blank：表示在保留当前网页窗口的状态下 在新窗口中显示被打开的链接网页（点击后新生成一个页面）
  • _parent：表示在当前窗口显示被打开的链接页面（默认如此）
  • _self：同上 区别在于如果是框架网页 parent 在父框架打开 self 在当前框架打开
  • _top：当前窗口打开 如果是框架网页 则删除所有框架 显示当前网页
<a href="./sub1.html" target="_blank">超链接</a>
<a href="https://www.baidu.com/" target="_blank">百度</a>

如果要设置超链接 但暂时不知道该跳转到哪个位置

可以在 href 属性里 使用 # 表示空链接 占位

不过它还有一个妙用

就是 点击它后 会回到页面顶部（逛淘宝遇到过这个功能）

<a href="#">空链接</a>

列表标签

分为三种：无序列表、有序列表、自定义列表

无序列表

输入 ul 回车（un 前缀吧可能 un 什么东西 list）

表示定义一个无序列表

在该列表中的每一项 使用 li 标签

（ul 标签里只允许有 li 标签 li 标签里可以嵌套任意内容）

web-image24

有序列表

输入 ol 回车（可以用 order list 理解）

里面的内容也是用 li 标签

web-image25

同样 ol 标签中只允许嵌套 li 标签 li 标签中可以嵌套任意内容

自定义列表

输入 dl 回车（design list？？）

web-image26 web-image27

dl 标签里可以嵌套 dt 标签（title）和 dd 标签

dt 标签表示自定义列表的主题

dd 标签用于自定义某项内容

特点在于 dd 前会默认显示缩进效果

表格

基本表格

用 table 定义一个表格

  • tr 表示表格的每一行（该表有几行）
  • td 表示表格单元格 放具体每个格子里的内容
web-image28 
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

要多少行就用多少个 tr 每行有多少个内容 就加多少个 td

都是成对出现

另外有个小技巧

格式基本是不变的 要变的只是里面的内容

所以可以想到复制粘贴

但还是比较麻烦

——可以选中一段代码

shift+alt+↓

快速复制粘贴到下方

表格样式属性

另外可以加上一些属性去简单设置一下表格样式（具体得 css）

像表格 应该要有边框

那么就能在 table 标签里面加上一个 border 的属性

理解呢就是

表格其实就是一个大的文本框

每个内容都有一个独自的文本框

然后这些文本框之间应该存在一个空隙 这就是 border

单位为像素

<table border="1">

此外 还可以设置表格的大小

还是和图片视频一样 用 width 和 height 属性

web-image29

虽然没有像 dw 里直接拖动调大小方便

但差别不大

还是要习惯用代码写

表格标题、表头

在前面用的是 h1 作为标题

但好像不是亲生的

表格应该有自己的标题

当然 有相应的标签 且会默认居中显示——caption

web-image30

然后对于表格的首行 一般放些属性名 有着特殊的加粗、居中效果起提示作用

它的标签为 th（table head？）

web-image31

它也是放在列中的（tr 标签里面）

用来替代 td 表示这不是一般的内容 是 th table head 内容

表格结构标签

这个对于效果来说没太大区别

但是对一个表的各部分进行一个标记、分组

有利于后续的管理设计（css 有标签选择器）

对于一个表格可以分成三个块：表格头部、表格主体以及表格底部

web-image32 web-image33 web-image34 web-image35 web-image36

只是给管理者方便后面设计用的 观察到的效果并没有什么不同

然后因为添加了这些东西 对代码的缩进进行了一个调整

同时向后缩进 选中 按 tab 同时向前缩进 选中 shift+tab

合并单元格

像刚才那个表的表尾明显有很多重复的地方 感觉把它合并起来更好看

然后这些连续起来的课 应该也能进行一个合并

纵向合并叫做跨行合并

横向合并叫做跨列合并

有一个原则——左上原则

（上下合并 保留最上的 删除其他

左右合并 保留最左的 删除其他）

首先要明白的是 要合并哪些单元格

先看纵向的

web-image37

要把第一行的 c# 和第二行的 c# 合并

根据原则来看 那就是保留第一行的 c# 把第二行的 c# 删掉

web-image38 web-image39

显然还不够 还少了一步合并

对于纵向的跨行合并 要用到属性 rowspan 加在保留的那个单元格的 td 标签里

要合并多少个单元格 rowspan 的属性值就填多少

web-image40

其他的几个也是同理

web-image41

但是在星期五的三个无的合并遇到了问题

web-image42

如果要把三个无也一起合并

整个第二列就都被注释了

那就会使得单元格变小成一行的空间

不符合本意

所以 还是保留三个无

web-image43

这个问题应该可以用设置单元格大小来解决

再看横向的

web-image44

要合并这些

按照原则就是保留第五列第一个单元

删掉后面的单元 然后在（5,1）处加上一个合并的属性

横向的合并用的是 colspan

web-image45

觉得不好看就加个 center 标签

<td colspan="5"> <center>好好学习，天天向上，加油</center></td>
web-image46

其他的也同理

注意点是：

只有在同一个结构标签里的单元格才能合并

不能跨结构标签合并（thead、tbody、tfoot）

小结一下：

<table broder height width>
<caption></caption>
<thead>
<tr rowspan colspan>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>

表单

对于一些选择性别、地域、勾选协议、输入账号密码、等等功能 都要用到表单

input

非常重要的一个关键词——input

可以通过 type 属性值的不同 展示不同效果

web-image47

text

提示语中默认的就是这个

<input type="text">

用于显示输入单行文本

web-image48

像输入账号就可以用到这个

有些网站比较人性化 他会在这个框里给出一些提示语

用的是 placeholder 属性（占位 提示输入文本）

web-image49 web-image50

password

输入账号 那肯定对应就有输入密码

type 属性中的 password 属性值

<input type="text" placeholder="请输入账号">
<input type="password">
web-image51 web-image52

可见 这个密码框输入进去会默认是用·表示的

旁边有个小眼睛 可以选择显示内容

同时会发现 input 属性不会自动换行

如果要实现那种常见排版 就得手动加上换行标签 br

再完善些 前面可以加提示语

web-image53

radio

关于性别男女这类单向选择 要用到 radio 属性值

web-image54

大致可能会觉得这样实现

web-image55

看上去没什么问题

但是并没有实现两个只能选一个的功能

因为它们是独立的两个 input

那么该怎样去把这俩关联起来呢

用上 name 属性

name——分组 有相同 name 属性的单选框为一组 一组中同时只能有一个被选中

web-image56

这样一来 就基本实现了单选的功能

（好像不能再次点击取消选中）

然后还有一个功能可以实现

就是 比如说某个网站更多是女生在使用

那么就可以在打开该网页时 就默认选定了是女 如果是男性再自行另选

这涉及到一个默认值的属性

checked

<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女

要设置哪个为默认 就在哪个的 input 标签里加上 checked 属性

checkbox

有单选就自然有多选

属性值：checkbox

web-image57

同理 可以加上默认值属性 checked

爱好：<input type="checkbox" checked>吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆

file

有时候客户端需要接受用户端传输的一个文件

这就需要一个功能来帮助用户去提交

web-image58

点击选择文件 就会弹出当前电脑的文件资源管理器

右侧显示状态

但这样只是单选

如果允许多选 就可以加上 multiple 属性

<input type="file" multiple>
web-image59

（这仅仅只是通过选择的渠道 真正要送到后台还需要一系列接口）

按钮

web-image60

单纯生成三个按钮很简单

web-image61

但是怎么真正实现它的提交、重置等功能呢

肯定是要和前面的代码相关联起来才行

要用到 form 标签

比如说现在要实现将上面所有功能（账号密码性别爱好文件）作为一个整体

去提交或者撤销

就要用 form 标签把这些表单标签一同裹起来


账号：<input type="text" placeholder="请输入账号">
<br>
密码：<input type="password" placeholder="请输入密码">
<br>
<br>
性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
<br>
爱好：<input type="checkbox" checked>吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆
<br>
<br>
<input type="file" multiple>
<br>
<br>
<input type="submit"> <input type="reset"> <input type="button">

有个 action 属性

就是说这些东西要提交到哪个文件中去

这个暂时不用管

关于 button 它还可以单独作为一个标签 而不是这里的属性值

学了 JavaScript 就会经常用到 因为它可以自定义

所以有着无限可能

button

这边简单了解一下 button 标签中的一些属性

web-image62 web-image63

select

web-image64

选择城市什么的 这种下拉菜单

就要用到 select 标签

跟表格类似

select 作为整个菜单的整体

option 作为菜单的每一项

web-image65

可以选择默认选中

在相应的 option 标签中加上 selected 属性即可

没加默认选中时 默认会选中第一个

web-image66

textarea

在网页中可能会需要输入多行文本

比如提交作业 提交邮件……

就要用到 textarea 标签

web-image67

cols 规定文本域内可见宽度

rows 规定文本域内可见行数

在网页中可以看到右下角可以拖拽改变大小

但实际上这个功能一般都会被禁用 不然会破坏自己的排版设计

这个禁用只能用 css 禁用 html 无法完成禁用

这个文本框也可以使用 placeholder 去做个提醒 显得不那么单调

<textarea name="" id="" cols="30" rows="10" placeholder="hello"></textarea>

label

可以用于绑定内容和表单标签的关系

比如说 性别选择

web-image68

就可以通过 label 实现 点击"男""女"也能勾选相应的圈

有两种方法

一、使用 label 标签把内容（如：文本）包裹起来 在表单标签上添加 id 属性 在 label 标签的 for 属性中设置对应的 id 属性值

性别:<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<input type="radio" name="sex" checked id="nv"><label for="nv">女</label>

显得比较冗长

二、直接使用 label 标签把内容（如：文本）和表单标签一起包裹起来

需要把 label 标签的 for 属性删除即可

性别：<label><input type="radio" name="sex">男 </label>
<label><input type="radio" name="sex" checked>女</label>

对比下来第二种要方便得多

div 与 span

没有语义的布局标签——div、span

实际开发中会大量频繁地使用这两个标签

  • div 标签：一行只显示一个（独占一行）
  • span 标签：一行可以显示多个

具体等后面深入

web-image69

字符实体

web-image70

至此 html 就基本学完了

来综合性做个网站试试看

实例

注册页面

<!DOCTYPE html>
<html lang="en">
<head>



<title>首页</title>
</head>
<body>
<h1>玮的web</h1>
<hr>

昵称： <input type="text" placeholder="请输入昵称">
<br>
<br>
性别： <label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
<br>
<br>
所在城市： <select name="" id="">
<option value="" selected>江西</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广东</option>
<option value="">福建</option>
</select>
<br>
<br>
希望的用途： <input type="checkbox">学习
<input type="checkbox">娱乐
<input type="checkbox">查阅
<br>
<br>
个人介绍：   <br><textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<br>
<strong>我承诺</strong>
<ul>
<li>年满18岁</li>
<li>保持严肃认真</li>
<li>真诚才是必杀技</li>
</ul>
<input type="checkbox">我同意所有条款
<br><br>
<button type="submit">注册</button>
<button type="reset">重置</button>

</body>
</html>

跳转页面

<!DOCTYPE html>
<html lang="en">
<head>



<title>页面一</title>
</head>
<body>
<h1>这是一个跳转页面</h1>
<hr>
<a href="./sub2.html" target="_blank">猫狗日记</a>
<br>
<a href="./sub3.html" target="_blank">班级课表</a>
<br>
<a href="https://www.baidu.com/" target="_blank">百度</a>
</body>
</html>

页面一：猫狗日记

<!DOCTYPE html>
<html lang="en">
<head>



<title>猫狗日记</title>
</head>
<body>
<h1>猫狗日记</h1>
<ul>
<audio src="./music/郭燕 - 天空之城 (钢琴版).ogg" controls></audio>
<li>萨摩耶</li>
<p>萨摩耶犬（英文：Samoyed），别称萨摩耶，原是西伯利亚的原住民萨摩耶族培育出的犬种，一岁前调皮、灵动。它机警、强壮、灵活、美丽、高贵优雅、乖巧可爱，有着非常引人注目的外表，有"微笑天使"的称号，也有着"微笑天使面孔，捣蛋魔鬼内心"之称。萨摩耶犬的颜色为白色；部分带有很浅的浅棕色、奶酪色、浅棕色。此外其他颜色都属于失格。世界上曾出现过一只灰白色萨摩，FCI承认他是具有纯种血统萨摩耶基因的返祖萨摩，黑色萨摩耶犬极为罕见。</p>
<img src="./images/萨摩耶.jpeg" alt="草地上的萨摩耶" title="草地上的萨摩耶" width="400" height="400">
<li>缅因猫</li>
<p>缅因猫因原产于美国缅因州而得名，是北美自然产生的第一个长毛猫品种，约于18世纪中叶形成较稳定品种。缅因猫体格强壮，被毛厚密，长像与西伯利亚森林猫相似，在猫类中亦属大体型的品种。</p>
<img src="./images/缅因猫.jpg" alt="缅因猫" title="缅因猫" width="400" height="400">
<li>金毛</li>
<p>金毛寻回犬（英文名：Golden Retriever）是原产于英国苏格兰的一种单猎犬。该犬始于18世纪，最初的名字是苏俄追踪犬，后来加入其他犬种的基因。配种的结果产生了此天生具备猎物取回能力，善于追踪及具有敏锐嗅觉的犬种。该犬身材庞大，公犬体重约30～34千克，母狗体重约25～30千克；幼犬时期泛着白色的被毛，随着成长，将逐渐变为黄色（金色）；寿命约14年。金毛寻回犬之所以能够风靡世界，除了漂亮可爱的外表，同时也因为它们天生温驯的个性。金毛寻回犬是一种工作能力很强的猎犬，超强的游泳能力让它能轻而易举地下水衔回猎物。它也是人类最忠实、友善的朋友，性情温和，富有耐心，可作为儿童的玩伴，几乎不吠叫，顺从同伴的指示。该犬经过训练还可作为优秀的导盲犬。在2001年，金毛寻回猎犬更被AKC选为十大最受欢迎注册犬种之一，排名仅次于拉布拉多猎犬。</p>
<img src="./images/金毛.jpeg" alt="小金毛" title="小金毛" width="400" height="400">
<li>金渐层</li>
<p>通常人们说的金渐层，指的是英国短毛猫里面的一个稀有色，即金渐层色。金渐层是一种颜色，而不是一个品种，这一点常常被误解。
英短金渐层是由英短蓝猫改良而来，它体形圆胖，四肢粗短发达，毛短而密，头大脸圆，性格极为友善温柔，极易饲养。它在保留了英短蓝猫的粗壮可爱的体态和大脸之外，还演化出更加迷人的绿色或蓝绿色大圆眼睛，虎头虎脑，更加很让人们喜爱。颜色包括金色、蓝金色、金点色、蓝金点色，黑金色，也有银色、银点色等等。金渐层被很多人称为"土豪金"，也被称作是"招财猫"。</p>
<img src="./images/金渐层.jpeg" alt="金渐层" title="金渐层" width="400" height="400">
</ul>
</body>
</html>

页面二：班级课表

<!DOCTYPE html>
<html lang="en">
<head>



<title>班级课表</title>
</head>
<body>
<h1>课程表</h1>
<hr>
<table border="1" width="400" height="200">
<caption>课程表</caption>
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4"><center>c#</center></td>
<td rowspan="4"><center>数据结构</center></td>
<td rowspan="4"><center>高数</center></td>
<td rowspan="3"><center>近代史</center></td>
<td>&nbsp;</td>
</tr>
<tr>
<!-- <td>c#</td> -->
<!-- <td>数据结构</td> -->
<!-- <td>高数</td> -->
<!-- <td>近代史</td> -->
<td>&nbsp;</td>
</tr>
<tr>
<!-- <td>c#</td> -->
<!-- <td>数据结构</td> -->
<!-- <td>高数</td> -->
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<!-- <td>c#</td> -->
<!-- <td>数据结构</td> -->
<!-- <td>高数</td> -->
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="2"><center>网页设计</center></td>
<td>&nbsp;</td>
<td rowspan="2"><center>外语</center></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<!-- <td>网页设计</td> -->
<td>&nbsp;</td>
<!-- <td>外语</td> -->
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="2"><center>心理</center></td>
<td rowspan="2"><center>体育</center></td>
<td rowspan="2"><center>军事</center></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<!-- <td>心理</td> -->
<!-- <td>体育</td> -->
<!-- <td>军事</td> -->
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"> <center>好好学习，天天向上</center></td>
<!-- <td>天天向上</td>
<td>好好学习</td>
<td>天天向上</td>
<td>加油</td> -->
</tr>
</tfoot>
</table>

<br>
<br>
<video src="./video/冒泡排序.mp4" controls width="400" height="300" autoplay muted></video>
</body>
</html>

附件

  • web前端.docx

⬅️ 01-前端学习路线 🏠 00-前端与可视化 ➡️ 03-CSS 基础