HTML和CSS的简单教程
-HTML 简明讲义第一节 HTML根底1.1什么是HTML是一种超文本标记语言HyperTe*tMarkupLanguage超文本：包含有关系的文本，且包含多媒体对象的文件。1.2 HTML标记的格式<ELEMENT ATTRIBUTE = value><标识标记 属性="值>1.3 HTML 文档的根本构造<HTML><HEAD><TITLE>欢送进入 HTML 世界</TITLE></HEAD><BODY>这会是一种很有趣的体验</BODY></HTML>第二节 页面的主体标记 网页的主体局部位于<body>和</body>这两个标记之间，放置的是页面中的所有容，如文字、图片、表格、表单等。2.1文字颜色属性Te*t在没有对文字进展单独定义颜色时，这个属性对页面中的所有文字产生作用。根本语法：<body te*t=color_value>常用color_value颜色颜色名称十六进制代码黑色black#000000绿色green#009900灰色gray#808080白色white#FFFFFF黄色yellow#FFFF00红色red#FF0000蓝色blue#0000FF例如：设定页面文字颜色为蓝色2.2背景颜色属性BgColor 设定整个页面的背景颜色。 根本语法：<body bgcolor=color_value>例如：设定页面背景颜色为深蓝色#336699，文字颜色为白色2.3背景图片属性BackGround 背景图片位于网页的最底层，文字和图片等都位于它的上方。 根本语法：<body background=img-file-url>例如：设定页面背景平铺效果显示2.4背景图片固定属性 BgProperties 背景图片固定，是指不管浏览器的滚动条如何拖动，背景永远固定在一样位置，并不会随着文字的滚动而滚动。 根本语法：<body bgproperties=fi*ed>例如：设定页面效果背景图片固定显示2.5上边距属性 TopMargin 定义页面的上边距，即容和浏览器上部边框之间的距离。 根本语法：<body topmargin=value>例如：设定页面上边距为302.6左边距属性 LeftMargin 定义页面的左边距，即容和浏览器左部边框之间的距离。 根本语法：<body leftmargin =value> 例如：设定页面左边距为30第三节 文字容3.1输入普通文字例如：3.2输入空格符号例如： 3.3输入常用特殊符号特殊符号符""&&<<>>例如：3.4注释语句根本语法：<ment></ment>根本语法：<!- ->例如：3.5标题字标记标题文字就是以*几种固定的字号去显示文字根本语法：定义六级标题，从一到六级，每级标题的字体大小依次递减标记描述<h1></h1>一级标题<h2></h2>二级标题<h3></h3>三级标题<h4></h4>四级标题<h5></h5>五级标题<h6></h6>六级标题例如：3.6定义标题字对齐属性根本语法：属性描述<hn align=left></hn>标题左对齐<hn align=center></hn>标题中对齐<hn align=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定义段落对齐属性根本语法：属性描述<p align=left></p>段落左对齐<p align=center></p>段落中对齐<p align=right></p>段落右对齐例如：4.2换行标记与强制换行标记<br><nobr>标记描述<br>换行<nobr>文字过长时，强制浏览器不换行。在默认情况下，浏览器会对较长文字进展自动换行。例如：4.3预格式化标记<pre> 保存文字在源代码中的格式，浏览器在显示容时，会完全按照其真正的文本格式来显示。根本语法：<pre></pre>例如：第五节 水平线标记 水平线用于段落与段落之间的分割，使文档构造更加清晰。5.1插入水平线根本语法：<hr>例如：5.2水平线属性设置根本语法：属性描述语法width设置水平线宽度<hr width=value><hr width=value%>size设置水平线高度<hr size=value>noshade水平线去除阴影<hr noshade>color设置水平线颜色<hr color=value>align在水平方向上，设置居中、居左和居右<hr align=left><hr align=center><hralign=right>例如：第六节 列表标记在html页面中，列表可以起到提纲挈领的作用。列表分为两种类型：列表类型描述有序列表 按照数字或字母等顺序排列列表工程无序列表按照工程符号来标记无序的列表工程6.1有序列表设置根本语法：<ol type=value start=value> <li>工程1<li>工程2<li>工程3</ol>标记描述ol有序列表li列表工程属性描述type1 数字1、2、3a 小写字母 a、b、cA 大写字母A、B、Ci 小写罗马数字I 大写罗马数字start设置有序列表工程的起始值例如：6.2无序列表设置根本语法：<ul type=value> <li>工程1<li>工程2<li>工程3</ul>标记描述ul无序列表li列表工程属性描述typedisccirclesquare例如：6.3无序列表和有序列表的嵌套难点例如：6.4定义列表标记选学定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含工程符号，类似于字典词条一样。根本语法：<dl > <dt>名词一<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 根本语法：<marquee direction=value >滚动文字</marquee>direction属性值描述up滚动文字向上down滚动文字向下left滚动文字向左right滚动文字向右例如：8.2滚动方式属性Behavior 根本语法：<marquee behavior=value >滚动文字</marquee>behavior属性值描述scroll循环往复slide下只进展一次滚动alternate交替进展滚动例如：8.3滚动速度属性ScrollAmount 根本语法：<marquee scrollamount=value >滚动文字</marquee>例如：8.4滚动延迟属性ScrollDelay 根本语法：<marquee scrolldelay=value >滚动文字</marquee>例如：8.5滚动循环属性Loop 根本语法：<marquee loop=value >滚动文字</marquee>例如：8.6滚动围属性Width、Height 根本语法：<marquee width=valueheight=value>滚动文字</marquee>例如：8.7滚动背景属性BgColor 根本语法：<marquee bgcolor=color_value >滚动文字</marquee>例如：第九节 嵌入多媒体容在页面中可以放置mp3、电影、swf动画等多种多媒体容。根本语法：<embed src=file_url width=value height=value>滚动文字</embed>例如：第十节 嵌入背景音乐使用<bgsound>标记可以嵌入多种格式的背景音乐，最常用的为mid格式的文件。根本语法：<bgsound src=file_url>例如：背景音乐循环次数属性根本语法：<bgsound src=file_url loop=value>根本语法：<bgsound src=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>标记为表格添加标题，而且可以控制标题文字的排列属性。 根本语法： <table><caption ></caption> </table>属性描述align设置标题文字的水平对齐方式left、center、rightlvalign设置标题文字的垂直对齐方式top、bottom例如11.4表格表头标记<th> 表头指的是表格的第一行，在html过在<table>标记中使用<th></th>标记为表格设置表头，表头中的文字可以实现居中并且加粗显示。 根本语法： <table><tr><th></th></tr><tr> <td></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>在复杂的表格构造中，有的单元格在水平方向上是跨多个单元格的，这就需要使用跨行属性rowspan。根本语法：<td rowspan=value>语法解释：value代表单元格跨的行数。例如11.8跨列属性<colspan>在复杂的表格构造中，有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨列属性colspan。根本语法：<td colspan=value>语法解释：value代表单元格跨的列数。例如11.9表格嵌套重点例如第十二节 建立超超是网页页面中最重要的元素之一，一个是由多个页面组成的，页面之间依据确定相互的导航关系。12.1标记 虽然在设计中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。标记具有如下属性：属性描述href指定地址name给命名title提示文字target指定的目标窗口例如12.2关于路径路径类型描述绝对路径.sina.相对路径1、 要到同一目录下的文件时，只需要输入要文件的名称2、 要到下一级目录中的文件，只需要先输入目录名，然后加"/，再输入文件名3、 要到上一级目录中的文件，则先输入"./，再输入目录名、文件名根路径以"/开头，代表根目录，再输入目录名、文件名例如12.3部 所谓部，是指在同一部，不同html页面之间的关系。根本语法：<a href=file_url target=value>文字</a>例如target属性描述_parent在上一级窗口中翻开，经常使用于分帧的框架页_blank在新窗口中翻开_self在同一个窗口中翻开，默认设置_top在浏览器的整个窗口中翻开，忽略任何框架12.4书签 建立书签，分为两步：一是建立书签，二是为书签建立。根本语法：<a name =bookmark_name>书签文字</a> <a href ="#bookmark_name>文字</a> <a href = "file_url#bookmark_name >文字</a>例如target属性描述_parent在上一级窗口中翻开，经常使用于分帧的框架页_blank在新窗口中翻开_self在同一个窗口中翻开，默认设置_top在浏览器的整个窗口中翻开，忽略任何框架12.5外部 所谓外部，是指跳转到当前外部，和其他中的页面或者其他元素之间的关系。效劳url格式描述到外部ftpftp:/到文件传输效劳器mailto:启动根本语法：<a href =>文字</a><a href =ftp:/>文字</a><a href =mailto:>文字</a>第十三节 建立页面表单Html表单是html页面与浏览器实现交互的主要手段，利用表单可以收集客户端提交的有关信息。表单是实现交互功能的重要组成局部。13.1表单标记<form>根本语法：<form name=form_name method=method action=url>.</form>属性描述Name表单的名称Method定义表单结果从浏览器传送到效劳器的方法，一般有两种：get、postAction用来定义表单处理程序 在<form>标记中，可以包含以下四个标记：标记描述<input>表单输入标记<select>菜单和列表标记<option>菜单和列表工程标记<te*tarea>文本域标记13.2输入标记<input>输入标记<input>是表单中最常用的标记之一，常用的文本域、按钮等都使用这个笔记。根本语法：<form><input name=field_name type=type_name></form>属性描述Name域的名称Type域的类型 在type属性中，可以包含以下属性值：Type属性值描述Te*t文字域Password密码域File文件域Checkbo*复选框Radio单项选择框Button普通按钮Submit提交按钮Reset重置按钮Hidden隐藏域Image图像域图像提交按钮13.3文字域te*t在文字域中可以输入任何类型的文本、数字或字母，输入容以单行显示。根本语法：<input type=te*t name=field_name ma*length=valuesize=value value=field_value>属性描述Name文字域的名称Ma*length文字域最大输入字符数Size文字域的宽度Value文字域的默认值13.4密码域password在密码域中可以输入的文字以"*星号显示。根本语法：<input type=password name=field_name ma*length=valuesize=value >13.5文件域file可以通过文件域上传文件。根本语法：<input type=file name=field_name>13.6复选框checkbo*根本语法：<input type=checkbo* name=field_name checked value=value> 语法注释：checked表示此项被默认选中； value表示选中工程后提交给效劳器端的值。13.7单项选择框radio根本语法：<input type=radio name=field_name checked value=value> 语法注释：checked表示此项被默认选中； value表示选中工程后提交给效劳器端的值。13.8普通按钮button根本语法：<input type=button name=field_name value=button_te*t> 语法注释：value表示表示显示在按钮上的文字。13.9提交按钮submit单击提交按钮后，可以实现表单容的提交。根本语法：<input type=submit name=field_name value=button_te*t>13.10重置按钮reset单击重置按钮后，可以去除表单的容，恢复成默认的表单容设定。根本语法：<input type=reset name=field_name value=button_te*t>13.11图像域image图像域是指可以用于提交按钮位置上的图片，这幅图片具有按钮功能。根本语法：<input type=image name=field_name src=image_url>13.12隐藏域hidden隐藏域在页面中对于用户是不可见的。根本语法：<input type=hidden name=field_name value=value>13.13菜单和列表标记<select><option>根本语法：<select name=name size=value multiple> <option value=value selected> <option value=value></select>属性描述Name菜单或列表名称Multiple列表中的工程多项选择Size显示的选项数目Value选项值Selected默认选项13.14文本域标记<te*tarea >制作多行的文字域。根本语法：<te*tarea name=name rows=value cols=value value=value></te*tarea>属性描述Name文本域名称Rows文本域的行数Cols文本域的列数Value文本域的默认值第十四节 元信息标记元信息标记<meta>的功能是定义页面中的信息，这些文件信息不会出现在网页的显示之中，只会出现在原源代码中。通过<meta>标记的属性可以提供页面的关键字、作者、描述等多种信息。属性描述 -equiv生成一个 标题域Name元信息关键字Content关键字取值容14.1设定关键字关键字是为搜索引擎提供的，关键字之间用逗号隔开。根本语法：<meta name=keywords content=value>14.2设定描述用以描述的主题，供搜索引擎寻找网页。根本语法：<meta name=discription content=value>14.3设定作者用以显示页面作者及个人信息。根本语法：<meta name=author content=value>14.4设定字符集根本语法：<meta -equiv=content-type content=te*t/html;charset=value> 将Charset设置为gb2312时，页面字符集为简体中文。14.5设定自动刷新根本语法：<meta -equiv=refresh content=value>value为页面刷新间隔秒数。14.6设定自动跳转根本语法：<meta -equiv=refresh content=value;url=url_value>value为页面跳转间隔秒数；url_value为页面跳转后翻开的文件地址。第十五节 CSS样式表概述15.1什么是CSSCSScascading style sheets中文翻译为"层叠样式表，简称样式表。 CSS可以弥补html对网页格式化功能的缺乏，比方段落间距、行距；字体变化和大小；页面格式的动态更新；排版定位等。15.2 css根本语法css样式主要由三局部组成选择器 selector属性名 property属性值 value例如Pfont-size:25p*; color:blank15.3 css的三种写法嵌样式inline style部样式表internal style sheet外部样式表e*ternal style sheet嵌样式 inline style 以属性的形式直接在html标记中给出，用于设置该标记所定义信息的显示效果。嵌样式只对其所在的标记有效例如1501.html部样式表 internal style sheet 在html页面的头信息元素<head>中给出，可以同时设置多个标记所定义信息的显示效果。部样式表只对所在的网页有效 例如1502.html外部样式表 e*ternal style sheet 外部样式表将样式设置保存到独立的外部文件中，然后在要使用这些样式的html页面中进展引用。外部样式表为纯文本文件，后缀为.css；外部样式表可被应用到多个页面中例如1503.html15.4样式的优先级-样式继承*HTML中的子标签会继承局部父标签的样式特征。例如：定义bodycolor:red;，则页面中body之下所有的标签及标签下的所有子标签的文本都将变为红色。例如1504.html15.5样式的优先级-!important 在两行一样类型的CSS样式定义中，往往优先执行后面一个，可以通过!important语法，提升*一句样式表的重要性，使其优先执行。例如1505.html15.6 CSS语法构造-类型选择符指网页中已有的标签名作为名称的选择符，body是网页中的一个标签，p也是。因此以下的选择符都是类型选择符。bodyp15.7 CSS语法构造-群组选择符除了可以对单个*HTML对象进展样式指定外，同样可以对一组对象进展一样的样式指派，例如：h1,h2,h3,pfont-size:12p*;font-family:arial使用逗号对选择符进展分隔。15.8 CSS语法构造-包含选择符1.包含选择符指选择符组合中前一个对象包含了后一个对象，对象之间使用空格作为分隔符。例如：h1 span.2.包含选择符除了可以二者包含，也可以多级包含：例如： body h1 span .15.9 CSS语法构造-id及class选择符id及class均是CSS提供自定义标签名称的选择符。对于id与class而言，id的定义优先于class的定义。1.id选择符使用#符号进展标识#content .;2.class在CSS中使用点符号加上名称的形式定义(.p1.)。15.10 CSS选择器-伪类选择器超a:link font-size: 9pt; color: black; te*t-decoration: none;a:visited font-size: 9pt; color: black; te*t-decoration: underline;a:hover font-size: 9pt; color: green; te*t-decoration: none;a:active font-size: 9pt; color:blue; te*t-decoration: none;. z.
个人主页