1.HTML

基本框架

1
2
3
4
5
6
7
8
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

其中 title 为当前网页的名称

各类标签

由标签和内容组成的就叫元素，放在 body 内
注意元素之间的换行是由换行标签实现的 元素包含可能出现的图片文字超链接等等

注释标签

1
<!-- 我是注释！！！ --》

注意这里的标签里不要有奇奇怪怪的空格出现

大致框架中的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <h1>NJYgocrazy</h1>
  <!-- n从1到5 hn表示第几级标题 -->

  <hr />
  <!--单标签 水平线 -->

  <h2>about what I do</h2>
  <!--二级标题-->

  <p>
    <!--双标签 段落 重起一行-->

    i can live without <strong>limit</strong>

    <br />
    <!--单标签 换行 注意html源码中的回车换行不会被识别-->
  </p>
</body>

文本格式化标签

a14b6e16136549047a9b8d555e371846

标签名 效果
strong 加粗
em 倾斜
ins 下划线
del 删除线

重点标签

标签名 效果
b 加粗
i 倾斜
u 下划线
s 删除线

strong、em、ins、del标签自带强调语义，可嵌套使用，如<ins><strong>LOVE</strong></ins>，效果为LOVE。

注意这些标签对于文本来说都是可以嵌套使用达到效果的 比如

1
<ins><strong>LOVE</strong></ins>

图像标签

1
2
3
4
5
6
7
<img
  src="./微信图片_20250415153605.jpg"
  alt="my love"
  title="MY LOVE"
  width="50"
  height="60"
/>

这句代码中包含了一个图像元素的所有属性
src 为图片 URL 即位置 可以使用相对地址或绝对地址 是图片必须具备的元素
在这里介绍相对地址和绝对地址的概念
相对地址： 需查找的文件相对于当前文件的位置
其主要的访问方式为: “.”点表示当前文件夹 “..”两点表示上一级文件夹 “/”斜杠表示进入当前文件夹
绝对地址： 在 Windows 中为从盘出发的地址 比如 C: / images / love.jpg 即盘 文件夹 文件名
当然实际要访问的时候复制文件地址就好了
bba85f2b54013bad630dd134832e8f43

属性 作用 说明
alt 替换文本 图片无法显示的时候显示的文字
title 提示文本 鼠标悬停在图片上面的时候显示的文字
width 图片的宽度 值为数字，没有单位
height 图片的高度 值为数字，没有单位

在这里顺便介绍属性的问题
属性名 = ”属性值“
属性之前用空格隔开 没有先后顺序

超链接标签

1
<a href="https://njy.flashfish777.cn/">跳转到我的blog</a>

href 的属性是链接的跳转地址 是超链接的必须属性 href 也可以跳转到本地文件 需要用相对路径查找 当链接为空时

1
<a href="#">跳转到我的blog</a>

可以点击但不能跳转
其后的文字是在当前超链接上展示的文字 比如说 上面的代码的实现是
image-20250415214443657

1
<a href="https://njy.flashfish777.cn/" target="_blank">跳转到我的blog</a>

target 表示新窗口的跳转页面 现在只需要知道 blank 是跳转的一个新窗口即可

音频标签

1
<audio src="音频的URL"></audio>

src 同样为地址 跟图片标签相同

6ce6dd153cd1365a40f101a9407ae16a

属性 作用 特殊说明
src (必须属性) 音频 URL 支持格式：MP3、Ogg、Wav
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放 为了提升用户体验，浏览器一般会禁用自动播放功能 
1
2
<audio src="音频的URL" controls></audio>
<!--注意这里的controls等也为元素但不用 = “”的形式 是其属性值和属性名一样 在大于HTML5的版本中可以省略此形式 -->

视频标签

1
<video src="视频的URL"></video>

src 与之前说的几个都一样 也是地址
4c9103a970fb1ee90e32ed0fbaf52d4c

属性 作用 特殊说明
src (必须属性) 视频 URL 支持格式：MP4、WebM、Ogg
controls 显示视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放 为了提升用户体验，浏览器支持在静音状态自动播放

这里面属性的写法就很像上面音频说明的情况了 这里就不再写了

列表

即布局内容整齐的区域 ——>无序列表 有序列表，定义列表

无序列表，有序列表

其基本格式基本一样 只列表标签不同 ul 表示无序列表，ol 表示有序列表 li 表示列表条目

ul，ol 嵌套 li

ul 标签内只能包裹 li 标签 li 标签内可以包裹任何内容

无序列表

1
2
3
4
<ul>
  <li>我是第一项</li>
  <li>我是第二项</li>
</ul>

有序列表

1
2
3
4
<ol>
  <li>我是第一项</li>
  <li>我是第二项</li>
</ol>

两种列表的实现效果如下

image-20250416151009618

