01.WEB-HTML之HTML标签学习总结_web html标签-优快云博客

本文详细介绍了HTML的基础知识，包括HTML的定义、学习原因和使用方式。重点讲解了HTML的常见标签，如标题、水平线、段落、字体样式、图片、列表、超链接、表格、表单元素等，并提供了相关属性的说明和实际应用示例。

一 HTML相关介绍:

1.1 什么是HTML?

超文本标记语言:

超文本:比普通文本功能更加强大;

标记语言:使用一组标签对内容进行描述的语言,他不是编程语言.

1.2 为什么学习HTML?

1.3 HTML怎么使用?

语法和规范:

1.所有的html文件后缀名都是以.html 或者.htm结尾的,建议使用.html结尾.

2.整个html文件分别由头部分<head></head>和体<body></body>组成.

3.html标签都是由开始标签和结束标签组成(特例除外<br />)

4.html标签忽略大小写,建议大家使用小写.

二 HTML相关标签学习:

2.1标题标签:

标题标签使用<hn></hn>,n 从 1 到 6 逐渐变小。超过 6 的按 6 的进行显示
特点：加粗加黑显示，单独占用一行。与其它行有一定的行间距。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>公司介绍</h1><br />
		<h2>公司介绍</h2><br />
		<h3>公司介绍</h3><br />
		<h4>公司介绍</h4><br />
		<h5>公司介绍</h5><br />
		<h6>公司介绍</h6><br />
		<h100>公司介绍</h100>
	</body>
</html>

效果如图所示:

2.2水平线标签:

水平线标签:<hr /> size属性:水平线的高度,单位像素

noshade属性:没有阴影,取值 noshade,表示显示纯色

<hr size="2" noshade="noshade"/>

2.3 段落标签:

<p>我是一段落文字</p>
<p>我是另一段落文字</p>

2.4 字体标签:

字体标签使用<font></font>

必须结合其属性才能具备一定的样式效果:

设置颜色color:可以是英文单词,也可以是十六进制

设置字体face:那些字体必须是你本机已有的

设置大小的size:从1到7逐渐变大,超过7的部分按照7来显示

<font size="6" color="red"></font>
<font size="6" color="#FF0000"></font>
<font size="6" color="#FF0000" face="微软雅黑"></font>

2.5 对字体加粗:

 <b></b>

2.6 斜体:

 <i></i>

三图片标签

3.1 图片标签
<img />
图片位置属性:src

绝对路径:带有盘符的

相对路径:

1 如果是同级,直接写文件名称或者 ./文件名

2 如果是上一级: ../文件名称, 如果是多层,那么多写几个 ../

3 如果是下一级: 写目录名称/文件名

width:设置图片宽度单位:px

height:设置图片高度单位:px

alt : 当图片无法正常显示出来的时候给出的提示

四列表标签

4.1 无序列表

type:circle 空心小圆点 disc:实心小圆点 square:实心方块

<body>
	<ul type="circle">
		<li>优快云</li>
		<li>GOOGLE</li>
		<li>GITHUB</li>
	</ul>
</body>

4.2 有序列表

<body>
		<ol>
			<li>优快云</li>
			<li>baidu</li>
			<li>Google</li>
		</ol>
	</body>

举个栗子:

<body>
		<ol  reversed="reversed" type="A">
			<li>优快云</li>
			<li>baidu</li>
			<li>Google</li>
		</ol>
	</body>

显示结果

五超链接标签

<body>
		<a href="02_有序列表.html" target="_blank">点我跳转</a>
	</body>

实现效果:

六表格标签

<body>
		<table>
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
				<td>34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				<td>44</td>
			</tr>
		</table>
	</body>

效果:

给table 中加属性:

<table border="1px">

效果:

6.2 其他属性

cellspacing:设置边框与边框之间的距离

cellpadding:设置边框与内容之间的距离

<body>
		<table border="1px" cellspacing="0px" cellpadding="0px" bgcolor="red" align="center"
			width="450px" height="150px">
			<tr bgcolor="gold" height="100px">
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
				<td>34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				<td>44</td>
			</tr>
		</table>
	</body>

6.3 表格的跨行跨列

设计如下效果:

<body>
		<table border="1px" cellspacing="0px" cellpadding="0px" bgcolor="red" align="center"
			width="450px" height="200px">
			<tr>
				<td colspan="2" align="center">11</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2" align="center">22</td>
				
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
			
				<td rowspan="2" align="center">34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
			
			</tr>
		</table>
	</body>

结果:

6.3.1 在列表中嵌套:

<body>
		<table border="1px" cellspacing="0px" cellpadding="0px" bgcolor="red" align="center"
			width="450px" height="200px">
			<tr>
				<td colspan="2" align="center">11</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2" align="center">
					<table border="1px" width="100%" height="100%" cellspacing="0px" align="center">
						<tr>
							<td>11</td>
							<td>11</td>
							<td>11</td>
						</tr>
						<tr>
							<td>22</td>
							<td>22</td>
							<td>22</td>
						</tr>
						<tr>
							<td>33</td>
							<td>33</td>
							<td>33</td>
						</tr>
					</table>
				</td>
				
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
			
				<td rowspan="2" align="center">34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
			
			</tr>
		</table>
	</body>

结果:

** 空格在HTML中 :   代表一个空格

七框架及标签

frameset 使用注意不能用body标签

八 form表单标签

8.1 表单标签:

所有需要提交到服务器端的表单项都必须使用<form></form>括起来

form表单的属性:

action:整个表单提交的位置(可以是一个页面，也可以是一个后台java代码)
method:表单提交的方式(get/post/delete……等7种)

8.2 文本输入项:

<input type=”text” name=”” size=”” maxlenght=”” readonly=””
placehoder=””/>

8.3 密码输入项:

<input type=”password” name=”” />

8.4 单选按钮:

<input type=”radio” name=”” value=”” checked=””/>

8.5 多选按钮:

<input type=”checkbox” name=”” value=”” checked=”” />

8.6 下拉列表:

<select name=””>
<option value=”” selected=””>北京</option>
<option>上海</option>
</select>

8.7 文件上传项 :

<input type=”file” name=””/>

8.8文本输入域:

<textarea name=””></textarea>

8.9 提交按钮:

<input type=”submit” value=””/>

8.10 普通按钮:

<input type=”button” value=””/>

8.11 重置按钮:

<input type=”reset” value=””/>

8.12 隐藏项:

<input type=”hidden” name=””/>

用于用户比较敏感的信息;其他标签属性可以查看文档即可.

举个栗子

<body>
		<form action="#" method="get">
			隐藏字段:<input type="hidden" name="id" value="" /><br />
			用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5"  placeholder="请输入用户名"/><br />
			密码：<input type="password" name="password" required="required"/><br />
			确认密码：<input type="password" name="repassword"/><br />
			性别：<input type="radio" name="sex" value="男"/>男
			<input type="radio" name="sex" value="女" checked="checked"/>女<br />
			爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
			<input type="checkbox" name="hobby" value="打电动"/>打电动
			<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
			头像：<input type="file" name="file"/><br />
			籍贯：<select name="province">
				<option>--请选择--</option>
				<option value="北京">北京</option>
				<option value="上海" selected="selected">上海</option>
				<option value="广州">广州</option>
			</select><br />
			自我介绍：
				<textarea name="zwjs">
					
				</textarea><br />
			提交按钮：<input type="submit" value="注册"/><br />
			普通按钮：<input type="button" value="zhuce"/><br />
			重置按钮：<input type="reset" />
		</form>
	</body>

效果如下: