HTML基础

来源：互联网发布：js打开新窗口传递参数编辑：程序博客网时间：2024/04/28 23:38

HTML基础
1、Web页面（网页）也是一种文档，HTML就是用来编写这些文档的一种标记语言，文档的结构和格式的定义是由HTML元素来完成的，HTML元素是由单个或一对标签定义的包含范围。一个标签就是左右分别有一个小于号（<）和大于号（>）的字符串。开始标签是指不以斜杠（/）开头的标签，其内是一串允许的属性/值对。结束标签是以一个斜杠（/）开头的。

2、HTML元素的四种形式
空元素：<br>
带有属性的空元素：<hr color = "blue">
带有内容的元素：<title>http://www.163.com</title>
带有内容和属性的元素：<font color = "red">http://www.163.com</font>

3、HTML页面的基本结构
一个HTML文档，以<html>开始标签开始文档，以</html>结束标签结束整篇文档。其它标签嵌套在<html>...</html>之间的。<head>...</head>元素表示文档的头部，其中通过<title>...</title>元素指定文档的标题，它显示于浏览器的标题栏上以及出现在历史列表中。文档的正文内容出现在<body>...</body>元素当中。
<html>
<head>
<title>-----标题-----</title>
</head>
<body>
正文内容
</body>
</html>

提示：
（1）在HTML文档中，给标签的属性赋值时，可以加双引号，也可以不加；
（2）HTML中，标签和属性的名字是大小写无关的；
（3）在HTML中，如果存在连续多个空白字符（空格、制表符、回车、换行等），浏览器显示时将只解析为一个空格字符，就是因为<body>元素中的回车和空格基本上都被浏览器忽略了。

4、与段落控制相关的标签
<p align="#">表示paragraph，作用是创建一个段。属性align表示段的对齐方式，#可以是left，center，right和justify。
<br>表示line break，作用是换行。
<hr color="clr">表示horizontal rule，作用是插入一条水平线。属性color用来指定线的颜色，clr可以是预定义的颜色名字。如，red， blue， green， black， white， yellow， olive 和aqua等，或者以十六进制数表示的颜色值。
注意：
在使用十六进制数表示颜色值时，IE浏览器不要求添加“#”号，但如果为了支持更多的浏览器，那么还是应该在十六进制的颜色值前面加上“#”号。
5、控制文本的显示
<center>...</center>：使文本居中显示；
<h# align="##">...</h#>：用于指出文档的标题，#是从1~6的整数，1表示最大标题，6表示最小标题。属性align用于设置标题对齐的方式，##可以是left，center和right。
<font size=n color="clr">...</font>：用于设置字体，属性size表示字体的大小，n可以是从1~7的整数，数字越大，字体越大；属性color表示字体的颜色，clr可以是预定义的颜色名字，例如red，blue，green，black，white，yellow，olive和aqus等，或者以十六进制数表示的颜色值，clr=#rrggbb。
<b>...</b>：使文本成为粗体。
<i>...</i>：使文本成为斜体。

6、如何输入特殊的字符
在HTML中特殊字符需要通过字符引用的方式才能输入。HTML中有两种字符引用类型：数字字符引用和字符实体引用。（注意：实体引用是区分字母大小写的）

不间断空格可通过中文输入法的全角空格代替，但是需要注意：全角空格在不支持中文字符集的浏览器中将显示为乱码，所以使用时要注意你所面向的用户是中文用户。

7、HTML中的注释
格式：

8、表格
定义表格：表格是用<table>元素来定义的，如<table border=n align="alignment" bgcolor="clr">...</table>，属性border用于定义表格边框的宽度，n可以是从0开始的整数，如果设置border=0，那么表格边框没有宽度，如果忽略border属性，浏览器将不会显示边框，这和设置border=0是一样的效果。属性align用于设定表格的对齐方式，alignment可以是left，center或right。属性bgcolor用于指定表格的背景色。
定义表格的标题：<caption>元素用于定义表格的标题，如<caption>...</caption>，用<caption>元素定义表格的标题的好处是，当我们要调整整个表格的时候，在<caption>和</caption>之间的文本将随着表格一起被调整。
定义一个新行：<tr>元素在表格中添加一个新行，如<tr align="alignment" valign="alignment">...</tr>属性align用于指定这一行在水平方向上的对齐方式，alignment可以是top，moddle和bottom。
定义表头：表头一般指粗体字显示的第一行中的每一列，<th>元素用于定义表头，如<th>...</th>.
定义单元格：<td>元素用于定义单元格，如<td>...</td>。

9、表单的创建
（1）<form>元素
通过<form>元素，以及在其间嵌入的相关元素（称为控件），就可以创建作为HTML文档的一部分的表单。基本语法：

