HTML总结

来源：互联网发布：淘宝店铺的级别编辑：程序博客网时间：2024/04/30 00:26

默认情况下，网页内容与浏览器边框之间是有距离的。因为有些html元素有默认的值。

逻辑思维 == 推理；

1、In Action

（1）网页制作工具：DW

（2）

2、TIPS

（1）HTML中，如属性值本身包含引号，此时可使用单引号来包含属性值。

如：name='"Tom"'

（2）HTML实体

作用：有些字符在html中有特殊含义，如<，不能在文本中使用。此时要想让浏览器显示此字符，必须在html代码中用字符实体来表示。

HTML使用 表示一个空格字符（英文的空格字符），1个中文字符占两个英文字符的宽度。

（3）<base>标签

使用<base href="http://xxx/"></base>，这个标签需写在head中。表示页面中所有相对路径的基准路径是http://xxx/。

（4）行元素和块元素

元素由开始标签、属性、内容、结束标签组成。

块元素：此元素中的内容对于其前后元素的内容都另起一行；如p元素。

行元素：此元素中内容对于其前后元素的内容都在同一行中；如a元素。

块状元素是矩形的，有高度和宽度。

内联元素没有固定形状，无法设置宽度和高度。内联元素形状由其包含的内容决定。

块元素包括：

标题类块元素：h1——h6；

段落块元素：p、pre、div；

列表元素：ul、ol、li。

ul：所包含的列表项以粗点的方式显示；

ol：所包含的列表项以顺序数字的方式显示；

li：li被包括在ul或ol元素中；

标签名称、属性名以及属性值的大小写都是不敏感的。

浏览器将标签内的所有空格或换行符都只看做一个空格。但是pre元素中的文字内容将保留空格和换行符。

HTML文档中，每个元素都可以有一个标识，且此标识名（id的属性值）在整个HTML文档中必须唯一。

当使用百分数作为单位时，其值为相对于上一级元素的百分数；

若table元素没有设置width属性，则表格宽度为每一列宽度的总和；

行元素包括：

img：

span：

a：网页中的链接主要分为网页或图片的链接、电子邮件的链接和网页中的书签链接。如：<a href="mailto:电子邮件地址"></a>、<a href="#id名称"></a>；

br：

strong：

em：

sub：

b：

i：

object元素：用于在网页中嵌入除图片以外的多媒体，如音频、视频、flash等。并不是所有的浏览器都支持它。

classid属性：应用程序在windows系统中的唯一id。

form元素可以包含下列元素：

表单控件元素：input、select、textarea；checked属性值为true或false；

label元素（表单控件名称）：作用是当用户单击label的内容时，光标会落到for属性所表示的元素上。如：<label>元素可作用于checkbox控件，当点击label的文本时会导致ckeckbox控件处于选中状态。

fieldset元素（表单控件组），用于分组表单控件，其中必须包含legend（表单控件组标题）元素。

（5）meta（描述网页信息）元素

meta元素嵌套在head元素中用于描述网页信息。这些信息被搜索引擎用于检索网页。

meta标签属性分两种：页面描述信息name和http标题信息http-equiv。

name属性的取值有keywords、description、author、generator、robots，其中robots用于限制部分内容不被搜索引擎检索到。搜索引擎会沿着网页上的链接如http和src链接，不断检索资料建立自己的数据库。name属性主要用于对搜索引擎的优化。

http-equiv属性的取值有content-type、refresh、expires、cache-control、set-cookie。其中expires用于设置页面到期时间，一旦网页过期，必须到服务器上重新调用网页。cache-control用于禁止浏览器调用缓存中的网页。为了加快浏览速度，一般都会在浏览者的硬盘上保存一个网页的文件作为临时版本。用户再次打开同一个网页时，浏览器会直接调用硬盘上的这个版本的网页，而不是服务器上的版本。

http-equiv属性的值为page-enter，表示进入该页面时启用特效，http-equiv属性的值为page-exit，表示退出该页面时启用特效。

网页图标的设置：

（6）DOCTYPE（文档类型的定义）

是对XHTML文档的类型说明，必须写在XHTML文档的开始处。若使用Transitional的文档类型，XHTML文档可以和HTML相兼容。

XHTML强调标签的语义，即选择合适的标签用于合适的场合。在XHTML中，属性必须使用小写，且属性的值必须使用双引号括起。

在定义HTML，使用了：

<!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”> 则所有的Box模型都将使用W3C标准，不管是在IE中还是其他浏览器中。

（7）a元素中的target属性：指定打开新窗口的方式，即定义在什么地方打开链接地址。

取值有_self（自我覆盖，表示链接页面覆盖原来的页面）、_blank（创建新窗口打开新页面）、_top（在浏览器的整个窗口打开，将会忽略所有的框架结构）、_parent（在上一级窗口打开）。

_top和_parent适合链接位于框架页面的frame中。_top表示所链接页面覆盖整个浏览器窗口。_parent表示只覆盖frame所属的框架页面。

若框架页面的帧链接的页面不是框架页面，这种情况下，_top和_parent的效果是一样的。

target属性值可以是frame的name值，表示所链接网页显示在该frame中。如：

<html>

</frameset>

</html>

在frame_link.html页面中：

<html>

<body>

<a href="frame_a.html" target="showframe">Frame A</a>

<a href="frame_b.html" target="showframe">Frame B</a>

</body>

</html>

（8）网页布局排版

（9）表格

