[电脑基础知识]第3章HTML语法.ppt

第三章HTML语法 2020 2 7 网页设计与制作 2 本章内容 3 1HTML文件的基本结构3 2HTML头部标记3 3HTML主体标记3 4文字和段落标记3 5图像标记3 6超级链接标记3 7列表标记3 8表格标记3 9层标记3 10表单控件3 11标签选择器3 12本章小结 2020 2 7 网页设计与制作 3 3 1HTML文件的基本结构 HTML文件的基本结构 2020 2 7 网页设计与制作 4 3 1HTML文件的基本结构 从上面的代码可以看出 HTML代码主要分为3部分 其中各部分含义如下 告诉浏览器HTML文件开始和结束的位置 HTML文档一般由头部标记和主体标记两部分组成 所以其中包括和标记 HTML文档中所有的内容都应该在这两个标记之间 一个HTML文档总是以开始 以结束 HTML文件的头部标记 在其中可以放置页面的标题以及文件信息等内容 通常将这两个标记之间的内容统称为HTML的头部 通常不会显示在页面上 只起控制作用 用来指明文档的主体区域 网页在浏览器文档区所要显示的内容都放在这个标记内 其结束标记指明主体区域的结束 2020 2 7 网页设计与制作 5 3 2HTML头部标记 HTML头部标记里包含关于所在网页的信息 如网页标题 页面描述和页面关键字等等 头部标记里的内容 主要是被浏览器所用 一般不会显示在网页的正文内容里 2020 2 7 网页设计与制作 6 3 2HTML头部标记 3 2 1标题标记3 2 2基底网址标记3 2 3标记3 2 4元信息标记 2020 2 7 网页设计与制作 7 3 2 1标题标记 TITLE标记的语法格式 在HTML文件里 用来表示文档的标题 TITLE元素只能在元素内使用 标题内容会显示在浏览器的标题栏和Windows的任务栏的图标上 另外 收藏页面时显示在的书签名称 搜索引擎结果的标题行 写标题时要注意要反映页面的内容 让人容易读懂 TITLE里的内容不要过长 浏览器标题栏如果没有足够空间 多于的文字就不会显示出来 一般来说其字数上限为50 60个字符 例如 HTML头部标记 则设定页面的标题为 HTML头部标记 2020 2 7 网页设计与制作 8 3 2 2基底网址标记 BASE标记的语法格式 这个元素指定了一个基准URL 文档内的所有相对URL都是相对它而言的 可以把此元素的href属性设置为一个完全的URL 这样 所有其他的相对URL都在它的基础上定义 Href这个属性指定了一个基准URL 文档内的所有相对URL都是相对它而言的 Target在何处打开页面中所有的链接 可通过在每个链接中使用target属性来覆盖此属性 blank 在一个新的未命名的窗口载入文档 self 在相同的框架或窗口中载入目标文档 parent 把文档载入父窗口或包含了超链接引用的框架的框架集 top 把文档载入包含该超链接的窗口 取代任何当前正在窗口中显示的框架 指定名称 和框架配合使用例如 则页面所有未定义target属性的链接默认打开窗口都是新窗口 2020 2 7 网页设计与制作 9 3 2 3标记 此元素定义了当前文档与Web集合中其他文档的关系 最常用的是用来引入外部的CSS样式表文件 示例如下 常用属性和取值如下 href URL目标文档或资源的URL rel 定义当前文档与目标文档之间的关系 常用值 stylesheet prev等等 type 规定目标URL的MIME类型 常用值如下 text csstext javascriptimage gif charset 定义目标URL的字符编码方式 默认值是 ISO 8859 1 hreflang 定义目标URL的基准语言 media 规定文档将显示在什么设备上 常用值 screen all等等 title 为要链接的文档指定标题 在引用不带有标题的源 例如图像或非HTML文档 时 该属性非常有用 在这种情况下 浏览器会在显示被引用的文档时使用标题 2020 2 7 网页设计与制作 10 3 2 4元信息标记 表3 2标记属性 2020 2 7 网页设计与制作 11 3 3HTML主体标记 表3 3元素的属性 2020 2 7 网页设计与制作 12 3 3HTML主体标记 测试页面zbody标签的属性 示例代码和预览效果如图3 1所示 2020 2 7 网页设计与制作 13 3 4文字和段落标记 3 4 1注释语句3 4 2标题文字3 4 3设定文字格式3 4 4水平线标记3 4 5段落修饰标记 2020 2 7 网页设计与制作 14 3 4 1注释语句 在HTML代码 CSS代码以及脚本代码中支持不同的注释标记 1 在HTML代码中注释标记如下 被注释的语句注 这两种写法浏览器都能正确的理解 但推荐使用第一种 2 在CSS代码中的注释语句示例如下 定义body的显示样式 可连续注释多行文本3 在脚本代码中的注释语句示例如下 Javascript代码注释 Javascript代码注释 其中 前者只能注释一行 后者可连续注释多行 2020 2 7 网页设计与制作 15 3 4 2标题文字 表3 4HTML标题标记 2020 2 7 网页设计与制作 16 3 4 2标题文字 下面是示例代码 显示效果 测试页面一级标题 2020 2 7 网页设计与制作 17 3 4 3设定文字格式 FONT标记的语法格式 并通过face size和color属性来设置文字的字体 字号和颜色 各属性意义如下 1 字体属性FACE示例 设定字体用来指定一种字体 或者给出一个字体列表 字体名之间用逗号来分隔 浏览器将按顺序在系统中查找已安装的字体 如果都没找到 就按本身默认字体来显示 2 字号属性SIZE示例 设定字号指定字体的大小 即字号 其取值可以从1到7 默认值为3 相对于基本字体 Basefont 的大小 也可使用 或 号来指定相对字号 还可以指定以像素为单位的数值 如 size 28px 3 文本颜色COLOR示例 设定文字格式指定文本的颜色 接受任意合法的颜色值 可以是十六进制 RRGGBB格式的颜色值 也可以是浏览器支持的英文颜色名称 2020 2 7 网页设计与制作 18 3 4 3设定文字格式 另外 通过使用一些HTML标记可以方便地修饰小部分文字 例如粗体 斜体 下划线 删除线 上标 下标等 常用标记如表3 5 2020 2 7 网页设计与制作 19 3 4 3设定文字格式 综合示例代码如下 宋体隶书字颜色为gray字颜色为 6666664号字7号字28像素字体隶书 66666628px 2020 2 7 网页设计与制作 20 3 4 3设定文字格式 图3 3文字格式属性示例 2020 2 7 网页设计与制作 21 3 4 4水平线标记 水平线可以在视觉上将文档分隔成各个部分 使文档结构清晰明了 水平线自身具有若干属性 如宽度 高度 颜色 对齐等 合理使用水平线可以获得良好的效果 水平线标记的写法可以是或 其属性如下 1 水平线宽度属性width规定了水平线的宽度 取值可以是相对宽度的百分数 也可以是以像素为单位的数值 例如 2 高度属性size规定水平线的高度 取值可以是相对宽度的百分数 也可以是以像素为单位的数值 例如 3 去掉阴影noshade当设置为true时 水平线呈现为纯色 2D效果 当设置为false时 水平线显示为双色凹槽 3D效果 例如 4 颜色属性COLOR设置水平线的颜色 可以是任意浏览器支持的颜色值 例如 5 水平线的排列align在水平方向 可以设置水平线居左 居中和居右对齐 取值 left center right 例如 2020 2 7 网页设计与制作 22 3 4 4水平线标记 综合示例代码如下 2020 2 7 网页设计与制作 23 3 4 4水平线标记 页面预览效果如图3 4所示 2020 2 7 网页设计与制作 24 3 4 5段落修饰标记 1 段落编辑用来标记段落 所谓段落 就是一段内容上统一的文本 在Dreamweaver设计视图中 按下Enter键 就自动生成段落 段落的起始标记是 结束标记是 示例如下 这是一个很短的段落段落标记使用align属性定义段落的对齐方式 取值可以使为 left center right 分别代表左对齐 中对齐和右对齐 示例如下 这是一个很短的段落这是一个很短的段落这是一个很短的段落2 换行标记段落与段落之间是隔行换行的 文字的行间距离太大 可以使用换行标记来实现文字的紧凑换行显示 示例代码 在Dreamweaver中输入换行标记可使用组合键 Shift Enber 3 不换行标记在浏览器中 如果单行文字过长 浏览器会自动折行显示 如果希望禁止浏览器自动折行 可以使用该标记 示例如下 2020 2 7 网页设计与制作 25 3 4 5段落修饰标记 4 预格式化标记该标记的作用是保留标记内的格式 在浏览器中原样显示 浏览器显示标记内的内容时 会原封不动地保留文档中的空白 如空格 制表符 换行符等等 预格式化的开始标记为 结束标记为 该标记最适合来表示程序源代码 示例如下 显示程序代码 fori 1to10printinexti 2020 2 7 网页设计与制作 26 3 4 5段落修饰标记 5 居中对齐标记在现在的HTML版本中 有一个专门设置居中的标记 示例如下 则位于居中对齐标记内的所有文本 图像以及HTML都居中对齐 6 缩排标记应该说这个标记称为块引用标记更确切 与之间的所有文本都会从常规文本中分离出来 经常会在左 右两边进行缩进 而且有时会使用斜体 但因为该标记一般会使得文本产生缩进 称为缩排标记更形象化 示例如下 正常段落缩排段落嵌套缩排段落 2020 2 7 网页设计与制作 27 3 5图像标记 3 5 1图像源文件属性src3 5 2图像提示文字属性alt3 5 3图像的宽度和高度3 5 4图像的边框border3 5 5图像的垂直间距vspace3 5 6图像的水平间距hspace3 5 7图像的排列属性align 2020 2 7 网页设计与制作 28 3 5图像标记 图片是在页面中的重要程度仅次于文本 是网站上使用最多的元素之一 在页面中插入图片的HTML标记是 该标记的属性如表3 6所示 表3 6图片标记的属性 2020 2 7 网页设计与制作 29 3 5 1图像源文件属性src src属性指定了图像源文件的URL 是图像标记必然用到的属性 示例如下 则指定与页面在相同目录下的图像logo jpg被引入到页面文件中 2020 2 7 网页设计与制作 30 3 5 2图像提示文字属性alt 提示文字的作用有两个 一个作用是当浏览该页面时 如果图像下载完成 则当鼠标移到图像上时 稍停片刻 鼠标旁边会出现提示文字 用于说明或描述图像 第二个作用是如果图像还没下载完成 或源文件故障无法下载 则在图像的位置上会显示为提示文字 示例如下 2020 2 7 网页设计与制作 31 3 5 3图像的宽度和高度 默认情况下 页面中的图像会以源图像的宽度和高度显示 也可以使用width和height参数指定图像显示的宽度和高度 如果不是为了实现特殊的功能 建议还是先用图像处理软件对图像进行宽度和高度的调整 宽度和高度通常以像素为单位的数值 示例代码如下 页面预览效果如图3 7所示 2020 2 7 网页设计与制作 32 3 5 4图像的边框border 网页中的图像默认是没有边框的 使用border属性可以为图像添加边框线 可以设置边框的宽度 但没有属性来指定边框的颜色 如果图像未设置链接 则边框为黑色 设置链接后边框的颜色和链接文字的颜色一致 默认为深蓝色 宽度单位一般为像素 如果需要控制边框的颜色 就要使用style进行样式定义了 示例代码如下 页面预览效果如图3 8所示 2020 2 7 网页设计与制作 33 3 5 5图像的垂直间距vspace 图像和文字之间的距离是可以调整的 这个属性用来调整图像与文字之间上下的距离 此功能可以防止图像与文本间的距离不合适而影响页面的美观 示例如下 垂直间距的取值是以像素为单位的数值 2020 2 7 网页设计与制作 34 3 5 6图像的水平间距hspace 这个属性用来调整图像与文字之间左右的距离 此功能可以防止图像与文本间的距离不合适而影响页面的美观 示例如下 垂直间距的取值是以像素为单位的数值 2020 2 7 网页设计与制作 35 3 5 7图像的排列属性align 图像和文字之间的排列通过align属性来指定 align属性的取值如表3 6所示 表3 6图像排列属性Align的属性值 2020 2 7 网页设计与制作 36 3 5 7图像的排列属性align 2020 2 7 网页设计与制作 37 3 6超级链接标记 超级链接标记在网站设计制作中有着不可替代的地位 其属性如表所示 表3 7超级链接标记的属性 2020 2 7 网页设计与制作 38 3 6超级链接标记 1 普通链接普通链接 在原窗口打开普通链接 在新窗口打开2 在框架内使用在框架窗口打开链接在原浏览器窗口内打开 忽略任何框架在指定框架窗口打开链接3 锚点链接指向锚点4 统一资源定位进入万维网站点进入ftp文件传输服务器启动新闻讨论组进入远程登陆服务进入gopher信息查找系统启动本机邮件系统5 下载文件文件下载指向的文件不是页面 也不是图像或flash动画 则浏览器自动下载文件 2020 2 7 网页设计与制作 39 3 7列表标记 3 7 1有序列表3 7 2无序列表3 7 3定义列表 2020 2 7 网页设计与制作 40 3 7 1有序列表 有序列表自动对列表中的项目进行编号 而不是使用项目符号 列表编号采用数字或英文字母开头 项目间有先后顺序 在有序列表中 主要使用 两个标记和type start两个属性 语法格式如下 列表项1列表项2 类型属性type 取值如下 1 数字格式编号 1 2 3 a 小写字母编号 a b c A 大写字母编号 A B C I 大写罗马数字 i 小写罗马数字 2020 2 7 网页设计与制作 41 3 7 1有序列表 图3 10有序列表标记示例 2020 2 7 网页设计与制作 42 3 7 2无序列表 在无序列表中 各列表项之间没有顺序级别之分 通常使用一个项目符号作为每个列表项的前缀 在无序列表中 主要使用 两个标记和type属性 语法格式如下 列表项1列表项2 类型属性type 取值如下 disc 圆点符号 系统默认值 显示为 circle 空心圆点 显示为 square 方块样式 显示为 2020 2 7 网页设计与制作 43 3 7 2无序列表 图3 11无序列表标记示例 2020 2 7 网页设计与制作 44 3 7 3定义列表 相对于其他两种列表 定义列表显得复杂一些 可使用的标签有 定义列表最适合用于术语的定义 其中 表示定义列表的开始 用来修饰术语 用来修饰术语的解释 标签用在里也能显示应有的样式 但显得有些不伦不类 基本格式如下 术语术语解释 2020 2 7 网页设计与制作 45 3 7 3定义列表 图3 12定义列表示例 2020 2 7 网页设计与制作 46 3 8表格标记 表格可以有效的组织页面内容 可以有效的进行页面布局 是网页设计中使用最多的元素之一 标记描述 表格起始标记和结束标记 表示表格的一行定义表头单元格 表示表格的一个单元格 2020 2 7 网页设计与制作 47 3 9层标记 层标记可以把文档分割为独立的 不同的部分 这是一个块儿级元素 这意味着在默认的情况下 层元素将开始新的一行 可以这样来理解 就是浏览器会自动在层元素的前后各放置一个换行符 层元素的的标记是 可选属性为align 取值如下 left 设定层内的文本左对齐right 设定层内的元素右对齐center 设定层内的元素居中对齐justify 允许浏览器自动调整字间距 实现两端对齐 有自动排版的效果 为了便于查看比较对齐效果 我们为层元素定义了一个样式 在HTML代码的头部标记内输入以下代码 div border 9999991pxsolid background CCCCCC 2020 2 7 网页设计与制作 48 3 10表单控件 3 10 1表单标记3 10 2表单输入标记3 10 3下拉列表标记3 10 4选项标记3 10 5多行文本控件标记3 10 6实现登陆界面3 10 7实现留言板界面 2020 2 7 网页设计与制作 49 3 10 1表单标记 表3 11表单标记属性 2020 2 7 网页设计与制作 50 3 10 2表单输入标记 此标记在表单中使用频繁 绝大部分表单内容需要用到此标记 其属性如表3 12所示 表3 12标记的属性 2020 2 7 网页设计与制作 51 3 10 3下拉列表标记 标记可以在表间中插入一个下拉菜单 下拉列表的每个选项用标记来定