当前位置:文档之家› B01-HTML速成教程

B01-HTML速成教程

B01-HTML速成教程
B01-HTML速成教程

入门基础教程

目录

1.HTML速成教程 (8)

1.1.基本标签 (8)

1.1.1.HTML标签 (8)

1.1.2.头部标签 (8)

1.1.3.标题标签 (8)

1.1.4.概要标签 (8)

1.2.正文标签 (9)

1.3.Character字符,Paragraph 段落和Position位置 (9)

1.1.5.标题标签 (9)

1.1.6.

段落标签 (9)

1.1.7.Align对齐属性 (9)

1.1.8.

居中对齐标签 (10)

1.1.9.
换行标签 (10)

1.1.10.


水平分隔线 (10)

1.1.11. 空格 (10)

1.1.12.

引用块 (10)

1.1.13.

预格式化 (10)

https://www.doczj.com/doc/ca4840195.html,ments注释 (11)

1.4.Character Style字符样式 (11)

1.1.15.默认字体 (12)

1.5.Lists列表标签 (12)

1.1.16.Unordered Lists无序列表 (12)

1.1.17.Ordered Lists有序列表 (13)

1.1.18.Definition Lists定义列表 (13)

1.6.链接 (13)

1.7.图片Image (14)

1.8.Color颜色 (15)

1.9.Table表格 (16)

1.10.Form表单 (17)

1.1.19.Input输入框 (18)

1.1.20.Text Area文本区域 (18)

1.1.21.Radio Button单选按钮 (18)

1.1.22.Check Box多选框 (19)

1.1.23.Submit and Reset提交与重置按钮 (19)

1.1.24.Password密码输入框 (20)

1.1.25.Pull-Down Menu下拉菜单 (20)

1.1.26.Scroll-Down Menu滚动菜单 (20)

1.11.Frame框架 (21)

修订记录

日期修改人修改内容

2015年01月16日陈清晖创建HTML速成教程文档2015年01月19日陈清晖创建CSS速成教程文档

2015年01月20日陈清晖创建网页DIV布局速成教

2015年01月21日陈清晖创建C#速成教程

教程说明

?本教程假设你是零起点的初学者,或已经接触过一星半点理论知识;

?本教程将通过实例编程从一个全面和概要的角度来讨论HTML、CSS、JavaScript、C#和SQL等基础知识,你只要浏览这些教程并且动手撰写代码,就可以理解相关概念。

?本教程不是为高手准备的,而适用于初学者。

?本教程推崇的是KISS原则:Keep It Simple, Stupid

?本教程的官方更新地址为:https://www.doczj.com/doc/ca4840195.html,/changingway

?本教程的官方下载地址为:https://www.doczj.com/doc/ca4840195.html,/user/changingway

教程价值目标

《HTML速成教程》《CSS速成教程》《网页DIV布局速成教程》《JavaScript速成教程》的职业目标是网页制作一直到前端工程师。

上述教程再加上《C#速成教程》《SQL速成教程》的职业目标是C#开发工程师。当然,师傅带进门,修行在个人,本教程仅用来敲门。

以下为2015年1月份的本地人才市场的行情。

1. H TML速成教程

1.1. 基本标签

括号里的英文单词必须记住

标签(Tag)是HTML语言的元素,几乎所有标签都有一个打开符号和关闭符号。例如 标签表示头部信息的开始位置,它拥有一个对应表示关闭的标签 .

1.1.1. HTML标签

这对标签告诉浏览器此文件是一个HTML文件。每个HTML文档都从 标签开始,对应的标签是HTML文件的最后一个标签。

1.1.

2. 头部标签

这对标签之内的内容表示HTML文件的头部,一般用来存放文件相关的重要信息

1.1.3. 标题标签

title是一个重要标签,一般表示在浏览器顶部显示的标题。这对标签嵌在

标签之内

HTML速成教程

1.1.4. 概要标签

另外可嵌入标签之内的标签还有 概要标签,一般用于协助搜索引擎去索引一个页面。有以下几种不同的概要元信息:

author作者信息:

description描述信息:

keyword关键词信息,注意:使用逗号分隔关键词(SEO中也用不规范的|竖线分隔)

示例:

HTML速成教程

1.2. 正文标签

Body正文标签定义网页的主体部分的开始和结束。在这一对标签之间可以放入各种重要标签,例如:images图片, links链接, text文本, paragraphs段落, forms表单等

1.3. Character字符,Paragraph 段落和Position

位置

1.1.5. 标题标签

共有H1到H6的6个层级的标题标签,最大的标题为

,最小的标题为

,其他依此类推。这些标签一般用于正文的大纲视图分层级。

最大文本

......

最小文本

1.1.6.

段落标签

P段落标签

之间可以放入一个段落,如:

基本信息

注意:

关闭标签可以省略。

1.1.7. A lign对齐属性

可以使用ALIGN标签来定义对齐方式。注意:默认为左对齐。

段落文本居中对齐

段落文本左对齐

段落文本右对齐

1.1.8.

居中对齐标签

