HTML和CSS的简单教程_第1页
HTML和CSS的简单教程_第2页
HTML和CSS的简单教程_第3页
HTML和CSS的简单教程_第4页
HTML和CSS的简单教程_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML 简明讲义第一节 HTML基础1.1什么是HTML是一种超文本标记语言（HyperTextMarkupLanguage）超文本：包含有链接关系的文本，且包含多媒体对象的文件。1.2 HTML标记的格式<ELEMENT ATTRIBUTE = value><标识标记 属性=“值”>1.3 HTML 文档的基本结构<HTML><HEAD><TITLE>欢迎进入 HTML 世界</TITLE></HEAD><BODY>这会是一种很有趣的体验</BODY></HTML>第二节

2、 页面的主体标记 网页的主体部分位于<body>和</body>这两个标记之间，放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。2.1文字颜色属性Text 在没有对文字进行单独定义颜色时，这个属性对页面中的所有文字产生作用。 基本语法：<body text=”color_value”>常用color_value颜色颜色名称十六进制代码黑色black#000000绿色green#009900灰色gray#808080白色white#FFFFFF黄色yellow#FFFF00红色red#FF0000蓝色blue#0000FF示例：设定页面文字颜色为蓝

3、色2.2背景颜色属性BgColor 设定整个页面的背景颜色。 基本语法：<body bgcolor=”color_value”>示例：设定页面背景颜色为深蓝色（#336699），文字颜色为白色2.3背景图片属性BackGround 背景图片位于网页的最底层，文字和图片等都位于它的上方。 基本语法：<body background=”img-file-url”>示例：设定页面背景平铺效果显示2.4背景图片固定属性 BgProperties 背景图片固定，是指不论浏览器的滚动条如何拖动，背景永远固定在相同位置，并不会随着文字的滚动而滚动。 基本语法：<body bgp

4、roperties=”fixed”>示例：设定页面效果背景图片固定显示2.5上边距属性 TopMargin 定义页面的上边距，即内容和浏览器上部边框之间的距离。 基本语法：<body topmargin=”value”>示例：设定页面上边距为302.6左边距属性 LeftMargin 定义页面的左边距，即内容和浏览器左部边框之间的距离。 基本语法：<body leftmargin =”value”> 示例：设定页面左边距为30第三节 文字内容3.1输入普通文字示例：3.2输入空格符号示例：&nbsp3.3输入常用特殊符号特殊符号符号码“&quot&

5、amp;&amp<&lt>&gt示例：3.4注释语句基本语法：<comment></comment>基本语法：<!- ->示例：3.5标题字标记标题文字就是以某几种固定的字号去显示文字基本语法：定义六级标题，从一到六级，每级标题的字体大小依次递减标记描述<h1></h1>一级标题<h2></h2>二级标题<h3></h3>三级标题<h4></h4>四级标题<h5></h5>五级标题<h6>&l

6、t;/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>下划线&

7、lt;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

8、>换行<nobr>文字过长时，强制浏览器不换行。在默认情况下，浏览器会对较长文字进行自动换行。示例：4.3预格式化标记<pre> 保留文字在源代码中的格式，浏览器在显示内容时，会完全按照其真正的文本格式来显示。基本语法：<pre></pre>示例：第五节 水平线标记 水平线用于段落与段落之间的分割，使文档结构更加清晰。5.1插入水平线基本语法：<hr>示例：5.2水平线属性设置基本语法：属性描述语法width设置水平线宽度<hr width=value><hr width=value%>size设置水平线

9、高度<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”

10、 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列表项目属性描述typedisc circle square 示例：6.3无序

11、列表和有序列表的嵌套（难点）示例：6.4定义列表标记（选学）定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号，类似于字典词条一样。基本语法：<dl > <dt>名词一<dd>解释一<dt>名词二<dd>解释二<dt>名词三<dd>解释三</dl>标记描述dl定义列表的声明dt名词标题dd解释名词示例：6.5定义列表的嵌套（难点）示例：第七节 插入图片 在html页面中可以使用<img>标记插入图片，网页中常用的图片格式为JPEG和GIF

12、。<img>标记需要配合其它属性来完成工作属性描述src图片所在路径alt鼠标移动到图片上时显示的提示文字width、height图片宽度和高度border设置图片边框宽度vspace设置图片与文字的上下距离hspace设置图片与文字的左右距离alignTop 文字的中间线位于图片上方Middle 文字的中间线位于图片中间Bottom 文字的中间线位于图片底部Left 文字位于图片左侧Right 文字位于图片右侧示例：第八节 多媒体页面之滚动文字在HTML页面中通过<marquee></marquee> 标记可以实现如字幕一般的滚动文字效果，在一个排版整齐的

