《html初级教程》由会员分享，可在线阅读，更多相关《html初级教程（13页珍藏版）》请在金锄头文库上搜索。
1、HTML 基础教程基础教程1 HTML 标准属性核心属性核心属性 (Core(Core Attributes)Attributes)以下标签不提供下面的属性：base、head、html、meta、param、script、style 以及 title 元素。属性属性值值描述描述classclassname规定元素的类名（classname）idid规定元素的唯一 idstylestyle_definition规定元素的行内样式（inline style）titletext规定元素的额外信息（可在工具提示中显示）语言属性语言属性 (Language(Language Attributes)At
2、tributes)以下标签不提供下面的属性：base、br、frame、frameset、hr、iframe、param 以及 script 元素。属性属性值值描述描述dirltr | rtl设置元素中内容的文本方向。langlanguage_code设置元素中内容的语言代码。语言代码参考xml:langlanguage_code设置 XHTML 文档中元素内容的语言代码。语言代码参考键盘属性键盘属性 (Keyboard(Keyboard Attributes)Attributes)属性属性值值描述描述accesskeycharacter设置访问元素的键盘快捷键。tabindex number
3、设置元素的 Tab 键控制次序。表单控件(Form Contros) 说明 input type=“text“ 单行文本输入框 input type=“submit“ 将表单(Form)里的信息提交给表单里 action 所指向的文件 input type=“checkbox“ 复选框 input type=“radio“ 单选框 select 下拉框 textArea 多行文本输入框 input type=“password“ 密码输入框(输入的文字用*表示)单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：表单控件(Form Control)：复选框(input typ
4、e=“checkbox“)复选框允许用户在一组选项里，选择多个。示例代码：苹果桔子芒果用 checked 表示缺省已选的选项。桔子表单控件(Form Control)：下拉框(select)下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：苹果桔子芒果如果要变成复选，加 muiltiple 即可。用户用 Ctrl 来实现多选。例句：用户还可以用 size 属性来改变下拉框(Select)的大小。表单控件(Form Control)：多行输入框(textarea)多行输入框(textarea)主要用于输入较长的文本信息。例句如下：其中 cols 表示 textarea 的长度，
5、rows 表示 textarea 的宽度。表单控件(Form Control)：密码输入框(input type=“password“)密码输入框(input type=“password“)主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。例句如下：表单控件(Form Control)：图片提交(input type=“image“)input type=image 相当于 input type=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。2 HTML 列表介绍HTML
6、有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。排序列表(Ordered List)排序列表中，每个列表项前标有数字，表示顺序。排序列表由开始，每个列表项由开始。不排序列表(Unordered List)不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。不排序列表由开始，每个列表项由开始。定义列表定义列表通常用于术语的定义。定义列表由开始。术语由开始，英文意为 Definition Term。术语的解释说明，由开始，里的文字缩进显示3 HTML 图片介绍用 这个 Tag 可以
7、在 HTML 里面插入图片。最基本的语法如下：url 表示图片的路径和文件名。比如 url 可以是 images/logo/blabla_logo01.gif，也可以是个相对路径 “./images/logo/blabla_logo01.gif“。 图片 alt 属性中有一个 alt 属性，英文叫 alternate text。例句如下：假使浏览器没有载入图片的功能，浏览器就会转而显示 Alt 属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍 Alt 属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用 ALT 属性写上图片的说明，便于搜索引擎抓取你网
8、页的内容。图片 align 属性用 align 属性，可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。图片的大小在缺省状况下，图片显示原有的大小。你可以用 height 和 width 属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。建议图片相对文字，所占的字节数较多，比如一个全屏的图片，即使经过压缩，也要占去大约50k 字节，这相当于 25000 字的文本。因此浏览器载入图片比较费时，建议一个 HTML 文件里不要包含过多的图片，否则会影响你的网页显示速度。4 HTML 字体介绍在 HTML 里，可以用 fon
9、t 这个元素及其属性来设定字体的大小，颜色和字体风格。字体大小用字体大小属性(size)来设定字体的大小。示例代码如下：这一段的字体大小的值是 2。字体风格用 face 属性来设定字体风格。示例代码如下：这一段的字体风格是 arial。字体颜色用颜色属性(color)来设定字体颜色。字体颜色代码请参见 HTML 颜色参考(HTML Color Reference)。这一段的字体颜色是红色注意HTML4 的标准中，已经不建议使用 font 及其属性来设定字体，而是建议用 CSS 来设定字体的大小，颜色，字体风格等。5 HTML 头部信息介绍HTML 头部信息(head)里包含关于所在网页的信息。
10、头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。另外，搜索引擎如 google,yahoo,baidu 等也会查找你网页中的 head 信息。为了让搜索引擎能够收录你的网页，你也要填写适当的 head 信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)下面说几个常用的 head 信息里的 html 元素，如标题(title)，链接(link)，样式(style)以及关于信息(meta)。标题(title)标题(title)是最常用的 head 信息。它不显示在 HTML 网页正文里，显示在浏览器窗口的标题栏里。见图：
11、示例代码如下：HTML 中文教程头部信息(head)之标题(title)说明链接(link)用链接(link)可以建立和外部文件的链接。常用的是对 CSS 外部样式表(external style sheet)的链接。示例代码如下：有关 CSS 外部样式表和示例，详见 CSS 简介。样式(style)用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：body background-color:white; color:black;h1 font: 18pt arial bold;有关 CSS 内部样式表和示例，详见 CSS 简介。关于网页信
12、息(meta)在计算机语言里，你经常可以看到一个前缀 - meta，meta 就是“关于”(about)的意思。这 meta 解释起来比较拗口，比如 metadata，意为描述 data 的 data，英文即 data about data。还有一个词叫 metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。在 HTML 里，meta 标记(meta tags)表示用来描述网页的有关信息。示例代码如下：利用 meta 中的 Refresh 你还可以实现自动跳转页面的功能。示例代码：6 HTML 常用格式HTML 定义了一些文本格式的 Ta
13、g，比如利用 Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式 Tag 如何改变 HTML 文本的显示。常用文本格式常用文本格式 TagTagTagTag 说明粗体 bold斜体 italic文字当中划线表示删除文字下划线表示插入下标上标缩进表示引用保留空格和换行表示计算机代码，等宽字体7 基本的 HTML 标签本章向您讲解 HTML 标签的概念，通过实例向您演示最常用的 HTML 标签。提示：不要担心本章中您还没有学过的例子，您将在下面的章节中学到它们。提示：学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意
14、编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。什么是 HTML 标签HTML 文档和 HTML 元素是通过 HTML 标签进行标记的 HTML 标签由开始标签和结束标签组成 开始标签是被括号包围的元素名 结束标签是被括号包围的斜杠和元素名 某些 HTML 元素没有结束标签，比如 注释：开始标签的英文翻译是 start tag 或 opening tag，结束标签的英文翻译是 end tag 或 closing tag。HTML 标题HTML 标题（Heading）是通过 - 等标签进行定义的。实例This is a headingThis is a headingThis is
15、a headingHTML 段落HTML 段落是通过 标签进行定义的。实例This is a paragraph.This is another paragraph.HTML 链接HTML 链接是通过 标签进行定义的。实例This is a link注释：在 href 属性中指定链接的地址。（您将在本教程稍后的章节中学习更多有关属性的知识）。HTML 图像HTML 图像是通过 标签进行定义的。实例注释：图像的名称和尺寸是以属性的形式提供的。8 如何创建 HTML 表格表示。一个表格可以分成很多行(row)，用表示；每行又可以分成很多单元格(cell)，用表示。HTML 表格用表示。一个表格可以
16、分成很多行(row)，用表示；每行又可以分成很多单元格(cell)，用表示。这三个 Tag 是创建表格最常用的 Tag。border 属性在缺省情况下，如果不设置表格的边界，表格是不显示边界的。要显示表格的边界，可使用 border 这个属性。表格的表头用来表示表格的表头，表头的字是粗体显示的。空的单元格如果表格的单元格之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个空格符。9 一些基础的 HTML TagHTML 里，比较基础的 Tag 主要用于标题，段落和分行。学习 HTML 最好的方法，就是跟着示例学。为了各位学习的方便，我们准备了一个简单的 HTML 编辑器，你可以在左边写 HTML 代码，然后点击上面的按钮，查看 HTML 的显示结果。正文标题这个示例告诉你如何在 HTML 文件里定义正文标题。HTML 用到这几个 Tag 来定义正文标题，从大到小。每个正文标题自成一段。This is a headingThis is a headingThis is a headi