此标签可以使得网页中的文本居中对齐。

段落居中

1.1.9.
换行标签

可使其后文本新起一行,如:

欢迎光临
HTML入门教程官网!

1.1.10.


水平分隔线

可以插入一条水平分隔线,HR标签可设置如下:


特殊字符代替

1.1.11.  空格

可以在文本中闯入空格 .

1.1.1

2.

引用块

可定义引用的内容块,一般会在块的左右两边进行缩进(增加外边距),而且有时会使用斜体。

欢迎光临HTML入门教程官网!

教程内容

基础信息

1.1.13.

预格式化

可定义预格式化段落文本,使得输入内容和显示内容一致,即所见即所得,经常用来显示源码

物品 单价 数量

---------------------------------

A 34.99 23

B 25.95 13

---------------------------------

1.1.14. Comments注释

comment注释标签里面的内容不会显示出来,使用如下:

1.4. Character Style字符样式

字符样式包括物理和逻辑字符样式,和字体 Face,大小 Size, 和颜色Color

类别 标签 功能

粗体化文本

斜体

加下划线

<

物理样式 Strike> 文本加中划线

文本上标化

文本下标化

文本等宽打字机风格化(HTML5 不支持)

表示文本非常重要

表示文本重要

表示文本是书籍或文章的标题

表示文本是一个地址

<

逻辑样式 Dfn> 表示文本是一个定义

表示文本是一个文档中的文本

表示文本是一段键盘输入

表示文本是一个变量

表示文本是一段代码

在最新的 HTML 版本(HTML 4 和 XHTML)中,字体标签已被废弃。请在新网页中不要使用字体标签而改用CSS

字体 选项 用处

默认 使用浏览器的默认字体 (Times New Roman)

Family 逗号隔开的字体名称 (如 Helvetica, Arial, Courier). 指定段落的优先使用字体

Face

(Font name) 使用指定字体显示 (如果系统不存在该字体则会被其他字体替代)

1 到7 从1到7为从最小到最大 (默认为3)

+ 增加字体的大小(最大为7).

Size

- 减少字体的大小 (最小为1).

Color "#xxxxxx" 或 White, Red, Blue 等

定义文本颜色 下列标签将会显示如文字所示效果

下划线文本

粗体文本

斜体文本

大号文本

小号文本

等宽打印机文本

闪烁文本,仅在Netscape 浏览器生效

可表示下标

可表示 上标

中划性强调文本

文本字体测试

绿色文本

文本字体测试

1.1.15. 默认字体

该标签可定义网页默认的字体和大小,颜色.只有 Internet Explorer 支持 标签。应该避免使用该标签。

1.5. Lists 列表标签

有以下三种列表标签:

