初学者必看的html基础知识总结

今天给大家看看html基础知识（http://www.maiziedu.com/course/web/421-5342/）的总结，首先讲讲html是什么？HTML是将内容和内容显示形式结合在一起的语言，它对于内容显示形式的控制，主要是通过标签（元素）的属性，由于它对“内容显示形式”存在着很多的弊端，所以之后就出现了CSS，CSS就相当于HTML标签的属性。

HTML元素的形式

空元素。例：<br>

带有属性的空元素。例：<hr color = "blue">

带有内容的元素。例：<title>http://blog.csdn.net/jiben2qingshan</title>

带有内容和属性的元素。例：<font color="red">http://blog.csdn.net/jiben2qingshan</title>

注意：对于<br>这类的标签，我们最好这样写<br />

链接

内部链接

理论

1、建立命名锚记，其语法：<a name ="命名锚记名称">

2、建立链接（链接到相应的锚记），其语法：<a href = "#锚记名称">

举例(主要代码)：

<a href ="#poem"> A点击这个就会跳转到B </a>

<!--两行中间相隔一页后的效果会更好-->

<a name ="poem"> B这个就是跳转后的位置 </a>

用途

同一个网页中；打开指定网页的指定位置（href="index.html#1",可以为绝对地址）

外部链接

链接到外部网站

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

链接到E-mail

<a href ="mailto:jiben2qingshan@163.com" target="_blank">点击此处会打开默认的电子邮件软件</a>

链接到FTP

<a href ="ftp://ftp地址" target="_blank">点击此处可以链接到相应的FTP服务器（一般进入访问FTP服务器需要输入用户名和密码）</a>

链接到Telnet

<a href = "telnet://地址" target="_blank">点击此处就可以链接到相应的Telnet服务器</a>

target属性

取值：_blank，在新窗口中打开被链接文档；_self，默认，在相同的框架中打开被链接文档；_parent，在父框架中打开被链接文档；_top，在整个窗口中打开被链接文档；framename，在指定的框架中打开被链接文档

下载文件

如果超链接指向的不是一个网页文件，而是其他文件例如zip文件等，单击链接的时候就会下载该文件

<a href = "歌名.zip">歌曲名称</a>

注意

地址一般写成相对地址，尽量不要写绝对地址；“../”表示当前目录的上一级目录，“../../”表示当前目录的上一级的上一级。

图片：

<img src="../1.jpg" alt="无图显示汉字" title="鼠标置顶显示汉字" border="10" vspace="10" hspace="10" width="300" height="300" align="right">

img便签属性的解释

src：图片的地址

alt：当图片不显示时，出现在该位置（原显示图片）的文字

title：鼠标移至到图片上后出现的文字

border：图片的边宽，默认为0，边框的颜色黑色，如果是超链接，则和链接文字颜色一致

vspace：垂直边距，图片在垂直方向上和自己最近的元素的距离

hspace：水平边距，图片在水平方向上和自己最近的元素的距离

width，height：如果没有写width和height属性的话，图片就会按照它的原始尺寸显示，有的话就会按它们值的大小显示

align：图像和“文字”之间的布局

bottom：图片的底部和当前行的文字底部对齐

top：图片的底部和当前行的文字顶端对齐

middle：图片的水平中线和当前行的文字中线对齐

left：图片左对齐

right：图片右对齐

center：图片水平中线和当前行的文字中线对齐（自己试验center和middle的效果一样）

表格

表格是网页排版布局不可缺少的一个工具。建立表格一般所用的标签：<table>、<caption>、<tr>、<th>和<td>。主要操作对象：表格，行，单元格，

表格标签<table> </table>

建立表格的整体性标签，其主要属性如下

width，height：设置表格的宽和高，其值可以为数字，也可以为百分数（表格的长宽是相对浏览器的，会随着浏览器大小的改变而改变），如果其值很大的话，系统会自动按照数据量分配空白位置，如果其值很小的话，系统会以显示完整数据为主，该设置值便自动失效；未指定其属性值，则系统会自动计算表格中字段数据的宽度及高度，以能容纳数据的最小单位显示表格

