HTML语言入门基础及提高

最新推荐文章于 2023-05-03 22:19:26 发布

zhang_xinxiu

最新推荐文章于 2023-05-03 22:19:26 发布

阅读量4.2k

点赞数 7

分类专栏：【HTML详解】文章标签： html 语言 input border div 框架

本文链接：https://blog.csdn.net/zhang_xinxiu/article/details/8033290

版权

【HTML详解】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML语言的基础知识，包括HTML概述、常见标签及其使用方法，如文本类标记、表单域按钮标记、图片标记等。文章还涵盖了HTML标签的属性与应用实例，帮助读者理解并掌握HTML语言的基本使用。

摘要由CSDN通过智能技术生成

◆HTML语言概述

HTML全称为HypertextMarkup Language，超文本链接标记语言，是一种简单通用的用来描述网站页面的标记式语言，用来描述网页中的各种图片、表格、文本等各种元素。用户在浏览网站时，浏览器解释和编译这种语言，生成用户可以看得懂的网页。

HTML文件由一系列语法标签组成。HTML标签由单书名号引起来，如<BR>就是一个换行标签。有些标签是成对出现的，一个开始标签就要对应一个结束标签，如<DIV>标签，用来分割文档<DIV align=center>Hello，world！</DIV>。

基本的HTML页面以<HTML>开始，以</HTML>结束，中间的内容分为标题和内容两部分。<HEAD>和</HEAD>之间是页面的标题部分，有页面的相关信息。<BODY>和</BODY>是网页的内容部分，用来描述网页的页面。

HTML语言是由一个个标签过程组成，所以在我们学习该语言时，认识标签过程是很好的方法。

◆常见的HTML标签

1 文本类标记：<Font>标签

●size：用来描述字号的大小；

●color

●face：字体样式；

●title：提示信息，鼠标停留时显示的提示信息。

<html xmlns="http//www.w3.org/1999/xhtml">
<head>
	<meta htttp-equiv="Content-Type" content="text/html;charest=utf-8"/>
	<title>字体 Font</title>
</head>
<body>
	<font color="#FF000">Font标签1</font><br>
	<font color="#FF000" face="黑体" size="+2">Font标签2</font><br/>
	<font color="#330000" face="宋体" size="+4" title="提示信息">Font标签3</font><br>
</body>
</html>

2 文本类标记：文本加粗、斜体与下划线

●<B>

●<I>

●<U>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
       <title>title</title>
</head>
<body>
       正常文本<br>
       <b>加粗文本</b><br>
       <i>斜体文本</i><br>
       <u>下划线文本</u><br>
       <b><i>加粗与斜体</b></i>
       <font size="+2" face="黑体" color="#000033">font 标签与其它<b>文本</b><u>标签</u></font>
</body>
</html>

3 表格标记

▶<TABLE>标签

●width

●height

●border

●cellpaddinf：表格边框间的填充宽度

●cellspacing：表格边框中的间距

●bordercolor

●background：表格背景图片

●bgcolor：表格背景颜色

●align ：表格对齐方式

解释：宽度和高度的单位，如果是一个数字，则表示为多少像素；如果是一个百分比，表示宽度或高度站上一级元素的百分比；

▶<TR>表格的一行,属性同<table>

▶<TD>表格的一个单元格，属性同<table>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
       <title>title</title>
</head>
<body>
       <table width="400" height="200" border="4" cellpadding="2" cellspacing="4" bordercolor="#FF0000" background="F:\图片\1.jpg" bgcolor="#FFFFFF" align="center" >
	<tr>
   	       <td width="158" height="40" background="bg.jpg">单元格设置背景</td>
             	       <td width="175"> </td>
	       <td width="76"> </td>
	<tr>
	       <td height="40" align="right"  valign="bottom">对齐方式的位置</td>
	       <td bgcolor="#666666"><font color="#FFFFFF" size="+3">单元格的背景颜色</font></td>
	       <td> </td>
	</tr>
	<tr>
	       <td height="83" align="center" valign="middle">居中对齐</td>
	       <td bordercolor="#FFFFFF">单元格的边框颜色</td>
	       <td> </td>
	</tr>
         </table>
</body>
</html>

4 超链接标记

▶<a herf="http://www.baidu.com" target="_blank">百度</a>

属性target表示链接页面的打开方式，值如下：

●_Blank:以新建页面的方式打开网页

●_Parent:在上级页面打开网页