一个标准的数据表格应包括标题、表头组、表身组和表尾组。即：

<table>

<thead>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

<table>代表一个表格；<tr>代表一行；<td>代表一个单元格，单元格用来填充数据的；

表尾组只是放一些注释，平常很少用。表尾组显示时位于整个表格的最后一行，但在编写代码时表尾组写在表头组和表身组之间。

表格需要自动适应大小时，使用百分比作为宽度和高度的单位。此时表格的宽度随着浏览器的宽度而改变。

行高度设置的优先性高于表格，低于单元格。表格的高度设置不能约束行的高度。表格的高度设置只能确定表格的最小高度。

单元格的colspan属性：用于水平合并单元格；

单元格的rowspan属性：用于垂直合并单元格；

（10）表单

表单只是一种数据提交的方法。默认是get方法提交。

enctype属性：指定表单数据编码类型。默认为application/x-www-form-urlencoded标准编码。

<textarea>标签有wrap属性：用于设置换行方式。wrap="physical"可以设置自动换行。

<select>标签若加上multiple属性，下拉列表即呈现为列表框控件。其size属性值设置所显示数据项的数量。

<input>标签，type属性：text（文本框）、password（密码框）、radio（单选框）、checkbox（复选框）、submit（提交按钮）、button（按钮）、

<img src="" height="" width="" alt="">图像标签，alt为图像的交互文本，将鼠标放在此图像上将显示对应的值。

文件域控件：<input type="file"/>；

图像域控件：<input type="image"src="" />；单击图片类似于单击提交按钮。

（11）网页的框架页面

框架页面：一个窗口中能浏览多个页面；一般一个窗口只能显示一个页面。

框架页面用于向浏览器窗口中装载多个HTML网页文件，每个frame里的网页相互独立。若网站的每个网页某部分是不变的，就很适合使用框架页面。

框架页面结构：

框架页面上有多个frame，每个HTML文件占据一个frame，而多个frame可以同时显示在同一个浏览器窗口中，它们组成了一个最大的frame，即一个包含多个HTML文档的HTML文件（称为框架集页面）。frame通常的使用方法是在一个frame中导航链接，然后将需要变化的内容HTML文件显示在另一个frame中。

如：

</frameset>

cols="120,*"表示frame占据的像素数量。若数值以百分比形式出现，表示frame占据所属<frameset>结构的百分比。

<frame/>的noresize属性表示禁止浏览者调整frame的比例。

使用<noframes>，其中的文字显示于不支持框架的浏览器。这种情况很少。

设置frame滚动条：

frame的scrolling属性给frame加上滚动条。scrolling值为auto，当页面内容无法完全显示于frame时，将自动出现滚动条。

<frameset>可以嵌套。

相对于frameset结构的框架集页面，iframe框架更灵活。可以嵌入到HTML页面中，作为一个普通的HTML元素存在。iframe框架有scrolling属性，使iframe框架产生滚动条。

iframe 中的静态 html 文件会被浏览器缓存，导致这个 html 文件的内容发生变化以后，iframe 中的内容不随 iframe 所在页面的刷新而刷新，仍旧显示客户端计算机中缓存的旧的html 文件的内容。在这个 html 的 head 中加上 meta 标签，不允许浏览器缓存页面，但是经过测试发现有时候不起作用。

比较好的解决办法是，把 iframe 的 src 属性写成 xxx.html?s=random ，random是一个随机数字，这样的话每次请求都不同，浏览器也会认为请求的不是同一个页面，从而达到预期的效果。

（12）XHTML中标签默认为两种元素：块状元素（块元素）和内联元素（行元素）。

块状元素是矩形的，有高度和宽度。

内联元素没有固定形状，无法设置宽度和高度。内联元素形状由其包含的内容决定。

（13）

（14）

3、PS

（1）TCP/IP协议使用C/S模式进行通信。当前Internet上的数据都是通过TCP/IP在网络上进行控制、转发的。要连上Internet，操作系统必须安装TCP/IP协议。

TCP/IP协议让不同结构的主机、不同操作系统的主机通过网络连接。

（2）静态网页有利于搜索引擎的收录，有利于网站的推广。

网站包含网页以及网页相关的资源，如图片、动画、音乐等。一般情况下，一个域名对应一个网站。

（3）IIS

IIS是一种web服务，主要包括www服务器、FTP服务器等。安装了IIS后，可以配置为网页服务器、文件传输服务器和邮件服务器。

（4）网页中的图片、动画等资源是通过网页文件的HTML代码链接的，与网页文件分开存储。

网页文件只是通过<img/>代码和图片链接。默认情况下，<img/>显示的图片高和宽取图片原始的高和宽。

alt属性：当src属性的路径找不到图片时，用alt属性的值来替代图片。

图片热区链接：

除了对整个图片设置超级链接外，还可将图片划分为多个区域，每个区域可设置不同的超级链接，这些区域叫做“热区”。包含热区的图像称为映射图片。

（5）相对路径

相对路径参照物分为相对整个网站的根目录和相对文档。

一般情况下使用相对文档路径；

（6）忽略浏览器对HTML的解析

使用<xmp></xmp>，其包含的内容中的标签失效。

（7）制作滚动文字

使用<marquee></marquess>。

（8）IE对png格式图片支持不是很好。jpeg是有损压缩，以24位颜色存储。gif最多只能存储256种颜色。

（9）将多媒体元素（音频、视频和动画）加入到网页

（10）