bgcolor，background：设置表格的背景颜色和背景图片。两个属性都是设置背景的，通常只设计其中之一，如果都设置的话，则会显示背景图片

border，bordercolor：设置表格边框宽度和表格边框颜色。border默认为0，浏览器不显示任何边框（表格四周和单元格），border只能影响表格四周的边框尺寸，并不影响单元格边框的尺寸；bordercolor默认的颜色为黑色，表格边框（四周和单元格）的颜色都改变

align：设置表格水平方向的对齐方式（left，center和right），只能对整个表格在浏览器页面范围内居中对齐，但是表格里单元格的对齐方式并不会因此而改变，如果要改变单元格的对齐方式，就需要在行、列或单元格内另行定义

cellspacing，cellpadding：设置表格内部每个单元格之间的距离；设置单元格边框与单元格里内容之间的距离，默认情况下，单元格里的内容会紧贴着表格的边框

举例(核心代码)：<table width="50%" height="50%" bgcolor="red" background="2.jpg" border="5" bordercolor="red" align="center" cellspacing="20" cellpadding="20">

表格标题标签<caption> </cation>

标题定义包含在表格内，显示在表格的外部，标题会随着表格相应的移动

举例：<caption>这个是表格的标题</cation>

表格行标签<tr> </tr>

操作对象为该行

bgcolor：设置该行的背景颜色

background：设置该行的背景图片

align：行文字的水平对齐方式，left，center，right

valign：行文字的垂直对齐方式，top，bottom，middle

height：设置行的高度

单元格标签<td> </td>

操作对象是表格里的每一个单元格

bgcolor：设置该单元格的背景颜色

background：设置该单元个的背景图片

align：单元格文字的水平对齐方式，left，center，right

valign：单元格文字的垂直对齐方式，top，bottom，middle

width：设置单元格的宽度，实际是设置该列的宽度，且只有第一个单元格的设置有效

height：设置单元格的高度

colspan：控制字段横向的合并数目，其值为合并右边的单元格的个数

rowspan：控制字段纵向的合并数目，其值为合并下面的单元格的个数

标题单元格标签<th> </th>

该标签出现在表格内的第一行，是td标签的特殊情况，是描述表格的字段名称。显示情况为黑体居中

注意

表格，行和单元格中bgcolor和background的优先级：单元格 > 行 > 表格；行和单元格中align和valign的优先级：单元格 > 行；行和单元格的height的优先级：行 > 单元格；通过跨越许多单元格，不需要改变表结构就能将更多的文字存放入单元格。

表单

概述：交互式网页一般都用到了表单，表单就是把那些在<form></form>之间的数据作为一个整体提交给网站服务器处理，一个网页可以有多个独立的表单，提交数据也是各表单各自提交，需要注意表单本身并不可见，且不可以嵌套使用。用户提交的数据的种类很多，所以，表单内有很多其他的标签。

表单标签<form></form>

method属性

用于指定向服务器发送表单数据时所使用的HTTP方法。get：缺省的方法，提交的数据附加到URL(在属性action中指定)的末端，作为URL的一部分发送到服务器端，例：action="a.jsp"，当提交表单后，在浏览器的地址栏中，我们会看到下面的信息：http://localhost:8080/a.jsp?user=zhangsan&pwd=1234；post：提交的数据作为一个数据块发送到服务器端。

action属性

当用户点击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。method属性定义的是向动作属性定义的文件中传递表达中用户数据的方式。

input标签

文字字段text

<input name="控件名称，区别页面中其他控件" type="text" value="文本框的默认取值" size="确定文本框在页面中显示的长度" maxlength="文本框中最多可以输入的字符数" />

注意：加入size属性后，其大小最小为1，最大值将取决于浏览器的宽度

密码域password

<input name="控件名称，区别页面中其他的控件" type="password" value="默认值，以*显示" size="控件在页面中显示的长度，义字符为单位" maxlength="控件最多可以输入的字符数" />

注意：密码域仅仅将控件中的内容以*显示，他不能保证数据传送中的安全

单选按钮radio

<input name="控件名称，相同名称的控件为同一组" type="radio" value="单选按钮的取值，传送的数据值" checked="checked" />