●_self:在当前页面打开

在链接的地址中，如果是指向网站以外的页面，需要写出详细的URL地址。链接到本站的页面，可以不写详细的URL地址，只需写出相对目录。

如下是链接到同一网站不同目录网页的链接方法：

●<a href="aa.htm">aa</a>:链接到当前目录的aa.htm

●<a href="/aa.htm">aa</a>:链接到根目录的aa.htm

●<a href="../aa.htm">aa</a>:链接到上级目录的aa.htm

●<a href="/">aa</a>:链接到网站的首页

●<a href="./">aa</a>:链接到当前目录的默认页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html"; charest=utf-8"/>
	<title>链接</title>
</head>
<body>
	<a herf="http://www.baidu.com"><i>百度</a></i><br/>
	<a herf="/">网站默认首页</a><br>
	<a herf="./">当前目录的默认网页</a><br>
	<a herf="../a.html" target="_blank"><br/>上一级目录的一个网页</a><br/>
	<a herf="/a.html">玩站根目录下的一个网页</a>
</body>
</html>

5 段落标记

在网页中需要有一个<p>标签、<div>标签来把一些文本作为一个整体，构成一个段落。

▶<P>标签：新起一个段落，新段落前有一行空格，代码：<p align="center"class="a1" title="提示信息">你好。</p>

●class: 段落的样式。

●title

●align

▶<div>标签：俗称容器标签，可看做是网页的一个容器，把标签中的内容作为一个整体，代码：<div id="aaa"align="center">你好。</div>

●align

●id：表示对象的字符串

●style: 为该元素设置内嵌样式

●class

▶<span>标签：指定一个网页内嵌文本内容，把一段文本作为一个整体进行设置而不需要成为一个段落时，可以使用该标签，属性跟<div>属性相似

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charest=utf-8"/>
<title>段落示例</title>
</head>
<body>
<div align="center"><b>李白</b></div>
	<span title="李白生平"  ><u>字太白。母梦长庚星而生。通诗书，稀松横竖，击剑为任侠。天宝初，贺知章言语选送，有诏供奉翰林，饮食宜于贵妃，刺进放缓。禄山反，永旺    解读东南，集    呗，白做西线养育，落叶狼，衣舍的是，戴宗一座是依照，二百一组，年六十四。</u></span>
	<p align="center"><b><i>梦李白。其一</i></b><br/>
		<font size="+1" color="#0066cc" face="黑体">杜甫</font><br/>
	<div align="center" id="text1" title="故事"> 
			死别一吞声，生别长测测。<br>
			艰难站立地，注册无消息。<br>
			故人入我盟，名我长相依。<br>
			军尽在落网，路远不可测。<br>
			混来疯理清，混饭馆塞黑。<br>
			落月满无量，迟疑找颜色。<br>
			水深波浪扩，五十蛟龙的。
	</div>
	</p>
</body>
</html>

6 框架标记

一个网页中包含另一个网页。

▶Iframe：框架

●src：框架页面的地址，可是url地址或本网站相对地址；

●width：框架页面的宽度

●height

●align

●scrolling：框架页面的滚动条方式，可是auto、yes、no等；

●frameborder：框架页面的边框，可能是0或1等值；

<html xmlns="http://www.w3.org/1999/html">
<head>
	<meta http-equiv="Content-Type" content="text/html; charest=utf-8"/>
	<title>框架网页</title>
</head>
<body>
	<div align="center">网页中包含网页的首页<br>
	<iframe src="http://www.163.com" width="450" height="600" align="middle" frameborder="1" scrolling="yes"></iframe></div>
</body>
</html>

7 表单域按钮标记

表单是指网页中的一些文本框、单选按钮、下拉菜单等与用户数据提交有关的对象，放在一个<form>标签中，用户提交后数据发送到服务器上。是网页浏览器与服务器进行数据交互的基本形式。

▶表单属性

●id和name：表单的名称，用来表示这个表单元素。

●type：表单的类型。

●value：可是表单元素的输入值、选择值、默认值等。

▶表单对象

●文本框: 单行文本框、多行文本框、密码；

●隐藏区域：表单中的隐藏字段。如:<input name="hiddentext"type="hidden" id="hiddentext" value="reg">

●复选框：如：<inputname="subject" type="checkbox" id="subject"value="外语" checked="checked">外语

●单选按钮: 如：<inputname="money" type="radio" value="1"checked>1000-3000元

