html(一)入门.ppt

《html(一)入门.ppt》由会员分享，可在线阅读，更多相关《html(一)入门.ppt（25页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、网页设计基础静语计算机协会辉翔网络有限公司HTML语言语言与与网页设计基础网页设计基础主讲人：宋文杰www.m-静语计算机协会静语计算机协会www.m-学习目标学习目标知道什么是知道什么是HTML。掌握常用掌握常用HTML标签的使用方法。标签的使用方法。具备自己学习所有具备自己学习所有HTML标签的能力。标签的能力。静语计算机协会静语计算机协会www.m-HTML文件是什么？文件是什么？HTMLHyperTextMarkupLanguage 超文本标记语言。超文本标记语言。HTML文件是一个包含标记的文本文件。文件是一个包含标记的文本文件。HTML文件必须有文件必须有htm或者或者html扩展

2、名。扩展名。HTML文件可以用一个简单的文本编辑器创文件可以用一个简单的文本编辑器创建。建。静语计算机协会静语计算机协会www.m-编写HTML页面的方法1.手工编写（用“记事本”编写 Notepad+）2.使用可视化软件（Microsoft公司的frontpageAdobe公司的dreamweaver 校内下载地址：http:/ HTML标签两端有两个包括字符：标签两端有两个包括字符：“”,这两这两个包括字符被称为角括号。个包括字符被称为角括号。HTML标签通常成对出现，比如标签通常成对出现，比如和和。一对标。一对标签的前面一个是开始标签，第二个是结束标签签的前面一个是开始标签，第二个是结束

3、标签,在开在开始和结束标签之间的文本是元素内容。始和结束标签之间的文本是元素内容。HTML标签是大小写无关的，标签是大小写无关的，跟跟表示的意思是表示的意思是一样的。（但建议大家用小写）一样的。（但建议大家用小写）静语计算机协会静语计算机协会www.m-HTML标签属性标签属性 body的属性：的属性：背景颜色背景颜色bgcolor背景图片背景图片background另外还有：另外还有：topmargin（页上边距）（页上边距）leftmargin（页左边距）（页左边距）静语计算机协会静语计算机协会www.m-背景颜色背景颜色例如：例如：等价于等价于静语计算机协会静语计算机协会www.m-背景

4、图片背景图片 路径分为绝对路径和相对路径路径分为绝对路径和相对路径绝对路径绝对路径:形如形如C:myfirstwebimageslogo.gif相对路径相对路径:形如形如imageslogo.gif根路径：形如根路径：形如imageslogo.gif静语计算机协会静语计算机协会www.m-背景音乐背景音乐 背景音乐的代码是放在页面的头部背景音乐的代码是放在页面的头部里里子属性子属性src路径路径loop循环次数（循环次数（-1表示无限次）表示无限次）静语计算机协会静语计算机协会www.m-字体字体标题字体标题字体（h1,h2h6）今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气

5、真好！今天天气真好！静语计算机协会静语计算机协会www.m-字体的大小字体的大小 文字文字其中其中#=1,2,3,4,5,6,7or+#,-#例如：例如：今天天气真好！今天天气真好！静语计算机协会静语计算机协会www.m-逻辑字体逻辑字体 下划线：下划线：下划线下划线斜斜体体:斜体斜体删除线：删除线：删除线删除线增增强：强：增强增强强强调：调：强调强调示示例：例：示例示例还有很多，自己去了解一下。还有很多，自己去了解一下。静语计算机协会静语计算机协会www.m-字体字体粗体：粗体：文字文字斜体：斜体：文字文字下划线：下划线：文字文字静语计算机协会静语计算机协会www.m-字体颜色字体颜色 文字

6、文字#=“#rrggbb”16进制数码，进制数码，0f也可是用英语单词定义色彩也可是用英语单词定义色彩对于对于16进制编码的颜色，前两个表示红色，中间的两进制编码的颜色，前两个表示红色，中间的两个表示绿色，后两个表示蓝色；个表示绿色，后两个表示蓝色；红色（红色（red）#ff0000黑色（黑色（green）#000000白色（白色（white）#ffffff比如：比如：文字文字红色文字红色文字静语计算机协会静语计算机协会www.m-客户端字体客户端字体(FontFace).face=“#”就是从你的电脑获得的字体就是从你的电脑获得的字体例如：例如：隶书隶书静语计算机协会静语计算机协会www.m

7、-字符实体字符实体 ；空格空格&<"“静语计算机协会静语计算机协会www.m-段落标记段落标记换行标记换行标记格式控制格式控制静语计算机协会静语计算机协会www.m-分段标记符分段标记符分段标记符用于将文档划分为段落，标记为分段标记符用于将文档划分为段落，标记为，其中结束标记符通常可省略。，其中结束标记符通常可省略。换行标记符用于在文档中强制断行，标记为换行标记符用于在文档中强制断行，标记为一个单独的一个单独的。该标记符与分段标记符。该标记符与分段标记符是有区别的。是有区别的。区别：多个区别：多个 只产生一个段落，多个只产生一个段落，多个产生多个空行。产生多个空行。静

8、语计算机协会静语计算机协会www.m-图像图像#=图象的图象的URL，就是图像的地址。，就是图像的地址。#=在浏览器尚未完全读入图象时，在图象位置显示的在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。显示的文字。例如：例如：静语计算机协会静语计算机协会www.m-img的子属性的子属性图象在页面中的对齐图象在页面中的对齐/布局：布局：其中其中#=left,center,right图象和文字的对齐：图象和文字的对齐：其中其中#=top,middle,bottom图像的边框：图像的边框：#=数字数字图片的高度和宽度：图片的高度和宽度：示例：示例：静语计算机协会静语计算机协会www.m-注释语句作用：1.去掉一些暂时不必要的语句 2.解释作用，便于他人阅读与后期维护静语计算机协会静语计算机协会