注意：一组单选中只能出现一个checked；传送数据的时候，只传送被选中的数据

复选框checkbox

<input name="复选框名称，区别页面中其他的控件" type="checkbox" value="复选框的取值，要传送的数据值" checked="checked" />

注意：复选框可以拥有自己的名称，并不需要属于哪一个组

普通按钮button

普通按钮一般情况下要配置脚本来进行表单处理，“处理程序”就是脚本编写的函数

<input type="submit" name="按钮名称" value="按钮的取值:显示在按钮上" onclick="处理程序" />

提交按钮submit

提交按钮是一种特殊的按钮，单击该类按钮可以实现表单内容的提交

<input type="submit" name="按钮名称" value="按钮的取值:在按钮上显示" />

重置按钮reset

重置按钮用来清除用户在页面中输入的信息，相当于重新打开该网页时显示的内容

<input type="reset" name="按钮名称" value="按钮的取值：在按钮上显示">

图像域image

可以使用一副图像作为按钮，这样做可以创建任何外观的按钮

<input type="image" name="图像域名称" src="图像路径" />

隐藏域hidden

传送一些对用户不可见的数据，隐藏域包含的那些要提交处理的数据，并不显示在浏览器中

<input type="隐藏域名城" type="hidden" value="隐藏域的取值" />

文件域file

文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传，在上传图像时也常常用到

<input type="file" name="文件域名称" size="控件的长度" maxlength="最长字符数" />

下拉菜单

<select name="下拉菜单名称">

<option value="上海：传送的值，可以为别的" selected="selected">上海</option>

<option value="北京">北京</option>

<option value="深圳">深圳</option>

</select>

列表项

<select name="列表项名称" size="显示的列表数" multiple="multiple">

<option value="黄色：传送的值，可以为别的" selected="selected">黄色</option>

<option value="红色">红色</option>

<option value="蓝色">蓝色</option>

</select>

文本域标记textarea

多行输入文本的时候，需要使用textarea标签

<textarea name="文本域名称" cols="列数" rows="行数"></textarea>

文本域和计算机的内存一样大，文本域的大小不受浏览器窗口的显示。如果文本框超出了浏览器窗口的大小，这时会出现滚动条来帮助用户看到整个文本域

id标记

<id=元素的标示名>

id用来表示页面的惟一元素

[html] view plain copy

print?

<html>

<head><title>Hello World</title></head>

<body>

<form name="form1" method="post" action="">

<table width="500" border="0" align ="center" cellpadding="0" cellspacing="2">

<tr>

<td width="143" height="25">姓名：</td>

<!--单行文本-->

<td width="351"><input type="text" name="name" id="name" size="20"></td>

</tr>

<tr>

<td height="25">年龄：</td>

<td>

<!--下拉菜单-->

<select name="age" id="age">

<option value="5" selected="selected">5</option>

<option value="6">6</option>

<option value="7">7</option>

</select>

</td>

</tr>

<tr>

<td height="25">性别：</td>

<td>

<!--单选框-->

<input name="radiobutton" type="radio" value ="男" checked="checked">

男

<input name="radiobutton" type="radio" value ="女">

女

</td>

</tr>

<tr>

<td height="25">家庭住址：</td>

<!--单行文本-->

<td><input name="textfield" id="1" type="text" size="40"></td>

</tr>

<tr>

<td height="25">联系电话：</td>

<!--单行文本-->

<td><input name="textfield" id="2" type="text" size="15"></td>

</tr>

<tr>

<td height="25">您对我们的玩具是否满意</td>

<!--复选框-->

<td>

<input type="checkbox" name="checkbox" id="3" value="非常满意" checked="checked">

非常满意

<input type="checkbox" name="checkbox" id="4" value="一般">

一般

<input type="checkbox" name="checkbox" id="5" value="非常差">

非常差

</td>

</tr>

<tr>

<td height="25">意见：</td>

<!--多行文本输入-->

<td><textarea name="textarea" cols="40" rows="6"></textarea></td>

</tr>

<tr>

<td height="25" colspan="2" align="center">

<!--提交按钮-->

<input type="submit" name="submit" id="7" value="提交">

<!--重置按钮-->

