中职高教版《网页设计与制作》3.3.2 基本标记应用课件

基本标记应用 课前导入 如何使用HTML对网页元素进行排版？ 使用标记（<body>…<body>中） 格式：<h#>…＜/h#>，其中#的取值范围为1～6，h1字体最大，h6字体最小。 标题标记 作用：设置文档的各级标题。 常用属性：align，用于定义标题的对齐方式，默认左对齐。align属性值有“left”（左对齐）、” right“（右对齐）、” center“（居中对齐）。 3 标题标记 4 格式：<p>…</p> 分段标记 作用：使标记后面的内容另起一段。 常用属性：align,用于定义段落的对齐方式，默认左对齐。align属性值有“left”“right”“center”，分别表示段落左对齐、右对齐和居中对齐。 5 分段标记 6 格式：…<br> 换行标记 作用：使标记后面的内容换行显示。 7 格式：<hr> 水平线标记 作用：在文档中插入水平线。 属 性 作 用 align 定义水平线的对齐方式，默认为“center” color 定义水平线的颜色 noshade 定义水平线为无阴影 size 定义水平线的宽度（粗细)，单位默认为像素，默认为2像素 width 定义水平线的长度，单位为像素或百分比（相对于页面宽度) 8 格式：<font>…</font> 字体标记 作用：设置标记间文本的字体、大小、颜色等。 属 性 作 用 face 用于设置标记间文本的字体 size 用于设置标记间文本的大小，取值范围1~7，1最小，7最大 color 用于设置标记间文本的颜色 title 用于设置鼠标指向文本时出现的提示信息 9 格式：<img> 图像标记 作用：在页面中插入图像文件，图像格式可以是GIF、JPG和PNG等 属 性 作 用 src 指定插入图像的名称或路径 alt 为替换文本，当浏览器不能显示图像时，或在鼠标指向图像时，或图像加载时间过长时，所要显示的文本 width 用于指定图像宽度，单位是像素 height 用于指定图像高度，单位是像素 border 用于指定图像的边框 hspace 用于指定图像左、右两侧与其他对象（如文本）之间的距离，单位为像索 vspace 用于指定图像上、下两侧与其他对象（如文本）之间的距离，单位为像素 align 用于指定图像与文本的对其方式，取值有“top"“middle"“bottom”“left”"right”，可以实现图像文字左右绕排的效果 10 <img src="../DW网页设计/故宫秋.jpg" alt="故宫秋" width="500" height="500" border="5" align="middle" /> 图像标记语句格式 边框 宽度 高度 图像与文本的对齐方式 图像名称 格式：<a>…</a> 超链接标记 作用：把当前位置的文本、图像或热点区域等链接到其他目标，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图像、一个电子邮箱地址、一个文件，甚至是一个应用程序。 属 性 作 用 href 用于指定链接的目标地址，可以是站内的文件，可以是某个网址等 target 用于指定链接的目标窗口，其值可以是“_blank”“_parent”“_self”“_top” title 为当鼠标指向超链接时所显示的信息 <a href="https://www.baidu.com/" target="_blank" title="打开百度">搜索链接</a> 12 格式：<table>…</table>表示整个表格的开始和结束。 表格标记 作用：表格不仅用于数据的显示，而且是网页布局常用的工具。 13 表格标记 属 性 作 用 border 指定表格边框的宽度（以像素为单位），如不设置此属性，则边框的宽度默认为1像素 bordercolor 指定表格边框颜色 background 设置表格的背景图像 bgcolor 设置表格的背景颜色 width 设置表格宽度，其值可用像素表示，也可用占窗口的百分比表示 height 设置表格高度，其值可用像素表示，也可用占窗口的百分比表示 align 设置表格在页面的水平位置，取值为“left”“right”“center”，默认为左对齐 cellspacing 设置单元格之间的间距，其值可用像素来表示 cellpadding 设置单元格内容与单元格边界之间的距离，其值可用像素表示 完成 完成 完成 cellspacing cellpadding 14 格式：<tr>…</tr＞代表表格中的一行。 表格标记 属 性 作 用 align 设置行内容的水平对齐方式，取值为“left”"right”"center”，默认为左对齐