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

下载本文档

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

文档简介

1、.HTML简明讲义第一节HTML 基础1.1 什么是 HTML是一种超文本标记语言（HyperTextMarkupLanguage ）超文本：包含有链接关系的文本，且包含多媒体对象的文件。1.2 HTML标记的格式<ELEMENT A TTRIBUTE = 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#00

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

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

5、bsp3.3 输入常用特殊符号特殊符号符号码“&quot&&amp<&lt>&gt示例：3.4 注释语句基本语法： <comment></comment>基本语法： <!->示例：3.5 标题字标记标题文字就是以某几种固定的字号去显示文字基本语法：定义六级标题，从一到六级，每级标题的字体大小依次递减'.标记描述<h1></h1>一级标题<h2></h2>二级标题<h3></h3>三级标题<h4></h4>

6、四级标题<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>下标

7、<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>段落

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

9、h设置水平线宽度<hr width=value>'.<hr width=value%>size设置水平线高度<hr size=value>noshade水平线去除阴影<hr noshade>color设置水平线颜色<hr color=value>在水平方向上， 设置居中、 居<hr align=left>align左和居右<hr align=center><hralign=right>示例：第六节列表标记在 html 页面中，列表可以起到提纲挈领的作用。列表分为两种类型：列表类型描述有序列表

10、按照数字或字母等顺序排列列表项目无序列表按照项目符号来标记无序的列表项目6.1 有序列表设置基本语法：<oltype= ”value” start=”value><li> 项目 1<li> 项目 2<li> 项目 3</ol>标记描述ol有序列表li列表项目属性描述type1数字 1、2、 3a小写字母a、 b、 c'.A大写字母A、B、Ci小写罗马数字I大写罗马数字start设置有序列表项目的起始值示例：6.2 无序列表设置基本语法：<ultype= ”value”><li> 项目 1<li&g

11、t; 项目 2<li> 项目 3</ul>标记描述ul无序列表li列表项目属性描述disctypecirclesquare示例：6.3 无序列表和有序列表的嵌套（难点）示例：'.6.4 定义列表标记（选学）定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号，类似于字典词条一样。基本语法：<dl ><dt> 名词一 <dd> 解释一<dt> 名词二 <dd> 解释二<dt> 名词三 <dd> 解释三</dl>标记描述dl

12、定义列表的声明dt名词标题dd解释名词示例：6.5 定义列表的嵌套（难点）示例：第七节插入图片在 html 页面中可以使用<img> 标记插入图片，网页中常用的图片格式为JPEG 和 GIF 。<img> 标记需要配合其它属性来完成工作属性描述src图片所在路径alt鼠标移动到图片上时显示的提示文字width 、 height图片宽度和高度border设置图片边框宽度'.vspacehspacealign示例：.设置图片与文字的上下距离设置图片与文字的左右距离Top文字的中间线位于图片上方Middle文字的中间线位于图片中间Bottom文字的中间线位于图片底部L

13、eft文字位于图片左侧Right文字位于图片右侧第八节多媒体页面之滚动文字在 HTML 页面中通过 <marquee> </marquee> 标记可以实现如字幕一般的滚动文字效果，在一个排版整齐的页面中，添加适当的滚动文字可以使页面更有动感。8.1 滚动方向属性Direction基本语法： <marquee direction= ”value”>滚动文字 </marquee>direction 属性值描述up滚动文字向上down滚动文字向下left滚动文字向左right滚动文字向右示例：8.2 滚动方式属性Behavior基本语法： <ma

14、rquee behavior= ”value”>滚动文字 </marquee>behavior 属性值描述scroll循环往复slide下只进行一次滚动'.alternate交替进行滚动示例：8.3 滚动速度属性ScrollAmount基本语法： <marquee scrollamount= ”value”>滚动文字 </marquee>示例：8.4 滚动延迟属性ScrollDelay基本语法： <marquee scrolldelay= ”value”>滚动文字 </marquee>示例：8.5 滚动循环属性Loop基

15、本语法： <marquee loop= ”value”>滚动文字 </marquee>示例：8.6 滚动范围属性Width 、Height基本语法： <marquee width= ”value”height= ”value”>滚动文字 </marquee>示例：'.8.7 滚动背景属性BgColor基本语法： <marquee bgcolor= ”color_value ”>滚动文字 </marquee>示例：第九节嵌入多媒体内容在页面中可以放置mp3、电影、 swf 动画等多种多媒体内容。基本语法： <e

16、mbed 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 ”>示例：'.第

17、十一节使用表格表格是用于排列内容的最佳手段，在 html 页面中， 绝大多数页面都是使用表格进行排版。11.1 表格相关标记标记描述<table></table>表格标记<tr></tr>行标记<td></td>单元格标记<caption></caption>表格标题标记<th></th>表格表头标记示例：制作一个三行两列的表格11.2 表格标记属性设置<table>属性描述border设置表格边框线宽度width 、 height设置表格的宽度和高度border

