JavaScript<一>_HTML

最新推荐文章于 2026-08-22 15:56:09 发布

原创最新推荐文章于 2026-08-22 15:56:09 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

学习_JavaScript

本文详细介绍了HTML的基本概念与常用标签，包括字体、列表、图像、表格等，并深入探讨了表单的使用方法及其与服务器端的交互过程。

html

一、html

html:超文本标记语言；html语言中是由标签组成的，html中的数据都会封装在标签中，因为可以通过标签中的属性值的改变对封装内数据进行操作。

确定html代码范围：<html></html>，在该范围中可以定义两部分内容，一部分是头，一部分是体。

<html>

</body><body>

</html>

head:网页的一些属性信息，比如：标题。

body:网页显示的数据。

标签特点：对于数据进行封装，那么就有开始标签和结束标签，但是也有一些标签只体现单一功能，不需要结束标签，规范中要求标签必须结束，所以这样的标签在内部结束。

如：<br/><hr/><img/><input/>

标签格式：<标签名属性名=“属性值”>数据</标签名>

<标签名属性名 =“属性值”/>

操作思想：为了操作数据，都需要将数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。

常见标签：

1、字体标签：<font> <font size=”7” color=”#ffffff”>数据</font>

特殊部分：如果要在页面显示一些特殊符号值，需要进行转义。如下图：

标题标签：<h1><h2>...<h6>。

2、列表标签：<dl></dl>

上层项目：<dt>

下层项目:<dd>

项目符号标签：<ul> <ol>这两个标签中的列表项都由<li>标签封装。

示例：

1.游戏名称

a.星际

b.红警

2.游戏内容

a.攻略

b.秘籍

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>游戏列表标签演示</title>
</head>

<body>
	<ol>
		<li>游戏名称</li>
			<ol type="a">
				<li>星际争霸</li>
				<li>红色警戒</li>
			</ol>
		<li>游戏内容</li>
			<ol type="a">
				<li>攻略</li>
				<li>秘籍</li>
			</ol>
	</ol>
</body>
</html>

3、图像标签:<img>

align:属性定义图片的排列方式，border：用来设置图像的边框。

4、表格标签：<table>：表格由行所组成，行由单元格组成。表格中默认都有一个tbody标签。

组成：标题标签：<caption>；表头标签：<th>；行标签：<tr>；单元格标签：<td>

每个表格可以有一个表头、一个表尾和多个表体(正文)，分别以THEAD、TFOOT、TBODY元素表示；THEAD、TFOOT包含关于表格列的信息。

TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。

表格是最常见的标签，用于对数据进行格式化。

代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格标签演示</title>
</head>

<body>
	<table border="1" bordercolor="#CC0066" cellpadding="10" cellspacing="0" width="500">
		<tbody>
			<tr>
				<th rowspan="2">个人信息</th>
				<td>张三</td>
			</tr>
			<tr>
				<td>30</td>
			</tr>
		</tbody>	
	</table>
		
	<hr/>
	<table border="1" bordercolor="#CC0066" cellpadding="10" cellspacing="0" width="500">
		<tr>
			<th colspan="2">个人信息</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>30</td>
		</tr>	
	</table>
	<hr />
	<table border="1" bordercolor="#CC0066" cellpadding="10" cellspacing="0" width="500">
		<caption>表格标题</caption>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>30</td>
		</tr>
	</table>
</body>
</html>

5、超链接：<a>

当被点击后，会启动引擎对应解析程序。去查找指定的主机。

1、先找本地主机的hosts文件，如果没有找到该主机对应的ip地址；

2、去公网DNS服务器上去找对应的ip地址。

当点击超链接时，就会出现邮件相关联的解析程序，本机默认的outlook。

超链接的另一个作用：定位标记；

<aname=”top”>顶部位置</a>

<ahref=”#top”>回到顶部位置</a>

代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接2</title>
</head>

<body>
	<a name="top">顶部位置</a>
	</br>
	<a href="mailto:843635316@qq.com">联系我们</a>
	</br>
	<a href="thunder://fdgdgbcb">半斤八两(许冠文)</a>
	<hr/>
	</br>
	<a href="http://www.hao123.com" target="_blank">好123上网导航</a>
	</br>
	<a href="http://www.hao123.com" target="_blank"><img src="imgs//10.bmp"/></a>
	</br>
	<img src = "imgs//1.jpg" height="900" width="400" border="10" />
	<hr/>
	<a name ="mid">中间位置</a>
	<hr/>
	
	<img src = "imgs\1.jpg" height="900" width="400" border="10" />
	<a href = "#top">回到顶部位置</a>
	<a href = "#mid">回到中间位置</a>
</body>
</html>

6、表单标签：该标签是可以和服务端进行交互：<form>；

表单标签中的元素：