定义列表
1
2
3
4
5
6
7
8
9
10
11
12
<dl>
  <dt>what i learn</dt>
  <dd>
    <!-- 二分
            <br>
            dfs -->
    <ol>
      <li>贪心</li>
      <li>bfs</li>
    </ol>
  </dd>
</dl>

dl 嵌套 dt 和 dd

dl 是定义列表 dt 是定义列表的标题 dd 是定义列表的描述或详情

dl 里面只能包含 dt 和 dd

dt 和 dd 里面就能包含任何的内容 比如上述代码中的单纯文本或者有序列表都可以

表格

1
2
3
4
5
6
7
8
9
10
11
12
<table>
  <tr>
    <th>姓名</th>
    <th>学号</th>
    <th>高数</th>
  </tr>
  <tr>
    <td>NJY</td>
    <td>100</td>
    <td>99</td>
  </tr>
</table>

表格是以逐行书写的

table 为表格标签 其中嵌套 tr 表示每一行 tr 中嵌套 th（表头单元格） td（内容单元格）

image-20250416205336660

注意 表格默认是没有边框线的 需要使用 border 属性为表格添加边框线

border 后面的值表示表格边框的宽度 这里没有单位的 1 表示宽度像素为 1

1
2
3
4
5
6
7
8
9
10
11
12
<table border="1">
  <tr>
    <th>姓名</th>
    <th>学号</th>
    <th>高数</th>
  </tr>
  <tr>
    <td>NJY</td>
    <td>100</td>
    <td>99</td>
  </tr>
</table>

image-20250416205534581

表格结构标签（仅了解）

划分内容区域

image-20250416210013140

标签名 含义 特殊说明
thead 表格头部 放置表格头部内容
tbody 表格主体 存放主要内容区域
tfoot 表格底部 用于汇总信息区域

这样的话原代码就可以写成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>学号</th>
      <th>英语</th>
      <th>高数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NJY</td>
      <td>98</td>
      <td>100</td>
      <td>99</td>
    </tr>
    <tr>
      <td>TJ</td>
      <td>98</td>
      <td>100</td>
      <td>99</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td>全校第一</td>
      <td>全校第一</td>
      <td>全校第一</td>
    </tr>
  </tfoot>
</table>

注意表格的操作 合并单元格是不能跨结构标签进行的

此时效果为

image-20250416211353817

当然省略 thead tbody tfoot 标签 每行单独起的效果是完全相同的

合并单元格

即将多个单元格合并成一个单元格 以合并同类信息 相同信息

合并单元格的步骤:
明确合并的目标
保留最左最上的单元格，添加属性(取值是数字，表示需要合并的单元格数量)
跨行合并，保留最上单元格，添加属性 rowspan
跨列合并，保留最左单元格，添加属性 colspan
删除其他单元格

image-20250416205836399

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>学号</th>
      <th>英语</th>
      <th>高数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NJY</td>
      <td>98</td>
      <td rowspan="2">100</td>
      <td>99</td>
    </tr>
    <tr>
      <td>TJ</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>99</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td>全校第一</td>
      <td>全校第一</td>
      <td>全校第一</td>
    </tr>
  </tfoot>
</table>

效果为image-20250416211419496

跨列合并几乎完全同理 省略不写

表单

作用为收集用户信息

使用场景可以是登录页面 注册页面和搜索区域

input 标签的基本使用

input 为单标签具有 type 属性 属性不同 则功能不同

1
<input type="..." />

常见的 type 属性值有

type 属性值 说明
text 文本框，用于输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件

image-20250416212112947

1
2
3
4
5
6
7
8
9
10
11
<!-- 特点是输入什么显示什么 单行 不会换行 -->
姓名：<input type="text" />
<br />
<!-- 特点是输入什么都会以点的形式演示 -->
输入密码：<input type="password" />
<br />
单选框 <input type="radio" />
<br />
多选框 <input type="checkbox" />
<br />
上传文件 <input type="file" />

显示效果如下image-20250416213450189

input 标签占位文本（文本框密码框）

占位文本其实就是 input 标签中的一个属性 placeholder

1
<input type="..." placeholder="提示信息" />

一般用在文本框和密码框中

1
2
3
姓名：<input type="text" placeholder="输入昵称" />
<br />
输入密码：<input type="password" placeholder="输入密码" /> <br />

当前的效果为image-20250416213837102

单选框 radio
属性名 作用 特殊说明
name 控件名称 用于控件分组，实现同组内单选功能，即同组只能选中一个
checked 默认选中 属性名和属性值相同，可简写为一个单词

image-20250416214418011

name 属性

name 属性 相当于一个分组的标签 用于实现单选操作

对于一组需要单选的元素来说 我们需要这组中的每个元素中的 name 属性都是相同的 这个属性值即名称可以随便取

checked 属性

对于写了这个属性的元素 进入网页时会默认勾选该元素 其名和值一样 直接简写成一个单词即可

