Singerw's Repository
Singerw
2021-08-22

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>

  1. XHTML要求所有标记均为小写，且所有标记属性必须添加双引号

  2. 标记绝对不能交叉

# 3、HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
1
2
3
4
5
6
7
8
9
  1. <title>标记绝对不能放在<body>标记中，同理，其它表示内容的标记也绝对不能放在<head>标记中
  2. <html></html>表示HTML语言，在<html>...</html>里面包含头部<head>...</head>和内容体<body>...</body>。
  3. HTML注释表示为

# 4、HTML文字与图像

# 4.1.设置文字字体、大小与颜色

<font face=”宋体” size=”1” color=”red”>文字</font>
1

  1. 设置文字的字体、大小、颜色需要使用<font>标签

  2. face属性设置文字字体，多种字体用逗号隔开

  3. size属性设置文字大小

  4. color属性设置文字颜色，参数值可以是RGB颜色值，如#000000，也可以用颜色的单词表示，如red

# 4.2 设置正文的标题

<h1>主题文字</h1>  <!--其中“#”代表数字1-6中的任意一个，从数字1到数字6，标题大小排列由大到小(数字越大，标题字号就越小)-->
<h2>
    主题文字2
</h2>
1
2
3
4

# 4.3 设置段落

<p>
    这是一个段落
</p>
1
2
3

特色：独立成行

# 4.4 强制换行与不换行

<br />
<nobr />
1
2

# 4.5 字体标记

  • 物理字体
<b>…</b>			<!--设置成粗体-->
<i>…</i>			<!--设置成斜体-->
<u>…</u>			<!--增加下划线-->
<s>…</s>			<!--增加删除线-->
<d>…</d>
<sup>…</sup>		<!--设置成上标字体-->
<sub>…</sub>		<!--设置成下标字体--> 
<tt>…</tt>			<!--设置成打字机字体-->
1
2
3
4
5
6
7
8
  • 逻辑字体
<em>…</em>			<!--强调文字-->				
<strong>…</strong>	<!--字体加重-->
<code>…</code>		<!--显示编程代码-->			
<samp>…</samp>		<!--显示救命文字-->
<kbd>…</kbd>		<!--显示键盘按键文字-->		
<small>…</small>	<!--缩小文字-->
<big>…</big>		<!--放大文字-->            
<del>…</del>		<!--删除线-->
1
2
3
4
5
6
7
8

# 4.6 文字对齐

<p aligin = "#">文字对齐</p>
1

  1. 文字对齐使用标签的align属性，例如：<p align="#">对齐文字</p>，其中“#”代码表示方位，可选择”left”(向左)、”right”(向右)、”center”(居中)。

  2. align属性可用于:<p>、<div>、<table>、<td>等标签

# 4.7 列表

  • 无序列表
<ul type=”#”>
	  <li>表项一</li>
	  <li>表项二</li>
</ul>
1
2
3
4

Type=”#”取值可为disc(默认，实心黑点)、square(实心黑方块)、circle(空心圆)

  • 有序列表
<ol type=”#”>
  <li>表项一</li>
  <li>表项二</li>
</ol>
1
2
3
4

Type=”#”取值可为A、a、I、i、1等

  • 定义列表
<dl>
  <dt>项目</dt>
  <dd>描述一</dd>
  <dd>描述二</dd>
</dl>
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 4.8 其它方式修饰文本

  1. 欲格式化文本：<pre>…</pre>

  2. 代码样式斜体字渲染：<var>…</var>

  3. 表示它所包含的文本对某个参考文献的引用：<cite>…</cite>

# 4.9 图像

  • 插入图像基本语法
<img src="#"
1

<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>
1
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>
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
33
34
35
36
37
38
39
40
41
42
  • 跨多行、多列表元
<td rowspan=”3”>…</td>  <!--跨多行表元-->
<td colspan=”3”>…</td>	<!--跨多列表元-->
1
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>
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
33
34
35
  • 设置表格大小
<table width=”100px” height=”100px”>…</table> <!--取值可以为像素值或百分比-->
1
  • 设置表格边框
<table border=”1”>…</table>
1

表格边框使用table标记的border 属性定义，其后面的值是宽度值，表示对象的边框宽度，数值越大，宽度越大。

  • 设置表格背景
<!--设置整个表格背景-->
<!--设置整个表格的背景是定义<table>标签的bgcolor属性，其值可为颜色名、十六进制颜色值或者rgb代码的背景颜色-->
<table bgcolor=”#ff0000”>…</table>

<!--设置表格中单元格的背景-->
<!--设置单元格的背景颜色只需在td和th标签上定义bgcolor属性，如果设置某一行的背景颜色，也可以在tr标签中定义bgcolor属性-->
<td bgcolor=”#ff0000”>…</td>
1
2
3
4
5
6
7
  • 设置单元格边距
<!--设置单元格与内容之间的距离-->
<!--设置单元格与内容之间的距离只需在td和th标签上定义cellpadding属性，其值为像素值。-->
<td cellpadding=”10”>…</td>

