HTML基础知识
# HTML基础知识点汇总
# 1、HTML简介
HTML(Hypertext Markup Language)
,超文本标记语言
,HTML
利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language
,标准通用标识语言)中的一个子集演变而来的。
# 2、HTML的标记组成
HTML
用于描述功能的符号称为“标记”
。标记在使用时必须用尖括号“<>
”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如<body></body>
、<p></p>
等
# 2.1 标记
- 单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫单标记。
XHTML
中要求单标记也必须闭合,即在标记“>
”前添加斜杠。常见的单标记如<br />
<hr />
等。 - 双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线,语法形如:
<标记>
内容</标记>
。例如:<p>
段落</p>
XHTML
要求所有标记均为小写,且所有标记属性必须添加双引号
标记
绝对不能交叉
# 3、HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2
3
4
5
6
7
8
9
<title>
标记绝对不能放在<body>
标记中,同理,其它表示内容的标记也绝对不能放在<head>
标记中<html></html>
表示HTML
语言,在<html>...</html>
里面包含头部<head>...</head>
和内容体<body>...</body>
。HTML
注释表示为
# 4、HTML文字与图像
# 4.1.设置文字字体、大小与颜色
<font face=”宋体” size=”1” color=”red”>文字</font>
设置文字的字体、大小、颜色需要使用
<font>
标签
face
属性设置文字字体,多种字体用逗号隔开
size
属性设置文字大小
color
属性设置文字颜色,参数值可以是RGB
颜色值,如#000000
,也可以用颜色的单词表示,如red
# 4.2 设置正文的标题
<h1>主题文字</h1> <!--其中“#”代表数字1-6中的任意一个,从数字1到数字6,标题大小排列由大到小(数字越大,标题字号就越小)-->
<h2>
主题文字2
</h2>
2
3
4
# 4.3 设置段落
<p>
这是一个段落
</p>
2
3
特色:独立成行
# 4.4 强制换行与不换行
<br />
<nobr />
2
# 4.5 字体标记
- 物理字体
<b>…</b> <!--设置成粗体-->
<i>…</i> <!--设置成斜体-->
<u>…</u> <!--增加下划线-->
<s>…</s> <!--增加删除线-->
<d>…</d>
<sup>…</sup> <!--设置成上标字体-->
<sub>…</sub> <!--设置成下标字体-->
<tt>…</tt> <!--设置成打字机字体-->
2
3
4
5
6
7
8
- 逻辑字体
<em>…</em> <!--强调文字-->
<strong>…</strong> <!--字体加重-->
<code>…</code> <!--显示编程代码-->
<samp>…</samp> <!--显示救命文字-->
<kbd>…</kbd> <!--显示键盘按键文字-->
<small>…</small> <!--缩小文字-->
<big>…</big> <!--放大文字-->
<del>…</del> <!--删除线-->
2
3
4
5
6
7
8
# 4.6 文字对齐
<p aligin = "#">文字对齐</p>
文字对齐使用标签的align属性,例如:
<p align="#">
对齐文字</p>
,其中“#”代码表示方位,可选择”left
”(向左)、”right
”(向右)、”center
”(居中)。
align
属性可用于:<p>
、<div>
、<table>
、<td>
等标签
# 4.7 列表
- 无序列表
<ul type=”#”>
<li>表项一</li>
<li>表项二</li>
</ul>
2
3
4
Type=”#”
取值可为disc
(默认,实心黑点)、square
(实心黑方块)、circle
(空心圆)
- 有序列表
<ol type=”#”>
<li>表项一</li>
<li>表项二</li>
</ol>
2
3
4
Type=”#”
取值可为A
、a
、I
、i
、1
等
- 定义列表
<dl>
<dt>项目</dt>
<dd>描述一</dd>
<dd>描述二</dd>
</dl>
2
3
4
5
<dt>
标签定义了定义列表中的项目,<dd>
标签在定义列表中定义条目的定义部分,可以理解为对定义条目进行特征描述。
注:无序列表、有序列表、定义列表间可以相互嵌套,但一定要注意嵌套时不能交叉。
无序列表、有序列表、定义列表间嵌套实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表嵌套</title>
</head>
<body>
<ol type="A">
<li>系统管理</li>
<li>
文章管理
<ul type="square">
<dt>博客文章</dt>
<dd>新建</dd>
<dd>编辑</dd>
<dd>刪除</dd>
<li>评论管理</li>
<li>用戶管理</li>
</ul>
</li>
</ol>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 4.8 其它方式修饰文本
欲格式化文本:
<pre>
…</pre>
代码样式斜体字渲染:
<var>
…</var>
表示它所包含的文本对某个参考文献的引用:
<cite>
…</cite>
# 4.9 图像
- 插入图像基本语法
<img src="#"
<img src="#" />
,其中#代表图像的URL路径,示例:`
- 图像基本属性:
alt
属性:图像无法显示时的提示信息,如<img src="c.jpg" alt="风景" />
width
属性:定义图像的宽度;height
属性:定义图像的高度;如<img src=”c.jpg” width=”400px” height=”300px” />
align
属性:图像和文字对齐,align
属性的取值为top
(顶部)、middle
(中间)、bottom
(默认,底部);如<img src="c.jpg" align="top" />
border
属性:图像的边框,border
设置为0
时表示图像不显示边框,否则设置成需要的边框大小;如<img src="c.jpg" border="0" />
# 4.10 表格
- 表格的基本语法
<table width=”100” border=”1” height=”100”>
<caption>表格标题</caption>
<tr>
<th>表头一</th>
<th>表头二</th>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td cols=”2”>表尾</td>
</tr>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
1)在HTML中创建表格使用
<table>
标签对,可对其设置宽度
、高度
、边框
、背景
等。2)
<caption>
标签为整个表格的标题,它不占用表格行,是位于表格外的一个对整个表格进行说明的大标题,可以使用align属性设置标题相对于表格的位置,值为left
、right
、top
、bottom
。3)使用
tr
定义表格行,然后用th
或td
定义表格单元格。4)可以使用
thead
定义表头,tbody
定义表格主体,tfoot
定义表尾,只需要把相应的行(tr
和td
都需要)放置在标记对中即可。5)
cellpadding
内边距;cellspacing
外边距
表格的基本语法实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者:1710488546@qq.com
时间:2021-04-14
描述:表格
-->
<!--table>tr*3>td*4--> <!--tr行&td列-->
<table border="1" cellpadding="50px" cellspacing="0">
<caption>表格标题:信息表</caption> <!--caption不占表格的高度和宽度,是一个独立标签且相对表格居中-->
<thead bgcolor="aqua"> <!--thead与tbody标签是不同的标签,会将表格拆分为不同的表格-->
<tr>
<th>编号</th> <!--th加粗居中-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody bgcolor="aquamarine">
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
</tbody>
<tbody bgcolor="chartreuse">
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
- 跨多行、多列表元
<td rowspan=”3”>…</td> <!--跨多行表元-->
<td colspan=”3”>…</td> <!--跨多列表元-->
2
1)跨多行表元语法是在
th
和td上
加rowspan
表示,rowspan
后面的值是数字,数字表示跨多少行表元。2)跨多列表元与跨多行表元一样,也是放在
th
和td
上,表示在一行中跨多少列表元,语法是用colspan
表示。
跨多行、多列表元实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--作者:1710488546@qq.com
时间:2021-04-14
描述:5行5列表格
-->
<table border="1" cellpadding="15" cellspacing="0">
<tr>
<td colspan="5"></td> <!--合并单元格-->
</tr>
<tr>
<td rowspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="3" rowspan="3"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
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
33
34
35
- 设置表格大小
<table width=”100px” height=”100px”>…</table> <!--取值可以为像素值或百分比-->
- 设置表格边框
<table border=”1”>…</table>
表格边框使用
table
标记的border
属性定义,其后面的值是宽度值,表示对象的边框宽度,数值越大,宽度越大。
- 设置表格背景
<!--设置整个表格背景-->
<!--设置整个表格的背景是定义<table>标签的bgcolor属性,其值可为颜色名、十六进制颜色值或者rgb代码的背景颜色-->
<table bgcolor=”#ff0000”>…</table>
<!--设置表格中单元格的背景-->
<!--设置单元格的背景颜色只需在td和th标签上定义bgcolor属性,如果设置某一行的背景颜色,也可以在tr标签中定义bgcolor属性-->
<td bgcolor=”#ff0000”>…</td>
2
3
4
5
6
7
- 设置单元格边距
<!--设置单元格与内容之间的距离-->
<!--设置单元格与内容之间的距离只需在td和th标签上定义cellpadding属性,其值为像素值。-->
<td cellpadding=”10”>…</td>
<!--设置两个单元格之间的距离-->
<!--定义两个单元格之间的空白在td和th标签上使用cellspacing属性,其值同样为像素值。-->
<td cellspacing=”10”>…</td>
2
3
4
5
6
7
表格对齐
表格内文字对齐
<tr align=#>…</tr> <td align=#>…</td>
1
21)文字对齐使用
align
属性定义,取值可为left
、center
、right
。2)在表格内,文字对齐有在
tr
、th
、td
中对齐,在tr
设置对齐方式后,tr
内的th
和td
都按设置的要求对齐,同理在多行中可以设置不同的tr
对齐方式,th
和td
都可以设置其里面的文字或图片的对齐。表格在网页中对齐
<table align=#>…</table>
1表格在网页中的对齐是在
<table></table>
标记对中使用align
属性定义。
# 4.11 表单
- 创建表单
<form name=”form” action=”url” method=”post”></form>
form
中的name
属性给form
表单命名,action
属性表示表单提交后发送的URL
地址,发送的方式用method
属性表示,可选择的参数有Get
和Post
。Get
传输量比较小,Post
传输量比较大。
- 文本框和密码框
<input type=”text” name=”text” size=”6” maxlength=”6” value=”文字” disabled=”disabled” readonly=”readonly” />
name
属性给文本框命名,size
属性设置文本框的显示大小,maxlength
属性设置文本框最大可接受的字符数,value
属性设置文本框默认显示值,disabled
属性设置文本框是否可用,readonly
属性设置文本框是否只读。
- 密码框
<input type="password" name="" id="" value="" placeholder="请输入密码" />
密码框的属性除了
type
设置成password
,与文本框不一致外,其它属性与文本框一致。
- 单选框
<input type=”radio” name=”radio” checked=”checked” value=”v” />
设置
checked
属性表示单选框被默认选中
- 复选框
<input type=”checkbox” name=”ck” checked=”checked” value=”v” />
设置
checked
属性表示单选框被默认选中
- 下拉列表
<select name=”select” size=”2” multiple=” multiple”>
<option value=”1” selected=”selected”>列表项一</option>
<option value=”2”>列表项二</option>
</select>
2
3
4
select
标签的size
属性表示下拉列表的可见选项数,默认为1
,multiple
属性规定可以选择多个选项。Option
标签的selected
标签表示当前选被默认选中,即在1
个可见选项数时下拉列表显示此值。
- 文本域
<textarea name=”ta” rows=”10” cols=”5”>文本内容</textarea>
textarea
标签的rows
属性表示文本区内的可见行数,cols
属性表示文本区内的可见宽度。文本框是单行的,而文本域可以输入多行,可以手动换行
- 按钮
<!--普通按钮-->
<input type=”button” name=”bt” value=”按钮” />
<button name=”bt”>普通按钮</button>
<!--提交按钮-->
<input type=”submit” name=”sm” value=”提交” />
<!--重置按钮-->
<input type=”reset” name=”rs” value=”重置” />
2
3
4
5
6
7
8
9
- 图像域
<input type=”image” name=”image” src=”c.jpg” alt=”描述” />
- 文件域
<input type=”file” name=”file” /> <!--定义输入字段和浏览按钮,用于文件上传-->
- 时间框
<input type="date" name="" id="" value="" />
- 百分比左右拉取框
<input type="range" name="" id="" value="" />
- 隐藏表单
<input type=”hidden” name=”hi” value=”v” />
隐藏表单用于在浏览器与服务器之间传递一些必要的参数或选项,而这些参数或选项不需要显示在页面中。
结合表格后的表单实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
form{
font-size:larger;
}
</style>
<body>
<body background=""
<form action="https://www.google.com/" method="get">
<table border="0" cellspacing="10" cellpadding="" >
<!--用户名文本框-->
<!--disabled表示锁定,1.此元件不可用,无法读取内容;2.作用域不同,disabled表示锁定可用于所有表单 -->
<!--readonly表示只读,1.但原件可用,可读取内容;2.作用域不同,readonly仅用于文本框,不适用其他表单 -->
<tr>
<th align="right">用户名</th>
<th align="left"><input type="text" name="" id="" value="" readonly="readonly"/></th>
</tr>
<!--密码文本框-->
<tr>
<th align="right">密码</th>
<th align="left"><input type="password" name="" id="" value="" placeholder="请输入密码" /></th>
</tr>
<!--密码文本框-->
<tr>
<th align="right">确认密码</th>
<th align="left"><input type="password" name="" id="" value="" placeholder="请再次确认密码"/></th>
</tr>
<tr>
<th align="right">性别</th>
<th align="left">
<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女
<input type="radio" name="sex" id="" value="" />保密
</th>
</tr>
<!--复选框-->
<tr>
<th align="right">爱好</th>
<th align="left">
<input type="checkbox" name="" id="" value="" />吃饭
<input type="checkbox" name="" id="" value="" checked="checked"/>读书
<input type="checkbox" name="" id="" value="" />睡觉
<input type="checkbox" name="" id="" value="" />运动
</th>
</tr>
<!--下拉框-->
<tr>
<th align="right">住址</th>
<th align="left">
<select name="">
<option value="">泉州</option>
<option value="">漳州</option>
<option value="">厦门</option>
<option value="">福州</option>
</select>
</th>
</tr>
<!--时间框-->
<tr>
<th align="right">出生年月</th>
<th align="left"><input type="date" name="" id="" value="" /></th>
</tr>
<!--文本输入框-->
<tr>
<th align="right">个性签名</th>
<th align="left">
<textarea name="" rows="5" cols="20" style="resize:none;"></textarea>
</th>
</tr>
<!--文件上传-->
<tr>
<th align="right">用户头像</th>
<th align="left"><input type="file" name="" id="" value="" /></th>
</tr>
<!--验证码原理百分比选择框-->
<tr>
<th align="right">请完成验证</th>
<th align="left"><input type="range" name="" id="" value="" /></th>
</tr>
<!--按钮-->
<center>
<tr>
<th colspan="2"><input type="submit" value="注册"/>
<!--reset返回重置默认值-->
<input type="reset" name="" id="" value="重置" />
</th>
</tr>
</table>
</form>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
# 4.12 超级链接
- 基本概念
- 统一资源定位器(URL):每一个网页的唯一地址,一个URL构成为
protocol://machinename[:port]/directory/filename
。其中protocol
是访问协议,如http
、https
、ftp
等,machinename
是存放资源的主机IP地址,通常以域名的形式出现,port
是服务器使用的端口,directory
和filename
是资源的路径和文件名。 - 绝对路径:HTML绝对路径指带有域名文件的完整路径
- 文档相对路径:当前文档与在的位置与其他文件或文件夹的关系。用
../
表示源文件所在目录的上一级目录。 - 站点根目录相对路径:提供从站点的根文件夹到文档的路径。站点根目录相对路径以
”/”
开始,表示站点根文件夹。
- 统一资源定位器(URL):每一个网页的唯一地址,一个URL构成为
- 文字链接
<a href=”URL” target=”target”>链接文字</a>
<a href="https://singerw.com">ZHANG_SINGERW</a> <!--绝对地址:-->
<a href="列表嵌套.html">das </a> <!--相对地址-->
<a href="列表嵌套.html" target="_self">sdad</a> <!--本窗口打开-->
<a href="文本.html" target="_blank">新窗口打开</a> <!--新窗口打开-->
2
3
4
5
href
属性表示链接跳转地址
target
属性定义链接网页的打开方式,其值可以为_blank
(新窗口)、_parent
(父框架)、_self
(当前窗口)、_top
(清除所有被包含的框架并将文档载入整个浏览器窗口)
- 锚点链接
<a name=”锚点”></a> <!--定义锚点-->
<a href=”#锚点”>链接文字</a> <!--链接锚点-->
<!--返回顶部-->
<a name="top"></a>
<a href="#top">返回顶部</a>
2
3
4
5
6
超级链接实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者:1710488546@qq.com
时间:2021-04-14
描述:锚点
-->
<a name="top"></a>
<!--
作者:1710488546@qq.com
时间:2021-04-14
描述:超链接
-->
<a href="列表嵌套.html">das </a> <br />
<a href="https://singerw.com">ZHANG_SINGERW</a><br />
<a href="列表嵌套.html" target="_self">sdad</a><br /> <!--本窗口打开-->
<a href="文本.html" target="_blank">新窗口打开</a><br /> <!--新窗口打开-->
<!--
作者:1710488546@qq.com
时间:2021-04-14
描述:锚链接
-->
<!--回到顶部-->
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试888</p>
<a href="#top">返回顶部</a>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
# 4.13 移动的字体和图片
- 移动基本语法
<marquee>移动文字或图片</marquee>
默认是向左循环移动,移动范围在其父对象的有效区域内。
- 文本移动的方向
<marquee direction=”#”>…</marquee>
其中
#
可以选择left
、right
、up
、down
- 文本的滚动循环
<marquee behavior=”#”>…</marquee>
其中
#
可以选择scroll
(循环移动)、slide
(只移动一个回合)、alternate
(来回移动)。
- 设置文本来回移动,还可以设置循环次数
<marquee loop=”#”>…</marquee>
其中
#
为代表循环的次数。
- 文本的移动速度,用移动距离来实现
<marquee scrollamount=”#”>…</marquee>
其中
#
设置移动的速度,取正整数。数值越大,速度越快
- 移动对象的延时
<marquee scrolldelay=”1000”>我走一走,停一停</marquee>
scrolldelay
以时间为单位,用毫秒表示
- 移动的区域和背景
<marquee width=”100” height=”100” bgcolor=”pink”>…</marquee>
滚动字体和图片实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者:1710488546@qq.com
时间:2021-04-14
描述:marquee中标签direction是上下左右移动
-->
<marquee direction="up">
<p><a href="https://ami.singerw.com">SINGERW.COM</a>
</p>
</marquee>
<!--
作者:1710488546@qq.com
时间:2021-04-14
描述:marquee中标签behavior中slide是单次滚动次数至边部,scroll是单次滚动至边外;
loop是自定义滚动次数
滚动标签没有速度属性,用scrollamount或scrolldelay更改滚动速度。
* scrolldelay采用帧率原理
* scrollamount采用移动多少像素原理
-->
<marquee behavior="slide" loop="2" scrollamount="20"scrolldelay="10">
<p>
<a href="https://ami.singerw.com">SINGERW.COM</a>
</p>
</marquee>
<!--
作者:1710488546@qq.com
时间:2021-04-14
描述:滚动图片
-->
<marquee>
<img src="img/QQ图片20201217213855.jpg" />
</marquee>
</body>
</html>
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
33
34
35
36
37
38
39
40
41