无序列表

    有序列表

      定义列表

      1.1.16. Unordered Lists 无序列表

      无序列表始于

        而终于
      标签. 其中嵌入
    1. (list item 列表项目)标签; (
    2. 对应的
    3. 关闭标签可以省略) 如:

      • 姓名

      • 电话

      • ID

      显示效果为:

      ?姓名

      ?电话

      ?ID

      1.1.17. Ordered Lists有序列表

      有序列表始于

        而终于
      标签. 其中嵌入
    4. (list item 列表项目)标签; (
    5. 对应的
    6. 关闭标签可以省略) 如:

      1. 大学

      2. 高中

      3. 小学

      显示效果为:

      1. 大学

      2. 高中

      3. 小学

      1.1.18. Definition Lists定义列表

      定义列表始于

      而终于
      标签. 其中嵌入
      (definition term 定义条目)和
      (definition definition定义条目的定义内容)标签.如:

      条目A

      A的定义

      ...

      条目B

      B的定义

      1.6. 链接

      链接(Links)可使用户从一个网页导航到本机(通过本机文件路径)或互联网(通过URL网址)上的另一个网页.

      如果是链接到当前路径下的文件,用法如:.

      基本信息

      如果是链接到其他路径下的文件,假设该路径为path(可是是绝对路径,也可以是相对路径),用法如:

      锚点文本

      如果是链接到互联网上的网页,用法如:

      初学者教程

      如果是链接到电子邮件地址,则点击会启动系统默认邮件客户端程序写邮件,用法如:

      邮件反馈

      如果一个网页内容很长,就可以把它分为几节来导航.在每一节开始处定义一个锚点,用法如: . 然后可以使用 这样的标签链接到该锚点.

      本页标题

      ......

      回到顶部

      也可以链接到当前路径下的其他网页上的某个锚点,用法如:

      角色信息

      也可以链接到互联网上的其他网页上的某个锚点,用法如:

      1.7. 图片Image

      绝大多浏览器都支持显示GIF或JPEG格式的图片.用法如:

      标签定义一个图片,它没有一个对应的关闭标签.SRC属性指定图片的路径或网址.HEIGHT 和WIDTH 定义图片的高度和宽度,单位为像素 (pixels) ,用法如:

      ALIGN属性:(HTML 4.01 中不推荐使用)指定图片相对周围段落文本的纵向(的对齐方式,(默认为bottom底部对齐,还有left左对齐,right右对齐,top,,middle). 用法如:

      vspace 和 hspace属性: (HTML 4.01 中不推荐使用)。定义图像顶部底部和左侧右侧的空白。用法如:

      ALT属性定义了图像的替代文本,如果浏览器设置了不显示图像时或者图片地址无效而无法显示图像时,就会显示替代文本.

      用法如:

      [猴子]

      图片也可以加上超链接,用法如:

      上例中的图片周围有蓝色的边框,如果想要消除边框,可使用BORDER属性把边框大小设置为0,用法如:

      可以使用URL来显示互联网上的图片,用法如:

      可以使用图片来作为网页的背景图片,用法如:

      为了避免因为载入大尺寸图片而拖慢网页载入,可以使用文本上的超链接来载入图片.用法如:

      link anchor

      也可以使用小尺寸的缩略图片上的超链接来载入大尺寸图片,用法如:

      1.8. Color颜色

      HTML中各种颜色使用以 "#"(读作hash,C#是音乐中的升号读作sharp)打头加上6位的16进制RGB (red, green, blue,分别从00到FF) 值.如000000为黑色(无任何颜色), FFFFFF是白色 (RGB三颜色饱和). FF0000是明亮的纯红色, 00FF00 是蜡光的纯绿色,0000FF是明亮的纯蓝色.

      可以在 标签内使用bgcolor, text, link, vlinks (visited links), 和 alinks (active links来指定网页的背景,文本,链接,已访问链接,活动链接的颜色,用法如:

      link="#0000FF" vlink="#800000" alink="#808000">

      HTML中除了RGB值,还可以直接使用"black", "red", "blue", 和"green" 等颜色的单词来定义文本的颜色,用法如:

      text

      这个标签可以和字体的大小(font size)一起使用,用法如:

      text

      1.9. Table表格

      表格的格式是:

      ...

      ...

      ...

      表格条目 表格条目
      表格条目 表格条目

      表格始于

      而终于
      ,表格其中嵌入行,每行始于而终于. 行其中嵌入单元格,每个单元格始于而终于 . 单元格内容默认为水平左对齐和垂直居中,可使用 和 使单元格横跨X列和纵跨X行,可使用
      来定义表格边框, 用法如:

      姓名
      电话
      ID
      John Lee
      456-968
      276580
      Cherry Heitz
      789-326
      908743

      姓名电话ID

      John Lee 456-968 276580

      Cherry Heitz 789-326 908743

      宽度 width和高度height可设置为 "xx%" 或XX,用法如: WIDTH="80%" 或WIDTH=450. "xx%" 允许表格尺寸随窗体尺寸缩放而缩放.表格边框Border 可设置为0则不显示边框.

      CELLSPACING 属性表示单元格之间的间隔( space),单位为像素pixels. CELLPADDING 属性表示单元格的内部的四边留空(四个边和内容之间的空隔,pad 意为填充铺垫) .

      用法如下:

      显示效果如下:

      标签元素 描述

      定义 HTML 表格,(如果使用了BORDER 属性,则表格会显示边框) 定义表格标题,必须紧随 table 标签之后。您只能对每个表格定义

      一个标题。默认位置为居中于表格之上。 (可使用ALIGN=BOTTOM 属性来定义标题位于表格之下,但不赞成使用ALIGN 而应使用CSS 样式。)

      注意: caption 标签内可嵌入使用其他各种标签.

      tr 元素定义表格行,可使用ALIGN (LEFT, CENTER, RIGHT) 或

      VALIGN (TOP, MIDDLE, BOTTOM)等属性预定义所有行的默认属

      性.

      th 元素定义表头,默认为粗体居中.可使用属性来定义表头的样式

      td 元素定义表格单元。默认为水平左对齐和垂直居中.可使用属性来定义其中样式

      属性 描述

      ALIGN (LEFT, CENTER, RIGHT)单元格的水平对齐样式

      VALIGN (TOP, MIDDLE, BOTTOM)单元格的垂直对齐样式

      COLSPAN=n 某单元格横跨的列数

      ROWSPAN=n 某单元格纵跨的行数

      NOWRAP 单位格内关闭自动换行样式

      1.10. Form 表单

      表单(Forms)可用来输入信息,如收集用户姓名和电子邮箱等.表单始于

      而终于
      ,用法如.

      perl脚本语言

      ......

      表单必须使用Action属性来规定当提交表单时向何处发送表单数据,和Method 规定用于发送 form-data 的 HTTP 方法

      1.1.19. Input输入框

      可使用输入框 "input" 输入单行信息,格式如:

      用法如:

      Your Email Address

      Your Name

      Subject

      显示效果如:

      Your Email Address

      Your Name

      Subject

      size尺寸属性的单位为字符, "SIZE=26" 即表示长度为26个字符(13个汉字) 1.1.20. Text Area文本区域

      文本区域(Text Area)可以输入无限数量的多行的文本,文本的默认字体是等宽字体(通常是 Courier)。文本区域开始于 标签.用法如:

      显示效果如: