HTML学习笔记.doc
目录1、页面主体格式和页面效果1【<Body>标记中还可以设置一些属性】12、页面链接1【外部链接】1【内部链接】1【邮件链接】23、表格2【表格的基本形式】2【有通栏的表格】3【表的大小，边框宽度，表格间距】4【表格中文本的输出】4【表格在文件中的位置定义】5【表格颜色】5【输入标题】6【标题属性】6【划分段落】64、HTML页的文字效果7【字体大小】7【字体风格】7【字体颜色】8【闪烁】8【水平线<hr>】8【滚动字符】9【清单（列表）】10【插入图像】12【设置图像布局】125、什么是 CSS14【如何在HTML中应用CSS】14【内定义CSS】16【文本间CSS】17【CSS的基本语法】18【字体属性】19【颜色和背景属性】19【定义文本间距】20【预排版标记】21【插入背景音乐】216、表单与页面控件22【表单标记<form>】22【写入标记<input>】22【<input> 的属性】22【单行的文本输入区域】23【按钮】23【复选框】24【隐藏区域】24【输入密码的区域】24【单选按钮类型】25【使用图像来代替Submit按钮】25【下拉列表框】26【可以输入多行的文本框】271、页面主体格式和页面效果 【<Body>标记中还可以设置一些属性】2、页面链接 【外部链接】<a Href=”>新浪网</a> 【内部链接】原理：在欲链接处做个记号，链接时就寻找个这记号。内部链接就是网页中的书签。格式：<a Name=”书签名称”>书签内容</a> 例如，先定义一个标签a，然后找到“标签名”这个标签，就可编写如下代码： <a name=”标签a”>书签内容</a><a Href=”#标签a”>单击此处监视浏览器调到“标签a”处</a>【邮件链接】访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件 。格式：<a Href=”mailto:it”>清华IT在线</a> 3、表格【表格的基本形式】表格，一般用于对网页的内容进行排版。一个表格由<table>标记开始，</table>结束，表的内容由<tr>,<th>和<td>定义，<th>标记所标记的单元格的文字以粗体出现，通常用于表格的标题栏 。例子：<Body><Table Border=1 align="center"><Tr><Th>编号</Th><Th>名称</Th><Th>价格(元)</Th></Tr><Tr><Td>001</Td><Td>语文教材</Td><Td>20.00</Td></Tr></table></Body>【有通栏的表格】1. 有横向通栏的表格用<td colspan=#>属性说明；2有纵向通栏的表格用<td rowspan=#>属性说明。横向通栏示例：<Td colspan="3" align="center">图书信息</Td>【表的大小，边框宽度，表格间距】 1表的大小用width=#和height=#属性说明； 2边框宽度由border=#说明 ；3表格间距即划分表格的线的粗细用cellspacing=#表示。 表格的粗细示例：<Table Border=5 width="150" height="100" cellspacing="5" align="center"> 【表格中文本的输出】 1文本与表框的距离用cellpadding=#设置 ；2表格的宽度大于其中的文本宽度时，文本在其中的输出位置用“align=#”定义； 3表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。 （#是top，middle，bottom，baseline四者之一。分别表示顶端对齐、居中对齐、底部对齐、基线对齐） 文本与表框的距离示例： <Table Border=1 Cellpadding="10" align="center">表格的高度大于其中文本的高度示例：<Tr><Td valign="top">001</Td><Td valign="middle">语文教材</Td><Td valign="bottom">20.00</Td></Tr>【表格在文件中的位置定义】 表格与文件中内容对齐时，若在现在位置上不能满足其对齐方式，可定义其位置，以满足对齐要求，属性一般由align=left、right或center指定 。例如：<Table Border=1 align="center">【表格颜色】表格的颜色用bgcolor=#指定，#是16进制的6位数，格式为rrggbb。例如：<Tr bgcolor="ff0000">、<Tr bgcolor="red">【输入标题】一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标记<hn>，其中n为标题的等级。HTML提供6个等级的标题，n越小，标题的字号就越大。【标题属性】 left 标题居左； center 标题居中； right 标题居右另外<Hn>可以有对齐属性，align#【划分段落】<p></p>标记对用来创建一个段落，在此标记对之间的文本按照段落的格式显示在浏览器上。HTML将多个空格以及回车等效为一个空格，HTML的分段完全依赖于分段标记。<p>也可以有多种属性，比较常用的属性是：align# ，#可以是：left,、center,、right <br>标记用来创建一个回车换行。4、HTML页的文字效果 【字体大小】 html有七种字号，1号最小，7号最大。默认字号为3 。设置文本的字号有两种办法：一种是设置绝对字号，<font size=字号> 另一种是设置文本的相对字号；<font size=±n> 【字体风格】【物理风格VS逻辑风格】：物理风格：<b>黑体，<i>斜体，<u>下划线，<tt>打字机体逻辑风格：<em>强调、<srrony>特别强调、<code>源代码、<samp>例子、<kbd>键盘输入、<var>变量、<dfn>定义、<cite>引用、<small>较小、<big>较大 、<sup>上标、<sup>下标。几种字体风格示例：<Html><Head><Title>设置字体风格</Title></Head><Body><p align="center"><b>黑体</b></p><p align="center"><i>斜体</i></p><p align="center"><u>下划线</u></p><p align="center"><tt>打字机风格</tt></p><p align="center"><em>强调</em></p><p align="center"><strong>加重</strong></p></Body></Html>【字体颜色】 用<font color=#>指定 #可以是6位16进数，分别指定红、绿、蓝的值 也可以是black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua之一 【闪烁】<blink> </blink>标记对可使文本闪烁，闪烁频率为秒钟一次。（在Mozilla Firefox 2.0中通过，某些浏览器不支持）【水平线<hr>】一般用于分隔同一文体的不同部分起到美观的作用。 【滚动字符】在HTML页中可以用<marquee></marquee>标记对实现文字的滚动。滚动字符的属性：l <marquee></marquee>标记对中的各种属性来改变滚动字符的效果。可选的参数有： align：是设定活动字幕的位置：居左、居中、居右、靠上（align=top）和靠下（align=bottom）。 Bgcolor：设定活动字幕的背景颜色，一般是十六进制数。 Direction：设定活动字幕的滚动方向是向左、向右、向上、向下。 Behavior：设定滚动的方式，主要由三种方式：behavior=“scroll”表示由一端滚动到另一端；behavior=“slide”:表示由一端快速滑动到另一端，且不再重复； behavior=“alternate”表示在两端之间来回滚动。 Height：设定滚动字幕的高度。 Width：设定滚动字幕的宽度。 Hspace和vspace：设定滚动字幕的左右边框和上下边框的宽度。 Scrollamount：设定活动字幕的滚动距离。 scrolldelay：设定滚动两次之间的延迟时间。 Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新 【清单（列表）】 l 清单用于列举信息，常用的清单有3种格式： 无序清单（unordered List） 有序清单（ordered list） 定义清单（definition list） l 作用类似 word 中的项目编号和符号。无序清单<ul> ： 无序清单用<ul>开始，每一个清单条目用<li>引导，最后是</ul> ；输出时每一清单条目缩进，并且以黑点标示 。有序清单<ol> ：有序清单与无序清单相比，只是在输出时清单条目用数字标示，以<ol>开始</ol>结束。 <Body><ol><li>有序清单</ol></Body>有序清单条目标记：有序清单条目标记的缺省值是阿拉伯数字，可以用type属性修改。方法为：<Li type=#>“#”的取值有如下几种类型：“#”取值为“A”，显示大写字母。“#”取值为“a”，显示小写字母。“#”取值为“I ”，显示大写罗马数字。“#”取值为“i”，显示小写罗马数字。“#”取值为“l ”，缺省值，显示阿拉伯数字。 【插入图像】HTML采用的图像格式有gif、jpg、png 3种，在网页中插入图像时，必须使用HTML的<img>标记。格式为：<img src="图形文件地址"> 【设置图像布局】<Body><img src="chongzi.gif" width=200 height=200></Body【“border=# ” 属性用来设定图片边框厚度】 <Body><img src="chongzi.gif" border="5"></Body> 【align=# 属性：】此属性用来调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、 左右等，可选值：top, middle, bottom, left, right，内定为bottom。 <img src="sushi.jpg" align="left" width="100" height="150" hspace="20">【alt=""属性：】 此属性是用以描述该图形的文字，若用户使用文字浏览器，由于不支持图片，这些文字会代替图片而被显示。若在支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示 ：<Body><img src="chongzi.gif" alt="这是一张小虫子的照片"></Body> 【热点】<area>标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。其基本语法结构如下： <area class=type idValuehrefurlalttextshapearea-shapecoodsvalue> 5、什么是 CSS CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术 ，例如：H1 font: 16pt;text-align:center; color: red /*设定字体大小为16pt,居中显示,红色前景色*/P font-weight: bold; color: green /*设定字体粗细为bold,绿色前景*/ l 样式的好处就是，可以一次设置，多次使用，类似模板的作用【如何在HTML中应用CSS】我们可以利用下列3种方式将CSS指定的格式加入到HTML中： 1外部连结 CSS ：在HTML文件里加一个超级链接，连接到外部的CSS文档。 2内定义CSS，在HTML文件内的<HEAD>.</HEAD>标签之间，加一段CSS的描述内容。 3文本间CSS:在 HTML 文件的文本内容中,随时有需要，随时加一小段 CSS 的描述指定风格。【外部连结 CSS】在HTML文件里加一个超级链接，连接到外部的CSS文档。方便管理整个网站的网页风格，让网页的文字内容与版面设计分开 <HTML> <HEAD> <TITLE>外部连结 CSS </TITLE> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </HEAD> </HTML> 注意：style.css 文件的位置 【使用外部的CSS】<BODY><h1 class=”H1”>卜算子.咏梅</h1><p class=”P”> 驿外断桥边，寂寞开无主。 已是黄昏独自愁，更著风和雨。 无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。 </p></BODY> 【内定义CSS】 在HTML文件内的<HEAD>.</HEAD>标签之间，加一段CSS的描述内容。 这个方法适用于指定某个网页，除了表现外部的 CSS 文档定义好的网页风格外，同时还要表现本身HTML文档内指定的CSS 。注意：如果内在添加的CSS描述与外部连接的CSS描述相冲突的话，网页的表现将以内在添加的CSS描述为主,也就是外部的描述就不再起作用了。<HEAD> <TITLE>内定义CSS </TITLE> <STYLE TYPE="text/css">l1 <!-H1 font: 16pt;text-align:center; color: red P font-weight: bold; color: green -> </STYLE> </HEAD> 值得注意的是,为了防止不支持CSS的浏览器误将标签间的CSS风格描述当成普通字串而表现于网页上,您最好将CSS的叙述文字插入在<!-和->之间。【文本间CSS】在 HTML 文件的文本内容中,随时有需要，随时加一小段 CSS 的描述指定风格； 这个方法适用于指定网页内的某一小段文字的呈现风格。<HTML> <HEAD> <TITLE>文本间CSS </TITLE> </HEAD> <BODY> <P STYLE="color: red"> 驿外断桥边，寂寞开无主。 已是黄昏独自愁，更著风和雨。 </P> <P STYLE=" font-weight: bold; color: green ">无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。</P></BODY> </HTML> 【CSS的基本语法】CSS的定义是由三个部分构成：选择符（selector）属性（properties）属性的取值（value）body color: black 设置页面颜色。示例：Ptext-align: center; 段落排列居中color: black; 段落中文字为黑色 font-family: arial字体是arial 【字体属性】l 这是最基本的属性，您经常都会用到。它主要包括以下这些属性【颜色和背景属性】CSS下的颜色和背景属性：<Body><p align="center" style="color:rgb(204,82,28);font-style:oblique;font-weight:bold;font-size:24pt ">红色前景色</p></Body>【定义文本间距】l CSS下文本属性分段标记<P>换行标记<br>注意：<br>标记只有开始标记，没有结束标记 【预排版标记】【插入背景音乐】l <bgsound src="042.mp3" autostart=true loop=infinite> 是否在下载完之后自动播放。6、表单与页面控件l 表单标记<form>l 写入标记<input>l 下拉列表框l 可以输入多行的文本框【表单标记<form>】表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能 。表单是由窗体和控件组成的。格式：<form action"url" method=get/post name="myform" target="_blank">【写入标记<input>】在html语言中,标记<input>具有重要的地位，它能够将浏览器中的控件加载到html文档中。<input type=“”>标志用来定义一个用户输入区，用户可在其中输入信息。<input type="">标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定 。【<input> 的属性】1单行的文本输入区域：<input type="text"> 2按钮 ：<input type="button"> 3复选框：<input type="CHECKBOX" checked> 4隐藏区域：<input type="HIDDEN"> 5密码输入区：<input type="PASSWORD"> 6单选按钮类型：<input type="RADIO"> 7使用图像来代替Submit按钮 ：<input type="IMAGE" src="URL"> 【单行的文本输入区域】属性及说明：(1)name定义控件名称 (2)value指定控件初始值, (3)size指定控件宽度 (4)maxlength表示该文本输入框允许输入的最大字符数 (5)onchang 当文本改变时要执行的函数 (6)onselect 当控件被选中时要执行的函数 (7)onfocus 当文本接受焦点时要执行的函数 单行的文本输入区域实例：<form><input type="text" name="username" value="请输入用户名"></form> 【按钮】1.普通按钮：<input type="button"> 2. 提交到服务器的按钮：<input type="SUBMIT"> 当这个按钮被点击时，就会连接到表单form属性action指定的url地址 3. 重置按钮 ：<input type="RESET"> 可将表单内容全部清除【复选框】checkbox用于多选,有以下属性：【隐藏区域】用户不能在其中输入，用来预设某些要传送的信息。例如：<input type="Hidden" name="ss" value="688"> 【输入密码的区域】当用户输入密码时，区域内将会显示“*”号。属性 ：§ name 定义控件名称。§ value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容。§ size 指定控件宽度,表示该文本输入框所能显示的最大字符数。§ maxlegnth 表示该文本输入框允许用户输入的最大字符数。<form><input type="text" name="username" value="请输入用户名"><br><input type="password" name="password" value="请输入密码"><br><input type="SUBMIT" value="确认"><input type="button" value="取消"><input type="RESET" value="重置"></form>【单选按钮类型】radio用于单选，有以下属性：当为单选项时，所有按钮name属性必需相同。如：都设置为abc。【使用图像来代替Submit按钮】图像的源文件名由src属性指定，用户点击后，表单中的信息和点击位置的X、Y坐标一起传送给服务器 。属性：name 指定图像按钮名称。src 指定图像的url地址<form><input type="text" name="username" value="请输入用户名"><br><input type="password" name="password" value="请输入密码"><br><input type="IMAGE" src="login.gif"><input type="IMAGE" src="wangjimima.gif"></form>【下拉列表框】<select></select>标志对用来创建一个菜单下拉列表框。此标志对用于<form></form>标志对之间 。<form action="" method="post"><center><p>请选择最喜欢的女歌星:<br><select name="gx2" multiple size="4"><option value="zhmy">张曼玉<option value="wf" selected>王菲<option value="tzh">田震<option value="ny">那英</select></center></form>【可以输入多行的文本框】<textarea></textarea>用来创建一个可以输入多行的文本框 ，此标志对用于<form></form>标志对之间。属性：<body><form action="" method="post"><center><p>您的意见对我很重要:<br><textarea name="yj" clos="20" rows="5">请将意见输入此区域</textarea></center></form></body>38 区入意"" 0 "= 重对的 " " 性间之标 /><对此框本行可建用> < 框文行输 那> 田> 王> " 曼曼 " "" = 歌欢喜请 " " 之标 于框列单个来志标 < 框列 " = " " " " "密请 " " "名输= " " 地 定 称钮图指性 器送起 的置息中表点用性 由文钮 来 设如相性 所项性性，单 型类 "置 = "" " "确 " = "密输" " = "户入" " 数字大户允入该表 数字最显入文表宽件 容的框在打浏值该始定 称名定 号*“内，码输域域> " " 息的要设用，在域区藏性属以于 框清全单可> = <钮置址 的 性 单接连击被个 >> ：器交> <钮钮> "户输= " " 例域输数函执点本 数的要选控当 数函要改当 数字的输入文表 度件定 ,始件定 称件义 明说及域入文>" " <钮 替图> " <钮> = ：输> " 域> 框>" " 钮> = ：输的性属 决属 种体具输类了共志" 息息输可区入用来标“ 中档 载控器览能位重具 <,语> 记" = " = = 式的组控由 能交页，信客而息写者给页 > 本的入表 <控面放播之下。播后完> "." 乐音背记记记标没标有记 < 记 <属属距间 景景" : ; , ( : " " " 性属背下性背属这括主。都经属本性性体 : 色为文段 居排 - 例色颜置 : 成成部义法语基> > 故故只作。芳任春" : " >。和著愁。主寂桥> : > > >> > > > >目 < 。香有作落 芳一春意> : = <和更自黄 开边外驿" = " < / 文 格 0 _ 接外 00 0 _ 链、 0 " 0 _ 一以还> 【0 0 _ 0 _ 效和格主 0 0_ 现字 文一网指 法个格定 述" 一 随需有0容内的 0 间0>和 !在文内的 最,网而字当描 间将 览 不为是 > >0 > ; - " > > 了用再述外就主述的在将表，的述 的部述 添内 定指 身表时外风的定 部了页某指适。内的 一间> <. 的件】 > 。香作泥。芳一春。和更自独。主寂，>” 咏.” = 部置的 > > >> = > < 连> > > 开分设内文网格的网整档档 外，级一加文 连格定描 一随要随,本的 本。内的 一之标 .> 内文 ，义。档 外到链级加 连： 加的指将式下以 应 作板类，多次可就/景绿 为粗定/ ; : *色红显, 为字* ; : 如，术的制种它称简式“翻中 就 是> = ：如法面的设到链自击用定到标用样热称区定设图以该，像用记 点> "照虫张" " 显字文图标当览的图示示图替文这支不览浏使若的该描用】性" " " 0 = 。 为 , , , 值可等部间、的图现控可，的边图用：性# > "" " 】厚边定用 # 00= 0= = 局局图>"地" ：记> 使，像页， 、 像用像图。字阿，值 “字马小显 值字数写显 为母写示 值取母母显”值型类几取# 为法修 可数拉是的条记标 清有 。 始><示字单出输比清与 单 标以，缩清 <最引 目单每开 用序 单号和目中 ） （） 单） 单式式单清，举】表新更到下滚示= 当次滚用。时的次动： 。离滚幕活 。宽边和右幕动设 。幕定 。高的动： 。来两表 = 重且一动快由:” 端另动示 “ ：三主方动： 。向向左向的字定： 。数十一颜的字设 。 和 上右、左：位活定：有参选效符滚性种中标 / 性的动滚文记 > 用中页符字。用观起不文隔分> 持不览某中. 次次频烁文使> 烁一 ， ， ， ， 值值、指分进 是指> 色颜 < <重 > = < < = < 格字打> = /线 " /斜 " /黑< <置> 例格标> 、上< 较 、 、 <量 盘 <例 <代 、特 <强格机字 线划<><>格】辑风格风> 字本文>> ，字绝法办有本 为字。 小 种 】大果效页 行车个来用 、, , ：可 是属的比属以记段赖完段 一效及格个上览示式段本间记此段建创标/落落 属齐> 居标 ；居标 左题 性属题大越字题 ，级 级的为其，记标的了 结节章副有章题题" " <"0 式，的 # 色颜" = 定 性求齐以置义可对满不位若齐内件】定的中在 / /00 教文" = / > 例度高中于"" = = ：的表）齐、对、对对示别之 ， ， 。中文# 以时高中其的；定” “用的其，度文于宽格 = 离距本】出文" "= 例示。表 用的的即格 说= 度；明属 大】距，宽小 /息>" " 例示明性# 表通纵明性属 <表栏横格表 0. /教文 / 元格 名 编 " 子 题格表通出以文的所标 定 和 ,由的束结 <开> 版行内的对般式基表>>线 ”. = 软件子认将时邮电单接接 <”标器视此击”# <容>标= ：代如就签这签到然标义先>/<>称书 签书页就号记寻就，个链接链>/浪> : 接链接接性些一可记 果效和主 】文多以 00_ 】框【" _ 0_ 按 来使" 0 _ 0 _ 钮选 _ 0 0 _ 区入【" 00 0 】藏" 0 _ 复 0 【 _ _ 】区输的 0 " 0 的 【 _ 记写 " 】 <单 0 " 00 页表 0 _ 0 _ 音插 0 " 0 标排 0 0 0 000 本文【0 0 " 0 _ 】属和 00 _ 0 _ 体 0 0 语 0 _ 00_ 文 0 _ 0 定 0 " 0 】 中 何 _" 0 么 0_ 0 像置 " " 】像 0 _ 列（ 0 " 0 符动 _ 0 > 平 0 _ 0 " _ 0 _ 字 0 " 0 格字 0 _ 0 _ 小字 _ 0 效字 " 】划 0 " 0 】题 000 _ 00 题输 0 " 0 _ 色颜" 义位件格 0 _ 出输格表 00 " 0 格宽，小 0_" _ 格的【0 0 " 0 _ 式本表 0 " 00 0 _ 0 】链 0 _
黑公网安备:91230400333293403D