<!--设置两个单元格之间的距离-->
<!--定义两个单元格之间的空白在td和th标签上使用cellspacing属性，其值同样为像素值。-->
<td cellspacing=”10”>…</td>
1
2
3
4
5
6
7

  • 表格对齐

    • 表格内文字对齐

      <tr align=#>…</tr>				
<td align=#>…</td>
      1
      2

      1）文字对齐使用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>
1

form中的name属性给form表单命名，action属性表示表单提交后发送的URL地址，发送的方式用method属性表示，可选择的参数有Get和Post。Get传输量比较小，Post传输量比较大。

  • 文本框和密码框
<input type=”text” name=”text” size=”6” maxlength=”6” value=”文字” disabled=”disabled” readonly=”readonly” />
1

name属性给文本框命名，size属性设置文本框的显示大小，maxlength属性设置文本框最大可接受的字符数，value属性设置文本框默认显示值，disabled属性设置文本框是否可用，readonly属性设置文本框是否只读。

  • 密码框
<input type="password" name="" id="" value="" placeholder="请输入密码" />
1

密码框的属性除了type设置成password，与文本框不一致外，其它属性与文本框一致。

  • 单选框
<input type=”radio” name=”radio” checked=”checked” value=”v” />
1

设置checked属性表示单选框被默认选中

  • 复选框
<input type=”checkbox” name=”ck” checked=”checked” value=”v” />
1

设置checked属性表示单选框被默认选中

  • 下拉列表
<select name=”select” size=”2” multiple=” multiple”>
    <option value=”1” selected=”selected”>列表项一</option>
    <option value=”2”>列表项二</option>
</select>
1
2
3
4

select标签的size属性表示下拉列表的可见选项数，默认为1，multiple属性规定可以选择多个选项。Option标签的selected标签表示当前选被默认选中，即在1个可见选项数时下拉列表显示此值。

  • 文本域
<textarea name=”ta” rows=”10” cols=”5”>文本内容</textarea>
1

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=”重置” />
1
2
3
4
5
6
7
8
9
  • 图像域
<input type=”image” name=”image” src=”c.jpg” alt=”描述” />
1
  • 文件域
<input type=”file” name=”file” /> <!--定义输入字段和浏览按钮，用于文件上传-->
1
  • 时间框
<input type="date" name="" id="" value="" />
1
  • 百分比左右拉取框
<input type="range" name="" id="" value="" />
1
  • 隐藏表单
<input type=”hidden” name=”hi” value=”v” />
1

隐藏表单用于在浏览器与服务器之间传递一些必要的参数或选项，而这些参数或选项不需要显示在页面中。

结合表格后的表单实例

<!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="注册"/>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<!--reset返回重置默认值-->
					<input type="reset" name="" id="" value="重置" />
					</th>
				</tr>
			</table>
		</form>

	</body>
</html>
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
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绝对路径指带有域名文件的完整路径
    • 文档相对路径：当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的上一级目录。
    • 站点根目录相对路径：提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始，表示站点根文件夹。
  • 文字链接
<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>		<!--新窗口打开-->
1
2
3
4
5

  1. href属性表示链接跳转地址

  2. target属性定义链接网页的打开方式，其值可以为_blank(新窗口)、_parent(父框架)、_self(当前窗口)、_top(清除所有被包含的框架并将文档载入整个浏览器窗口)

  • 锚点链接
<a name=”锚点”></a>           <!--定义锚点-->
<a href=”#锚点”>链接文字</a>	 <!--链接锚点-->

<!--返回顶部-->
<a name="top"></a>
<a href="#top">返回顶部</a>
1
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>
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
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>
1

默认是向左循环移动，移动范围在其父对象的有效区域内。

  • 文本移动的方向
<marquee direction=”#”>…</marquee>
1

其中#可以选择left、right、up、down

  • 文本的滚动循环
<marquee behavior=”#”>…</marquee>
1

其中#可以选择scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

  • 设置文本来回移动，还可以设置循环次数
<marquee loop=”#”>…</marquee>
1

其中#为代表循环的次数。

  • 文本的移动速度，用移动距离来实现
<marquee scrollamount=”#”>…</marquee>
1

其中#设置移动的速度，取正整数。数值越大，速度越快

  • 移动对象的延时
<marquee scrolldelay=”1000”>我走一走，停一停</marquee>
1

scrolldelay以时间为单位，用毫秒表示

  • 移动的区域和背景
<marquee width=”100” height=”100” bgcolor=”pink”>…</marquee>
1

滚动字体和图片实例

<!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>
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
33
34
35
36
37
38
39
40
41
编辑 (opens new window)
#JavaWeb
CSS基础知识
JavaScript

← JavaScript→

最近更新
01
Maven资源导出问题终极版
 10-12
02
《MyBatis-Plus》学习笔记
 10-07
03
MyBatis-Plus—配置日志
 10-07
更多文章>
Theme by Vdoing | Copyright © 2020-2021 版权所有 | repository.singerw.com
×