【教程】HTML5基础

已于 2024-05-06 14:37:13 修改
阅读量631 收藏 2
点赞数 3
分类专栏： 教程 文章标签： html5
于 2023-09-14 10:08:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pqf18064375973/article/details/132842542
版权

一、HTML入门

1.1 HTML介绍

HTML（HyperText Markup Language，超文本标记语言）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。HTML通过标签的使用来达到设计网页和界面的效果。

1.2 HTML创建网页

1.2.1 HTML主体结构

网页的基本构成：
​​​​在这里插入图片描述

HTML代码基本框架：

<html>    <!--html界面起始标签-->

    <head>    <!--页面抬头部分设计标签-->
        <title>    <!--页面标题名称标签-->
            XXXXXXXXXX    <!--在这里书写标题内容-->
        </title>
    </head>

    <body>    <!--页面主干部分标签-->
        XXXXXXXXXXXXXXXXXXXX    <!--在这里书写页面主干内容-->
    </body>
</html>    <!--html界面终止标签-->

1.2.2 在<head>中使用的标签

(1)<title>

作用： 为网页创建标题名称。
格式： <title> [名称] </tile>
示例： 创建名称为hello html的名称：

<title>
	hello html
</title>
(2)<meta>

作用： 创建子信息，即为主信息进行补充。（该处信息不会在界面显示）
格式： <meta name="[可选项]" content="[子信息]">
可选项表：

可选项解释
author作者
description对主信息的描述
keywords搜寻关键字

示例： 已知海南师范大学的简称为“海师”。则创建主信息为“海南师范大学”，关键字为“海师”的标签：

<head>
	<title>海南师范大学</title>
	<meta name="keywords" content="海师">
</head>
(3) <base>

作用： 调用或存储媒体文件。
格式： <base href="[文件路径（建议使用绝对路径）]">
示例： 调用路径为d:/images/ 的文件：

<base href="d:/images/">
(4) <style>

作用： 自定义网页风格。
格式：

<style [可选项]="[类型]">
[自定义风格]
</style>

可选项表：

可选项类型解释
mediahandheld/screen/projection/tv对css样式进行指定
typetext/css对样式表的类型进行指定

示例： 设置标题为红色的样式表：

<style type="text/css">
	h1 { color:red; }
</style>
(5) <link>

作用： 调用外部链接。

(6) <script>

作用： 应用JavaScript组件。

(7) <noscript>

作用： 对禁止使用JavaScript组件的网页进行Script组件调用。

1.2.3 在<body>中使用的标签

(1)添加标题

格式： <hn> [标题内容] </hn> （n为1~6的数字）
各级标题表示：

标题等级样式
一级标题<h1> [标题内容] </h1>
二级标题<h2> [标题内容] </h2>
三级标题<h3> [标题内容] </h3>
四级标题<h4> [标题内容] </h4>
五级标题<h5> [标题内容] </h5>
六级标题<h6> [标题内容] </h6>
(2)添加段落

格式： <p> [文本内容] </p>

补充：
文本左右对齐：<p align="justify"> [文本内容] </p>
文本左右对齐：<p style="text-align:justify"> [文本内容] </p>

(3)添加标签区

格式： <details> [标签内容] </details>

(4)添加总结区

格式： <summary> [小标题] </summary>

(5)设置页面布局
效果标签
对文本进行段落分组< div >
设置文本的属性< span >
(6)设置文本格式
效果标签
加粗<b>
倾斜<i>
下划线<u>
(7)设置清单（有序/无序/自定义标题清单）

(7-1) 有序清单
格式：

<ol>
	<li> [清单内容] </li>
	[ ……（可接多条清单） ]
</ol>

效果展示：
在这里插入图片描述
有序清单可加项：

可加项可加元素作用示例
start[number]自定义起始序号设置起始序号为5：<ol start=5>
type1/A/a/I/i自定义序号类型设置序号类型为英文小写字母：<ol type="a">

(7-2) 无序清单
格式：

<ul>
	<li> [清单内容] </li>
	[ ……（可接多条清单） ]
</ul>

效果展示：
在这里插入图片描述
无序清单可加项：

可加项可加元素作用示例
typedsic（实心点）/circle（空心圆）/square（方形点）自定义点的类型设置点类型为空心圆：<ul type="circle">

(7-3) 自定义标题清单
格式：

<dl>
	<dt> [自定义标题] </dt>
		<dd> [清单内容] </dd>
		
	[ ……（可接多条清单） ]
</dl>

效果展示：
在这里插入图片描述

(8)换行标签

格式：<br>
效果展示：
在这里插入图片描述

(9)添加页面分割线

格式：<hr>
效果展示：
在这里插入图片描述

(10)添加图片文件

格式：<img src="[图片文件路径]">
当图片文件与源码在同一目录下时，直接通过文件名调用即可。

为图片文件设置像素值：
<img src="[图片文件路径]" width="[num]" height="[num]">

(11)添加文件链接

格式：<a href="[链接文件]">[链接按钮名称]</a>
示例： 被链接文件为 “A.html”，在主页面上创建名为“link_A”的链接按钮，以此访问“A.html”

<a href="A.html">link_A</a>

链接按钮也可以有图片代替。
如：将上例的文字链接按钮“link_A”替换成图片（假设图片文件名为“A.jpg”）

<a href="A.html"><img src="A.jpg" width="20" height="30"></A>
(12)添加影像文件

(12-1) <audio>
作用： 添加音频文件
格式：

<audio [可选项]="[可选项元素]" src="[影像文件路径]">
[若不支持播放此文件，则会显示这里的文本]
</audio>
可选项可选项元素解释
autoplayautoplay自动播放
controlscontrols对媒体文件的开始、暂停和终止进行控制
looploop循环播放媒体文件

(12-2) <video>
作用： 显示视频文件
格式：

<video [可选项]="[可选项元素]" src="[影像文件路径]">
[若不支持播放此文件，则会显示这里的文本]
</video>
可选项可选项元素解释
autoplayautoplay自动播放
controlscontrols对媒体文件的开始、暂停和终止进行控制
looploop循环播放媒体文件

