HTML文档的编写方法手工直接编写记事本等，存成.htm或html格式使用可视化HTML编辑器Frontpage、Dreamweaver等由Web服务器（或称HTTP服务器）一方实时动态地生成<html><head><title>myfirstpage</title)</head><body>欢迎学习HTML语言！</body></html>一、HTML基本标记1头部标记<head><head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。包含当前文档的相关信息例如，标题<title>、元信息<meta>等2标题标记<title>语法：<title>......</title><title>元素定义HTML文档的标题。一般用来说明页面的内容、用途等。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。3元信息标记<meta>说明：<META>标记是用来指定HTML文件的相关信息，如作者、搜索引擎关键字、版权声明、浏览器、编辑器、有效日期等。它不显示在页面中，不需要设置结束标记。可以有多个meta元素。HTML元素可以有自已的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的<>内，并且和元素名之间有一个空格分隔；属性值用“”引起来。举例<meta>元素下面可以插入很多很有用的元素属性。下面介绍四种：(1)设置页面关键字向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类，提高被搜索到的几率。<metaname=“keywords”content=“招聘求职">(2)设置作者信息<meta name=“author”content=“张三">用来标记文档的作者。(3)设置网页文字及语言使浏览器正确选择语言<metahttp-equiv=“Content-Type”content=“text/html;charset=gb_2312"><meta http-equiv=“Content-Language"content=“zh_CN”>英文为IS0-8859-1韩文为euc-kr用来标记你的页面的解码方式
HTML 文档的编写方法 手工直接编写 记事本等，存成 .htm 或 .html 格式 使用可视化 HTML 编 辑 器 Frontpage、Dreamweaver 等 由 Web 服务器（ 或称 HTTP 服务器） 一方实时动态地生成 <html> <head> <title>my first page</title> </head> <body> 欢迎学习 HTML 语言! </body> </html> 一、HTML 基本标记 1 头部标记 <head> <head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其 间的元素有特殊重要的意义。 包含当前文档的相关信息 例如，标题<title>、元信息<meta>等 2 标题标记<title> 语法：<title>.</title> <title>元素定义 HTML 文档的标题。一般用来说明页面的内容、用途等。 <title>与</title>之间的内容将显示在浏览器窗口的标题栏。 3 元信息标记<meta> 说明：<META>标记是用来指定 HTML 文件的相关信息，如作者、搜索引擎关键字、版权声明、浏览器、编 辑器、有效日期等。它不显示在页面中，不需要设置结束标记。可以有多个 meta 元素。 HTML 元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素 的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。 举例 <meta>元素下面可以插入很多很有用的元素属性。 下面介绍四种： (1)设置页面关键字 向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类，提高被搜索到的几率。 <meta name=“keywords” content=“招聘 求职"> (2)设置作者信息 <meta name=“author” content=“张三"> 用来标记文档的作者。 (3)设置网页文字及语言 使浏览器正确选择语言 <meta http-equiv=“Content-Type” content=“text/html; charset=gb_2312”> <meta http-equiv=“Content-Language” content=“zh_CN”> 英文为 ISO-8859-1 韩文为 euc-kr 用来标记你的页面的解码方式
(4)设置网页的定时跳转有时候我们会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动跳转到其它页面中，即页面的跳转。<metahttp-equiv=“refresh”content=“跳转时间；URL=链接地址”>用来自动刷新网页4页面的主体标记<body><body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素，包括页面的背景设置、文字属性设置、链接设置、边距设置等，这些元素和元素属性构成HTML文档的主体部分。下面介绍这些页面主体标记的5个基本属性。(1)页面背景色bgcolorbgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#??????"。<BODYbgcolor="#ccffcc">改变HTML文件的背景颜色</BODY>HTML对颜色的控制也有自已的语法。HTML使用16进制的RGB颜色值对颜色进行控制。16进制的数码有：0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.(2）背景图片backgroundbackground属性标志HTML文档的背景图片。恰当的图片背景可以使页面看上去更加生动美观background=“图片链接地址”。举例：bgproperties=fixedbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。(3)设置文字颜色texttext属性标志HTML文档的正文文字颜色。如：text=“#??????”。Text元素定义的颜色将应用于整篇文档。(4)超级链接颜色超链接中以文字链接最多，默认情况下以蓝色作为超链接文字的颜色，访问过的链接文字则变为暗红色。在创作网页时可以通过link参数修改链接文字的颜色、vlink修改访问过的链接文字的颜色、alink修改正在访问的链接的文字的颜色（5）设置边距marginleftmargin和topmargin设置网页主体内容距离网页顶端和左端的距离，默认情况下以像素为单位。如：leftmargin=“20”topmargin=”30"<B0DYleftmargin=100topmargin=100>HTML文档可以插入注释。注释内容不会在浏览器窗口显示。适当的注释可以帮助用户更好的了解网页中各个模块的划分，也有助于以后对代码的检查与维护，是一种很好的编程习惯。释的格注式为HTML:内容-<!-注释>《!—多行注释内容->HTML文字与段落标记1标题文字标记h
(4)设置网页的定时跳转 有时候我们会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动跳转到其它页面中，即页面 的跳转。 <meta http-equiv=“refresh” content=“跳转时间;URL=链接地址”> 用来自动刷新网页 4 页面的主体标记<body> <body>元素表明是 HTML 文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素，包括页面 的背景设置、文字属性设置、链接设置、边距设置等，这些元素和元素属性构成 HTML 文档的主体部分。 下面介绍这些页面主体标记的 5 个基本属性。 (1)页面背景色 bgcolor bgcolor 属性标志 HTML 文档的背景颜色。 如：bgcolor=“#??????"。 <BODY bgcolor="#ccffcc"> 改变 HTML 文件的背景颜色 </BODY> HTML 对颜色的控制也有自己的语法。HTML 使用 16 进制的 RGB 颜色值对颜色进行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. (2) 背景图片 background background 属性标志 HTML 文档的背景图片。恰当的图片背景可以使页面看上去更加生动美观 background=“图片链接地址"。 举例： bgproperties=fixed bgproperties=fixed 使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。 (3)设置文字颜色 text text 属性标志 HTML 文档的正文文字颜色。 如：text=“#??????”。 Text 元素定义的颜色将应用于整篇文档。 (4)超级链接颜色 超链接中以文字链接最多，默认情况下以蓝色作为超链接文字的颜色，访问过的链接文字则变为暗红色。 在创作网页时可以通过 link 参数修改链接文字的颜色、vlink 修改访问过的链接文字的颜色、alink 修改 正在访问的链接的文字的颜色 (5) 设置边距 margin leftmargin 和 topmargin 设置网页主体内容距离网页顶端和左端的距离,默认情况下以像素为单位。 如：leftmargin=“20” topmargin=”30” <BODY leftmargin=100 topmargin=100> HTML 文档可以插入注释。注释内容不会在浏览器窗口显示。 适当的注释可以帮助用户更好的了解网页中各个模块的划分，也有助于以后对代码的检查与维护，是一种 很好的编程习惯。 HTML 注释的格式为： <!- 注释内容 - > <!-多行注释内容 - > HTML 文字与段落标记 1 标题文字标记 h
标题文字共含6种标记，表示6各级别的标题，从1到6依次减小。语法：<h#>..《/h#>#=1，2,3,4,5,6默认情况下左对齐Align=对齐方式含义属性值左对齐Left居中对齐Center右对齐right2文字格式标记font文字属性标记(1)文字颜色（回顾body的bgcolor,text）指定颜色<fontcolor=#》...</font>#=RRGGBB16进制数码(2)文字字体"<fontface=#,#,#></font>...3#=客户端可获得的（浏览器支持的）字体默认情况下使用第一个，如果不存在，使用第二个代替，类推。(3)文字大小<font size=#>...</font>#=1，2,3,4,5,6，7默认文字大小是3<strong>粗体的文字</strong><b>粗体的文字</b>《em>斜体的文字</em>《i>斜体的文字</i><cite>斜体的文字</cite>《u>带下划线的文字</u><sup>上标</sup>《sub>下标</sub><s>删除线</s>等宽文字标记常用于英文效果《code>文字</code>《samp>》文字</samp》浏览器将句子中的所以半角空白仅当作一个看待。若要保留空白效果需要用全角空格，或者通过空格码来代替。空格 Word 中.....（1）行的控制HTML想换行的话，要用到一个元素，即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。换行<br>不换行<nobr>(2）段落标记段(Paragraph）（可以看作是空行）<p>居中---《center>元素
标题文字共含 6 种标记，表示 6 各级别的标题，从 1 到 6 依次减小。 语法： <h#> . </h#> #=1, 2, 3, 4, 5, 6 默认情况下左对齐 Align=对齐方式 属性值 含义 Left 左对齐 Center 居中对齐 right 右对齐 2 文字格式标记 font 文字属性标记 (1)文字颜色 （回顾 body 的 bgcolor,text） 指定颜色 <font color=#> . </font> #=RRGGBB 16 进制数码 (2)文字字体 <font face= “ #, #, ., # ” > . </font> #=客户端可获得的（浏览器支持的）字体 默认情况下使用第一个，如果不存在，使用第二个代替，类推。 (3)文字大小 <font size=#> . </font> #=1, 2, 3, 4, 5, 6, 7 默认文字大小是 3 <strong>粗体的文字</strong> <b>粗体的文字</b> <em>斜体的文字</em> <i>斜体的文字</i> <cite>斜体的文字</cite> <u>带下划线的文字</u> <sup>上标</sup> <sub>下标</sub> <s>删除线</s> 等宽文字标记常用于英文效果 <code>文字</code> <samp>文字</samp> 浏览器将句子中的所以半角空白仅当作一个看待。若要保留空白效果需要用全角空格，或者通过空格码来 代替。 空格   Word 中. (1) 行的控制 HTML 想换行的话，要用到一个元素，即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览 器的自动换行的效果类似。<br>元素不是成对出现的。 换行<br> 不换行<nobr> (2) 段落标记 段(Paragraph) (可以看作是空行) <p> 居中- <center>元素
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似。例如：<center>居中段落</center>保留原始排版方式标记一pre<pre>.....</pre)保留原始排版方式标记--blockquote<blockquote>文字</blockquote>4水平线标记hr语法：<hr>使用<hr>添加一条默认样式的水平线<hrsize=#>：设定线宽<hr width=#>：设定线长<hralign=#>：设定对齐方式#=left，right<hr color=#>：设定线的颜色<hrnoshade>：去掉水平线阴影5其他标记文字标注标记—-ruby<ruby>被说明的文字<rt>文字的标注</rt></ruby>声明变量标记--var<var>文字</var>忽视HTML标签标记-一-plaintext、xmp<plaintext>或<xmp>列表1无序列表(UnorderedLists)无序列表的特征在于提供一种不编号的列表方式。无序列表是由<ul>和<li>元素定义的：<ul><li>第一项<li>第二项<li>第三项......</ul>例1：无序列表元素列表的默认符号是圆点无序<ul>元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有:<ul type=?>?=disc（圆）、circle（空心圆圈）、square（方块）
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的 align=“center” 类似。 例如：<center>居中段落</center> 保留原始排版方式标记——pre <pre>.</pre> 保留原始排版方式标记——blockquote <blockquote>文字 </blockquote> 4 水平线标记 hr 语法：<hr> 使用<hr>添加一条默认样式的水平线 <hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色 <hr noshade> ：去掉水平线阴影 5 其他标记 文字标注标记——ruby <ruby> 被说明的文字 <rt> 文字的标注 </rt> </ruby> 声明变量标记——var <var>文字</var> 忽视 HTML 标签标记——plaintext、xmp < plaintext >或< xmp > 列表 1 无序列表(Unordered Lists) 无序列表的特征在于提供一种不编号的列表方式。 无序列表是由<ul>和<li>元素定义的: <ul> <li> 第一项 <li> 第二项 <li> 第三项 . </ul> 例 1： 无序列表元素 无 序 列 表 的 默 认 符 号 是 圆 点 。 <ul>元素有 type 属性，通过定义不同的 type 属性可以改变列表的项目符号。目前，type 属性的属性值 有 ： <ul type=?> ?=disc(圆)、circle（空心圆圈）、square（方块）
例2：例3：2有序列表（OrderedLists）有序列表元素用数字或字母作为顺序号。有序列表由<o1>定义：<o1><li>sports</li><li> drink</li><li>friends</li></o1>例4:有序列表元素<ol>也有自已的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、c作为列表的编......例5：<o1>元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义<o1>元素的start属性例6:3定义列表标记(DefinitionLists)主要用于名词解释，第一层是需要解释的词，第二层是具体的解释。<d1><dt>》名词1<dd>解释1<dt>名词2<dd>解释2<dt>名词3<dd>解释3</d1>例7:4菜单列表标记(menu)主要用于设计单列的菜单列表。在浏览器中的显示和无序列表示相同的。<menu><li>第一项<li>第二项<li>第三项.....</menu>例8:5目录列表（dir)主要用于创建多列的目录列表。在浏览器中的显示和无序列表示相同的。<dir><li>第一项<li>第二项<li>第三项.....</dir>例9:6列表的高级应用列表的简化<dlcompact></d1>
例 2： 例 3： 2 有序列表(Ordered Lists) 有序列表元素 用数字或字母作为顺序号。 有序列表由<ol>定义: <ol> <li> sports</li> <li> drink</li> <li> friends</li> </ol> 例 4： 有序列表元素<ol>也有自己的 type 属性，type 属性的属性值有 1、A、a、I、i 等。例如，我们以 A、B、 C . . 作 为 列 表 的 编 号 例 5： <ol>元素还可以定义列表的起始编号，如我们希望列表的第一个编号为 5，而不是 1，则需要定义<ol>元 素的 start 属性 例 6： 3 定义列表标记(Definition Lists) 主要用于名词解释，第一层是需要解释的词，第二层是具体的解释。 <dl> <dt> 名词 1 <dd>解释 1 <dt> 名词 2 <dd>解释 2 <dt> 名词 3 <dd>解释 3 </dl> 例 7： 4 菜单列表标记(menu) 主要用于设计单列的菜单列表。在浏览器中的显示和无序列表示相同的。 <menu> <li> 第一项 <li> 第二项 <li> 第三项 . </menu> 例 8： 5 目录列表 (dir) 主要用于创建多列的目录列表。在浏览器中的显示和无序列表示相同的。 <dir> <li> 第一项 <li> 第二项 <li> 第三项 . </dir> 例 9： 6 列表的高级应用 列表的简化 <dl compact> </dl>