HTML4.0整理总结

一、HTML基础知识

html是什么？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

html 版本介绍

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本，由一群自由思想者设计，最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。

HTML 5不只是 HTML规范的最新版本，它是用于生成现代 Web内容的一系列相关技术的总称，其中最重要的三个技术是：HTML5核心规范(table)、 CSS (class style)和 JavaScript。

二、HTML标签

根据页面结构分类

1.

定义和用法

声明必须是 HTML 文档的第一行，位于 标签之前。 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：

2.根标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

资讯标签

1.

定义和用法

提示和注释

提示：

标准属性

2.指导解析器，类如编码

定义和用法

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

HTML 与 XHTML 之间的差异

在 HTML 中， 标签没有结束标签。
在 XHTML 中， 标签必须被正确地关闭。

必需的属性

属性 值 描述
content some_text 定义与 http-equiv 或 name 属性相关的元信息

可选的属性

属性 值 描述
http-equiv content-type
expires
refresh
set-cookie 把 content 属性关联到 HTTP 头部。
name author
description
keywords
generator
revised
others 把 content 属性关联到一个名称。
scheme some_text 定义用于翻译 content 属性值的格式。

3.引入css样式文件

定义和用法

标签定义文档与外部资源的关系。 标签最常见的用途是链接样式表。

HTML 与 XHTML 之间的差异

在 HTML 中， 标签没有结束标签。
在 XHTML 中， 标签必须被正确地关闭。

提示和注释：

注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数。

属性

new : HTML5 中的新属性。
属性 值 描述
charset char_encoding HTML5 中不支持。
href URL 规定被链接文档的位置。
hreflang language_code 规定被链接文档中文本的语言。
media media_query 规定被链接文档将被显示在什么设备上。
rel alternate
author
help
icon
licence
next
pingback
prefetch
prev
search
sidebar
stylesheet
tag 规定当前文档与被链接文档之间的关系。
rev reversed relationship HTML5 中不支持。
sizes heightxwidth
any 规定被链接资源的尺寸。仅适用于 rel=“icon”。
target _blank
_self
_top
_parent
frame_name HTML5 中不支持。
type MIME_type 规定被链接文档的 MIME 类型。

4.seo搜索优化

定义和用法

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化，比如网站站外推广、网站品牌建设等，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而吸引精准用户进入网站，获得免费流量，产生直接销售或品牌推广。

seo常用代码标签主要有：

1、

2、：用于提供网页信息，出现在HTML文档头部。标签中有三个属性charset、keywords、description。charset表示字符集，也叫编码，是文字和符号的总称；keywords用于设定网页的关键词，便于搜索引擎了解网页的主要内容并将网页显示在对应的搜索结果中；description，描述网站的相关信息。

3、<h#>:用来定义文档标题，#可以用数字1-6替代。数字越小级别越高，在标题的默认外观上，级别越高的标题就越大越醒目，应用在body部分。和标签能很好的突出显示页面重要标题，提升关键词与页面的相关性。或标签在页面中只出现一次；标签SEO作用较小，建议不要乱用；可以用在首页友情链接处，以降低友情链接对页面目标关键词的影响。

4、:用于定义图片，并通过相关属性来对图片进行设置，应用在body部分。标签中alt属性对SEO的作用包括，让百度更好的识别图片信息，从而使图片有收录和排名，而且可以用来调整关键词的密度。

5、：又叫超链接标签，本质上属于网页的一部分，允许同一网站的网页之间，或不同网站的网页之间进行连接的元素。
标签中两个重要属性，分别是target属性和title属性。target属性，定义链接的网页在何处显示，可以是新窗口，也可以是本窗口，target=“_blank”，在新窗口打开，target=“_self”，在本窗口显示。title属性是为链接添加描述性文字，可以提升关键词与页面的相关性，并可调整关键词密度。

展示内容标签

排版标签

1.
换行
2.

---

水平线
3. 注释标签

块标签

1.

块级标签

定义和用法

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记