可以通过width和height对媒体文件的大小进行调整。
示例：

<video width="200" height="240" controls="controls" src="A.mp4">
Your browser doesn'tsupport this audio format.
</video>
(13)数据的测量与进度条的显示

(13-1) <mater>
**作用：**用进度条显示当前磁盘所占空间的大小
格式： <mater [可选项]="[可加元素]"></meter>
可选项表

可选项可加元素解释
highnumber指定最大范围
lownumber指定最小范围
maxnumber指定进度条的最大值
minnumber指定进度条的最小值
valuenumber指定当前所占空间的大小
formform_id记录进度条所属的表单id

(13-2) <progress>
作用： 查看对文件的操作进度
格式： <progress value="[当前进度] max="[进度条的最大限度]""></progress>

(14)语义标签的添加

语义标签，不会更改UI的界面设计与功能。它只会对标签所指定的部分产生作用。（如：页眉，页脚）

(14-1) <hgroup>
作用： 对网页的标题进行组合
格式： <hgroup></hgroup>

(14-2) <article>
作用： 定义独立内容，提升页面的可读性
格式： <article></article>

(14-3) <aside>
作用： 添加文章的附属部分（如：插件、广告）
格式： <aside></aside>

(14-4) <header>
作用： 对网页插入页眉
格式： <header></header>

(14-5) <footer>
作用： 对网页插入页脚
格式： <footer></footer>

(14-6) <nav>
作用： 创建文章导航（通过超链接的方式创建目录栏或导航栏）
格式： <nav></nav>

(14-7) <figure>
作用： 表示对媒体的单元化引用
格式： <figure></figure>

二、网页的优化

2.1 与风格相关的工作

2.1.1 CSS语法

(1) 语法格式：

selector /*选择器*/
{
property:value; /*[风格选项]:[元素]*/
[......（可接多个二风格选项）]
}

(2) 样例
样例一：

h1 {color:red; font-style:italic;}

样例二：

body
{
font-family:arial;
color:red;
font-style:italic;
}

2.1.2 样式表类型

(1) 内联样式表

(1-1) 基本概念
内联样式表的样式规则写在相应标签中。

(1-2) 格式

<[选项] style="[风格选项]"></[选项]>

(1-3) 样例

<p style="font-size:24pt; color:red">Hello HTML</p>
(2) 内部样式表

(2-1) 基本概念
内部样式表(嵌入式样式表)的样式规则写在<style>标签内。

(2-2) 格式

<style type="text/css">
[选择器]
{
[风格选项]:[元素];
[......(可接多个风格)]
}

(2-3) 样例

<style type="text/css">
p
{
color:red;
font-size:20pt;
}
(3) 外部样式表

(3-1) 基本概念
外部样式表的样式规则写在一个单独的文件中，即css文件。

(3-2) 格式
外部样式表书写格式：

[选择器]
{
[样式风格]:[元素];
[......]
}

调用格式：

<link type="text/css" rel="stylesheet" href="[css文件名称]">

(3-3) 样例
已知外部css的文件名为mystyle.css，其内部为：

p{
color:red;
font-size:12pt;
}

则调用mystyle.css文件格式为：

<link type="text/css" rel="stylesheet" href="mystyle.css">

2.1.3 css选择器

(1) ID选择器

(1-1) 基本概念
ID选择器是用#定义的选择器类型。

(1-2) 格式
创建选择器：

<style>
#[选择器名称]
{
[风格选项]:[元素];
[......]
}
</style>

一定要在<style>标签内创建！！！

调用格式：

<[选项] id="[选择器名称]"></[选项]>

(1-3) 样例
创建名称为pname的ID选择器：

#pname
{
color:red;
font-size=20;
}

调用pname的ID选择器：

<p id="pname">Hello HTML</P>
(2) 类选择器

(2-1) 基本概念
类选择器是用.定义的选择器类型。

(2-2) 格式
创建选择器：

<style>
.[选择器名称]
{
[风格选项]:[元素];
[......]
}
</style>

一定要在<style>标签内创建！！！

调用格式：

<[选项] class="[选择器名称]"></[选项]>

(2-3) 样例
创建名称为pname的ID选择器：

.pname
{
color:red;
font-size=20;
}

调用pname的ID选择器：

<p class="pname">Hello HTML</P>

2.1.4 HTML中有关风格的选项

(1) 字体相关选项font

(1-1) 设置字体类型font-family
①用途
设置文本字体的类型。

②可选项

可选项解释
times new roman新罗马体
courier信使体
verdanaverdana体
helveticahelvetica体
arialarial体
san-Serifsan-Serif体

③示例
设置字体为新罗马体：

{font-family:times new roman;}

(1-2) 设置字体大小font-size
①用途
设置文本字体的大小

字体的大小可用用：px(像素)、%(百分比)、large/small(绝对大小)来表示。

②示例

{font-size:12px;}
{font-size:90%;}
{font-size:x-small;}

(1-3) 设置字体风格font-style
①用途
设置字体为正体或斜体。

②示例
设置字体为正体：

{font-style:normal;}

设置字体为斜体：

{font-style:italic;}
{font-style:oblique;}

italic和oblique的区别：
italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜

(1-4) 使字体变体font-variant
①用途
使文体以规定的字体显示出来。

②示例

{font-variant:normal;}
{font-variant:small-capes;}

(1-5) 设置字体粗细font-weight
①用途
设置字体的粗细程度

②示例
直接指定正常/加粗

{font-wweight:normal/bold;}

以十进制值设置粗细程度：

{font-weight:"600";}

(1-6) 集中设置字体属性font
①用途
通过一次font的使用，完成字体所有属性的设置。

②示例
设置字体为：斜体、粗体、大小为15px的新罗马体

{font:italic bold 15px arial;}
(2) 文本相关选项

(2-1) 文本对齐text-align
①用途
使文本整体进行对齐。

②对齐选项

对齐可选项解释
left左对齐
right右对齐
center居中
justify左右对齐

③示例
使文本居中显示：

{text-align:center;}

(2-2) 文本缩进text-indent
①用途
设置文本块中第一行的缩进。

可以按百分比或像素值缩进。

②示例
使文本缩进25个像素/8个百分比

{text-indent:25px/8%;}

(2-3) 行间距line-height
①用途
设置行间距。

可以按像素、长度来设置

②示例

{line-height:10pt/100%;}

(2-4) 文本方向direction
①用途
设置文本的起始方向。

②示例
文本内容从左向右：

{direction:ltr;}

文本内容从右向左：

{direction:rtl;}

(2-5) 设置字符的位置vertical-align
①用途
设置字符距离该字符所在行基线的长度。

②可选项

  • 通过sub/super/baseline来设置；
  • 通过百分比/像素值来设置。

③示例

//直接设置字符位置为：sub
{vertical-align:sub;}
//设置字符距离为：50%
{vertical-align:50%;}
//设置距基准线下方的30px
{vertical-align:-30px;}
//设置距基准线上方的：20px
{vertical-align:20px;}

(2-6) 设置文本颜色color
①用途
为文本设置自定义颜色。

可以通过颜色名称、rgb值、hex值来进行颜色设置。

②示例

//名称定义
{color:red;}
//hex值定义
{color:#00ff00;}
//rgb值定义
{color:rgb(0,0,255)}

(2-7) 设置文本修饰符text-decoration
①用途
使用指定修饰符修饰文本内容。

②可选项

可选项解释
none无设置
underline下划线
overline上划线
line-through穿过字符的线

③示例

{text-decoration:underline;}

(2-8) 文本转换text-transform
①用途
使文本的大小写相互转换。

②可选项

可选项解释
capitalize首字母大写
uppercase转换为大写
lowercase转换为小写
none无设置

③示例

{text-transform:uppercase;}

(2-9) 设置字符间距letter-spacing
①用途
对文本中每个字符的间距进行设置。

②示例
字符间距增加2像素值：

{letter-spacing:2pt;}

字符间距减少3像素值：

{letter-spacing:-3pt;}

(2-10) 设置词之间的间距word-spacing
①用途
设置单词与单词之间的间距。

②示例

{word-spacing:30px;}
(3) 链接link

(3-1) 用途
用于指定链接的状态。

(3-2) 可选项

可选项解释
link一个未访问的链接
visited一个访问过的链接
hover当鼠标放置或移动到链接上时会出现的链接
active单击时显示链接

(3-3) 示例

<style>
a:link {
color:red;
}
a:visited{
color:blue;
}
</style>
(4) 列表list

(4-1) 列表样式位置list-style-position
①用途
用于根据内容流指定列表项标记的位置。

②示例

//位于列表内部
{list-style-position:inside;}
//位于列表外部
{list-style-position:outside;}

(4-2) 列表样式类型list-style-type
①用途
用于指定列表标记的类型。

②可选项

可选项解释
circle圆点
square方点
decimal十进制数
lower/upper-roman罗马字母大小写
lower/upper-alpha希腊字母大小写
lower/upper-latin拉丁字母大小写
none无设置

③示例

{list-style-type:upper-alpha;}

(4-3) 列表样式图像list-style-image
①用途
在列表标项上设置自定义图像。

②示例
已知图像名称为A.gif

{list-style-image:url('A.gif');}

(4-4) 列表风格的集成设定list-style
①用途
一次性设定完列表的所有风格。

②示例

{list-style:square outside url(A.gif);}
(5) 背景设置background

(5-1) 设置背景颜色background-color
①用途
对背景页面的颜色进行设置。

②示例
将背景颜色设置为黄色：

{background-color:yellow;}

(5-2) 背景图片的插入background-image
①用途
对背景插入自定义的图片

②示例

{background-image:url('A.gif');}

③可加项
|可加项|解释|
|no-repeat|强制图片不会重复|
|center|使图片居中显示|
|background-attachment:fixed|使背景图片不会随界面滑动而滑动|

补充示例：
设置居中不重复不会随界面移动的背景图片，要求背景图片铺满整个屏幕：

{
background:url("A.jpg") no-repeat center;
width:100%;
height:100%;
background-size:100% 100%;
background-attachment:fixed;
}

(5-3) 集成设置背景页面background
①用途
一次性完成对背景风格的设置。

②示例

{background:green url("A.gif");}

2.1.5 分组和嵌套定义样式

(1) 群组定义

格式：

[选择器1],[选择器2],[....]
{
	[可选项]:[元素]；
	[....]
}

示例：

h1,p
{
	color:red;
}
(2) 嵌套定义

(2-1) [tag1]>[tag2]
①解释：
只有在[tag1]中的第一层[tag2]标签会起作用，其他深层次标签不会产生作用。

②示例：

<tag1>
	<tag2>[起作用]</tag2>
	
	<tag3>
		<tag2>[不起作用]</tag2>
	</tag3>
</tag1>

<tag2>[不起作用]</tag2>

(2-2) [tag1] [tag2]
①解释：
在[tag1]中的所有[tag2]标签都会起作用。

②示例：

<tag1>
	<tag2>[起作用]</tag2>

	<tag3>
		<tag2>[起作用]</tag2>
	</tag3>
</tag1>

	<tag2>[不起作用]</tag2>

(2-3) [tag1]+[tag2]
①解释：
只有紧跟着tag1的tag2标签才会产生作用。

②示例：

<tag1>
	[....]
</tag1>
	<tag2>[起作用]</tag2>

<tag1>
	[....]
</tag1>
	<tag3>
		<tag2>[不起作用]</tag2>
	</tag3>

	<tag2>[不起作用]</tag2>

(2-4) [tag1]~[tag2]
①解释：
在tag1下方第一层的所有tag2标签都会产生作用，其他深层次标签都不会产生作用。

②示例：

<tag1>
	[....]
</tag1>
	<tag2>[起作用]</tag2>
	
	<tag3>
		<tag2>[不起作用]</tag2>
	</tag3>
	
	<tag2>[起作用]</tag2>

2.1.6 控制元素的可见性

(1) display

(1-1) 用途
隐藏元素并且不保留元素位置。

(1-2) 格式
display:[可选项]

(1-3) 可选项表

可选项解释
none此元素不会被显示。
block此元素将显示为块级元素，此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素，元素前后没有换行符。

(1-4) 示例

li{
diaplay:inline;
}
(2) visibility

(2-1) 用途
隐藏元素并且保留元素位置。

(2-2) 格式
visibility:[可选项]

(2-3) 可选项表

可选项解释
hidden元素是不可见的。
visible默认值。元素是可见的。

(2-4) 示例

h2{
visibility:hidden;
}

2.1.7 HTML元素的定位

(1) position

(1-1) 用途
定位网页上元素的位置

(1-2) 定位方法

方法解释
static元素根据页面的正常流程进行定位的
fixed根据浏览器窗口进行定位。即使浏览器窗口进行滑动，但元素位置不发生变化
relative元素相对于其所在位置进行定位
absolute将元素固定到网页的一个位置，它的位置不会受其他元素的影响

(1-3) 定位属性

属性解释可选项示例
bottom设置定位元素底部的距离auto(自动)、length(长度)、percentage(百分比)距离底部5个像素:{bottom:5px;}
top设置定位元素上边的距离uto(自动)、length(长度)、percentage(百分比)距离顶部5个像素:{top:5px;}
left设置定位元素左边的距离uto(自动)、length(长度)、percentage(百分比)距离左边5个像素:{left:5px;}
right设置定位元素右边的距离uto(自动)、length(长度)、percentage(百分比)距离右边5个像素:{right:5px;}
position指定元素使用的定位方法static、zbsolute、fixed、relative{position:static}
z-index用于指定一个元素是出现在另一个元素的左边还是另一侧auto、number{z-index:-1;}

(1-4) 综合示例

h3{
position:absolute;
top:0px;
}
(2) float

(2-1) 用途
决定两个元素的相互位置，相置于左侧或右侧。

(2-2) 格式
float:[可选项]

(2-3) 可选项表

可选项解释
left元素设置为左侧
right元素设置为右侧
none元素不变化

(2-4) 示例

img{
float:left;
}
(3) clear

(3-1) 用途
用于关闭HTML元素的浮动效果。

(3-2) 格式
clear:[可选项]

(3-3) 可选项表

可选项解释
both任意方向清除浮动效果
left从左侧清除浮动效果
right从右侧清除浮动效果

2.2 元素的过渡、动画、转换

-webkit：适用于Safari、Chrome、Firefox浏览器；
-o-：适用于Opera浏览器。

2.2.1 过渡transitions

(1) 用途

用于对元素自身属性的转化。

(2) 使用方法
类型解释可选项示例
transition-property声明出对什么属性进行变化all(全部)、name(属性的名称)对宽度进行变化：{transition-property:width;}
transition-duration设置多长时间后开始过渡变化秒s、毫秒ms2秒后开始过渡变化：{transition-duration:2s;}
transition-timing-function设置过渡用什么方法linear(线状变化)、ease(缓慢出现)、ease-in/out(浅出/浅入)使用线状方式变化：{transition-timing-function:linear;}
transition-delay过渡效果进行的持续时间秒s设置过渡进行时间为2s：{transition-delay:2s;}
transition集成设置过渡属性方法/{transition:width 2s;} 或 {transition:width 2s, heigth 2s;}
(3) 示例

将宽度有200px变化为400px：

div{	/*过渡变化前属性设定*/
	width:200px;
	height:200px;
	background:red;
	-webkit-transition:width 4s;
}
div:hover{	/*变化结果属性设定*/
	width:400px;
}

若本区域发生变化，则本区域下方的元素也会受到变化的影响，其位置也会跟着移动。

2.2.2 动画animations

(1) 用途

对元素的位置或者自身属性进行变化。

(2) 格式

(2-1) 根据过程进行变化

@keyframe [关键帧名称]
{
	from { [可选项]:[可选项元素];}	    /*初始属性*/
		to { [可选项]:[可选项元素];}	/*变化结束属性*/
}

(2-2) 根据时间进行变化

@-webkit-keyframes [关键帧名称]
{
	0% { [可选项]:[可选项元素];}
	[0%~100%] { [可选项]:[可选项元素];}
}

n% 表示在规定时间的 百分之多少 进行规定变化。

(3) 使用方法
方法解释可选元素示例
animation-name使用动画的元素名称[关键帧的名称]{animation-name:first;}
animation-duration完成动画所需要的时间秒s设置2s内完成动画：{animation-duration:2s;}
animation-timing-function设置动画进行的方式linear(线状变化)、ease(缓慢出现)、ease-in/out(浅出/浅入)使用线状方式变化：{animation-timing-function:linear;}
animation-delay设置动画所保持停留的时间秒s设置动画保持4s：{animation-delay:4s;}
animation-direction设置动画是否交替循环播放normal(正常进行)、alternate(交替进行)设置动画交替进行：{animation-direction:alternate}
animation-iteration-count设置动画进行的次数[播放次数]、infinite(持续进行)动画播放3次：{animation-iteration-count:3;} 动画持续播放：{animation-iteration-count:infinite;}
animation-play-state设置动画的显示状态running(运行)、paused(静止)设置动画静止：{animation-play-state:paused;}
animation集成设置动画属性||
(4) 示例

1. 设置元素位置由距顶部0px运动至400px：

div{   /*设置元素属性*/
	width:200px;
	height:200px;
	background:red;
	-webkit-animation:maveDiv;
	-webkit-animation-duration:5s;
}
@-webkit-keyframes moveDiv{   /*设置动画运动属性*/
	from {margin-top:0px;}
		to {margin-top:400px;}
}

2. 已知动画总时间为10秒。设置元素在第0秒、第2秒、第4秒和第8秒颜色分别变化为红色、绿色、蓝色、黄色：

div{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	-webkit-animation-name:myFirst;
	-webkit-animation-duration:10s;
}
@-webkit-keyframes myFirst{
0%  {background:red;}
20% {background:green;}
40% {background:blue;}
80% {background:yellow;}
}

2.2.3 转换transformations

(1) 二维转换

(1-1) 用途
对平面图形进行转换。

网页下的坐标形式：
在这里插入图片描述

(1-2) 转换方法

方法格式解释
translatetranslate(x,y)将元素移动至(x,y)处
rotaterotate([角度])元素旋转一定度数
skewskew(x-angle, y-angle)元素关于x轴旋转x-angle度，且关于y轴旋转y-angle度
scalescale(X,Y)x,y值成比例扩大或缩小X，Y倍

(1-3) 示例

div{
	width:200px;
	height:100px;
	background:red;
	transform:rotate(60deg); /*旋转60度*/
}
(2) 三维转换

(2-1) 用途
对立体图形进行转换。

(2-2) 使用方法

  • rotateX()：关于X轴旋转图形。
  • rotateY()：关于Y轴旋转图形。

三、表格和框架的使用

表不仅可以用于显示数据，也可以用于设置页面布局。

3.1 表格的创建

3.1.1 表格主体的创建

(1) 基本格式
<table> <!--表格的标签-->
	
	<tbody> <!--表格主体的标签-->
	
	<tr> <!--行标签，第一行-->
		<td>[列的信息1.1]</td> <!--列标签-->
		<td>[列的信息1.2]</td>
		[.....] <!--更多的列-->
	</tr> <!--行的结束标签-->
	
	<tr> <!--第二行-->
		<td>[列的信息2.1]</td>
		<td>[列的信息2.2]</td>
		[.....] <!--更多的列-->
	</tr>
	
	[....] <!--更多的行-->

	</tbody> <!--表格主体的结束标签-->
	
</table> <!--表格的结束标签-->
(2) 示例一

示例代码：

<table>
            <tbody>

                <tr> <!--第一行-->
                    <td>Name</td>    <!--第一列-->
                    <td>ID</td>      <!--第二列-->
                    <td>Phone</td>   <!--第三列-->
                    <td>Address</td> <!--第四列-->
                </tr>

                <tr> <!--第二行-->
                    <td>Price</td>   <!--第一列-->
                    <td>0001</td>    <!--第二列-->
                    <td>1234567</td> <!--第三列-->
                    <td>Shaanxi</td> <!--第四列-->
                </tr>

                <tr> <!--第三行-->
                    <td>Mark</td>    <!--第一列-->
                    <td>0002</td>    <!--第二列-->
                    <td>7890123</td> <!--第三列-->
                    <td>Hainan</td>  <!--第四列-->
                </tr>

            </tbody>
        </table>

示例结果：
在这里插入图片描述

(3) 常用格式
<table border="1"> <!--表格的标签,对表格加框线，最外侧框线粗细程度为“1”-->
	
	<tbody> <!--表格主体的标签-->
	
	<tr> <!--行标签，第一行-->
		<th>[列的信息1.1]</th> <!--列标签,列的内容加粗居中显示-->
		<th>[列的信息1.2]</th>
		[.....] <!--更多的列-->
	</tr> <!--行的结束标签-->
	
	<tr> <!--第二行-->
		<th>[列的信息2.1]</th>
		<th>[列的信息2.2]</th>
		[.....] <!--更多的列-->
	</tr>
	
	[....] <!--更多的行-->

	</tbody> <!--表格主体的结束标签-->
	
</table> <!--表格的结束标签-->
  • border="1"，对表格加上框线，并且设置最外侧框线粗细程度为1；
  • <th>，对单元格的内容居中加粗显示。
(4) 示例二

示例代码：

<table border = "1">
	<tbody>

		<tr> <!--第一行-->
        	<th>Name</th>    <!--第一列-->
        	<th>ID</th>      <!--第二列-->
        	<th>Phone</th>   <!--第三列-->
        	<th>Address</th> <!--第四列-->
        </tr>

        <tr> <!--第二行-->
        	<th>Price</th>   <!--第一列-->
            <th>0001</th>    <!--第二列-->
            <th>1234567</th> <!--第三列-->
            <th>Shaanxi</th> <!--第四列-->
        </tr>

        <tr> <!--第三行-->
        	<th>Mark</th>    <!--第一列-->
            <th>0002</th>    <!--第二列-->
            <th>7890123</th> <!--第三列-->
            <th>Hainan</th>  <!--第四列-->
        </tr>

	</tbody>
</table>

示例结果：
在这里插入图片描述

(5) 合并单元格

(5-1) 语法

语法作用
rowspan="n"对同一行的n个单元格进行合并
colspan="n"对同一列的n个单元格进行合并

(5-2) 示例
示例代码：

<table border="1">
	<tr>
    	<tr>
        	<th rowspan="2">学号</th>
            <th rowspan="2">姓名</th>
            <th rowspan="2">年龄</th>
            <th colspan="3">成绩</th>
        </tr>
        <tr>
      		<th>Java</th>
            <th>SQL</th>
            <th>HTML</th>
        </tr>
	</tr>
	
    <tr>
        <td>100001</td>
        <td>Tom</td>
        <td rowspan="3">18</td>
        <td>90</td>
        <td>85</td>
        <td>60</td>
    </tr>
            
    <tr>
        <td>100002</td>
        <td>Jerry</td>
        <td>85</td>
        <td>98</td>
        <td>95</td>
   	</tr>
           
   	<tr>
        <td>100003</td>
        <td>Mark</td>
        <td>80</td>
        <td>95</td>
        <td>80</td>
  	</tr>
    
</table>

示例结果：
在这里插入图片描述
示例解释
在这里插入图片描述

3.1.2 表格表头的创建

(1) 语法
<thead> <!--表格表头的标签-->
	<tr> <!--行标签，第一行-->
		<th>[列的信息1.1]</th> <!--列标签,列的内容加粗居中显示-->
		<th>[列的信息1.2]</th>
		[.....] <!--更多的列-->
	</tr> <!--行的结束标签-->
</thead> <!--表格表头结束的标签-->
(2) 示例

示例代码：

<table border = "1">
	<thead>
		<tr> <!--第一行-->
			<th>Name</th>    <!--第一列-->
			<th>ID</th>      <!--第二列-->                        
			<th>Phone</th>   <!--第三列-->
			<th>Address</th> <!--第四列-->
		</tr>
	</thead>
	<tbody>
		<tr> <!--第二行-->
			<th>Price</th>   <!--第一列-->
			<th>0001</th>    <!--第二列-->
			<th>1234567</th> <!--第三列-->
			<th>Shaanxi</th> <!--第四列-->
		</tr>
		<tr> <!--第三行-->
			<th>Mark</th>    <!--第一列-->
			<th>0002</th>    <!--第二列-->
			<th>7890123</th> <!--第三列-->
			<th>Hainan</th>  <!--第四列-->
		</tr>
	</tbody>
</table>

示例结果：
在这里插入图片描述

3.1.3 表格表尾的创建

(1) 语法
<tfoot> <!--表格表尾的标签-->
	<tr> <!--行标签，第一行-->
		<th>[列的信息1.1]</th> <!--列标签,列的内容加粗居中显示-->
		<th>[列的信息1.2]</th>
		[.....] <!--更多的列-->
	</tr> <!--行的结束标签-->
</tfoot> <!--表格表尾结束的标签-->
(2) 示例

示例代码：

<table border = "1">
	<thead>
		<tr> <!--第一行-->
			<th>Name</th>    <!--第一列-->
			<th>ID</th>      <!--第二列-->                        
			<th>Phone</th>   <!--第三列-->
			<th>Address</th> <!--第四列-->
		</tr>
	</thead>
	<tbody>
		<tr> <!--第二行-->
			<th>Price</th>   <!--第一列-->
			<th>0001</th>    <!--第二列-->
			<th>1234567</th> <!--第三列-->
			<th>Shaanxi</th> <!--第四列-->
		</tr>
		<tr> <!--第三行-->
			<th>Mark</th>    <!--第一列-->
			<th>0002</th>    <!--第二列-->
			<th>7890123</th> <!--第三列-->
			<th>Hainan</th>  <!--第四列-->
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="4">Total number of students!</td>
		</tr>
	</tfoot>
</table>

示例结果：
在这里插入图片描述

3.1.4 表格标题的创建

(1) 语法

<caption>[标题内容]</caption>

(2) 示例

示例代码：

<table border = "1">
	<caption>Message</caption>
	<thead>
		<tr> <!--第一行-->
			<th>Name</th>    <!--第一列-->
			<th>ID</th>      <!--第二列-->                        
			<th>Phone</th>   <!--第三列-->
			<th>Address</th> <!--第四列-->
		</tr>
	</thead>
	<tbody>
		<tr> <!--第二行-->
			<th>Price</th>   <!--第一列-->
			<th>0001</th>    <!--第二列-->
			<th>1234567</th> <!--第三列-->
			<th>Shaanxi</th> <!--第四列-->
		</tr>
		<tr> <!--第三行-->
			<th>Mark</th>    <!--第一列-->
			<th>0002</th>    <!--第二列-->
			<th>7890123</th> <!--第三列-->
			<th>Hainan</th>  <!--第四列-->
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="4">Total number of students!</td>
		</tr>
	</tfoot>
</table>

示例结果：
在这里插入图片描述

3.2 表格的优化

3.2.1 设置表格样式border

(1) 语法

border:[最外侧框线样式] [最外侧框线粗细] [框线颜色]

只能对<table>、<th>、<td>这三个标签起作用。

(2) 示例

设置表格框线粗细为1px的蓝色虚线：
示例代码：
table{ border:dotted 1px blue; }
示例结果：
在这里插入图片描述

也可以单独对某列（或某行）进行设置，只需将table换成th(或td)即可。

3.2.2 设置各单元格关系border-collapse

(1) 语法

boder-collapse:[可选项]

(2) 可选项表
可选项解释
collapse各单元格之间无间距
separate各单元格之间存在间距
(3) 示例

示例一 代码：
table{ border-collapse:collapse; }
示例一 结果：
在这里插入图片描述
示例二 代码：
table{ border-collapse:separate; }
示例二 结果：
在这里插入图片描述

3.2.3 设置单元格的高度和宽度height width

(1) 语法

table{ width:m px; height:n px; }

只能对<table>、<th>、<td>这三个标签起作用。

(2) 示例

示例代码：
table{ width:1000px; height:50px; }
示例结果：
在这里插入图片描述

3.2.4 设置文本对齐方式text-align

(1) 语法

table{ text-align:[对齐方式]; }

只能对<table>、<th>、<td>这三个标签起作用。

(2) 示例

示例代码：
table{ text-align:right; width:1000px; height:50px; }
示例结果：
在这里插入图片描述

3.2.5 设置表格外侧框线与表格主体的距离padding

(1) 语法

table{ padding:n px; }

只能对<table>、<th>、<td>这三个标签起作用。

(2) 示例

示例代码：
table{ padding:100px; }
示例结果：
在这里插入图片描述

3.2.6 设置表格字体颜色color

(1) 语法

table{ color:[自定义颜色]; }

只能对<table>、<th>、<td>这三个标签起作用。

(2) 示例

示例代码：
table{ color:chocolate; }
示例结果：
在这里插入图片描述

3.2.7 设置单元格背景颜色background-color

(1) 语法

table{ background-color:[自定义颜色]; }

只能对<table>、<th>、<td>这三个标签起作用。

(2) 示例

示例代码：
table{ background-color:chocolate; }
示例结果：
在这里插入图片描述

3.3 通过框架访问多个网页

3.3.1 创建框架

(1) 语法

<iframe name="[框架名称]" width="[框架宽度]" height="[框架高度]"></iframe>

  • 框架宽度通常用百分比设置，框架高度通常用像素值设置。
(2) 示例

示例代码：

<iframe name="S1" width="500" height="100"></iframe>
<iframe name="S2" width="500" height="100"></iframe>
<br/>
<iframe name="S3" width="500" height="500"></iframe>
<iframe name="S4" width="500" height="500"></iframe>

示例结果：
在这里插入图片描述
示例解释：

  • 一般情况下，每个框架是从左向右紧挨着排序的排序的，且排序仅受框架宽度影响，不受框架的高度影响；
  • 若一行各个框架的宽度之和超过网页整体宽度，则框架会自右向左依次向下换行，以达到每行的框架长度之和小于网页整体宽度；
  • 若想人为使框架换行，在框架创建语句前使用<br/>标签即可。

3.3.2 使用框架

(1) 语法

<iframe src="[链接文件地址]" name="[被使用的框架名称]" width="[页面在框架中的宽度]" height="[页面在框架中的高度]"></iframe>

(2) 示例

示例要求：
已知有001.html、002.html、003.html、004.html这三个文件。现在需要将这四个文件分别插入主页面的S1、S2、S3、S4框架中。

示例代码：

<body>
	<iframe src="001.html" name="S1" width="500" height="100"></iframe>
	<iframe src="002.html" name="S2" width="500" height="100"></iframe>
	<br/>
	<iframe src="003.html" name="S3" width="500" height="500"></iframe>
	<iframe src="004.html" name="S4" width="500" height="500"></iframe>
</body>

示例结果：
在这里插入图片描述

若框架内的子页面还有链接，则在打开该链接时会在当前页面所在的框架内显示链接文件的内容。
这时，如果在创建链接的标签中加入target="ContentFrame"语句，则在打开该链接时会新建页面窗口显示该文件内容。

3.3.3 优化框架

(1) 设置各框架的间距margin

(1-1) 语法
margin:[间距]

(1-2) 示例
设置各框架的间距为50px：
示例代码：

<style>
	iframe{
		margin:50px;
	}
</style>
<body>
		<iframe src="001.html" name="S1" width="500" height="100"></iframe>
		<iframe src="002.html" name="S2" width="500" height="100"></iframe>
		<br/>
		<iframe src="003.html" name="S3" width="500" height="500"></iframe>
		<iframe src="004.html" name="S4" width="500" height="500"></iframe>
</body>

示例结果：
在这里插入图片描述

(2) 设置框架内子界面的间距padding

(2-1) 语法
padding:[间距]

(2-2) 示例
设置框架内子界面的间距为50px：
示例代码：

<style>
	iframe{
		padding:50px;
	}
</style>
<body>
	<iframe src="001.html" name="S1" width="500" height="100"></iframe>
	<iframe src="002.html" name="S2" width="500" height="100"></iframe>
	<br/>
	<iframe src="003.html" name="S3" width="500" height="500"></iframe>
	<iframe src="004.html" name="S4" width="500" height="500"></iframe>
</body>

示例结果：
在这里插入图片描述

(3) 设置框架边框的风格border

(3-1) 语法
border:[边框宽度] [边框形状] [边框颜色]

(3-2) 示例
设置边框宽度为5px的红色实线：
示例代码：

<style>
	iframe{
		border:5px solid red;
	}
</style>
<body>
	<iframe src="001.html" name="S1" width="500" height="100"></iframe>
	<iframe src="002.html" name="S2" width="500" height="100"></iframe>
	<br/>
	<iframe src="003.html" name="S3" width="500" height="500"></iframe>
	<iframe src="004.html" name="S4" width="500" height="500"></iframe>
</body>

示例结果：
在这里插入图片描述

(4) 在框架内显示滚动条scrolling

(4-1) 语法
scrolling：[属性]

(4-2) 属性选项

属性解释
yes设置滚动条
no不设置滚动条
auto自动设置滚动条

四、JavaScript介绍

HTML是静态的界面设计；JavaScript通过增强交互性和响应来设计人机交互。

4.1 JavaScript介绍

4.1.1 JJavaScript介绍

JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 它是作为开发Web页面的脚本语言而出名。JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

4.1.2 脚本

脚本是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。

脚本分为：客户端脚本和服务端脚本。

名称介绍示例
客户端脚本会使用客户端机器的资源(如CPU、内存)CSJavaScript、VBScript
服务器脚本会使用服务器的资源(如CPU、内存)SSJS、PHP、VBScript

4.1.3 JS的优点

  • 终端反应快速；
  • 使用简介；
  • 反应快速。

4.2 JavaScript的使用框架

4.2.1 在HTML文件中使用

(1) 语法
<script type="text/javascript">
	[在这部分写JS语句]
</script>
(2) 示例
<html>
	<body>
		<script type="text/javascript">
			document.write("Hello JavaScript");
			document.write("<br/>Welcome JS");
		</script>
	</body>
</html>
  • document.write()、document.write()是一个在网页上打印内容的函数；且二者均不具备换行的作用；
  • 若在HTML的JS框架内，想要达到换行的作用，在文本内容后加上
  • <br/>标签即可。
  • 每条语句结尾要加上;。

4.2.2 在JS文件中使用

(1) 创建JS文件

JS文件是以.js为后缀的文件，如java.js。

(2) 调用JS文件

语法：
<script type="text/javascript" src="[文件路径]">

(3) 示例

JavaScript的语句使用和JavaSE的语句使用类似。

//创建变量
a = 10;
b = 20;
c = a+b;
//使用JS函数
document.write("The sum is "+c);
c = a-b;
document.write("<br>The difference is "+c);
    
document.write("<br>");
//使用选择结构
if(a>b){
	document.write(a+" is bigger than "+b);
}
else{
	document.write(b+" is bigger than "+a);
}

4.3 JavaScript基本使用

4.3.1 变量的使用

(1) 创建变量

(1-1) 语法
var [变量名];

(1-2) 示例
创建 number 变量：
var number;

(2) 使用变量

(2-1) 语法
[变量名] = [赋值内容];

(2-2) 示例
对 number 变量赋值为1：
number=1;
对 number 变量赋值为字符串 one：
number="one";

变量的创建和赋值可以同时进行。
如创建 number 变量并赋值为 1：
var bumber=1;

(3) 创建数组变量

(3-1) 语法
var [变量名] = new Array([数组大小]);

(3-2) 示例
创建大小为3的 category 数组变量：
var category = new Array[3];

(4) 使用数组变量

(4-1) 语法
[变量名][[数组元素位置]] = “[实例内容]”

(4-2) 示例
对 category 的第一个元素赋值为 one：
category[0] = "one";

数组元素的下标是从0开始的。

4.3.2 运算符的使用

JS中的运算符用法与Java中的相同，这里只做简易列举。

(1) 算数运算符

+、-、*、/、%

(2) 赋值运算符

+=、-=、*=、/=、%=

(3) 关系运算符

<、>、<=、>=、==、!=、===

===判断变量的内容和类型是否相同。

(4) 逻辑运算符

&&、!、||

4.3.3 结构的使用

(1) 选择结构

if-else语句、switch-cae语句。

(2) 循环结构

while语句、for语句、do...while语句。

同时，break和continue关键字的用途也和Java中的相同。

—— writing by Pan Qifan(潘琦藩) ——

​

向懒羊羊学习的大猫
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
H5(html5)入门教程
DAIYA_JIE的博客
09-11 1万+
html零基础01
html5中文手册（CHM版）
04-22
通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。HTML 5 中的新特性包括了嵌入音频、视频和图形的功能，客户端数据存储，以及交互式文档。
HTML开发的最主要的三种框架及Python实现
最新发布
qq_53529450的博客
06-06 650
HTML开发的最主要的三种框架:Bootstrap、Foundation、Bulma及Python实现
HTML的基本框架
h3197的博客
12-07 4846
以上就是HTML的基本框架，有遗漏的话，欢迎评论区补充哦。
HTML 框架
很酷的站长的博客
01-06 2476
框架可以理解为在网页中插入了一个独立的网页窗口元素，比较常用的框架元素是 iframe，iframe 有自己独立的窗口 window 以及上下文，iframe 元素自己内部的逻辑操作可以独立，当然在同域条件下，iframe 元素的窗口可以访问父级窗口，父级窗口也可以访问 iframe 窗口。
HTML5的入门教程
weixin_48678602的博客
07-10 2746
文章目录1. 什么是HTML 5？2. HTML 5的组成3.HTML 5可以实现的事情4. HTML 5的开发工具5.editplus的安装简单介绍 在学习HTML 5之前，我们首先要知道这是什么？能实现什么作用？下面我们开始了解什么是HTML 5 1. 什么是HTML 5？ HTML 5是HTML的最新版本，目标是更好地开发网络应用程序。HTML 5比HTML 4拥有更简洁的语法并且提供了更多新的特性。Html 5自推出以来，依托的强大功能特性，天生跨平台开发的优势，受到更多互联网从业者喜爱。它还有以下
HTML5Canvas基础教程
07-22
资源名称：HTML5 Canvas基础教程内容简介：《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5基础教程PDF版
07-22
本课程是基于尚硅谷李立超老师的Web前端零基础入门HTML5+CSS3基础教程，旨在帮助初学者掌握HTML5的基本概念和语法。 首先，HTML（HyperText Markup Language）是一种标记语言，用于构建和呈现网页内容。HTML5作为...
HTML5WebSockets基础使用教程
02-25
WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了。...客户端发送一个请求到服务器，现在，服务器端并...
html5基础教程常用技巧整理
09-28
HTML5的一些新增属性和功能是让代码变得更简洁，这总归是一件好事，应该值得我们推崇，希望这篇HTML5的文章对你有一些帮助
html5基础教程
03-11
本教程旨在帮助初学者和希望巩固HTML5基础知识的学习者掌握这一重要技术。 HTML5的基础部分包括一系列的元素、属性和语义化标签，它们用于构建网页结构。例如，`<header>`和`<footer>`元素用于定义页面头部和底部，...
HTML5入门教学
Ifeng_iPhone的博客
09-28 1058
在浏览器上看到的任何东西的都是网页超文本：可以定义图片，连接，表单，音乐标记：标签标签名定义在尖括号中，一般有开始有结束每个标签代表浏览器中一个样式。
HTML5的介绍和基本框架
m0_67093160的博客
08-15 2941
HTML的介绍和基本框架和第一个HTML文件
HTML基础框架
qq_55226759的博客
12-31 650
HTML的基本框架，包括一些属性
标准HTML代码框架解析
weixin_47311182的博客
08-14 6185
HTML代码是网页的基础，任何Web编程框架或其它高级Web语言终将在浏览器中被解释为HTML基础代码。因此了解HTML基础代码结构及其原理是非常有必要的。
Java ee HTML
m0_57180439的博客
04-27 1212
文章目录前言一、HTML结构1.1认识HTML标签1.2HTML文件基本结构1.3标签层次结构1.4快速生成代码框架二、HTML常见标签2.1注释标签2.2标题标签h1-h62.3段落标签p2.4换行标签br2.5格式化标签2.6图片标签img2.7超链接标签a2.8表格标签2.9列表标签2.10表单标签2.11无语义标签三、Emmet快捷键四、HTML特殊字符总结 前言 一个网站分为两个部分 前端（客户端）+后端（服务器） 通常这里的客户端是指浏览器 后端：java、c++、go、PHP、python都
Html 5菜鸟教程（建议新生学习）
YJlio的博客
09-22 3598
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
HTML5（入门）
热爱编程、热爱生活、热爱探索
01-18 9369
<!--1.我的第一个网页.html(为HTML文件名)--> <!DOCTYPE html> <!--表示浏览器的使用规范，一般默认都是html的规范,所以可不要--> <html lang="en"> <head> <!--网页标题--> <meta charset="UTF-8"> <!--告诉浏览器编码类型为字符型编码 常见的字符编码--> <title>网页一.
Html5基本使用详解
baidu_31741963的博客
05-08 2727
2022年5月5日 时间：23点46分 Html基础 Html简介： 简单翻译就是网页的后台写法，书写的基本方式： <!DOCTYPE html> ​ <html> ​ <head></head> ​ <body></body> ​ </html> 开头，加上内容，每一个代码块的结尾都要加上一个斜线表示结尾，保存以后要更改后缀名，改为.html或者.htm，然后使用网页打开。 写一个实例： <!DOC
HTML5 Canvas基础教程：JavaScript绘图入门
HTML5 Canvas 入门基础教程 Canvas是HTML5引入的一种强大的图形绘制技术，它允许开发者通过JavaScript脚本来在网页上创建动态图形、图表、图像合成或简单的动画效果。Canvas元素与传统的元素类似，但有明显的区别：...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向懒羊羊学习的大猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值