HTML和CSS的简单教程

HTML简明讲义第一节HTML基础1.1什么是HTML是一种超文本标记语言（HyperTextMarkupLanguage）超文本：包含有链接关系的文本，且包含多媒体对象的文件。1.2HTML标记的格式ELEMENTATTRIBUTE=value标识标记属性=“值”1.3HTML文档的基本结构HTMLHEADTITLE欢迎进入HTML世界/TITLE/HEADBODY这会是一种很有趣的体验/BODY/HTML第二节页面的主体标记网页的主体部分位于body和/body这两个标记之间，放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。2.1文字颜色属性Text在没有对文字进行单独定义颜色时，这个属性对页面中的所有文字产生作用。基本语法：bodytext=”color_value”常用color_value颜色颜色名称十六进制代码黑色black#000000绿色green#009900灰色gray#808080白色white#FFFFFF黄色yellow#FFFF00红色red#FF0000蓝色blue#0000FF示例：设定页面文字颜色为蓝色2.2背景颜色属性BgColor设定整个页面的背景颜色。基本语法：bodybgcolor=”color_value”示例：设定页面背景颜色为深蓝色（#336699），文字颜色为白色2.3背景图片属性BackGround背景图片位于网页的最底层，文字和图片等都位于它的上方。基本语法：bodybackground=”img-file-url”示例：设定页面背景平铺效果显示2.4背景图片固定属性BgProperties背景图片固定，是指不论浏览器的滚动条如何拖动，背景永远固定在相同位置，并不会随着文字的滚动而滚动。基本语法：bodybgproperties=”fixed”示例：设定页面效果背景图片固定显示2.5上边距属性TopMargin定义页面的上边距，即内容和浏览器上部边框之间的距离。基本语法：bodytopmargin=”value”示例：设定页面上边距为302.6左边距属性LeftMargin定义页面的左边距，即内容和浏览器左部边框之间的距离。基本语法：bodyleftmargin=”value”示例：设定页面左边距为30第三节文字内容3.1输入普通文字示例：3.2输入空格符号示例： 3.3输入常用特殊符号特殊符号符号码“"&&<>示例：3.4注释语句基本语法：comment……/comment基本语法：!--……--示例：3.5标题字标记标题文字就是以某几种固定的字号去显示文字基本语法：定义六级标题，从一到六级，每级标题的字体大小依次递减标记描述h1……/h1一级标题h2……/h2二级标题h3……/h3三级标题h4……/h4四级标题h5……/h5五级标题h6……/h6六级标题示例：3.6定义标题字对齐属性基本语法：属性描述hnalign=left……/hn标题左对齐hnalign=center……/hn标题中对齐hnalign=right……/hn标题右对齐示例：3.7文字修饰标记标记描述b粗体strong粗体i斜体em斜体cite斜体sup上标sub下标big大字体small小字体u下划线s删除线strike删除线示例：3.8字体标记Font属性描述face字体size字号从1到7逐渐增大color颜色示例：第四节段落标记在html中，使用p……/p标记来表示段落。4.1定义段落对齐属性基本语法：属性描述palign=left……/p段落左对齐palign=center……/p段落中对齐palign=right……/p段落右对齐示例：4.2换行标记与强制换行标记brnobr标记描述br换行nobr文字过长时，强制浏览器不换行。在默认情况下，浏览器会对较长文字进行自动换行。示例：4.3预格式化标记pre保留文字在源代码中的格式，浏览器在显示内容时，会完全按照其真正的文本格式来显示。基本语法：pre……/pre示例：第五节水平线标记水平线用于段落与段落之间的分割，使文档结构更加清晰。5.1插入水平线基本语法：hr示例：5.2水平线属性设置基本语法：属性描述语法width设置水平线宽度hrwidth=valuehrwidth=value%size设置水平线高度hrsize=valuenoshade水平线去除阴影hrnoshadecolor设置水平线颜色hrcolor=valuealign在水平方向上，设置居中、居左和居右hralign=lefthralign=centerhralign=right示例：第六节列表标记在html页面中，列表可以起到提纲挈领的作用。列表分为两种类型：列表类型描述有序列表按照数字或字母等顺序排列列表项目无序列表按照项目符号来标记无序的列表项目6.1有序列表设置基本语法：oltype=”value”start=”value’li项目1li项目2li项目3……/ol标记描述ol有序列表li列表项目属性描述type1数字1、2、3……a小写字母a、b、c……A大写字母A、B、C……i小写罗马数字I大写罗马数字start设置有序列表项目的起始值示例：6.2无序列表设置基本语法：ultype=”value”li项目1li项目2li项目3……/ul标记描述ul无序列表li列表项目属性描述typedisccirclesquare示例：6.3无序列表和有序列表的嵌套（难点）示例：6.4定义列表标记（选学）定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号，类似于字典词条一样。基本语法：dldt名词一dd解释一dt名词二dd解释二dt名词三dd解释三……/dl标记描述dl定义列表的声明dt名词标题dd解释名词示例：6.5定义列表的嵌套（难点）示例：第七节插入图片在html页面中可以使用img标记插入图片，网页中常用的图片格式为JPEG和GIF。img标记需要配合其它属性来完成工作属性描述src图片所在路径alt鼠标移动到图片上时显示的提示文字width、height图片宽度和高度border设置图片边框宽度vspace设置图片与文字的上下距离hspace设置图片与文字的左右距离alignTop文字的中间线位于图片上方Middle文字的中间线位于图片中间Bottom文字的中间线位于图片底部Left文字位于图片左侧Right文字位于图片右侧示例：第八节多媒体页面之滚动文字在HTML页面中通过marquee……/marquee标记可以实现如字幕一般的滚动文字效果，在一个排版整齐的页面中，添加适当的滚动文字可以使页面更有动感。8.1滚动方向属性Direction基本语法：marqueedirection=”value”滚动文字/marqueedirection属性值描述up滚动文字向上down滚动文字向下left滚动文字向左right滚动文字向右示例：8.2滚动方式属性Behavior基本语法：marqueebehavior=”value”滚动文字/marqueebehavior属性值描述scroll循环往复slide下只进行一次滚动alternate交替进行滚动示例：8.3滚动速度属性ScrollAmount基本语法：marqueescrollamount=”value”滚动文字/marquee示例：8.4滚动延迟属性ScrollDelay基本语法：marqueescrolldelay=”value”滚动文字/marquee示例：8.5滚动循环属性Loop基本语法：marqueeloop=”value”滚动文字/marquee示例：8.6滚动范围属性Width、Height基本语法：marqueewidth=”value”height=”value”滚动文字/marquee示例：8.7滚动背景属性BgColor基本语法：marqueebgcolor=”color_value”滚动文字/marquee示例：第九节嵌入多媒体内容在页面中可以放置mp3、电影、swf动画等多种多媒体内容。基本语法：embedsrc=”file_url”width=”value”height=”value”滚动文字/embed示例：第十节嵌入背景音乐使用bgsound标记可以嵌入多种格式的背景音乐，最常用的为mid格式的文件。基本语法：bgsoundsrc=”file_url”示例：背景音乐循环次数属性基本语法：bgsoundsrc=”file_url”loop=”value”基本语法：bgsoundsrc=”file_url”loop=”infinite”示例：第十一节使用表格表格是用于排列内容的最佳手段，在html页面中，绝大多数页面都是使用表格进行排版。11.1表格相关标记标记描述table……/table表格标记tr……/tr行标记td……/td单元格标记caption……/caption表格标题标记th……/th表格表头标记示例：制作一个三行两列的表格11.2表格标记属性设置table属性描述border设置表格边框线宽度width、height设置表格的宽度和高度bordercolor设置表格边框颜色borderlight设置表格亮边框颜色（左上边框颜色）bordercolordark设置表格暗边框颜色（右下边框颜色）bgcolor设置表格背景颜色background设置表格背景图片align设置表格对齐方式cellspacing设置表格单元格和单元格之间的距离cellpadding设置单元格内容和边框之间的距离示例11.3表格标题标记caption在html中通过在table标记中使用caption……/caption标记为表格添加标题，而且可以控制标题文字的排列属性。基本语法：tablecaption……/caption……/table属性描述align设置标题文字的水平对齐方式（left、center、right）lvalign设置标题文字的垂直对齐方式（top、bottom）示例11.4表格表头标记th表头指的是表格的第一行，在html中通过在table标记中使用th……/th标记为表格设置表头，表头中的文字可以实现居中并且加粗显示。基本语法：tabletrth…/th……/trtrtd…/td……/tr……/table示例11.5行标记属性设置tr属性描述bordercolor设置行的边框颜色borderlight设置行的亮边框颜色（左上边框颜色）bordercolordark设置行的暗边框颜色（右下边框颜色）bgcolor设置行的背景颜色background设置行的背景图片align设置行内容水平对齐方式valign设置行内容垂直对齐方式示例11.6单元格属性设置td、th属性描述align设置单元格内容水平对齐方式valign设置单元格内容垂直对齐方式width、height设置单元格的宽度和高度bgcolor设置单元格背景颜色background设置单元格背景图片bordercolor设置单元格边框颜色borderlight设置单元格亮边框颜色（左上边框颜色）bordercolordark设置单元格暗边框颜色（右下边框颜色）示例11.7跨行属性rowspan在复杂的表格结构