其中，属性method用于指定向服务器发送表单数据时所使用的HTTP方法，可以是get或者post两者中的一种，get是默认的方法。当采用get方法提交表单时，提交的数据被附加到URL（在属性action中指定）的末端，作为URL的一部分发送到服务器端。而Post方法，是将表单中的信息作为一个数据块发送到服务器端。无论采用哪一种方法，数据的编码都是相同的：name1=value1&name2=value2。在提交表单时，如果数据量较小，又没有安全方面的考虑，可以采用get方法提交表单。如果数据量较大，或者有安全方面的考虑，往往采用post方法提交表单。属性action指定对表单进行处理的脚本的地址。也就是说，表单提交到服务器后，交由谁来处理，在action属性中指定处理者的URL。

（2）<input>元素
如果要接收用户的输入信息，我们可以在<form>元素的开始标签和结束标签之间，添加<input>元素。<input>元素是一个带有属性的空元素，用来创建表单中的控件，其语法是：<input type="type" name="name" size="size" value="value">，属性type用来指定要创建的控件的类型。属性name用来指定控件的名称，处理表单的服务器端脚本可以获得以名称-值对所表示的表单数据，利用名称，可以取出对应的值。name属性在表单中并不显示。属性size用来指定表单中控件的初始宽度。属性value指定控件的初始值。

（3）单行文本输入控件
在<input>元素中，属性type赋值为text，可创建一个单行文本输入控件。提示：如果你的表单中只有惟一的一项文本输入控件，你可以使用回车来提交表单。大多情况下，表单需要一个提交按钮，用户通过单击“提交”按钮来提交整个表单。

（4）“提交”按钮
将<input>元素的属性type设置为“submit”来创建提交按钮，如果表单中只有一个提交按钮，那么不需要为它指定名字。<input type="submit">

（5）“重置”按钮
将<input>元素的type属性设置为“reset”就可以创建重置按钮。<input type="reset">

（6）口令输入控件
将<input>元素的type属性设置为“password”就可以创建口令输入控件。<input type="password" name="pwd">

（7）单选按钮
将<input>元素的属性type设置为“radio”来创建单选按钮。单选按钮的数量根据你的需要来确定，通过给多个按钮使用一个name值，可以指明一组单选按钮。
<input type="radio" name="sex" value=1 checked>男
<input type="radio" name="sex" value=0>女
属性value表示当这个单选按钮被选中时，按钮的设定值。属性checked是可选的，它告诉浏览器当第一次显示这个单选钮时，将它显示为选中状态。

（8）复选框
通过将<input>元素的属性type设置为“checkbox”来创建复选框。
<input type="checkbox" name="interest" value="football">足球
<input type="checkbox" name="interest" value="basketball">篮球
<input type="checkbox" name="interest" value="volleyball">排球
<input type="checkbox" name="interest" value="swim">游泳
这里是四个复选框取相同的名字，也可以取不同的名字。如果取相同的名字，当提交表单后，在服务器端的脚本将会接收到多个具有同样名字的名称-值对（被选中的复选框的值都会被提交到服务器端），当然这个处理过程也是很容易的。

（9）列表框
列表框由<select>元素创建，列表框中的各个选项用<option>元素提供。
<select size=1 name="education">
<option value="" selected>...</option>
<option value="高中" selected>高中</option>
<option value="大学" selected>大学</option>
<option value="硕士" selected>硕士</option>
<option value="博士" selected>博士</option>
</select>
<select>元素的size属性指定在列表框可视区域显示的行数，<option>元素的selected属性指定初始选择的列表项。

（10）多行文本输入控件
创建多行文本输入控件的语法如下：
<textarea name="name" rows="number of rows" cols="number of columns">...</textare>
属性rows用于指定文本输入控件可视区域显示的文本行数，属性cols用于指定文本输入控件可视区域显示的宽度。在开始标签和结束标签之间出现的文本，将作为文本输入控件中的初始文本而显示。

（11）隐藏控件
通过将<input>元素的type属性指定为hiden来创建隐藏控件，如下所示：
<input type="hiden" name="name" value="value">
隐藏控件在浏览器中并不显示，用户通过查看HTML页面源代码，可以看到隐藏控件。隐藏控件通常存在于服务器端脚本动态产生的表单中，用于保存客户端的跟踪数据和有用信息，当用户提交表单时传回服务器端。

10、其他常用标记

（1）超链接
要使超链接能够正常工作，就需要有一种方法来定位Internet上的资源，这是通过URL来实现的。URL的全称是Uniform Resource Locator，统一资源定位符。URL由三部分组成：协议、主机名称、文件目录和文件名。例如，http://www.abc.com/video/video.asp，http表明使用的是超文本传输协议，从主机名（域名）为www.abc.com的服务器上访问video目录下的video.asp文件。
建立一个链接的语法如下：<a href="URL">...</a>
属性href用于指定链接的目标，目标地址由URL定位，在开始标签<a>和结束标签</a>之间输入的文本将作为浏览器中显示的链接文本。

（2）嵌入图像
在网页中嵌入一幅图像要使用<img>元素，其基本语法为：
<img src="URL" width=n height=n>

将图片作为一个链接的格式为：
<a href="http://www.sina.com.cn">
<img src="logo.gif" width=197 height=81>
</a>