，那么该标签的作用会变得更加有效。

用法

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过

的 class 或 id 应用额外的样式。 不必为每一个

都加上类或 id，虽然这样做也有一定的好处。 可以对同一个

元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，div 元素的 “align” 属性不被赞成使用。
在 XHTML 1.0 Strict DTD 中，div 元素的 “align” 属性不被支持。

提示和注释：

注释：

是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
提示： 请使用

元素来组合块级元素，这样就可以使用样式对它们进行格式化。

2.

段落标签 （块）

定义和用法

标签定义段落。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，所有 p 元素的呈现属性均不被赞成使用。
在 XHTML 1.0 Strict DTD 中，所有 p 元素的呈现属性均不被支持。

可选的属性

属性 值 描述
align left
right
center
justify 不赞成使用。请使用样式取代它。
规定段落中文本的对齐方式。

文本标签

1.（行）

定义和用法

规定文本的字体、字体尺寸、字体颜色。

可选的属性

属性 值 描述
color rgb(x,x,x)
#xxxxxx
colorname 不赞成使用。请使用样式取代它。
规定文本的颜色。
face font_family 不赞成使用。请使用样式取代它。
规定文本的字体。
size number 不赞成使用。请使用样式取代它。
规定文本的大小。
标准属性
id, class, title, style, dir, lang, xml:lang

2.h1-h6标题（块）

定义和用法

-

标签可定义标题。

定义最大的标题。

定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。 如果您希望了解更多有关 HTML 标签选择和使用的信息，请阅读《Web 品质》。

HTML 与 XHTML 之间的差异
在 HTML 4.01 中，h1 - h6 元素的 “align” 属性不被推荐使用。
在 XHTML 1.0 Strict DTD 中，h1 - h6 元素的 “align” 属性不被支持。

可选的属性

属性 值 描述
align left
center
right
justify 不推荐使用。请使用样式替代它。
规定标题中文本的排列。

3.内联元素 (行)

定义文本

定义和用法

标签被用来组合文档中的行内元素。

列表标签

1.

• -
• 无序列表
  2.
  1. -
  2. 有序列表
     图形标签
     1.
     链接标签
     1.
     W3School

定义和用法

标签定义超链接，用于从一张页面链接到另一张页面。
元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
提示：您可能已经注意到了，W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式。

提示和注释

提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
提示：请使用 CSS 来设置链接的样式。

HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中， 标签可以是超链接或锚。在 HTML5 中， 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。
HTML5 提供了一些新属性，同时不再支持一些 HTML 4.01 属性。

属性

New : HTML5 中的新属性。
属性 值 描述
charset char_encoding HTML5 中不支持。规定被链接文档的字符集。
coords coordinates HTML5 中不支持。规定链接的坐标。
download filename 规定被下载的超链接目标。
href URL 规定链接指向的页面的 URL。
hreflang language_code 规定被链接文档的语言。
media media_query 规定被链接文档是为何种媒介/设备优化的。
name section_name HTML5 中不支持。规定锚的名称。
rel text 规定当前文档与被链接文档之间的关系。
rev text HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape default
rect
circle
poly HTML5 中不支持。规定链接的形状。
target _blank
_parent
_self
_top
framename 规定在何处打开链接文档。
type MIME type 规定被链接文档的的 MIME 类型。
表格标签
1.

--

&&

Month	Savings
January	$100

定义和用法

标签定义 HTML 表格。 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异
在 HTML 4.01 中，table 元素的 “align” 和 “bgcolor” 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD，table 元素的 “align” 和 “bgcolor” 属性是不被支持的。

可选的属性

属性 值 描述
align left
center
right 不赞成使用。请使用样式代替。
规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x)
#xxxxxx
colorname 不赞成使用。请使用样式代替。
规定表格的背景颜色。
border pixels 规定表格边框的宽度。
cellpadding pixels
% 规定单元边沿与其内容之间的空白。
cellspacing pixels
% 规定单元格之间的空白。
frame void
above
below
hsides
lhs
rhs
vsides
box
border 规定外侧边框的哪个部分是可见的。
rules none
groups
rows
cols
all 规定内侧边框的哪个部分是可见的。
summary text 规定表格的摘要。
width %
pixels 规定表格的宽度。

定义和用法 标签定义 HTML 表格中的行。 tr 元素包含一个或多个 th 或 td 元素。

可选的属性

属性 值 描述
align right
left
center
justify
char 定义表格行的内容对齐方式。
bgcolor rgb(x,x,x)
#xxxxxx
colorname 不赞成使用。请使用样式取而代之。
规定表格行的背景颜色。
char character 规定根据哪个字符来进行文本对齐。
charoff number 规定第一个对齐字符的偏移量。
valign top
middle
bottom
baseline 规定表格行中内容的垂直对齐方式。

th 定义和用法

定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：
表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

可选的属性

属性 值 描述
abbr text 规定单元格中内容的缩写版本。
align left
right
center
justify
char 规定单元格内容的水平对齐方式。
axis category_name 对单元格进行分类。
bgcolor rgb(x,x,x)
#xxxxxx
colorname 不推荐使用。请使用样式替代它。
规定表格单元格的背景颜色。
char character 规定根据哪个字符来进行内容的对齐。
charoff number 规定对齐字符的偏移量。
colspan number 设置单元格可横跨的列数。
headers idrefs 由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。
height pixels
% 不推荐使用。请使用样式替代它。
规定表格单元格的高度。
nowrap nowrap 不推荐使用。请使用样式取而代之。
规定单元格中的内容是否折行。
rowspan number 规定单元格可横跨的行数。
scope col
colgroup
row
rowgroup 定义将表头数据与单元数据相关联的方法。
valign top
middle
bottom
baseline 规定单元格内容的垂直排列方式。
width pixels
% 不推荐使用。请使用样式取而代之。
规定表格单元格的宽度。

1. 表单标签(用户填写)

First name:

Last name:

定义和用法

标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。 提示和注释 注释：form 元素是块级元素，其前后会产生折行。

属性

new : HTML5 中的新属性。
属性 值 描述
accept MIME_type HTML 5 中不支持。
accept-charset charset_list 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocomplete on
off 规定是否启用表单的自动完成功能。
enctype 见说明 规定在发送表单数据之前如何对其进行编码。
method get
post 规定用于发送 form-data 的 HTTP 方法。
name form_name 规定表单的名称。
novalidate novalidate 如果使用该属性，则提交表单时不进行验证。
rel external
help
license
next
nofollow
noopener
noreferrer
opener
prev
search 规定链接资源和当前文档之间的关系。
target _blank
_self
_parent
_top
framename 规定在何处打开 action URL。
说明
enctype 属性可能的值：
application/x-www-form-urlencoded
multipart/form-data
text/plain

2.

First name: Last name: ##### 定义和用法 标签用于搜集用户信息。 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 HTML 与 XHTML 之间的差异 在 HTML 中， 标签没有结束标签。 在 XHTML 中， 标签必须被正确地关闭。

属性

