《【精编】HTML基础篇培训教材》由会员分享，可在线阅读，更多相关《【精编】HTML基础篇培训教材（57页珍藏版）》请在金锄头文库上搜索。
1、技术部新人培训HTML培训教程基础篇 一 HTML培训教程基础篇 HTML简介 文件结构的格式标记 文字格式与页面 超链接 列表和表格 4 1 2 3 外媒体 5 表单和框架 6 1 1HTML是什么HTML HyperTextMarkupLanguage 超文本标记语言 是用来描述网页的一种语言 是Web最基本的构成元素 用HTML的语法规则建立的文档可以在不同操作系统的平台上运行 HTML指的是超文本标记语言 HyperTextMarkupLanguage HTML不是一种编程语言 而是一种标记语言 markuplanguage 标记语言是一套标记标签 markuptag HTML使用标记
2、标签来描述网页 1 HTML简介 1 2HTML标签HTML文档和HTML元素是通过HTML标签进行标记的HTML标签由开始标签和结束标签组成开始标签是被括号包围的元素名结束标签是被括号包围的斜杠和元素名某些HTML元素没有结束标签 比如注释 开始标签的英文翻译是starttag或openingtag 结束标签的英文翻译是endtag或closingtag 1 HTML简介 1 3HTML能做什么格式化文本 如设置标题 字体 字号 颜色 设置文本的段落 对齐方式等 建立超链接 只需用鼠标单击 就可达任何一处 创建列表 把信息用一种易读的方式表现出来 插入图像 使网页图文并茂 还可设置图像的各种
3、属性 如大小 边框 布局等 建立表格 表格为浏览者提供快速找到需要信息的显示方式 还可以用表格来设定整个网页的布局 加入多媒体 可在网页中加入音频 视频 动画 还能设定播放的时间和次数 交互式表单 计数器等 1 HTML简介 1 HTML简介 1 4HTML编辑环境任何文本编辑器都可用来制作网页 包括记事本 写字板 Word WPS等编辑程序 专业设计人员会有专业的网页编辑器 如 dreamweaver frontpage等 完成以后用 htm或 html为文件扩展名保存 若要看到用户自己设计的网页效果 就需要安装一个浏览器 如InternetExplorer NetscapeNavigato
4、r等 2 HTML基本结构 一个HTML文件应具有下面的结构HTML文件以开头 以结尾 HTML文件包括头部和主体 用来说明文件命名和与文件本身的相关信息 主体定义浏览器中显示的网页内容 网页标题网页内容 2 HTML基本结构 HTML文件是由标记和文本组成 标记 Tag 能够产生所需的各种效果 就像一个排版程序 可将网页排成理想的效果 格式 收标记影响的文本单一标记 只要一个标记就能完成所要表示的功能 如可以显示一条水平的分隔线 成对标记 需要两个标记组合才能完成所需功能 如及 及 HTML的元素有以下三种表达方式对象对象标记需要通过属性制作各种效果 2 HTML基本结构 注意 使用时属性之
5、间没有顺序 对同一段文本 可以用多个标记来共同作用 产生一定的效果 HTML也有注释标记 之间的部分为注释内容 可以插入文本的任何地方 标记和属性不区分大小写 2 HTML基本结构 例2 1 简单的HTML文件网页设计我的第一个网页 2 2 1文件结构的格式标记 1 HTML文档标记HTML文档标记的格式为 HTML文档内容处于文档的最前面 表示HTML文档的开始 即浏览器从开始解释 直到遇到为止 每个HTML文件均以开始 以结束 2 2 1文件结构的格式标记 2 HTML文件头标记 HTML文件头标记的格式为 头部内容文件头部在文件标记之后 其内容可以是标题名 文本文件地址 创作信息等网页信
6、息说明 对应于相应的标记 如标题标记 本标记在HTML文件中不是必须的 如果没有 浏览器也会照常解读文件 2 2 1文件结构的格式标记 3 HTML文件标题标记 HTML文件标题标记的格式为 标题名标题内容不在浏览器窗口中显示 而是在浏览器的标题栏中显示 为什么要给网页加上标题呢 标题概括了网页的内容 能够迅速了解网页的大意 如果浏览者喜欢该网页 将它加入书签或保存到磁盘上 标题就作为改页面的标志和文件名 使用搜索引擎时显示的结果也是页面的标题 2 2 1文件结构的格式标记 例2 2 如果没有使用标记 而单独使用 标记仍可设定标题 网页设计无标记仍起作用显示效果 2 2 1文件结构的格式标记
7、4 HTML文件主体标记格式为 background设置网页的背景图像 bgcolor设置网页的背景色 text设置文本的颜色 link设置未被访问过的超文本链接的颜色 默认为蓝色 vlink设置已被访问过的超文本链接的颜色 默认为红色或紫色alink设置超文本链接在被访问瞬间的颜色 默认为蓝色 2 3HTML文字格式与页面 2 3 1设置标题格式设置标题格式的格式为 标题属性align用来设置标题在页面中的对齐方式 left 左对齐 center 居中 或right 右对齐 属性n用来指定标题文字的大小 n可以取1 6的整数值 取1时文字最大 6时文字最小 默认时为 这些标记显示宋体字 标记
8、会自动插入一个空行 不必用标记再加空行 在一个标题行中无法使用不同大小的字体 2 3HTML文字格式与页面 例2 3 用设置标题的大小 使用标题一级标题二级标题三级标题四级标题五级标题六级标题默认标题显示效果 2 3HTML文字格式与页面 2 3 2设置强制换行标记www浏览器忽视超文本文件中的回车符 除非用户指定用标记元素限制按源文件文本格式展示文本内容 而是用专门的标记符号表示回车 放在一行的末尾 可使后面的文字换到下一行 而又不会在行与行之间留下空行 强制换行标记的格式为 文字换行标记单独使用 可使页面清晰 整齐 2 3HTML文字格式与页面 例2 4 强制换行标记的使用 强制换行标记的
9、使用欢迎进入牡丹园 新闻影视聊天室显示效果 2 3HTML文字格式与页面 小技巧 在中文的段落中 往往在段首空两个的空格符号 可是HTML语言忽略多余的空格 最多只能空一个空格 可用4个连续的 nbsp 或者输入两个全角中文空格 nbsp 为非换行的空格符号 用它可以在文本中加入任意多个空格 2 3HTML文字格式与页面 2 3 3设置文字格式格式为 被设置的文字标记可设定文字的字体 字号和颜色 size用来设置文字的大小 数字的取值范围从1 7 size取1时最小 取7时最大 face用来设置字体 如黑体 宋体 楷体 GB2312 仿宋 GB2312 隶书 TimesNewRoman等 co
10、lor用来设置文字颜色 2 3HTML文字格式与页面 1 设置文字的字号与的区别 注 和标记都可以设置文字的大小 当中的size取7时的文字比要大 2 3HTML文字格式与页面 例2 5 用设置文字的大小 用设置文字的大小文字的大小 文字的大小size 1文字的大小size 2文字的大小size 3文字的大小size 4文字的大小size 5文字的大小size 6文字的大小size 7 2 3HTML文字格式与页面 2 设置字体当文字是汉字时 格式中的 字体名 可以为 宋体 幼圆 隶书 楷体 GB2312 黑体 仿宋 GB2312等 当文字为英文时 字体名可以为TimesNewRoman等约5
11、0种字体 2 3HTML文字格式与页面 例2 6 设置字体设置字体幼圆隶书黑体楷体 GB2312仿宋 GB2312显示效果 2 3HTML文字格式与页面 3 设置字型字形就是文字的风格 如加粗 斜体 带下划线 上标 下标等 字型的控制标记见下表 2 3HTML文字格式与页面 例2 7 设置字型设置字型设置字体黑体设置字体斜体设置字体带下划线设置字体带删除线设置字体上标设置字体下标设置字体大号字体设置字体小号字体设置字体倾斜设置字体倾斜设置字体缩小设置字体缩小 斜体设置字体粗体设置字体标准打印字体显示效果 2 3HTML文字格式与页面 4 设置文字颜色HTML的颜色代码 由六个字符组成 RRGG
12、BB 每一位都是十六进制 从0 9 A F 所以可以产生166种颜色 也就是1677万多种颜色 2 3HTML文字格式与页面 例2 5 用设置文字的大小 用设置文字的大小文字的大小 文字的大小size 1文字的大小size 2文字的大小size 3文字的大小size 4文字的大小size 5文字的大小size 6文字的大小size 7 2 3HTML文字格式与页面 例2 5 用设置文字的大小 用设置文字的大小文字的大小 文字的大小size 1文字的大小size 2文字的大小size 3文字的大小size 4文字的大小size 5文字的大小size 6文字的大小size 7 Clicktoedi
13、ttitlestyle Addyourtitleinhere Addyourtitleinhere Addyourtitleinhere ThemeGalleryisaDesignDigitalContent ContentsmalldevelopedbyGuildDesignInc ThemeGalleryisaDesignDigitalContent ContentsmalldevelopedbyGuildDesignInc ThemeGalleryisaDesignDigitalContent ContentsmalldevelopedbyGuildDesignInc Clicktoad
14、dTextClicktoaddText ClicktoaddTextClicktoaddText Clicktoedittitlestyle Contents Contents Contents ThemeGalleryisaDesignDigitalContent ContentsmalldevelopedbyGuildDesignInc ThemeGalleryisaDesignDigitalContent ContentsmalldevelopedbyGuildDesignInc ThemeGalleryisaDesignDigitalContent Contentsmalldevelo
15、pedbyGuildDesignInc Titleinhere Titleinhere Titleinhere Titleinhere Titleinhere Descriptionofthecontents Clicktoedittitlestyle ThemeGalleryisaDesignDigitalContent ContentsmalldevelopedbyGuildDesignInc 0001020304050607 50 70 160 230 100 150 380 300 Textinhere unit Year ClicktoaddTextClicktoaddTextCli
16、cktoaddText ClicktoaddTextClicktoaddTextClicktoaddText Clicktoedittitlestyle Addyourtextinhere Addyourtextinhere Text Text Text Text Text Text Text Text Clicktoedittitlestyle Titleinhere Descriptionofthecontents Titleinhere Textinhere Textinhere Textinhere Textinhere Textinhere Textinhere Descriptionofthecontents ThemeGalleryisaDesignDigitalContent ContentsmalldevelopedbyGuildDesignInc Clicktoedittitlestyle 2 DescribecontentsforaChartDescriptionofthecompany ssubcontentsDescriptionofthecompany ss