13、页面中，添加适当的滚动文字可以使页面更有动感。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滚动速度属性Scro

14、llAmount 基本语法：<marquee scrollamount=”value” >滚动文字</marquee>示例：8.4滚动延迟属性ScrollDelay 基本语法：<marquee scrolldelay=”value” >滚动文字</marquee>示例：8.5滚动循环属性Loop 基本语法：<marquee loop=”value” >滚动文字</marquee>示例：8.6滚动范围属性Width、Height 基本语法：<marquee width=”value” height=”value”>

15、;滚动文字</marquee>示例：8.7滚动背景属性BgColor 基本语法：<marquee bgcolor=”color_value” >滚动文字</marquee>示例：第九节 嵌入多媒体内容在页面中可以放置mp3、电影、swf动画等多种多媒体内容。基本语法：<embed src=”file_url” width=”value” height=”value”>滚动文字</embed>示例：第十节 嵌入背景音乐使用<bgsound>标记可以嵌入多种格式的背景音乐，最常用的为mid格式的文件。基本语法：<bgso

16、und 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>&l

17、t;/caption>表格标题标记<th></th>表格表头标记示例：制作一个三行两列的表格11.2表格标记属性设置<table>属性描述border设置表格边框线宽度width、height设置表格的宽度和高度bordercolor设置表格边框颜色borderlight设置表格亮边框颜色（左上边框颜色）bordercolordark设置表格暗边框颜色（右下边框颜色）bgcolor设置表格背景颜色background设置表格背景图片align设置表格对齐方式cellspacing设置表格单元格和单元格之间的距离cellpadding设置单元格内容和边框

18、之间的距离示例11.3表格标题标记<caption> 在html中通过在<table>标记中使用<caption></caption>标记为表格添加标题，而且可以控制标题文字的排列属性。 基本语法： <table><caption ></caption> </table>属性描述align设置标题文字的水平对齐方式（left、center、right）lvalign设置标题文字的垂直对齐方式（top、bottom）示例11.4表格表头标记<th> 表头指的是表格的第一行，在html中通过

19、在<table>标记中使用<th></th>标记为表格设置表头，表头中的文字可以实现居中并且加粗显示。 基本语法： <table><tr><th></th></tr><tr> <td></td> </tr> </table>示例11.5行标记属性设置<tr>属性描述bordercolor设置行的边框颜色borderlight设置行的亮边框颜色（左上边框颜色）bordercolordark设置行的暗边框颜色（右下边框颜色）bgco

20、lor设置行的背景颜色background设置行的背景图片align设置行内容水平对齐方式valign设置行内容垂直对齐方式示例11.6单元格属性设置<td>、<th>属性描述align设置单元格内容水平对齐方式valign设置单元格内容垂直对齐方式width、height设置单元格的宽度和高度bgcolor设置单元格背景颜色background设置单元格背景图片bordercolor设置单元格边框颜色borderlight设置单元格亮边框颜色（左上边框颜色）bordercolordark设置单元格暗边框颜色（右下边框颜色）示例11.7跨行属性<rowspan&g

21、t;在复杂的表格结构中，有的单元格在水平方向上是跨多个单元格的，这就需要使用跨行属性rowspan。基本语法：<td rowspan=”value”>语法解释：value代表单元格跨的行数。示例11.8跨列属性<colspan>在复杂的表格结构中，有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨列属性colspan。基本语法：<td colspan=”value”>语法解释：value代表单元格跨的列数。示例11.9表格嵌套（重点）示例第十二节 建立超链接超链接是网页页面中最重要的元素之一，一个网站是由多个页面组成的，页面之间依据链接确定相互的导航关系

22、。12.1链接标记 链接虽然在网站设计中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。链接标记具有如下属性： 属性描述href指定链接地址name给链接命名title链接提示文字target指定链接的目标窗口示例12.2关于链接路径链接路径类型描述绝对路径ftp:/相对路径1、 要链接到同一目录下的文件时，只需要输入要链接文件的名称2、 要链接到下一级目录中的文件，只需要先输入目录名，然后加“/”，再输入文件名3、 要链接到上一级目录中的文件，则先输入“./”，再输入目录名、文件名根路径以“/”开头，代表根目录，再输入目录名、文件名示例12.3内部链接 所谓内部链接，是

23、指在同一网站内部，不同html页面之间的链接关系。基本语法：<a href=”file_url” target=”value”>链接文字</a>示例target属性描述_parent在上一级窗口中打开，经常使用于分帧的框架页_blank在新窗口中打开_self在同一个窗口中打开，默认设置_top在浏览器的整个窗口中打开，忽略任何框架12.4书签链接 建立书签链接，分为两步：一是建立书签，二是为书签建立链接。基本语法：<a name =”bookmark_name”>书签链接文字</a> <a href = “#bookmark_name”

