第二讲利用HTML编写网页1
JavaScript程序设计 第2讲 利用HTML编写网页1 * 本次课任务 制作图文并茂的页面 * 本次课目标 会使用HTML的基本结构创建网页 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 会使用表格的基本结构实现简单表格 * HTML文件的基本结构 HTML文档的结构
我的第一个网页 Hello World! HTML 网页 头部部分 主体部分 …标签标记 HTML 文档的开始和结束 网页标题 网页内容,可以是文本、图像等 这部分包含文本、图像和链接。它包括在 … 标签内 查看源代码 这部分包括标题和其他说明信息。包括在 … 标签内 * 页面背景色或背景图像 …… 网页背景色彩 网页背景图像 小提示:即便是页面的背景颜色是白色也需要 在body标签中进行相应的设置 * 如何实现图文内容的布局,达到如左图所示页面的效果? 分析上图所示页面,应该用什么进行布局? 什么是表格布局 使用表格进行布局 用表格对网页的内容进行整体控制 * 表格的基本结构 行 列 单元格 在 HTML 文档中,广泛使用表格来存放网页上的文本和图像 * 表格的基本语法单元格内容 |
-
标签 特殊符号 行的控制 段落标签
换行标签
使用了
…
设置了颜色 设置段落 设置文字大小和颜色 设置换行 * 字体、字号相关标签 标题标签 ... #=1, 2, 3, 4, 5, 6 说明:
到
字体大小依 次递减 H1 到 H6 标签用于指定不同级别的标题 查看源代码 使用了
…
设置了颜色和字体 标签 特殊符号 * 字体、字号相关标签 特殊字符 转义码 空格 引号(“”) " 小于() > 版权号(? ) © 字体的 大小值 字体的 颜色 字体的 类型 * 行的控制相关标签 段落标签
段(Paragraph) (可以看作是空行)
换行标签
换行
换行了 换段了 * 图像标签 图像的基本语法 图像与文本的对齐方式 图像的位置 图像的宽度 图像的高度 为图像添加的提示性文字 图像与文本居中对齐,还可以取 top, bottom 值 * 文字布局 内容分隔
标签 项目列表和编号 有序列表
- 无序列表
- 预格式文本
标签 有序列表 无序列表 用了预先定义好的格式 水平分隔线 如何使用列表 * 预格式文本
标签 * * 如何使用内容分隔标签 ……