18、color设置表格边框颜色borderlight设置表格亮边框颜色（左上边框颜色）bordercolordark设置表格暗边框颜色（右下边框颜色）bgcolor设置表格背景颜色background设置表格背景图片align设置表格对齐方式cellspacing设置表格单元格和单元格之间的距离cellpadding设置单元格内容和边框之间的距离示例'.11.3 表格标题标记 <caption>在 html 中通过在 <table> 标记中使用 <caption> </caption> 标记为表格添加标题， 而且可以控制标题文字的排列属性。基

19、本语法：<table><caption ></caption></table>属性描述align设置标题文字的水平对齐方式（left 、 center、right ） lvalign设置标题文字的垂直对齐方式（top、 bottom）示例11.4 表格表头标记 <th>表头指的是表格的第一行，在 html 中通过在 <table> 标记中使用 <th> </th> 标记为表格设置表头，表头中的文字可以实现居中并且加粗显示。基本语法：<table><tr><th>&

20、lt;/th></tr><tr><td></td></tr></table>示例'.11.5 行标记属性设置<tr>属性描述bordercolor设置行的边框颜色borderlight设置行的亮边框颜色（左上边框颜色）bordercolordark设置行的暗边框颜色（右下边框颜色）bgcolor设置行的背景颜色background设置行的背景图片align设置行内容水平对齐方式valign设置行内容垂直对齐方式示例11.6 单元格属性设置<td> 、<th>属性描述alig

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

22、格跨的行数。'.示例11.8 跨列属性 <colspan>在复杂的表格结构中，有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨列属性 colspan。基本语法： <td colspan= ”value”>语法解释： value 代表单元格跨的列数。示例11.9 表格嵌套（重点）示例第十二节建立超链接超链接是网页页面中最重要的元素之一， 一个网站是由多个页面组成的， 页面之间依据链接确定相互的导航关系。12.1 链接标记链接虽然在网站设计中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。链接标记具有如下属性：属性描述href指定链接地址

23、name给链接命名title链接提示文字target指定链接的目标窗口'.示例12.2 关于链接路径链接路径类型描述绝对路径1、 要链接到同一目录下的文件时，只需要输入要链接文件的名称2、 要链接到下一级目录中的文件，只需要先输相对路径入目录名，然后加“/”，再输入文件名3、 要链接到上一级目录中的文件，则先输入“ ./”，再输入目录名、文件名根路径以“ /”开头，代表根目录，再输入目录名、文件名示例12.3 内部链接所谓内部链接，是指在同一网站内部，不同html 页面之间的链接关系。基本语法： <a href= ”file_url ” tar

24、get=”value”>链接文字 </a>示例target 属性描述_parent在上一级窗口中打开，经常使用于分帧的框架页_blank在新窗口中打开_self在同一个窗口中打开，默认设置_top在浏览器的整个窗口中打开，忽略任何框架'.12.4 书签链接建立书签链接，分为两步：一是建立书签，二是为书签建立链接。基本语法： <aname =”bookmark_name ”>书签链接文字 </a><ahref = “#bookmark_name ”>链接文字 </a><ahref = “file_url#bookma

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

26、 ”>链接文字 </a><ahref = ”mailto: ”>链接文字 </a>第十三节建立页面表单Html 表单是 html 页面与浏览器实现交互的主要手段，利用表单可以收集客户端提交的有关信息。表单是网站实现交互功能的重要组成部分。'.13.1 表单标记 <form>基本语法： <form name= ”form_name”method= ”method”action= ”url ”>.</form>属性描述Name表单的名称Method定义表单结果从浏览器传送到服务器的方法，一般有两种： get、po

27、stAction用来定义表单处理程序在<form> 标记中，可以包含以下四个标记：标记描述<input>表单输入标记<select>菜单和列表标记<option>菜单和列表项目标记<textarea>文本域标记13.2 输入标记 <input>输入标记 <input> 是表单中最常用的标记之一，常用的文本域、按钮等都使用这个笔记。基本语法： <form><input name= ”field_name ”type= ”type_name”></form>属性描述Name域的名

28、称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 ”>属性描述Name文字

29、域的名称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 ”na

30、me=”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_

31、text ”>语法注释： value 表示表示显示在按钮上的文字。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图像域是指可以用于提交按钮位

32、置上的图片，这幅图片具有按钮功能。基本语法：<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”s

33、elected><option value= ”value”></select>属性描述Name菜单或列表名称Multiple列表中的项目多选Size显示的选项数目Value选项值Selected默认选项13.14 文本域标记 <textarea >制作多行的文字域。基本语法：<textarea name=”name”rows=”value”cols=”value”value=”value”></textarea>'.属性描述Name文本域名称Rows文本域的行数Cols文本域的列数Value文本域的默认值第十四节元信息

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

35、”content=”value”>14.3 设定作者用以显示页面作者姓名及个人信息。基本语法：'.<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 为页面刷新间隔

36、秒数。14.6 设定自动跳转基本语法：<meta http-equiv= ”refresh”content= ”value;url=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

提交评论