<input type="reset" name="reset" id="8" value="重置">

</td>

</tr>

</table>

</form>

</body>

</html>

文本与段落标记

<font>标签

属性face：设置字体，且字体必须在浏览器中安装相应的字体后才可以正确浏览。<font face="华文彩云"></font>

属性size：设置字号。从1—7的整数代表字体大小的绝对字号；从-4—+4的整数，相对于3号字号放大和缩小。<font size="5">Hello</font>；<font size="+4">Hello</font>

属性color：设置颜色。<font color="#ff0000">Hello</font>

<b>,<strong>标签

加粗。<b>加粗的文字</b> <string>加粗的文字</string>

<i>,<em>,<cite>标签

斜体。<i>斜体文字</i>；<em>斜体文字</em>；<cite>斜体文字</cite>

<sup>,<sub>标签

上标，superscript,^{上标的内容};下标，subscript,_{下标的内容}

<big>,<small>标签

增大文本字号：<big>大字号内容，在定义的字号大小的基础上增加一级，可以使用多个该标签</big>；缩小文本字号：<small>小字号内容,比普通文字小一级，再加一个标签就会又小一级，依次类推</small>

<u>标签

在文字下方添加下划线。<u>下划线的内容</u>

<p>,<br>,<nobr>标签

划分段落：<p>段内内容</p>,该段和下段会有空行隔开；强制换行：行内容<br>，连续多个标签可实现多次换行；强制不换行：<nobr>不换行的内容</nobr>,网页如果某一行的文本过长，浏览器会自动对这段文字进行换行处理，但是，可以使用<nobr>标签实现禁止自动换行，此行内容过多时，会出现水平滚动条

<hr>标签

插入一条水平分割线

属性width：水平线的宽度：<hr width="宽度">,宽度可以为百分比（相对浏览器，会随着浏览器的大小而改变）

属性size：水平线的高度：<hr size="高度">,高度只能为像素

属性color：水平线的颜色：<hr color="颜色">

属性align：水平线的对齐方式，默认为居中对齐：<hr align="对齐方式">,center,left,right

<h1>……<h6>标签

标题字，headline，<h1>一级标题</h1>，<h6>六级标题</h6>，可使用align属性

<pre>标签

原样显示输入内容，包括输入的某些特殊的字符，<pre>原样输出内容</pre>

插入特殊字符

在html文档中，连续的多个空白字符（空格、制表符、回车、换行等），浏览器显示时将只解析为一个空格字符。想在html文档中插入特殊字符，我们可以用字符引用和实体引用。

字符引用和实体引用都是以一个和号（&）开始并以一个分号（；）结束。如果用的是字符引用，需要在和（&）之后加上一个井号（#），之后是所需字符的十进制代码或十六进制代码（ISO 10646字符集中字符的编码）。如果用的是实体引用，在和号（&）之后写上字符的助记符，助记符如下表：

框架

框架是一个浏览器窗口显示多个html文档的技术，适用的例子：网站导航和文档浏览器等。使用框架技术时，会把浏览器的窗口当成一个框架集，然后，框架集再划分几个框架，每个框架可以打开一个html等文件。

<frameset>标签（框架集）

属性rows

框架集水平分割：<frameset rows="框架窗口的高度，框架窗口的高度，…">，高度可以为数字（像素，rows="300,200"），可以为百分比（相对于浏览器高度的百分比，rows="20%，*"或rows="20%,80%"）,也可以为rows="1*，2*"（比例）。

属性cols

框架集垂直分割：<frameset cols="框架窗口的宽度，框架窗口的高度，…">，其值同上

属性frameborder

控制边框显示还是隐藏，默认为显示，取值只能为：0、no，1、yes四个值<frameset frameborder="no">

属性border，framespcing

设置框架分界处的宽度，framespcing只IE有效

属性bordercolor

设置框架分界线的颜色

嵌套分割窗体的实例

<frameset rows="2*,3*" framespacing="5" bordercolor="red" >

<frame>

<frameset cols="1*,1*" border="5" bordercolor="red">

<frame>

<frame>

</frameset>

</frameset>

<frame>标签（某一框架）

属性src