1
2
性别： <input type="radio" name="gender" checked /> 男
<input type="radio" name="gender" /> 女

image-20250416214750650

上传文件 file

默认只能上传一个文件 添加 multiple 属性就可以实现文件多选功能

1
上传文件 <input type="file" multiple />

image-20250417122540111

多选框 checkbox

默认选中属性为checked

1
2
多选框 <input type="checkbox" checked /> 前端
<input type="checkbox" checked /> 后端 <input type="checkbox" /> 保研

image-20250417124047205

下拉菜单

select 嵌套 option 其中 select 是下拉菜单的整体 option 是下拉菜单中的每一项

1
2
3
4
5
6
7
城市
<select>
  <option>北京</option>
  <option>上海</option>
  <option selected>成都</option>
  <option>杭州</option>
</select>

selected 是 option 一个属性 表示默认选中 效果如下

image-20250417124714430

注意 其实 select 和 option 中是有其他属性的 但只在后台传输数据的时候使用 所以这里先略去

1
2
3
<select name="" id="">
  <option value=""></option>
</select>
文本域

即多行输入文本的表单控件 其中文字会自动换行

1
<textarea name="" id="">提示文字</textarea>

注意这里的 name 和 id 也是用于后台传输数据用的 现在省略即可

右下角有拖拽功能 但在后续开发中会将其禁用掉

虽然 textarea 有设置尺寸的功能 但我们都只用 css 去设置尺寸

image-20250417125250078

label 标签

即网页中某个标签的说明文本

一个经验是可以用 label 标签绑定文字和表单控件之间的关系 增大表单控件的点击范围从而提高用户体验

写法一

label 标签只包裹内容不包裹表单控件

设置 label 标签中的 for 属性和表单控件的 id 属性值相同

1
2
3
4
5
性别：
<input type="radio" name="gender" checked id="man" />
<label for="man">男</label>
<input type="radio" name="gender" id="woman" />
<label for="woman">女</label>

image-20250417130019106

此时不管是点击单选框的小圆圈（即表单控件）还是后面的文字男女 都可以进行选择了

写法二

使用 label 标签同时包裹文字和表单控件 不需要其他属性

1
2
3
性别：
<label><input type="radio" name="gender" />女</label>
<label><input type="radio" name="gender" checked />男</label>

这种写法与上种写法的效果是完全相同的

上面的两种写法都以单选框举例 但实际上 支持 label 标签增大点击范围的表单控件还有很多 比如文本框密码框上传文件 单多选框 下拉菜单文本等等

按钮

标签 button 与 input 相似 也具有 type 属性 type 属性不同其作用也就不同

1
<button type="">按钮</button>

image-20250417131245256

type 属性值 说明
submit 提交按钮，点击后可将表单数据提交到后台（默认功能 ）
reset 重置按钮，点击后使表单控件恢复默认值
button 普通按钮，默认无功能，常配合 JavaScript 使用

如果省略 type 属性的话功能则是提交

按钮还需要一个 form 表单区域标签 它即是一个统一管理一块区域的数据和功能 所以示例代码如下

1
2
3
4
5
6
7
8
<form action="">
  <!--action属性是未来发送数据的地址 现在暂时忽略 -->
  姓名：<input type="text" placeholder="输入昵称" />
  <br />
  输入密码：<input type="password" placeholder="输入密码" />
  <br />
  <button type="reset">重置</button>
</form>

此时直接按重置按钮即可实现对姓名和密码的重置

image-20250418090153325

无语义的布局标签

作用为布局网页 即划分网页区域 摆放内容

div 标签

div 标签中的内容只会独占一行 任何新起的都会换行 所以一个 div 标签包含的空间会比较大（一整行） 所以被称为大盒子

1
2
<div>这是div标签</div>
<div>这是div标签</div>

其展示效果如下image-20250418090651999

span 标签

span 标签不会自动换行 所以其一个标签包含的空间很小 故而称为小盒子

1
<span>这是span标签</span> <span>这是span标签</span>

展示效果如下image-20250418090800070

字符实体

作用是在网页中显示预留字符 因为在 html 中某些符号可能已经在语法中应用 所以需要用字符实体在网页中显示预留字符

常用的字符实体有

显示结果 描述 实体名称
  空格
< 小于号 <
> 大于号 >

image-20250418091014540

注意 虽然在文本中直接打空格是会显示的 但不管手动打了几个空格 都只会显示一个空格 所以如果我们需要多个空格 就要使用字符实体

1
2
3
4
5
6
7
<p>
  i can live without &nbsp; &nbsp; <strong>limit</strong>
  <br />
  <ins><strong>LOVE</strong></ins>
  <br />
  &lt;p&gt;
</p>

由上代码可知 字符实体直接放在文本中即可

展示效果为image-20250418091421958