<input>:该标签因为type属性的值不同，所对应的组件也不相同。

type属性：

1、text：文本框，输入的文本可见。

2、password：密码框，输入的文本不可见。

3、radio：单选框，注意，要被选中，必须要给单选框定义一个属性name。当有多个单选框时，只能有一个被选中，那么这些单选框的name值必须相同。

4、checkbox：复选框，用在当对多个数据进行同时选中时。

5、file：可以进行文件选择的组件，通常用于附件，或者文件上传。

6、hidden：隐藏组件，该组件的内容不会在页面上显示，但是其定义的name和value可以提交到服务端。

7、button：按钮组件，自定义一个按钮默认是没有任何效果的，可以通过注册事件并加入自定义效果。

8、reset：重置按钮，将组件中被操作的效果还原到初始状态。

9、submit：提交按钮，将组件中添加的数据提交到指定的目的地。

10、image：图像组件，为了避免提交按钮的难看，可以通过image的src属性连接一个好看的按钮图片完成提交效果。

下拉菜单：<select>:每一个下拉菜单项都由option进行封装。

</select>

文本区域：<textarea>

表单组件通常都需要定义name和value属性，因为要将数据发送给服务端，服务端只有知道了该name的属性值才可以对提交的数据进行分别获取。

form标签中常见的属性：

action：指定数据提交的目的地；method：提交方式；两种常用值get和post，get为默认的提交方法，比如在地址栏中输入一个URL、点击一个超链接、都是get提交。

代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>数据提交</title>
</head>

<body>
	<form action="http://100.64.27.61:10019" method="post">
		<table border="1" bordercolor="#CC0066" cellpadding="10" cellspacing="0" width="600">
			
			<tr>
				<th colspan="2">注册表单</th>
			</tr>
			<label accesskey="u" for="userid">
			<tr>
				<td>用户名称(U)：</td>
				<td><input type="text" name="user" id="userid"/></td>
			</tr>
			</label>
			<tr>
				<td>输入密码：</td>
				<td><input type="password" name="psw"/></td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td><input type="password" name="repsw"/></td>
			</tr>
			<tr>
				<td>性别选择：</td>
				<td>
					<input type="radio" name="sex" value="nan" />男
					<input type="radio" name="sex" value="nv" />女
					</td>
				</td>
			</tr>
			<tr>
				<td>选择技术：</td>
				<td>
					<input type="checkbox" name="tech" value="java" />JAVA
					<input type="checkbox" name="tech" value="html" />HTML
					<input type="checkbox" name="tech" value="css" />CSS
				</td>
			</tr>
			<tr>
				<td>选择国家：</td>
				<td>
					<select name="country">
						<option value="none">--选择国家--</option>
						<option value="USA">美国</option>
						<option value="CHINA">中国</option>
						<option value="English">英国</option>
		           </select>
				</td>
			</tr>
			<tr>
				<th colspan="2">
					<input type="reset" value="清除数据"/>
					<input type="submit" value="提交数据"/>
				</th>
			</tr>
			</table>
	</form>
</body>
</html>

效果图如下：

Get和post提交的区别：

Get:会将提交的数据显示在地址栏上；post：不会将数据显示在地址栏上；

Get:提交的数据的体积受地址栏的限制；post：可以提交大体积数据；

Get:对于敏感信息不安全；post：对于敏感信息安全；

Get:会将提交信息封装在请求行，也就是http消息头之前；post：会将提交数据封装在数据体中，也就是http消息头之后的空行。

对于服务器而言：表单提交尽量用post，因为涉及到编码问题。因为tomcat服务器默认的解码是ISO8859-1。对于post提交的中文，在服务器可以直接使用setCharacterEncoding(“gbk”)就可以解决，对于get提交的中文，在服务端只能通过ISO8859-1将数据编码一遍，再通过指定的码表如GBK解码。

使用表单的组件不一定要定义form标签，只有需要将数据进行服务端的提交时才用到form标签。

使用表单的组件不一定要定义form标签，只有需要将数据进行服务端的提交时，才用到form标签。

7、<label>标签：用于给各个元素定义快捷键。

for属性：指定快捷键作用的表单元素，必须与要作用的表单元素的id值相同；

accesskey属性：指定的快捷键，此快捷键需要和alt键组合使用。

例如：<label for=”user” accesskey=”u”>用户名(U)</label>

<inputtype=”text” id=”user”/>

8、头标签：头标签都放在<head></head>头部分之间，包括：title、base、meta、link；

<title>:指定浏览器的标题栏显示的内容；

<base>:

href属性：指定网页中所有的超链接的目录，可以是本地目录，也可以是网络目录，注意值的结尾处一定要用/表示目录，只作用于相对路径的超链接文件。

target属性：指定打开超链接的方式，如_blank表示所有的超链接都用新窗口打开显示。