24、>链接文字</a> <a href = “file_url#bookmark_name” >链接文字</a>示例target属性描述_parent在上一级窗口中打开，经常使用于分帧的框架页_blank在新窗口中打开_self在同一个窗口中打开，默认设置_top在浏览器的整个窗口中打开，忽略任何框架12.5外部链接 所谓外部链接，是指跳转到当前网站外部，和其他网站中的页面或者其他元素之间的链接关系。服务url格式描述wwwhttp:/链接到外部网站ftpftp:/链接到文件传输服务器e-mailmailto:启动邮件基本语法：<a href =”h

25、ttp:/”>链接文字</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定义表单结果

26、从浏览器传送到服务器的方法，一般有两种：get、postAction用来定义表单处理程序 在<form>标记中，可以包含以下四个标记：标记描述<input>表单输入标记<select>菜单和列表标记<option>菜单和列表项目标记<textarea>文本域标记13.2输入标记<input>输入标记<input>是表单中最常用的标记之一，常用的文本域、按钮等都使用这个笔记。基本语法：<form> <input name=”field_name” type=”type_name”><

27、/form>属性描述Name域的名称Type域的类型 在type属性中，可以包含以下属性值：Type属性值描述Text文字域Password密码域File文件域Checkbox复选框Radio单选框Button普通按钮Submit提交按钮Reset重置按钮Hidden隐藏域Image图像域（图像提交按钮）13.3文字域text在文字域中可以输入任何类型的文本、数字或字母，输入内容以单行显示。基本语法：<input type=”text” name=”field_name” maxlength=”value” size=”value” value=”field_value”>属

28、性描述Name文字域的名称Maxlength文字域最大输入字符数Size文字域的宽度Value文字域的默认值13.4密码域password在密码域中可以输入的文字以“*”星号显示。基本语法：<input type=”password” name=”field_name” maxlength=”value” size=”value” >13.5文件域file可以通过文件域上传文件。基本语法：<input type=”file” name=”field_name”>13.6复选框checkbox基本语法：<input type=”checkbox” name=”fie

29、ld_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_text”> 语法注释：v

30、alue表示表示显示在按钮上的文字。13.9提交按钮submit单击提交按钮后，可以实现表单内容的提交。基本语法：<input type=”submit” name=”field_name” value=”button_text”>13.10重置按钮reset单击重置按钮后，可以清除表单的内容，恢复成默认的表单内容设定。基本语法：<input type=”reset” name=”field_name” value=”button_text”>13.11图像域image图像域是指可以用于提交按钮位置上的图片，这幅图片具有按钮功能。基本语法：<input type=

31、”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”>

32、 </select>属性描述Name菜单或列表名称Multiple列表中的项目多选Size显示的选项数目Value选项值Selected默认选项13.14文本域标记<textarea >制作多行的文字域。基本语法：<textarea name=”name” rows=”value” cols=”value” value=”value”></textarea>属性描述Name文本域名称Rows文本域的行数Cols文本域的列数Value文本域的默认值第十四节 元信息标记 元信息标记<meta>的功能是定义页面中的信息，这些文件信息不会出现

33、在网页的显示之中，只会出现在原源代码中。通过<meta>标记的属性可以提供页面的关键字、作者、描述等多种信息。属性描述http-equiv生成一个http标题域Name元信息关键字Content关键字取值内容14.1设定关键字关键字是为搜索引擎提供的，关键字之间用逗号隔开。基本语法：<meta name=”keywords” content=”value”>14.2设定描述用以描述网站的主题，供搜索引擎寻找网页。基本语法：<meta name=”discription” content=”value”>14.3设定作者用以显示页面作者姓名及个人信息。基本语法

34、：<meta name=”author” content=value”>14.4设定字符集基本语法：<meta http-equiv=”content-type” content=”text/html;charset=value”> 将Charset设置为gb2312时，页面字符集为简体中文。14.5设定自动刷新基本语法：<meta http-equiv=”refresh” content=”value”> value为页面刷新间隔秒数。14.6设定自动跳转基本语法：<meta http-equiv=”refresh” content=”value;u

35、rl=url_value”> value为页面跳转间隔秒数；url_value为页面跳转后打开的文件地址。第十五节 CSS样式表概述15.1什么是CSSCSS（cascading style sheets）中文翻译为“层叠样式表”，简称样式表。 CSS可以弥补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标记中给出，用于设置该标记所定义

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论