●下拉菜单：

如：请选择你的血型:<br>

</select>

●文本选择框

如：请选择附件：<br>

●按钮

提交表单:单击以后将表单内容提交到服务器，type类型为submit

无动作：单击后无动作，一般用作javascript事件，type类型为button。

重设表单：单击后重设表单，是这个表单中所有的值都重设为表单的默认值。type类型为reset。

▶<form>表单标签

●name: 表单的名称。

●method：表单的发送方式；两种值：

get，表单中的数据会显示在IE浏览器的地址栏中；

post，则不会；

●action：表单的发送页面地址。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charest=gb2312">
	<title>注册表单示例</title>
</head>
<body>
	<form name="myform" method="post" action="reg.asp">
	<table width="272" border=1 align="center" cellspacing="4" bordercolor="#CCCCCC">
		<tr><td height="26" colspan="2"><div align="center">用户注册</div></td></tr>
		<tr><td height="26" width="58">用户名</td><td height="26" width="120"><input name="username" type="text" id="username"></td></tr>
		<tr><td height="26" width="58">口令</td><td height="26" width="120"><input name="password" type="text" id="password"></td></tr>
		<tr><td height="26" width="58">性别</td><td height="26" width="120"><input name="sex" type="radio" value="男">男<input name="sex" type="radio" value="女">女</td></tr>
		<tr><td height="26" width="58">email</td><td height="26" width="120"><input name="email" type="text" id="email"></td></tr>
		<tr><td height="26" width="58">电话</td><td height="26" width="120"><input name="tel" type="text" id="tel"></td></tr>
		<tr><td height="26" width="58">请选择班级</td><td height="26" width="120"><select name="classroom">
										<option value="fd" selected>fd</option>
										<option value="fa">fa</option>
										<option value="fc">fc</option>
										<option value="fx">fx</option>
									             </select></td></tr> 
		<tr><td height="26" colspan="2"><div align="center" ><input name="course" type="checkbox" value="数学">数学<input name="course" type="checkbox" value="语文">语文<input name="course" type="checkbox" value="英语">英语</tr></td></div>
		<tr><td height=26 colspan="2">
		<div align="center"><input name="Submit" type="submit" value="提交"><input name="Submit2" type="reset" value="重置"></tr></div></td>
	</table>
	</form>
</body>
</html>

8 图片标记

网页中插入jpg、gif等格式的图片，需要使用<img>图片标记。

▶<img>

●width

●height

●border

●src

●vspace: 垂直方向边距。

●hspace：水平方向边距

●alt：图片提示文字

●align

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charest=gb2312">
	<title>图片标记</title>
</head>
<body>
	<图片示例><br/>
	<img src="1.jpg" border="2" vspace="20" hspace="30" width="124" height="193"/>
	<img src="1.jpg" border="4" alt="my photo" width="124"  height="193" vspace="30" hspace="40"/>
</body>
</html>

9 换行标记

▶<br/>

10 水平线标记

▶<hr>

●width

●noshade: 水平线是否有阴影，如果值为noshade，则无阴影。

●align

●color

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charest=gb2312">
	<title>水平线</title>
</head>
<body>
	水平线标记示例<br/>
	<hr color="#FF0000" align="center" noshade="noshade" width="30%"/>
	有阴影的水平线<br/>
	<hr align="center" width="50%" color="#0000ff"/>
</body>
</html>

11 特殊标签

▶ &nbsp；：空格标记。在网页中显示空格，需要用空格标记。

▶<!-- -- >：注释标记。注释标记内容进行编译解释后，在网页中并不现实。

▶<ANAME=""></A>：命名锚点标记。它的作用就好比是一个书签，如果网页的页面有很多屏，可以做一个链接，链接到网页的一个命名锚点位置。链接的URL中如果有命名锚点，则需要在URL后面加“#”，再加命名锚点名称。如，<a href=aa.asp#tag>描点链接</a>,就是一个指向网页aa.asp中的一个tag命名锚点的链接。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charest=gb2312">
	<title>水平线</title>
</head>
<body>
========================================
	<a href="#NAME1">显示位置1</a>
	<a href="#NAME2">显示位置2</a>
	<a href="#NAME3">显示位置3</a>

----------------------------------1
	<a name="NAME1"></a>
	<br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br>
----------------------------------2
	<a name="NAME2"></a>
	<br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br>
----------------------------------3
	<a name="NAME3"></a>
</body>
</html>