《HTML和CSS的简单教程》由会员分享，可在线阅读，更多相关《HTML和CSS的简单教程（28页珍藏版）》请在金锄头文库上搜索。
1、HTML 简明讲义第一节 HTML基础1.1什么是HTML是一种超文本标记语言（HyperTextMarkupLanguage）超文本：包含有链接关系的文本，且包含多媒体对象的文件。1.2 HTML标记的格式1.3 HTML 文档的基本结构欢迎进入 HTML 世界这会是一种很有趣的体验第二节 页面的主体标记 网页的主体部分位于和这两个标记之间，放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。2.1文字颜色属性Text 在没有对文字进行单独定义颜色时，这个属性对页面中的所有文字产生作用。 基本语法：常用color_value颜色颜色名称十六进制代码黑色black#000000绿色gr
2、een#009900灰色gray#808080白色white#FFFFFF黄色yellow#FFFF00红色red#FF0000蓝色blue#0000FF示例：设定页面文字颜色为蓝色2.2背景颜色属性BgColor 设定整个页面的背景颜色。 基本语法：示例：设定页面背景颜色为深蓝色（#336699），文字颜色为白色2.3背景图片属性BackGround 背景图片位于网页的最底层，文字和图片等都位于它的上方。 基本语法：示例：设定页面背景平铺效果显示2.4背景图片固定属性 BgProperties 背景图片固定，是指不论浏览器的滚动条如何拖动，背景永远固定在相同位置，并不会随着文字的滚动而滚动。
3、 基本语法：示例：设定页面效果背景图片固定显示2.5上边距属性 TopMargin 定义页面的上边距，即内容和浏览器上部边框之间的距离。 基本语法：示例：设定页面上边距为302.6左边距属性 LeftMargin 定义页面的左边距，即内容和浏览器左部边框之间的距离。 基本语法： 示例：设定页面左边距为30第三节 文字内容3.1输入普通文字示例：3.2输入空格符号示例： 3.3输入常用特殊符号特殊符号符号码“"&>示例：3.4注释语句基本语法：基本语法：示例：3.5标题字标记标题文字就是以某几种固定的字号去显示文字基本语法：定义六级标题，从一到六级，每级标题的字体大小依
4、次递减标记描述一级标题二级标题三级标题四级标题五级标题六级标题示例：3.6定义标题字对齐属性基本语法：属性描述标题左对齐标题中对齐标题右对齐示例：3.7文字修饰标记标记描述粗体粗体斜体斜体斜体上标下标大字体小字体下划线删除线删除线示例：3.8字体标记Font属性描述face字体size字号 从1到7 逐渐增大color颜色示例：第四节 段落标记 在html中，使用标记来表示段落。4.1定义段落对齐属性基本语法：属性描述段落左对齐段落中对齐段落右对齐示例：4.2换行标记与强制换行标记标记描述换行文字过长时，强制浏览器不换行。在默认情况下，浏览器会对较长文字进行自动换行。示例：4.3预格式化标记
5、保留文字在源代码中的格式，浏览器在显示内容时，会完全按照其真正的文本格式来显示。基本语法：示例：第五节 水平线标记 水平线用于段落与段落之间的分割，使文档结构更加清晰。5.1插入水平线基本语法：示例：5.2水平线属性设置基本语法：属性描述语法width设置水平线宽度size设置水平线高度noshade水平线去除阴影color设置水平线颜色align在水平方向上，设置居中、居左和居右示例：第六节 列表标记在html页面中，列表可以起到提纲挈领的作用。列表分为两种类型：列表类型描述有序列表 按照数字或字母等顺序排列列表项目无序列表按照项目符号来标记无序的列表项目 6.1有序列表设置基本语法： 项目
6、1项目2项目3标记描述ol有序列表li列表项目属性描述type1 数字1、2、3a 小写字母 a、b、cA 大写字母A、B、Ci 小写罗马数字I 大写罗马数字start设置有序列表项目的起始值示例：6.2无序列表设置基本语法： 项目1项目2项目3标记描述ul无序列表li列表项目属性描述typedisc circle square 示例：6.3无序列表和有序列表的嵌套（难点）示例：6.4定义列表标记（选学）定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号，类似于字典词条一样。基本语法： 名词一解释一名词二解释二名词三解释三标记描述dl定义列表的
7、声明dt名词标题dd解释名词示例：6.5定义列表的嵌套（难点）示例：第七节 插入图片 在html页面中可以使用标记插入图片，网页中常用的图片格式为JPEG和GIF。标记需要配合其它属性来完成工作属性描述src图片所在路径alt鼠标移动到图片上时显示的提示文字width、height图片宽度和高度border设置图片边框宽度vspace设置图片与文字的上下距离hspace设置图片与文字的左右距离alignTop 文字的中间线位于图片上方Middle 文字的中间线位于图片中间Bottom 文字的中间线位于图片底部Left 文字位于图片左侧Right 文字位于图片右侧示例：第八节 多媒体页面之滚动文
8、字在HTML页面中通过 标记可以实现如字幕一般的滚动文字效果，在一个排版整齐的页面中，添加适当的滚动文字可以使页面更有动感。8.1滚动方向属性Direction 基本语法：滚动文字direction属性值描述up滚动文字向上down滚动文字向下left滚动文字向左right滚动文字向右示例：8.2滚动方式属性Behavior 基本语法：滚动文字behavior属性值描述scroll循环往复slide下只进行一次滚动alternate交替进行滚动示例：8.3滚动速度属性ScrollAmount 基本语法：滚动文字示例：8.4滚动延迟属性ScrollDelay 基本语法：滚动文字示例：8.5滚动循环属性Loop 基本语法：滚动文字示例：8.6滚动范围属性Width、Height 基本语法：滚动文字示例：8.7滚动背景属性BgColor 基本语法：滚动文字示例：第九节 嵌入多媒体内容在页面中可以放置mp3、电影、swf动画等多种多媒体内容。基本语法：embed src