该框架显示的文件，可以使一个页面，也可以是一张图。<frame src="a.html">

属性name

该框架的名称，用于超链（在该框架内显示一个新页面）。

属性noresize，scrolling

设置浏览器在访问框架的时候能不能改变框架的大小；设置是否显示滚动条。其值为yes（能改变大小，默认值；显示水平和垂直滚动条）、no（不能改变大小；不显示水平及直滚动条）和auto（自适应；自适应，默认值）

属性marginwidth，marginheight

设置框架边框与页面内容的水平和垂直边距

<noframes>标签

<noframes>替换显示内容</noframes>

如果遇到不支持框架结构的浏览器，该浏览器就会显示此标签内的内容，否则不显示

<iframe>标签

浮动框架可以在内容页面中设置。上面说的那些框架，是通过设置一个页面，把其他内容页面加载到里面；浮动框架是设置在一个内容页面里，然后，在内容页面里加载内容文件

属性src

可以使一张图，一个页面，也可以是flash等等，同上

属性width，height

浮动框架的宽度和高度可以完全由自己决定

属性align

框架整体的对齐方式，用于设置浮动框架页面相对于浏览器窗口的水平位置，其值：right，left，center

属性frameborder，scrolling

同上

多媒体

在网页中可以插入文本和图像外，还可以插入动画、声音、视频等媒体元素，如滚动效果、Flash、Applets、ActiveX及Midi声音文件等。

marquee标签

可以移动文字，图片，表格等

<marquee bgcolor="滚动背景颜色" direction="滚动方向" behavior="滚动方式" scrollamount="滚动速度" scrolldelay="滚动延迟" loop="滚动循环" width="背景宽度" height="背景高度" hspace="水平范围" vspace="垂直范围"></marquee>

说明：direction属性取值：up、down、left和right，默认为left；behavior属性取值：scroll(循环滚动，默认效果)；slide(只滚动一次就停止)；alternate(来回交替进行滚动)；scrollamount属性，设置每次滚动时移动的长度，单位为像素；scrolldelay：两次滚动的时间间隔，单位为毫秒；loop属性：滚动循环的次数，默认是不断地循环下去；width和height属性：设置滚动的宽和高，单位为像素；hspace，vspace属性：相当于滚动区域的外边框

embed标签

<embed src="多媒体文件地址：flash，MP3等" width="多媒体的宽度" height="多媒体的高度"></embed>

applet标签

需要额外的插件和安装过程才能起作用

<applet code="Bubbles.class" width="350" height="350">

Java applet that draws animated bubbles.

</applet>

列表

为了让内容看起来更加有条理，也易于阅读，可采用列表

有序列表

依赖顺序来表示重要的程度,列表中的项目有先后顺序，一般采用数字或字母作为序号

<ol>标签

<ol type="序号类型" start="编号的起始值，只能为整数">

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

type的取值：1（数字：1、2、3…）,a（小写英文字母：a、b、c…）,A（大写英文字母：A、B、C…）,i（小写罗马数字：i、ii、iii、v…）,I（大写罗马数字：I、II、III、IV…）；默认（不写）为1

start的取值：只能为整数，表示序号类型从第几个编号开始。

无须列表

无须列表没有序号

<ul>标签

<ul type="序号类型">

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

</ul>

type的取值：Disc（黑色实心圆点），circle（空心圆环），square（正方形）；默认（不写）为Disc

<dir>,<menu>标签

没有type属性,其他的和ul标签一样，只需把ul变成dir或menu就行了

<dl>标签

<dl>

<dt>HTML</dt> <dd>HTML的意思就是……</dd>

<dt>CSS</dt> <dd>CSS的意思就是……</dd>

</dl>

定义列表由两部分组成：定义要解释的名称和定义该名词具体的解释；d为definition，t为term，d为description

总结

对于之上的标签或标签只是写了一些主要的，还有很多没有写。这些标签或属性需要浏览器的支持，如果浏览器不支持，那么就不会出现想要的显示效果。

看了上面的总结，你可能会说多次一举，如果你是初学者的话，建议你还是这样来一遍。

[html] view plain copy

print?

<pre></pre>

<pre></pre>

<pre></pre>