HTML学习技术方案.ppt

Html简介 超文本标记语言（Hypertext Markup Language）。 一种描述性的标记语言，不是编程语言。 结构标记：定义网页内容的结构，如＜ｐ＞、＜ｔａｂｌｅ＞。 形式标记：定义网页内容的显示形式，如 ＜ｂ＞、＜ｉ＞。 网页文件的创建 方法一：记事本创建，文件另存为*.html，示例如下： html head titletest/title /head body h1我的第一个网页文件！/h1 /body /html Html文件的基本结构 html标记：放在html文件的开头，没有什么实质性的功能，只是一个形式上的标记，表示网页文件的开始； head标记：也称为头标记，用于放置关于此html文件的信息，如提供索引、定义css样式、定义网页行为等； title标记：标题标记，作用是设定网页标题，显示在浏览器左上方的标题栏中； body标记：主体标记，网页所有要显示的内容都放在这个标记中，是html文件的重点所在。 网页文件的创建 方法二：DW CS4创建。 先建立站点； 再创建html文件。 html的主要内容 标记/标签： 放在和之间。 一般成对使用，有开始标记和结束标记，如p一个段落/p;也有部分的空标记，如br/。 标记可以有属性，属性可以有属性值。 语法规则：所有标记（包括标记名、属性名）必须小写，属性值放在双引号之间，所有标记必须有结束符号。 注释： !--注释内容--； 不会在浏览器中显示出来。 文本： 浏览器中显示给读者的部分； 除标签和注释以外的内容。 html的常用文本标记 结构标记：p/p、div/div、br/、span/span、hr/水平分隔线、h1标题/h1、 形式标记：i斜体/i、b粗体/b、em强调/em 练习：标题标记的应用 案例：body/body的应用 练习：段落标记的应用p/p 练习：设置标题 练习：居中标记center的应用 练习：blockquote设置段落缩进 html标记与html属性 在大多数html标记中都可以加入属性控制，属性的作用是帮助html标记进一步控制html文件的内容，比如：内容的对齐方式、文字的大小、字体、颜色等。 基本语法： 标记名称 属性名1=“属性值1”属性名2=“属性值2”…… 如：h1 align=center我的标题/h1 align属性 作用：控制段落的水平位置。 常用属性值：center、left、right。 适用标记：标题标记h1~h6,段落标记p。 body标记的属性 bgcolor属性：设置背景色，属性值表示方式有： 16进制法：如#CCCCFF，大小写均可。 英文名称表示法：如red、blue等等。 text属性：设置主体标记内容的文字颜色。 设置文字的特殊样式 font标记及其属性 作用：设置文字的大小和颜色。 常用属性： face属性：设置文字的字体，如宋体、楷体； size属性：控制文字的大小，可以取1到7之间的整数； color属性：设置文字的颜色。 案例：建立无序列表ul 案例：建立有序列表ol 练习：创建嵌套的列表 案例：建立定义列表 在网页中插入图像 图像标记：img src=“图像地址”/ 图像的宽度属性：width=”图像的宽度”，如width=“450” 图像的高度属性：height=“300” 图像的边框属性：border=“3” 设置图像替代文字的属性：alt=“提示的内容”，该属性部分浏览器不支持，如Firefox、ie8。 html建立超链接a/a 设置基本的文字超链接 a href=“2.html”链接文字/a 设置页面内部的特定目标的链接/锚点链接 pa href=“#first”跳转到锚点/a/p h1 name=“first”锚点/h1 设置图片的超链接 a href=“1.html”img src=“…”//a html建立超链接a/a 设置电子邮件链接 a href=mailto:maolj@联系我/a 设置以新窗口显示链接页面 a href=“1.html” target=“_blank”新窗口/a 创建热点链接 利用DW工具绘制热点区域 设置链接 html创建表格table 表格的基本结构 table tr td…/td /tr /table 表格标记的主要属性 colspan属性：合并左右单元格 rowspan属性：合并上下单元格 align属性：设置单元格文字的对齐方式 cellpadding属性：设置单元格中的内容距离格线的距离。 cellspacing属性：设置相邻单元格边线之间的距离。 案例：表格 Html制作表单 生活中需要填写各种各样的表格。相信很多人都有过填表的经历，例如在银行里填写存款单、在商店里填写购物单、在邮局里填写包裹单等。而网络上的表单就