HTML和CSS的简单教程

1、.HTML 简明讲义第一节 HTML基础1.1什么是HTML是一种超文本标记语言（HyperTextMarkupLanguage）超文本：包含有链接关系的文本，且包含多媒体对象的文件。1.2 HTML标记的格式1.3 HTML 文档的基本结构欢迎进入 HTML 世界这会是一种很有趣的体验第二节 页面的主体标记 网页的主体部分位于和这两个标记之间，放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。2.1文字颜色属性Text 在没有对文字进行单独定义颜色时，这个属性对页面中的所有文字产生作用。 基本语法：常用color_value颜色颜色名称十六进制代码黑色black#000000绿色g

2、reen#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滚动

9、循环属性Loop 基本语法：滚动文字示例：8.6滚动范围属性Width、Height 基本语法：滚动文字示例：8.7滚动背景属性BgColor 基本语法：滚动文字示例：第九节 嵌入多媒体内容在页面中可以放置mp3、电影、swf动画等多种多媒体内容。基本语法：滚动文字示例：第十节 嵌入背景音乐使用标记可以嵌入多种格式的背景音乐，最常用的为mid格式的文件。基本语法：示例：背景音乐循环次数属性基本语法：基本语法：示例：第十一节 使用表格 表格是用于排列内容的最佳手段，在html页面中，绝大多数页面都是使用表格进行排版。11.1表格相关标记标记描述表格标记行标记单元格标记表格标题标记表格表头标记示例

10、：制作一个三行两列的表格11.2表格标记属性设置属性描述border设置表格边框线宽度width、height设置表格的宽度和高度bordercolor设置表格边框颜色borderlight设置表格亮边框颜色（左上边框颜色）bordercolordark设置表格暗边框颜色（右下边框颜色）bgcolor设置表格背景颜色background设置表格背景图片align设置表格对齐方式cellspacing设置表格单元格和单元格之间的距离cellpadding设置单元格内容和边框之间的距离示例11.3表格标题标记 在html中通过在标记中使用标记为表格添加标题，而且可以控制标题文字的排列属性。 基本语

11、法： 属性描述align设置标题文字的水平对齐方式（left、center、right）lvalign设置标题文字的垂直对齐方式（top、bottom）示例11.4表格表头标记 表头指的是表格的第一行，在html中通过在标记中使用标记为表格设置表头，表头中的文字可以实现居中并且加粗显示。 基本语法： 示例11.5行标记属性设置属性描述bordercolor设置行的边框颜色borderlight设置行的亮边框颜色（左上边框颜色）bordercolordark设置行的暗边框颜色（右下边框颜色）bgcolor设置行的背景颜色background设置行的背景图片align设置行内容水平对齐方式vali

12、gn设置行内容垂直对齐方式示例11.6单元格属性设置、属性描述align设置单元格内容水平对齐方式valign设置单元格内容垂直对齐方式width、height设置单元格的宽度和高度bgcolor设置单元格背景颜色background设置单元格背景图片bordercolor设置单元格边框颜色borderlight设置单元格亮边框颜色（左上边框颜色）bordercolordark设置单元格暗边框颜色（右下边框颜色）示例11.7跨行属性在复杂的表格结构中，有的单元格在水平方向上是跨多个单元格的，这就需要使用跨行属性rowspan。基本语法：语法解释：value代表单元格跨的行数。示例11.8跨列属

13、性在复杂的表格结构中，有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨列属性colspan。基本语法：语法解释：value代表单元格跨的列数。示例11.9表格嵌套（重点）示例第十二节 建立超链接超链接是网页页面中最重要的元素之一，一个网站是由多个页面组成的，页面之间依据链接确定相互的导航关系。12.1链接标记 链接虽然在网站设计中占有不可替代的地位，但是其标记只有一个，那就是标记。链接标记具有如下属性： 属性描述href指定链接地址name给链接命名title链接提示文字target指定链接的目标窗口示例12.2关于链接路径链接路径类型描述绝对路径.c

14、n相对路径1、 要链接到同一目录下的文件时，只需要输入要链接文件的名称2、 要链接到下一级目录中的文件，只需要先输入目录名，然后加“/”，再输入文件名3、 要链接到上一级目录中的文件，则先输入“./”，再输入目录名、文件名根路径以“/”开头，代表根目录，再输入目录名、文件名示例12.3内部链接 所谓内部链接，是指在同一网站内部，不同html页面之间的链接关系。基本语法：链接文字示例target属性描述_parent在上一级窗口中打开，经常使用于分帧的框架页_blank在新窗口中打开_self在同一个窗口中打开，默认设置_top在浏览器的整个窗口中打开，忽略任

15、何框架12.4书签链接 建立书签链接，分为两步：一是建立书签，二是为书签建立链接。基本语法：书签链接文字 链接文字 链接文字示例target属性描述_parent在上一级窗口中打开，经常使用于分帧的框架页_blank在新窗口中打开_self在同一个窗口中打开，默认设置_top在浏览器的整个窗口中打开，忽略任何框架12.5外部链接 所谓外部链接，是指跳转到当前网站外部，和其他网站中的页面或者其他元素之间的链接关系。服务url格式描述wwwhttp:/链接到外部网站ftpftp:/链接到文件传输服务器e-mailmailto:启动邮件基本语法：链接文字链接文字链接文字第十三节 建立页面表单 Htm

16、l表单是html页面与浏览器实现交互的主要手段，利用表单可以收集客户端提交的有关信息。表单是网站实现交互功能的重要组成部分。13.1表单标记基本语法： .属性描述Name表单的名称Method定义表单结果从浏览器传送到服务器的方法，一般有两种：get、postAction用来定义表单处理程序 在标记中，可以包含以下四个标记：标记描述表单输入标记菜单和列表标记菜单和列表项目标记文本域标记13.2输入标记输入标记是表单中最常用的标记之一，常用的文本域、按钮等都使用这个笔记。基本语法： 属性描述Name域的名称Type域的类型 在type属性中，可以包含以下属性值：Type属性值描述Text文字域P

17、assword密码域File文件域Checkbox复选框Radio单选框Button普通按钮Submit提交按钮Reset重置按钮Hidden隐藏域Image图像域（图像提交按钮）13.3文字域text在文字域中可以输入任何类型的文本、数字或字母，输入内容以单行显示。基本语法：属性描述Name文字域的名称Maxlength文字域最大输入字符数Size文字域的宽度Value文字域的默认值13.4密码域password在密码域中可以输入的文字以“*”星号显示。基本语法：13.5文件域file可以通过文件域上传文件。基本语法：13.6复选框checkbox基本语法： 语法注释：checked表示此项

18、被默认选中； value表示选中项目后提交给服务器端的值。13.7单选框radio基本语法： 语法注释：checked表示此项被默认选中； value表示选中项目后提交给服务器端的值。13.8普通按钮button基本语法： 语法注释：value表示表示显示在按钮上的文字。13.9提交按钮submit单击提交按钮后，可以实现表单内容的提交。基本语法：13.10重置按钮reset单击重置按钮后，可以清除表单的内容，恢复成默认的表单内容设定。基本语法：13.11图像域image图像域是指可以用于提交按钮位置上的图片，这幅图片具有按钮功能。基本语法：13.12隐藏域hidden隐藏域在页面中对于用户是

19、不可见的。基本语法：13.13菜单和列表标记基本语法： 属性描述Name菜单或列表名称Multiple列表中的项目多选Size显示的选项数目Value选项值Selected默认选项13.14文本域标记制作多行的文字域。基本语法：属性描述Name文本域名称Rows文本域的行数Cols文本域的列数Value文本域的默认值第十四节 元信息标记 元信息标记的功能是定义页面中的信息，这些文件信息不会出现在网页的显示之中，只会出现在原源代码中。通过标记的属性可以提供页面的关键字、作者、描述等多种信息。属性描述http-equiv生成一个http标题域Name元信息关键字Content关键字取值内容14.1

20、设定关键字关键字是为搜索引擎提供的，关键字之间用逗号隔开。基本语法：14.2设定描述用以描述网站的主题，供搜索引擎寻找网页。基本语法：14.3设定作者用以显示页面作者姓名及个人信息。基本语法：14.4设定字符集基本语法： 将Charset设置为gb2312时，页面字符集为简体中文。14.5设定自动刷新基本语法： value为页面刷新间隔秒数。14.6设定自动跳转基本语法： value为页面跳转间隔秒数；url_value为页面跳转后打开的文件地址。第十五节 CSS样式表概述15.1什么是CSSCSS（cascading style sheets）中文翻译为“层叠样式表”，简称样式表。 CSS可

21、以弥补html对网页格式化功能的不足，比如段落间距、行距；字体变化和大小；页面格式的动态更新；排版定位等。 15.2 css基本语法css样式主要由三部分组成选择器 selector属性名 property属性值 value示例P font-size:25px; color:blank15.3 css的三种写法内嵌样式（inline style）内部样式表（internal style sheet）外部样式表（external style sheet）内嵌样式 inline style 以属性的形式直接在html标记中给出，用于设置该标记所定义信息的显示效果。内嵌样式只对其所在的标记有效示例

22、1501.html内部样式表 internal style sheet 在html页面的头信息元素中给出，可以同时设置多个标记所定义信息的显示效果。内部样式表只对所在的网页有效 示例1502.html外部样式表 external style sheet 外部样式表将样式设置保存到独立的外部文件中，然后在要使用这些样式的html页面中进行引用。外部样式表为纯文本文件，后缀为.css；外部样式表可被应用到多个页面中示例1503.html15.4样式的优先级-样式继承 XHTML中的子标签会继承部分父标签的样式特征。例如：定义bodycolor:red;，那么页面中body之下所有的标签及标签下的所有子标签的文本都将变为红色。示例1504.html15.5样式的优先级-!important 在两行相同类型的CSS样式定义中，往往优先执行后面一个，可以通过!important语法，提升某一句样