new : HTML5 中的新属性。
属性 值 描述
accept mime_type 规定通过文件上传来提交的文件的类型。
align left
right
top
middle
bottom 不赞成使用。规定图像输入的对齐方式。
alt text 定义图像输入的替代文本。
autocomplete on
off 规定是否使用输入字段的自动完成功能。
autofocus autofocus 规定输入字段在页面加载时是否获得焦点。
（不适用于 type=“hidden”）
checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
form formname 规定输入字段所属的一个或多个表单。
formaction URL 覆盖表单的 action 属性。
（适用于 type=“submit” 和 type=“image”）
formenctype 见注释 覆盖表单的 enctype 属性。
（适用于 type=“submit” 和 type=“image”）
formmethod get
post 覆盖表单的 method 属性。
（适用于 type=“submit” 和 type=“image”）
formnovalidate formnovalidate 覆盖表单的 novalidate 属性。
如果使用该属性，则提交表单时不进行验证。
formtarget _blank
_self
_parent
_top
framename 覆盖表单的 target 属性。
（适用于 type=“submit” 和 type=“image”）
height pixels
% 定义 input 字段的高度。（适用于 type=“image”）
list datalist-id 引用包含输入字段的预定义选项的 datalist 。
max number
date 规定输入字段的最大值。
请与 “min” 属性配合使用，来创建合法值的范围。
maxlength number 规定输入字段中的字符的最大长度。
min number
date 规定输入字段的最小值。
请与 “max” 属性配合使用，来创建合法值的范围。
multiple multiple 如果使用该属性，则允许一个以上的值。
name field_name 定义 input 元素的名称。
pattern regexp_pattern 规定输入字段的值的模式或格式。
例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
placeholder text 规定帮助用户填写输入字段的提示。
readonly readonly 规定输入字段为只读。
required required 指示输入字段的值是必需的。
size number_of_char 定义输入字段的宽度。
src URL 定义以提交按钮形式显示的图像的 URL。
step number 规定输入字的的合法数字间隔。
type button
checkbox
file
hidden
image
password
radio
reset
submit
text 规定 input 元素的类型。
value value 规定 input 元素的值。
width pixels
% 定义 input 字段的宽度。（适用于 type=“image”）

3.

定义和用法

标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。
提示：可以通过 标签的 wrap 属性设置文本输入区内的换行模式。有关 wrap 属性的详细信息。

属性

New: HTML5 中的新属性。
属性 值 描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
cols number 规定文本区内的可见宽度。
disabled disabled 规定禁用该文本区。
form form_id 规定文本区域所属的一个或多个表单。
maxlength number 规定文本区域的最大字符数。
name name_of_textarea 规定文本区的名称。
placeholder text 规定描述文本区域预期值的简短提示。
readonly readonly 规定文本区为只读。
required required 规定文本区域是必填的。
rows number 规定文本区内的可见行数。
wrap hard
soft 规定当在表单中提交时，文本区域中的文本如何换行。。

4.搜索下拉列表

框架标签
1.

定义和用法

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

提示和注释：

注释：如果您希望验证某个包含框架的页面，请确保 DTD 被设置为 “Frameset DTD”。阅读更多有关 XHTML 验证的内容。
重要事项：您不能与 标签一起使用 标签。不过，如果您需要为不支持框架的浏览器添加一个 标签，请务必将此标签放置在 标签中

可选的属性

属性 值 描述
cols pixels
%

• 定义框架集中列的数目和尺寸。有关 cols 属性的详细信息
  。
  rows pixels
  %
• 定义框架集中行的数目和尺寸。有关 rows 属性的详细信息。

2.

定义和用法

标签定义 frameset 中的一个特定的窗口（框架）。 frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。

HTML 与 XHTML 之间的差异
在 HTML 中， 标签没有结束标签。
在 XHTML 中， 标签必须被正确地关闭。

提示和注释：

注释：如果您希望验证包含框架的页面，请确保 doctype 被设置为 “Frameset DTD”。阅读更多有关 DOCTYPE 的内容。
重要事项：您不能与 标签一起使用 标签。不过，如果您需要为不支持框架的浏览器添加一个 标签，请务必将此标签放置在 标签中！

可选的属性

属性 值 描述
frameborder 0
1 规定是否显示框架周围的边框。
longdesc URL 规定一个包含有关框架内容的长描述的页面。
marginheight pixels 定义框架的上方和下方的边距。
marginwidth pixels 定义框架的左侧和右侧的边距。
name name 规定框架的名称。
noresize noresize 规定无法调整框架的大小。
scrolling yes
no
auto 规定是否在框架中显示滚动条。
src URL 规定在框架中显示的文档的 URL。

其他标签

特殊字符

1. 空格
2.&gt； >
3.< <
4.© 版本号
5.® 商标注册